Refactor Unathenticated and Authenticated app styles

src/app/AuthenticatedApp.js

@@ -11,15 +11,18 @@ import useLayoutType from '../hooks/useLayoutType';
 import Toolbar from '../components/Toolbar';
 import Classroom from '../screens/Classroom';
 import Assignment from '../screens/Assignment';
+import Profile from '../screens/Profile';
 
 import { avatarMenuOptions, menuOptions } from './data';
-import Profile from '../screens/Profile';
+
+import styles from './styles';
 
 function AuthenticatedApp() {
   const navigate = useNavigate();
   const { state } = useUser();
   const { logout } = useAuthState();
   const layoutType = useLayoutType();
+  const { container, toolbar } = styles[layoutType];
 
   return (
     state &&
@@ -27,7 +30,7 @@ function AuthenticatedApp() {
       <>
         <Toolbar
           title={
-            <p style={{ fontSize: layoutType === 'desktop' ? '30px' : '20px' }}>
+            <p style={toolbar}>
               Olá, <strong>{state.user.firstName}</strong> 👋
             </p>
           }
@@ -35,10 +38,7 @@ function AuthenticatedApp() {
           avatarMenuOptions={avatarMenuOptions(navigate, logout)}
           user={state.user}
         />
-        <Container
+        <Container maxWidth="false" sx={container}>
-          maxWidth="false"
-          sx={layoutType === 'desktop' ? container : mobileContainer}
-        >
           <MainMenu
             options={menuOptions(state.pathname)}
             layoutType={layoutType}
@@ -64,20 +64,4 @@ function AuthenticatedApp() {
   );
 }
 
-const container = {
-  height: 'auto',
-  margin: 0,
-  padding: 0,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  backgroundColor: 'primary.mainBackground',
-};
-
-const mobileContainer = {
-  ...container,
-  flexDirection: 'column',
-  justifyContent: 'start',
-};
-
 export default AuthenticatedApp;

src/app/UnauthenticatedApp.js

@@ -5,7 +5,10 @@ import Login from '../screens/Login';
 import Register from '../screens/Register';
 import UnauthenticatedHome from '../screens/UnauthenticatedHome';
 
+import styles from './styles';
+
 function UnauthenticatedApp() {
+  const { container } = styles['desktop'];
   return (
     <Container disableGutters maxWidth="false" sx={container}>
       <Routes>
@@ -18,14 +21,4 @@ function UnauthenticatedApp() {
   );
 }
 
-const container = {
-  height: 'auto',
-  margin: 0,
-  padding: 0,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  backgroundColor: 'primary.mainBackground',
-};
-
 export default UnauthenticatedApp;

src/app/styles.js

@@ -0,0 +1,44 @@
+// ========== Desktop =========
+const desktopContainer = {
+  height: 'auto',
+  margin: 0,
+  padding: 0,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: 'primary.mainBackground',
+};
+
+const desktopToolbar = {
+  fontSize: '30px',
+};
+
+const desktop = {
+  container: desktopContainer,
+  toolbar: desktopToolbar,
+};
+
+// ========== Mobile =========
+const mobileContainer = {
+  ...desktopContainer,
+  flexDirection: 'column',
+  justifyContent: 'start',
+};
+
+const mobileToolbar = {
+  fontSize: '20px',
+};
+
+const mobile = {
+  container: mobileContainer,
+  toolbar: mobileToolbar,
+};
+
+// ========== Unset =========
+const unset = {
+  container: null,
+  toolbar: null,
+};
+
+const styles = { desktop, mobile, unset };
+export default styles;