styles changes

src/components/layout/Main.js

@@ -11,23 +11,6 @@ const useStyles = makeStyles(() => ({
     minHeight: "100vh",
     display: "flex",
     flexDirection: "column"
-  },
-  content: {
-    minHeight: "80vh",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "calc(10px + 2vmin)",
-    color: "white"
-  },
-  appLoginOnly: {
-    backgroundColor: "#282c34",
-    minHeight: "100vh",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center"
   }
 }));
 
@@ -37,13 +20,11 @@ const Main = () => {
   const tokenIsValid = validateToken();
 
   return (
-    <div className={tokenIsValid ? classes.app : classes.appLoginOnly}>
+    <div className={classes.app}>
       {tokenIsValid ? (
         <>
           <ApplicationStepper />
-          <div className={classes.content}>
           <Switcher />
-          </div>
         </>
       ) : (
         <LoginContainer />

src/features/login/components/LoggedInComponent.js

@@ -17,21 +17,9 @@ import { AccountBox, RotateLeft, ExitToApp } from "@material-ui/icons";
 import LoginComponent from "./LoginComponent";
 import { useTranslation } from "react-i18next";
 import { useToast } from "../../../hooks";
+import styles from "../styles";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(styles);
-  card: {
-    minWidth: 350
-  },
-  onRight: {
-    marginLeft: "auto"
-  },
-  avatar: {
-    backgroundColor: theme.palette.primary.main
-  },
-  collapseContent: {
-    padding: 0
-  }
-}));
 
 const LoggedInComponent = ({
   credentials,
@@ -69,7 +57,8 @@ const LoggedInComponent = ({
   };
 
   return (
-    <Card className={classes.card}>
+    <div className={classes.loggedInContent}>
+      <Card className={classes.loggedInCard}>
         <CardHeader
           avatar={
             <Avatar aria-label="user" className={classes.avatar}>
@@ -122,6 +111,7 @@ const LoggedInComponent = ({
           </CardContent>
         </Collapse>
       </Card>
+    </div>
   );
 };
 

src/features/login/components/LoginCard.js

@@ -1,11 +1,17 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Card } from "@material-ui/core";
-
+import { makeStyles } from "@material-ui/core/styles";
+import styles from "../styles";
 import LoginComponent from "./LoginComponent";
 
+const useStyles = makeStyles(styles);
+
 const LoginCard = ({ credentials, onChange, onLogin }) => {
+  const classes = useStyles();
+
   return (
+    <div className={classes.appLogin}>
       <Card variant="outlined">
         <LoginComponent
           credentials={credentials}
@@ -13,6 +19,7 @@ const LoginCard = ({ credentials, onChange, onLogin }) => {
           onLogin={onLogin}
         />
       </Card>
+    </div>
   );
 };
 

src/features/login/components/LoginComponent.js

@@ -11,16 +11,9 @@ import {
 import { AccountCircleOutlined } from "@material-ui/icons";
 import PasswordField from "../../../components/common/inputs/PasswordField";
 import { useTranslation } from "react-i18next";
+import styles from "../styles";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(styles);
-  field: {
-    margin: theme.spacing(1),
-    width: "300px"
-  },
-  onRight: {
-    marginLeft: "auto"
-  }
-}));
 
 const LoginComponent = ({ credentials, onChange, onLogin }) => {
   const classes = useStyles();

src/features/login/styles.js

@@ -0,0 +1,33 @@
+const styles = theme => ({
+  loggedInCard: {
+    minWidth: 350
+  },
+  onRight: {
+    marginLeft: "auto"
+  },
+  avatar: {
+    backgroundColor: theme.palette.primary.main
+  },
+  collapseContent: {
+    padding: 0
+  },
+  loggedInContent: {
+    minHeight: "80vh",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "calc(10px + 2vmin)"
+  },
+  appLogin: {
+    minHeight: "100vh",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  field: {
+    margin: theme.spacing(1),
+    width: "300px"
+  }
+});
+
+export default styles;

src/features/network/components/MachinesList.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import Typography from "@material-ui/core/Typography";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: "100%"
+  },
+  heading: {
+    fontSize: theme.typography.pxToRem(15),
+    fontWeight: theme.typography.fontWeightRegular
+  }
+}));
+
+const MachinesList = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Accordion>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography className={classes.heading}>Accordion 1</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+            malesuada lacus ex, sit amet blandit leo lobortis eget.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel2a-content"
+          id="panel2a-header"
+        >
+          <Typography className={classes.heading}>Accordion 2</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+            malesuada lacus ex, sit amet blandit leo lobortis eget.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion disabled>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel3a-content"
+          id="panel3a-header"
+        >
+          <Typography className={classes.heading}>
+            Disabled Accordion
+          </Typography>
+        </AccordionSummary>
+      </Accordion>
+    </div>
+  );
+};
+
+export default MachinesList;

src/features/network/components/NetworkContainer.js

@@ -5,6 +5,7 @@ import {
   ApplicationDispatchContext
 } from "../../../state/ApplicationContexts";
 import { readMachines } from "../api";
+import MachinesList from "./MachinesList";
 
 const NetworkContainer = () => {
   const state = useContext(ApplicationStateContext);
@@ -22,6 +23,7 @@ const NetworkContainer = () => {
   return (
     <>
       <div>NetworkContainer</div>
+      <MachinesList />
       <TextField
         id="ertet"
         label="Test"