From 32d9a1ffc366131d83f0059097dd9543379b0654 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Tue, 7 Jun 2022 15:05:34 -0300
Subject: [PATCH] Improve login responsiveness

---
 src/index.css               |  2 ++
 src/screens/Login/View.js   |  5 ++--
 src/screens/Login/styles.js | 46 ++++++++++++++++++++++---------------
 3 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/index.css b/src/index.css
index 6c59b99..c21487c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,9 +1,11 @@
 body {
   margin: 0;
+  padding: 20px 0;
   font-family: 'Fira Code', monospace;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   height: 100vh;
+  background-color: #EEEEEE;
 }
 
 code {
diff --git a/src/screens/Login/View.js b/src/screens/Login/View.js
index 1d5f084..10c4389 100644
--- a/src/screens/Login/View.js
+++ b/src/screens/Login/View.js
@@ -28,13 +28,13 @@ function View({
   error,
   layoutType,
 }) {
-  const { paper, boxLogo, boxForm } = styles[layoutType];
+  const { paper, boxLogo, boxForm, logoContainer } = styles[layoutType];
 
   return (
     <Fragment>
       <Paper sx={paper} elevation={4} variant="elevation">
         <Box sx={boxLogo}>
-          <Container>
+          <Container sx={logoContainer}>
             <img
               src={logoImage}
               width={layoutType === 'desktop' ? '100' : '70'}
@@ -54,6 +54,7 @@ function View({
               type="email"
               value={email}
               onChange={e => onChangeEmail(e.target.value)}
+              autoFocus
             />
             <TextField
               id="password"
diff --git a/src/screens/Login/styles.js b/src/screens/Login/styles.js
index 4cd9073..72d71e8 100644
--- a/src/screens/Login/styles.js
+++ b/src/screens/Login/styles.js
@@ -1,3 +1,4 @@
+// ========== Desktop  ==========
 const desktopPaper = {
   width: '950px',
   height: '500px',
@@ -7,14 +8,6 @@ const desktopPaper = {
   textAlign: 'center',
 };
 
-const mobilePaper = {
-  ...desktopPaper,
-  flexDirection: 'column',
-  height: '700px',
-  marginLeft: '10px',
-  marginRight: '10px',
-};
-
 const baseBox = {
   width: '100%',
   height: '100%',
@@ -29,12 +22,6 @@ const desktopBoxLogo = {
   backgroundColor: 'secondary.main',
 };
 
-const mobileBoxLogo = {
-  ...desktopBoxLogo,
-  height: '45%',
-  padding: '0',
-};
-
 const desktopBoxForm = {
   ...baseBox,
   '> h1, p ': {
@@ -49,22 +36,45 @@ const desktopBoxForm = {
   },
 };
 
+const logoContainerDesktop = {};
+
+const desktop = {
+  paper: desktopPaper,
+  boxLogo: desktopBoxLogo,
+  boxForm: desktopBoxForm,
+  logoContainer: logoContainerDesktop,
+};
+
+// ========== Mobile ==========
+const mobilePaper = {
+  ...desktopPaper,
+  flexDirection: 'column',
+  height: '700px',
+  marginLeft: '10px',
+  marginRight: '10px',
+};
+
+const mobileBoxLogo = {
+  ...desktopBoxLogo,
+  height: '50%',
+  padding: '0',
+};
+
 const mobileBoxForm = {
   ...desktopBoxForm,
   padding: '0 15px',
   width: 'fit-content',
 };
 
-const desktop = {
-  paper: desktopPaper,
-  boxLogo: desktopBoxLogo,
-  boxForm: desktopBoxForm,
+const logoContainerMobile = {
+  padding: '20px 16px',
 };
 
 const mobile = {
   paper: mobilePaper,
   boxLogo: mobileBoxLogo,
   boxForm: mobileBoxForm,
+  logoContainer: logoContainerMobile,
 };
 
 const styles = { desktop, mobile };