Extract css to separated file and create mobile layout for assignment

src/screens/Assignment/View.js

@@ -3,55 +3,45 @@ import { Box, Button, Container, Stack, Typography } from '@mui/material';
 import dayjs from 'dayjs';
 import { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter';
 
+import styles from './styles';
+
 function View({ assignment, dropzone, layoutType }) {
+  const {
+    container,
+    headerStack,
+    title,
+    classroomColorStack,
+    classroomColor,
+    subHeaderStack,
+    subHeaderTypography,
+    descriptionStack,
+    dropzoneStack,
+    dropzoneBox,
+    button,
+  } = styles[layoutType];
+
   return assignment === null ? (
     <h1>Loading...</h1>
   ) : (
-    <Container
+    <Container sx={container} disableGutters>
-      sx={{
+      <Stack sx={headerStack}>
-        width: '100%',
+        <Typography sx={title} variant="h4">
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        marginTop: '30px',
-      }}
-      disableGutters
-    >
-      <Stack
-        sx={{
-          width: '70%',
-          paddingBottom: '5px',
-          borderBottom: '1px solid black',
-        }}
-      >
-        <Typography sx={{ fontWeight: 'bold', padding: '15px 0' }} variant="h4">
           {assignment.title}
         </Typography>
-        <Stack flexDirection="row" alignItems="center">
+        <Stack sx={classroomColorStack}>
           {assignment.classrooms.map(c => (
-            <div
+            <div key={c.id} style={classroomColor(c.color)}></div>
-              style={{
-                backgroundColor: c.color,
-                width: '15px',
-                height: '15px',
-                marginRight: '5px',
-              }}
-            ></div>
           ))}
           <Typography variant="body1">
             {assignment.classrooms.map(c => c.name).join(', ')}
           </Typography>
         </Stack>
-        <Stack
+        <Stack sx={subHeaderStack}>
-          sx={{ paddingBottom: '5px', paddingTop: '20px' }}
+          <Typography sx={subHeaderTypography} variant="body1" component="div">
-          flexDirection="row"
-          justifyContent="space-between"
-        >
-          <Typography variant="body1" component="div">
             <strong>Valor: </strong>
             {assignment.scores.map(s => s.value).join(', ')} pts
           </Typography>
-          <Typography variant="body1" component="div">
+          <Typography sx={subHeaderTypography} variant="body1" component="div">
             <strong>Data de entrega: </strong>
             {capitalizeFirstLetter(
               dayjs(assignment.dueDate).format('dddd, DD/MM | HH:mm[h]')
@@ -59,39 +49,17 @@ function View({ assignment, dropzone, layoutType }) {
           </Typography>
         </Stack>
       </Stack>
-      <Stack
+      <Stack sx={descriptionStack}>
-        sx={{
-          width: '70%',
-          paddingTop: '30px',
-          paddingBottom: '30px',
-          borderBottom: '1px solid black',
-        }}
-      >
         <div>{parse(assignment.description)}</div>;
       </Stack>
-      <Stack
+      <Stack sx={dropzoneStack} flexDirection="column" alignItems="flex-end">
-        sx={{
-          width: '70%',
-          paddingTop: '30px',
-          paddingBottom: '30px',
-        }}
-        flexDirection="column"
-        alignItems="flex-end"
-      >
         {/* TODO: Create a custom component for dropzone */}
         <Box
-          sx={{
+          sx={dropzoneBox}
-            width: '100%',
-            height: '150px',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            border: '2px dashed black',
-          }}
           {...dropzone.getRootProps({ className: 'dropzone' })}
         >
           <input {...dropzone.getInputProps()} />
-          <Typography variant="body1" component="div">
+          <Typography sx={{ padding: '15px' }} variant="body1" component="div">
             Clique ou arraste um arquivo até aqui
           </Typography>
         </Box>
@@ -103,7 +71,7 @@ function View({ assignment, dropzone, layoutType }) {
           ))}
         </ul>
         <Button
-          sx={{ width: '30%', marginTop: '20px' }}
+          sx={button}
           onClick={() => console.log('clicked')}
           variant="contained"
         >

src/screens/Assignment/styles.js

@@ -0,0 +1,167 @@
+// ========== Desktop ==========
+const desktopContainer = {
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  marginTop: '30px',
+};
+
+const desktopHeaderStack = {
+  width: '70%',
+  paddingBottom: '5px',
+  borderBottom: '1px solid black',
+};
+
+const desktopTitle = {
+  fontWeight: 'bold',
+  padding: '15px 0',
+};
+
+const desktopClassroomColorStack = {
+  flexDirection: 'row',
+  alignItems: 'center',
+};
+
+const desktopClassroomColor = color => ({
+  backgroundColor: color,
+  width: '15px',
+  height: '15px',
+  marginRight: '5px',
+});
+
+const desktopSubHeaderStack = {
+  paddingBottom: '5px',
+  paddingTop: '20px',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+};
+
+const desktopSubHeaderTypography = {};
+
+const desktopDescriptionStack = {
+  width: '70%',
+  paddingTop: '30px',
+  paddingBottom: '30px',
+  borderBottom: '1px solid black',
+};
+
+const desktopDropzoneStack = {
+  width: '70%',
+  paddingTop: '30px',
+  paddingBottom: '30px',
+};
+
+const desktopDropzoneBox = {
+  width: '100%',
+  height: '150px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  border: '2px dashed black',
+};
+
+const desktopButton = {
+  width: '30%',
+  marginTop: '20px',
+};
+
+const desktop = {
+  container: desktopContainer,
+  headerStack: desktopHeaderStack,
+  title: desktopTitle,
+  classroomColorStack: desktopClassroomColorStack,
+  classroomColor: color => desktopClassroomColor(color),
+  subHeaderStack: desktopSubHeaderStack,
+  subHeaderTypography: desktopSubHeaderTypography,
+  descriptionStack: desktopDescriptionStack,
+  dropzoneStack: desktopDropzoneStack,
+  dropzoneBox: desktopDropzoneBox,
+  button: desktopButton,
+};
+
+// ========== Mobile ==========
+const mobileContainer = {
+  ...desktopContainer,
+  marginBottom: '100px',
+};
+
+const mobileHeaderStack = {
+  ...desktopHeaderStack,
+  width: '90%',
+};
+
+const mobileTitle = {
+  ...desktopTitle,
+};
+
+const mobileClassroomColorStack = {
+  ...desktopClassroomColorStack,
+};
+
+const mobileClassroomColor = color => ({
+  backgroundColor: color,
+  width: '15px',
+  height: '15px',
+  marginRight: '5px',
+});
+
+const mobileSubHeaderStack = {
+  ...desktopSubHeaderStack,
+  flexDirection: 'column',
+};
+
+const mobileSubHeaderTypography = {
+  fontSize: '15px',
+};
+
+const mobileDescriptionStack = {
+  ...desktopDescriptionStack,
+  width: '90%',
+};
+
+const mobileDropzoneStack = {
+  ...desktopDropzoneStack,
+  width: '90%',
+};
+
+const mobileDropzoneBox = {
+  ...desktopDropzoneBox,
+};
+
+const mobileButton = {
+  ...desktopButton,
+  width: '100%',
+};
+
+const mobile = {
+  container: mobileContainer,
+  headerStack: mobileHeaderStack,
+  title: mobileTitle,
+  classroomColorStack: mobileClassroomColorStack,
+  classroomColor: color => mobileClassroomColor(color),
+  subHeaderStack: mobileSubHeaderStack,
+  subHeaderTypography: mobileSubHeaderTypography,
+  descriptionStack: mobileDescriptionStack,
+  dropzoneStack: mobileDropzoneStack,
+  dropzoneBox: mobileDropzoneBox,
+  button: mobileButton,
+};
+
+// ========== Unset ==========
+const unset = {
+  container: null,
+  headerStack: null,
+  title: null,
+  classroomColorStack: null,
+  classroomColor: null,
+  subHeaderStack: null,
+  subHeaderTypography: null,
+  descriptionStack: null,
+  dropzoneStack: null,
+  dropzoneBox: null,
+  button: null,
+};
+
+const styles = { desktop, mobile, unset };
+export default styles;