Add mobile profile layout

src/screens/Profile/View.js

@@ -17,58 +17,49 @@ import InputMask from '../../components/InputMask';
 
 import { COURSES } from '../../utils/constants';
 import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN';
+import styles from './styles';
 
-function View({ data, onChangeInput }) {
+function View({ data, onChangeInput, layoutType }) {
+  const {
+    profileSummaryBox,
+    avatar,
+    profileSummaryStack,
+    formBox,
+    formField,
+    formStack,
+    fullNameTypography,
+    button,
+  } = styles[layoutType];
   const fullName = `${data.firstName} ${data.lastName}`;
   const currentYear = dayjs().year();
 
   return (
     <Container disableGutters sx={{ display: 'flex', flexDirection: 'column' }}>
-      <Box
+      <Box sx={profileSummaryBox}>
-        sx={{
+        <Avatar alt={fullName} src={data.avatar} sx={avatar} />
-          display: 'flex',
+        <Stack sx={profileSummaryStack}>
-          alignItems: 'center',
+          <Typography sx={fullNameTypography} variant="h4">
-          width: '100%',
-          height: '400px',
-        }}
-      >
-        <Avatar
-          alt={fullName}
-          src={data.avatar}
-          sx={{ width: 200, height: 200 }}
-        />
-        <Stack sx={{ marginLeft: '30px' }}>
-          <Typography sx={{ fontWeight: 'bold' }} variant="h4">
             {fullName}
           </Typography>
-          <Typography sx={{ fontSize: '15px' }} variant="body1">
+          <Typography variant="body2">
             Estudante de {COURSES.filter(c => c.value === data.course)[0].name}
           </Typography>
-          <Typography sx={{ fontSize: '15px' }} variant="body1">
+          <Typography variant="body2">Turma de {data.year}</Typography>
-            Turma de {data.year}
+          <Typography variant="body2">
-          </Typography>
-          <Typography sx={{ fontSize: '15px' }} variant="body1">
             <strong>RA: </strong> {data.ra}
           </Typography>
         </Stack>
       </Box>
 
-      <Box sx={{ width: '100%', height: '800px' }}>
+      <Box sx={formBox}>
-        <Stack
+        <Stack {...formStack} component="form">
-          gap={10}
-          paddingTop="30px"
-          flexWrap="wrap"
-          flexDirection="row"
-          justifyContent="space-around"
-          component="form"
-        >
           <TextField
             id="firstName"
             name="firstName"
             label="Primeiro nome"
             variant="standard"
             type="text"
-            sx={{ width: '45%' }}
+            sx={formField}
             value={data.firstName}
             onChange={onChangeInput}
           />
@@ -79,7 +70,7 @@ function View({ data, onChangeInput }) {
             label="Sobrenome"
             variant="standard"
             type="text"
-            sx={{ width: '45%' }}
+            sx={formField}
             value={data.lastName}
             onChange={onChangeInput}
           />
@@ -93,7 +84,7 @@ function View({ data, onChangeInput }) {
             value={data.phone}
             onChange={onChangeInput}
             placeholder="(##) #####-####"
-            sx={{ width: '45%' }}
+            sx={formField}
             InputProps={{
               inputComponent: InputMask,
             }}
@@ -107,7 +98,7 @@ function View({ data, onChangeInput }) {
             type="email"
             value={data.email}
             onChange={onChangeInput}
-            sx={{ width: '45%' }}
+            sx={formField}
           />
 
           <TextField
@@ -118,10 +109,10 @@ function View({ data, onChangeInput }) {
             type="password"
             value={data.password}
             onChange={onChangeInput}
-            sx={{ width: '45%' }}
+            sx={formField}
           />
 
-          <FormControl sx={{ textAlign: 'start', width: '45%' }} fullWidth>
+          <FormControl sx={{ ...formField, textAlign: 'start' }} fullWidth>
             <InputLabel variant="standard" id="course">
               Curso
             </InputLabel>
@@ -141,7 +132,7 @@ function View({ data, onChangeInput }) {
               ))}
             </Select>
           </FormControl>
-          <FormControl sx={{ textAlign: 'start', width: '45%' }} fullWidth>
+          <FormControl sx={{ ...formField, textAlign: 'start' }} fullWidth>
             <InputLabel variant="standard" id="course">
               Ano da turma
             </InputLabel>
@@ -170,14 +161,14 @@ function View({ data, onChangeInput }) {
             value={data.ra}
             placeholder="#######"
             disabled
-            sx={{ width: '45%', cursor: 'no-drop' }}
+            sx={{ ...formField, cursor: 'no-drop' }}
             InputProps={{
               inputComponent: InputMask,
             }}
           />
 
           <Button
-            sx={{ width: '30%' }}
+            sx={button}
             onClick={() => console.log('clicked')}
             variant="contained"
           >

src/screens/Profile/index.js

@@ -1,10 +1,12 @@
 import { useState } from 'react';
 import { useUser } from '../../context/user';
 import { useDocumentTitle } from '../../hooks/useDocumentTitle';
+import useLayoutType from '../../hooks/useLayoutType';
 import View from './View';
 
 function Profile() {
   useDocumentTitle('Meu perfil');
+  const layoutType = useLayoutType();
   const { state } = useUser();
   const [data, setData] = useState(state && state.user);
 
@@ -15,7 +17,9 @@ function Profile() {
     setData(prev => ({ ...prev, [name]: value }));
   };
 
-  return <View data={data} onChangeInput={onChangeInput} />;
+  return (
+    <View data={data} onChangeInput={onChangeInput} layoutType={layoutType} />
+  );
 }
 
 export default Profile;

src/screens/Profile/styles.js

@@ -1,11 +1,121 @@
 // ========== Desktop  ==========
-const desktop = {};
+const desktopProfileSummaryBox = {
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  marginTop: '70px',
+};
+
+const desktopAvatar = {
+  width: 200,
+  height: 200,
+};
+
+const desktopProfileSummaryStack = {
+  marginLeft: '30px',
+};
+
+const desktopFormBox = {
+  width: '100%',
+  marginBottom: '70px',
+};
+
+const desktopFormField = {
+  width: '45%',
+};
+
+const desktopFormStack = {
+  gap: 6,
+  paddingTop: '50px',
+  flexWrap: 'wrap',
+  flexDirection: 'row',
+  justifyContent: 'space-around',
+};
+
+const desktopFullNameTypography = {
+  fontWeight: 'bold',
+};
+
+const desktopButton = {
+  width: '30%',
+};
+
+const desktop = {
+  profileSummaryBox: desktopProfileSummaryBox,
+  avatar: desktopAvatar,
+  profileSummaryStack: desktopProfileSummaryStack,
+  formBox: desktopFormBox,
+  formField: desktopFormField,
+  formStack: desktopFormStack,
+  fullNameTypography: desktopFullNameTypography,
+  button: desktopButton,
+};
 
 // ========== Mobile ==========
-const mobile = {};
+const mobileProfileSummaryBox = {
+  ...desktopProfileSummaryBox,
+  flexDirection: 'column',
+  textAlign: 'center',
+  height: 'fit-content',
+};
+
+const mobileAvatar = {
+  ...desktopAvatar,
+  width: 170,
+  height: 170,
+};
+
+const mobileProfileSummaryStack = {};
+
+const mobileFormBox = {
+  ...desktopFormBox,
+  height: 'fit-content',
+  marginBottom: '100px',
+  paddingLeft: '15px',
+  paddingRight: '15px',
+};
+
+const mobileFormField = {
+  ...desktopFormField,
+  width: '100%',
+};
+
+const mobileFormStack = {
+  ...desktopFormStack,
+  gap: 3,
+};
+
+const mobileFullNameTypography = {
+  ...desktopFullNameTypography,
+  marginTop: '20px',
+};
+
+const mobileButton = {
+  width: '100%',
+};
+
+const mobile = {
+  profileSummaryBox: mobileProfileSummaryBox,
+  avatar: mobileAvatar,
+  profileSummaryStack: mobileProfileSummaryStack,
+  formBox: mobileFormBox,
+  formField: mobileFormField,
+  formStack: mobileFormStack,
+  fullNameTypography: mobileFullNameTypography,
+  button: mobileButton,
+};
 
 // ========== Unset ==========
-const unset = {};
+const unset = {
+  profileSummaryBox: null,
+  avatar: null,
+  profileSummaryStack: null,
+  formBox: null,
+  formField: null,
+  formStack: null,
+  fullNameTypography: null,
+  button: null,
+};
 
 const styles = { desktop, mobile, unset };
 export default styles;