import React from "react"; import ApplicationStepper from "./stepper/ApplicationStepper"; import Switcher from "./Switcher"; import { makeStyles } from "@material-ui/core/styles"; import { useAuthorizationToken } from "../../hooks"; import LoginContainer from "../../features/login/components/LoginContainer"; const useStyles = makeStyles(() => ({ app: { backgroundColor: "#282c34", 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" } })); const Main = () => { const classes = useStyles(); const { validateToken } = useAuthorizationToken(); const tokenIsValid = validateToken(); return ( <div className={tokenIsValid ? classes.app : classes.appLoginOnly}> {tokenIsValid ? ( <> <ApplicationStepper /> <div className={classes.content}> <Switcher /> </div> </> ) : ( <LoginContainer /> )} </div> ); }; export default Main;