Add h1 to week page

Igalia · Jan 26, 2024 · 2e1802c · 2e1802c
1 parent 63f43a4
commit 2e1802c
Showing 1 changed file with 62 additions and 57 deletions.
diff --git a/frontend/src/app/tasks/week/page.tsx b/frontend/src/app/tasks/week/page.tsx
@@ -16,69 +16,74 @@ export default async function WeekView() {
   )
 
   return (
-    <Stack sx={{ flexDirection: { xs: 'column', sm: 'row' } }} alignItems="stretch" height="100%">
-      {dateRange.map((date) => {
-        const formattedDate = format(date, 'eeee, do')
-        const dateTasks = groupedTasks[format(date, 'yyyy-MM-dd')]
+    <>
+      <Typography sx={{ fontSize: { xs: 'lg', sm: 'xl4' } }} level="h1" textAlign="center">
+        {format(firstDayofWeek, 'MMMM dd, yyyy')} - {format(lastDayOfWeek, 'MMMM dd, yyyy')}
+      </Typography>
+      <Stack sx={{ flexDirection: { xs: 'column', sm: 'row' } }} alignItems="stretch" height="100%">
+        {dateRange.map((date) => {
+          const formattedDate = format(date, 'eeee, do')
+          const dateTasks = groupedTasks[format(date, 'yyyy-MM-dd')]
 
-        return (
-          <Box
-            sx={{
-              backgroundColor: isSameDay(date, today) ? ' #E6EFF8' : '#fff',
-              flex: '1',
-              borderTop: '1px solid #C4C6D0',
-              borderBottom: { xs: 'none', sm: '1px solid #C4C6D0' },
-              borderRight: '1px solid #C4C6D0',
-              borderLeft: { xs: '1px solid #C4C6D0', sm: 'none' },
-              display: 'flex',
-              flexDirection: { xs: 'row', sm: 'column' },
-              minHeight: { xs: 'auto', sm: 'calc(100vh - 79px)' },
-              minWidth: { xs: 'calc(100vw - 16px)', sm: 'auto' },
-              alignItems: { xs: 'stretch', sm: 'initial' },
-              overflow: 'auto',
-              gap: '8px',
-              ':last-of-type': {
-                borderBottom: '1px solid #C4C6D0',
-                borderRight: { xs: '1px solid #C4C6D0', sm: 'none' }
-              }
-            }}
-            component="ul"
-            key={formattedDate}
-          >
+          return (
             <Box
               sx={{
-                padding: '22px 16px',
-                width: { xs: '160px', sm: 'auto' },
-                minWidth: { xs: '160px', sm: 'auto' },
+                backgroundColor: isSameDay(date, today) ? ' #E6EFF8' : '#fff',
+                flex: '1',
+                borderTop: '1px solid #C4C6D0',
                 borderBottom: { xs: 'none', sm: '1px solid #C4C6D0' },
-                borderRight: { xs: '1px solid #C4C6D0', sm: 'none' }
+                borderRight: '1px solid #C4C6D0',
+                borderLeft: { xs: '1px solid #C4C6D0', sm: 'none' },
+                display: 'flex',
+                flexDirection: { xs: 'row', sm: 'column' },
+                minHeight: { xs: 'auto', sm: 'calc(100vh - 79px)' },
+                minWidth: { xs: 'calc(100vw - 16px)', sm: 'auto' },
+                alignItems: { xs: 'stretch', sm: 'initial' },
+                overflow: 'auto',
+                gap: '8px',
+                ':last-of-type': {
+                  borderBottom: '1px solid #C4C6D0',
+                  borderRight: { xs: '1px solid #C4C6D0', sm: 'none' }
+                }
               }}
+              component="ul"
+              key={formattedDate}
             >
-              <Typography fontWeight="600">{formattedDate}</Typography>
-              <Typography fontWeight="600" textColor="#004c92">
-                {dateTasks?.time ? convertMinutesToTime(dateTasks.time) : '0h 0m'}
-              </Typography>
-            </Box>
+              <Box
+                sx={{
+                  padding: '22px 16px',
+                  width: { xs: '160px', sm: 'auto' },
+                  minWidth: { xs: '160px', sm: 'auto' },
+                  borderBottom: { xs: 'none', sm: '1px solid #C4C6D0' },
+                  borderRight: { xs: '1px solid #C4C6D0', sm: 'none' }
+                }}
+              >
+                <Typography fontWeight="600">{formattedDate}</Typography>
+                <Typography fontWeight="600" textColor="#004c92">
+                  {dateTasks?.time ? convertMinutesToTime(dateTasks.time) : '0h 0m'}
+                </Typography>
+              </Box>
 
-            {dateTasks?.tasks.map((task) => {
-              return (
-                <Box
-                  sx={{
-                    padding: { xs: '8px 0', sm: '0px 8px' },
-                    display: 'flex',
-                    minWidth: { xs: 'fit-content', sm: 'auto' },
-                    alignItems: 'center'
-                  }}
-                  component="li"
-                  key={task.id}
-                >
-                  <SimpleTaskBox task={task} />
-                </Box>
-              )
-            })}
-          </Box>
-        )
-      })}
-    </Stack>
+              {dateTasks?.tasks.map((task) => {
+                return (
+                  <Box
+                    sx={{
+                      padding: { xs: '8px 0', sm: '0px 8px' },
+                      display: 'flex',
+                      minWidth: { xs: 'fit-content', sm: 'auto' },
+                      alignItems: 'center'
+                    }}
+                    component="li"
+                    key={task.id}
+                  >
+                    <SimpleTaskBox task={task} />
+                  </Box>
+                )
+              })}
+            </Box>
+          )
+        })}
+      </Stack>
+    </>
   )
 }