From 54a75c104d176132ee0003033c162be08586a266 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Fri, 16 Apr 2021 01:53:20 +0300
Subject: [PATCH] styles changes

---
 src/components/layout/Main.js                 |  23 +---
 .../login/components/LoggedInComponent.js     | 120 ++++++++----------
 src/features/login/components/LoginCard.js    |  23 ++--
 .../login/components/LoginComponent.js        |  11 +-
 src/features/login/styles.js                  |  33 +++++
 .../network/components/MachinesList.js        |  69 ++++++++++
 .../network/components/NetworkContainer.js    |   2 +
 7 files changed, 178 insertions(+), 103 deletions(-)
 create mode 100644 src/features/login/styles.js
 create mode 100644 src/features/network/components/MachinesList.js

diff --git a/src/components/layout/Main.js b/src/components/layout/Main.js
index 841ffa3..d0716b6 100644
--- a/src/components/layout/Main.js
+++ b/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>
+          <Switcher />
         </>
       ) : (
         <LoginContainer />
diff --git a/src/features/login/components/LoggedInComponent.js b/src/features/login/components/LoggedInComponent.js
index 29369dc..f2fe2f0 100644
--- a/src/features/login/components/LoggedInComponent.js
+++ b/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 => ({
-  card: {
-    minWidth: 350
-  },
-  onRight: {
-    marginLeft: "auto"
-  },
-  avatar: {
-    backgroundColor: theme.palette.primary.main
-  },
-  collapseContent: {
-    padding: 0
-  }
-}));
+const useStyles = makeStyles(styles);
 
 const LoggedInComponent = ({
   credentials,
@@ -69,59 +57,61 @@ const LoggedInComponent = ({
   };
 
   return (
-    <Card className={classes.card}>
-      <CardHeader
-        avatar={
-          <Avatar aria-label="user" className={classes.avatar}>
-            <AccountBox />
-          </Avatar>
-        }
-        title={
-          <strong>
-            {t("Login.Hello", { username: credentials.userName })}
-          </strong>
-        }
-        subheader={
-          <Tooltip title={t("Login.AuthenticationDate")}>
-            <Typography variant="caption" display="block">
-              {getTokenValidFrom()}
-            </Typography>
-          </Tooltip>
-        }
-      />
+    <div className={classes.loggedInContent}>
+      <Card className={classes.loggedInCard}>
+        <CardHeader
+          avatar={
+            <Avatar aria-label="user" className={classes.avatar}>
+              <AccountBox />
+            </Avatar>
+          }
+          title={
+            <strong>
+              {t("Login.Hello", { username: credentials.userName })}
+            </strong>
+          }
+          subheader={
+            <Tooltip title={t("Login.AuthenticationDate")}>
+              <Typography variant="caption" display="block">
+                {getTokenValidFrom()}
+              </Typography>
+            </Tooltip>
+          }
+        />
 
-      <CardActions disableSpacing>
-        <Tooltip title={t("Login.ChangeUser")}>
-          <IconButton
-            size="small"
-            className={classes.onRight}
-            onClick={handleExpandLogin}
-            aria-expanded={expanded}
-            aria-label="show login component"
+        <CardActions disableSpacing>
+          <Tooltip title={t("Login.ChangeUser")}>
+            <IconButton
+              size="small"
+              className={classes.onRight}
+              onClick={handleExpandLogin}
+              aria-expanded={expanded}
+              aria-label="show login component"
+            >
+              <RotateLeft />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title={t("Login.Logout")}>
+            <IconButton size="small" onClick={onLogout}>
+              <ExitToApp />
+            </IconButton>
+          </Tooltip>
+        </CardActions>
+        <Divider />
+        <Collapse in={expanded} timeout="auto" unmountOnExit>
+          <CardContent
+            className={classes.collapseContent}
+            style={{ paddingBottom: "5px" }}
           >
-            <RotateLeft />
-          </IconButton>
-        </Tooltip>
-        <Tooltip title={t("Login.Logout")}>
-          <IconButton size="small" onClick={onLogout}>
-            <ExitToApp />
-          </IconButton>
-        </Tooltip>
-      </CardActions>
-      <Divider />
-      <Collapse in={expanded} timeout="auto" unmountOnExit>
-        <CardContent
-          className={classes.collapseContent}
-          style={{ paddingBottom: "5px" }}
-        >
-          <LoginComponent
-            credentials={credentials}
-            onChange={onChange}
-            onLogin={handleLogin}
-          />
-        </CardContent>
-      </Collapse>
-    </Card>
+            <LoginComponent
+              credentials={credentials}
+              onChange={onChange}
+              onLogin={handleLogin}
+            />
+          </CardContent>
+        </Collapse>
+      </Card>
+    </div>
   );
 };
 
diff --git a/src/features/login/components/LoginCard.js b/src/features/login/components/LoginCard.js
index 50b817f..ae45726 100644
--- a/src/features/login/components/LoginCard.js
+++ b/src/features/login/components/LoginCard.js
@@ -1,18 +1,25 @@
 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 (
-    <Card variant="outlined">
-      <LoginComponent
-        credentials={credentials}
-        onChange={onChange}
-        onLogin={onLogin}
-      />
-    </Card>
+    <div className={classes.appLogin}>
+      <Card variant="outlined">
+        <LoginComponent
+          credentials={credentials}
+          onChange={onChange}
+          onLogin={onLogin}
+        />
+      </Card>
+    </div>
   );
 };
 
diff --git a/src/features/login/components/LoginComponent.js b/src/features/login/components/LoginComponent.js
index 398d3b2..42b78cb 100644
--- a/src/features/login/components/LoginComponent.js
+++ b/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 => ({
-  field: {
-    margin: theme.spacing(1),
-    width: "300px"
-  },
-  onRight: {
-    marginLeft: "auto"
-  }
-}));
+const useStyles = makeStyles(styles);
 
 const LoginComponent = ({ credentials, onChange, onLogin }) => {
   const classes = useStyles();
diff --git a/src/features/login/styles.js b/src/features/login/styles.js
new file mode 100644
index 0000000..64c0ef0
--- /dev/null
+++ b/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;
diff --git a/src/features/network/components/MachinesList.js b/src/features/network/components/MachinesList.js
new file mode 100644
index 0000000..e3bc3a0
--- /dev/null
+++ b/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;
diff --git a/src/features/network/components/NetworkContainer.js b/src/features/network/components/NetworkContainer.js
index 99d5c13..bfc99a5 100644
--- a/src/features/network/components/NetworkContainer.js
+++ b/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"