Add mobile layout to register screen and adjust login

src/screens/Login/View.js

@@ -44,7 +44,7 @@ function View({
           </Container>
         </Box>
         <Box sx={boxForm}>
-          <h1>Login</h1>
+          <h1>Entrar</h1>
           <p>Bem-vindo de volta. Faça o login digitando os dados abaixo.</p>
           <Stack spacing={4} component="form">
             <TextField

src/screens/Register/View.js

@@ -32,18 +32,12 @@ function View({
   onChangeCheckbox,
   onTryRegister,
 }) {
-  const { paper, boxLogo, boxForm, logoContainer } = styles[layoutType];
+  const { container, paper, boxLogo, boxForm, logoContainer } =
+    styles[layoutType];
   const currentYear = dayjs().year();
 
   return (
-    <Container
+    <Container sx={container} disableGutters>
-      sx={{
-        height: 'auto',
-        margin: '0 auto',
-        padding: '100px 0',
-      }}
-      disableGutters
-    >
       <Paper sx={paper} elevation={4} variant="elevation">
         <Box sx={boxForm}>
           <h1>Criar conta</h1>

src/screens/Register/styles.js

@@ -1,4 +1,10 @@
 // ========== Desktop  ==========
+const desktopContainer = {
+  height: 'auto',
+  margin: '0 auto',
+  padding: '100px 0',
+};
+
 const desktopPaper = {
   height: 'fit-content',
   display: 'flex',
@@ -38,6 +44,7 @@ const desktopBoxForm = {
 const logoContainerDesktop = {};
 
 const desktop = {
+  container: desktopContainer,
   paper: desktopPaper,
   boxLogo: desktopBoxLogo,
   boxForm: desktopBoxForm,
@@ -45,12 +52,15 @@ const desktop = {
 };
 
 // ========== Mobile ==========
+const mobileContainer = {
+  ...desktopContainer,
+  padding: '100px 10px',
+};
+
 const mobilePaper = {
   ...desktopPaper,
-  flexDirection: 'column',
+  flexDirection: 'column-reverse',
-  height: '700px',
+  height: 'fit-content',
-  marginLeft: '10px',
-  marginRight: '10px',
 };
 
 const mobileBoxLogo = {
@@ -61,8 +71,8 @@ const mobileBoxLogo = {
 
 const mobileBoxForm = {
   ...desktopBoxForm,
-  padding: '0 15px',
+  padding: '20px 15px',
-  width: 'fit-content',
+  width: '100%',
 };
 
 const logoContainerMobile = {
@@ -70,6 +80,7 @@ const logoContainerMobile = {
 };
 
 const mobile = {
+  container: mobileContainer,
   paper: mobilePaper,
   boxLogo: mobileBoxLogo,
   boxForm: mobileBoxForm,
@@ -78,6 +89,7 @@ const mobile = {
 
 // ========== Unset ==========
 const unset = {
+  container: null,
   paper: null,
   boxLogo: null,
   boxForm: null,