created login page without functionality #24

frontend/src/App.css

@@ -9,3 +9,12 @@
     margin-left: 10px;
     height: 64px;
 }
+
+.loginBackground {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin: auto;
+    min-height: 100vh;
+    background-image: url(./img/loginBackground.png);
+}

frontend/src/App.js

@@ -4,6 +4,10 @@ import {
 } from "react-router-dom";
 import Navbar from "./components/navigation";
 import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import {
+  Route, Switch
+} from "react-router-dom";
+import Login from './components/login/login';
 
 import "./App.css";
 
@@ -28,7 +32,12 @@ class App extends Component {
     return (
       <ThemeProvider theme={theme}>
         <BrowserRouter basename="/simcompanies">
-          <Navbar></Navbar>
+          <Switch>
+            <Route exact path="/login" component={Login} />
+            <Route path="/*" component={Navbar} />
+          </Switch>
+
+
         </BrowserRouter>
       </ThemeProvider>
 

frontend/src/components/content.js

@@ -7,6 +7,7 @@ import {
 import SelectResource from './selectResource';
 import ResourceChart from './resourcechart/resourcechart';
 
+
 const useStyles = makeStyles(theme => ({
     root: {
         flexGrow: 1,
@@ -24,6 +25,7 @@ export default function Content() {
             <Route exact path="/" component={Overview} />
             <Route path="/resources" component={SelectResource} />
             <Route path="/resourcechart/:id" render={() => <ResourceChart day={new Date().toUTCString()}></ResourceChart>} />
+
         </div>
 
     );

frontend/src/components/login/login.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Link } from "react-router-dom";
+import { makeStyles, withStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Logo from "../../img/logo.png";
+import TextField from '@material-ui/core/TextField';
+import Grid from '@material-ui/core/Grid';
+
+
+const useStyles = makeStyles(theme => ({
+    card: {
+        backgroundColor: "#0B1929",
+        display: "flex"
+    },
+    logo: {
+        maxWidth: "50%",
+        height: "auto"
+    },
+    input: {
+        color: "#9daac1"
+    },
+    grid: {
+        display: "flex"
+    }
+}));
+
+const CssTextField = withStyles({
+    root: {
+        '& label.Mui-focused': {
+            color: 'white',
+        },
+        '&:hover label': {
+            color: '#FFC800',
+        },
+        '& label': {
+            color: 'white',
+        },
+        '& .MuiOutlinedInput-root': {
+            '& input': {
+                color: "white"
+            },
+            '& fieldset': {
+                borderColor: 'white',
+                color: "white"
+            },
+            '&:hover fieldset': {
+                borderColor: "#FFC800",
+            },
+            '&.Mui-focused fieldset': {
+                borderColor: 'white',
+            },
+        },
+    },
+})(TextField);
+
+export default function Login() {
+    const classes = useStyles();
+    return (
+        <Box className="loginBackground" display="flex" justifyContent="center" alignItems="center" m={1} p={1} >
+            <Card className={classes.card} raised>
+                <CardContent>
+                    <Box display="flex" justifyContent="center" alignItems="center" m={1} p={1} >
+                        <img src={Logo} alt="SC Dashboard Logo" className={classes.logo} />
+                    </Box >
+                    <form>
+                        <Box display="flex" justifyContent="center" alignItems="center" m={1} p={1} >
+                            <Grid container spacing={2} >
+                                <Grid item xs={12} >
+                                    <Box display="flex" justifyContent="center"  >
+                                        <CssTextField
+                                            id="usernameInput"
+                                            label="Username"
+                                            variant="outlined"
+                                            className={classes.input}
+                                        />
+                                    </Box >
+                                </Grid>
+                                <Grid item xs={12}>
+                                    <Box display="flex" justifyContent="center"  >
+                                        <CssTextField
+                                            id="passwordInput"
+                                            type="password"
+                                            label="Password"
+                                            autoComplete="current-password"
+                                            variant="outlined"
+                                            className={classes.input}
+                                        />
+                                    </Box >
+                                </Grid>
+                                <Grid item xs={12}>
+                                    <Box display="flex" justifyContent="center"  >
+                                        <Button variant="contained" color="secondary">
+                                            Login
+                                    </Button>
+                                    </Box >
+                                </Grid>
+                            </Grid>
+                        </Box >
+                    </form>
+                </CardContent>
+            </Card>
+        </Box >
+    )
+
+}