From 2f4bc2300de3b630a6b4760c3b74369651351c45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Fri, 16 Sep 2022 17:14:04 -0300
Subject: [PATCH] Refactor Unathenticated and Authenticated app styles

---
 src/app/AuthenticatedApp.js   | 28 +++++-----------------
 src/app/UnauthenticatedApp.js | 13 +++--------
 src/app/styles.js             | 44 +++++++++++++++++++++++++++++++++++
 3 files changed, 53 insertions(+), 32 deletions(-)
 create mode 100644 src/app/styles.js

diff --git a/src/app/AuthenticatedApp.js b/src/app/AuthenticatedApp.js
index 54b24b8..80d66be 100644
--- a/src/app/AuthenticatedApp.js
+++ b/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
-          maxWidth="false"
-          sx={layoutType === 'desktop' ? container : mobileContainer}
-        >
+        <Container maxWidth="false" sx={container}>
           <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;
diff --git a/src/app/UnauthenticatedApp.js b/src/app/UnauthenticatedApp.js
index 7a62e76..2166068 100644
--- a/src/app/UnauthenticatedApp.js
+++ b/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;
diff --git a/src/app/styles.js b/src/app/styles.js
new file mode 100644
index 0000000..b1ace6f
--- /dev/null
+++ b/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;