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 ( -
+
{tokenIsValid ? ( <> -
- -
+ ) : ( 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 ( - - - - - } - title={ - - {t("Login.Hello", { username: credentials.userName })} - - } - subheader={ - - - {getTokenValidFrom()} - - - } - /> +
+ + + + + } + title={ + + {t("Login.Hello", { username: credentials.userName })} + + } + subheader={ + + + {getTokenValidFrom()} + + + } + /> - - - + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - + + + + +
); }; 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 ( - - - +
+ + + +
); }; 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 ( +
+ + } + aria-controls="panel1a-content" + id="panel1a-header" + > + Accordion 1 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse + malesuada lacus ex, sit amet blandit leo lobortis eget. + + + + + } + aria-controls="panel2a-content" + id="panel2a-header" + > + Accordion 2 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse + malesuada lacus ex, sit amet blandit leo lobortis eget. + + + + + } + aria-controls="panel3a-content" + id="panel3a-header" + > + + Disabled Accordion + + + +
+ ); +}; + +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 ( <>
NetworkContainer
+