From be453c1156c36f1a4da444b532c59b329daf594d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Wed, 14 Sep 2022 15:42:31 -0300
Subject: [PATCH] Fix height issue with unauthenticated app related screens

---
 src/app/UnauthenticatedApp.js |  4 ++--
 src/screens/Login/View.js     |  8 ++++----
 src/screens/Login/styles.js   | 13 +++++++++++++
 src/screens/Register/View.js  |  3 ++-
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/app/UnauthenticatedApp.js b/src/app/UnauthenticatedApp.js
index 9a81ad7..7a62e76 100644
--- a/src/app/UnauthenticatedApp.js
+++ b/src/app/UnauthenticatedApp.js
@@ -7,7 +7,7 @@ import UnauthenticatedHome from '../screens/UnauthenticatedHome';
 
 function UnauthenticatedApp() {
   return (
-    <Container maxWidth="false" sx={container}>
+    <Container disableGutters maxWidth="false" sx={container}>
       <Routes>
         <Route path="/" element={<UnauthenticatedHome />} />
         <Route path="/login" element={<Login />} />
@@ -19,7 +19,7 @@ function UnauthenticatedApp() {
 }
 
 const container = {
-  height: '100vh',
+  height: 'auto',
   margin: 0,
   padding: 0,
   display: 'flex',
diff --git a/src/screens/Login/View.js b/src/screens/Login/View.js
index a5cc106..a456dfa 100644
--- a/src/screens/Login/View.js
+++ b/src/screens/Login/View.js
@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import {
   Box,
   Button,
@@ -28,10 +27,11 @@ function View({
   error,
   layoutType,
 }) {
-  const { paper, boxLogo, boxForm, logoContainer } = styles[layoutType];
+  const { container, paper, boxLogo, boxForm, logoContainer } =
+    styles[layoutType];
 
   return (
-    <Fragment>
+    <Container disableGutters sx={container}>
       <Paper sx={paper} elevation={4} variant="elevation">
         <Box sx={boxLogo}>
           <Container sx={logoContainer}>
@@ -82,7 +82,7 @@ function View({
         severity="error"
         message={error && error.message}
       />
-    </Fragment>
+    </Container>
   );
 }
 
diff --git a/src/screens/Login/styles.js b/src/screens/Login/styles.js
index b5ded17..991bb95 100644
--- a/src/screens/Login/styles.js
+++ b/src/screens/Login/styles.js
@@ -1,4 +1,12 @@
 // ========== Desktop  ==========
+const desktopContainer = {
+  width: '100%',
+  height: '100vh',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+
 const desktopPaper = {
   width: '950px',
   height: '500px',
@@ -39,6 +47,7 @@ const desktopBoxForm = {
 const logoContainerDesktop = {};
 
 const desktop = {
+  container: desktopContainer,
   paper: desktopPaper,
   boxLogo: desktopBoxLogo,
   boxForm: desktopBoxForm,
@@ -46,6 +55,8 @@ const desktop = {
 };
 
 // ========== Mobile ==========
+const mobileContainer = { ...desktopContainer };
+
 const mobilePaper = {
   ...desktopPaper,
   flexDirection: 'column',
@@ -71,6 +82,7 @@ const logoContainerMobile = {
 };
 
 const mobile = {
+  container: mobileContainer,
   paper: mobilePaper,
   boxLogo: mobileBoxLogo,
   boxForm: mobileBoxForm,
@@ -79,6 +91,7 @@ const mobile = {
 
 // ========== Unset ==========
 const unset = {
+  container: null,
   paper: null,
   boxLogo: null,
   boxForm: null,
diff --git a/src/screens/Register/View.js b/src/screens/Register/View.js
index 79b524f..29fee37 100644
--- a/src/screens/Register/View.js
+++ b/src/screens/Register/View.js
@@ -38,8 +38,9 @@ function View({
   return (
     <Container
       sx={{
+        height: 'auto',
         margin: '0 auto',
-        padding: '500px 0',
+        padding: '100px 0',
       }}
       disableGutters
     >