From ba83266bf50ca4751cf75145427a89fb7f592d8f Mon Sep 17 00:00:00 2001
From: Raghunandan Balachandran <raghunandan@spotify.com>
Date: Tue, 4 Feb 2020 13:17:01 +0100
Subject: [PATCH] minor fixes / add grid to login page

---
 frontend/packages/app/src/App.tsx             | 47 +++++++++----------
 .../LoginComponent/LoginComponent.tsx         | 31 +++++++++---
 2 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/frontend/packages/app/src/App.tsx b/frontend/packages/app/src/App.tsx
index fa38461c01..7836f17c77 100644
--- a/frontend/packages/app/src/App.tsx
+++ b/frontend/packages/app/src/App.tsx
@@ -9,8 +9,8 @@ import {
   BrowserRouter as Router,
   Switch,
   Route,
-  Link as RouterLink
-} from "react-router-dom";
+  Link as RouterLink,
+} from 'react-router-dom';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -26,7 +26,7 @@ const useStyles = makeStyles(theme => ({
     overflowY: 'auto',
   },
   pageBody: {
-    paddingLeft: theme.spacing(2),
+    paddingLeftß: theme.spacing(2),
     paddingTop: theme.spacing(2),
   },
   avatarButton: {
@@ -36,20 +36,21 @@ const useStyles = makeStyles(theme => ({
 
 const App: FC<{}> = () => {
   return (
-  <Router>
-    <Switch>
-      <Route exact path="/">
-        <AppShell>
-          <Home />
-        </AppShell>
-      </Route>
-      <Route path="/login">
-      <AppShell>
-          <Login />
-        </AppShell>
-      </Route>
-    </Switch>
-    </Router>);
+    <Router>
+      <Switch>
+        <Route exact path="/">
+          <AppShell>
+            <Home />
+          </AppShell>
+        </Route>
+        <Route path="/login">
+          <AppShell>
+            <Login />
+          </AppShell>
+        </Route>
+      </Switch>
+    </Router>
+  );
 };
 
 const Home: FC<{}> = () => {
@@ -75,10 +76,10 @@ const Login: FC<{}> = () => {
         <RouterLink to="/">Go to Home</RouterLink>
       </div>
     </Fragment>
-    );
-}
+  );
+};
 
-const AppShell: FC<{}> = ({children}) => {
+const AppShell: FC<{}> = ({ children }) => {
   const classes = useStyles();
 
   return (
@@ -86,12 +87,10 @@ const AppShell: FC<{}> = ({children}) => {
       <SideBar />
       <div className={classes.mainContentArea}>
         <PageHeader />
-        <div className={classes.pageBody}>
-          {children}
-        </div>
+        <div className={classes.pageBody}>{children}</div>
       </div>
     </div>
   );
-}
+};
 
 export default App;
diff --git a/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx b/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx
index a9dc81d93c..31caa7d4db 100644
--- a/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx
+++ b/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx
@@ -1,18 +1,35 @@
 import React, { FC, Fragment } from 'react';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
+import Grid from '@material-ui/core/Grid';
 
 const LoginComponent: FC<{}> = () => {
   return (
     <Fragment>
-      <TextField variant="outlined" label="Username: " />
-      <Button
-        variant="contained"
-        color="primary"
-        onClick={() => window.location.href = "/"}
+      <Grid container spacing={8} alignItems="flex-end">
+        <Grid item md={true} sm={true} xs={true}>
+          <TextField
+            id="username"
+            label="Username"
+            type="email"
+            autoFocus
+            required
+          />
+        </Grid>
+      </Grid>
+      <Grid
+        container
+        justify="flex-start"
+        style={{ marginTop: '24px', marginBottom: '24px' }}
       >
-        Login
-      </Button>
+        <Button
+          variant="outlined"
+          color="primary"
+          style={{ textTransform: 'none' }}
+        >
+          Login
+        </Button>
+      </Grid>
     </Fragment>
   );
 };