Continued on redesigning session

Wholteza · May 11, 2023 · 4d48902 · 4d48902
1 parent b041584
commit 4d48902
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 39 deletions.
diff --git a/src/app/App.css b/src/app/App.css
diff --git a/src/app/routes/session/index.tsx b/src/app/routes/session/index.tsx
@@ -49,6 +49,7 @@ export default () => {
     flexDirection: "row",
     justifyContent: "center",
     alignItems: "center",
+    padding: "20px",
   };
 
   return (
@@ -69,6 +70,10 @@ export default () => {
             display: "grid",
             gridTemplateColumns: "repeat(2, 400px)",
             gridTemplateRows: "repeat(2, 400px)",
+            [theme.breakpoints.down("md")]: {
+              gridTemplateColumns: "repeat(2, 300px)",
+              gridTemplateRows: "repeat(2, 300px)",
+            },
             [theme.breakpoints.down("sm")]: {
               gridTemplateColumns: "repeat(1, 100%)",
               gridTemplateRows: "repeat(4, 250px)",
@@ -77,7 +82,20 @@ export default () => {
           gap={2}
         >
           <Paper sx={paperStyle}>
-            <Typography align="center" variant="h1" display="block">
+            <Typography
+              align="center"
+              variant="h1"
+              display="block"
+              sx={{
+                fontSize: 110,
+                [theme.breakpoints.down("md")]: {
+                  fontSize: 90,
+                },
+                [theme.breakpoints.down("sm")]: {
+                  fontSize: 70,
+                },
+              }}
+            >
               {timer}
             </Typography>
           </Paper>
@@ -92,55 +110,56 @@ export default () => {
                 <Typography
                   align="center"
                   variant="h4"
-                  sx={{ color: "text.secondary" }}
+                  sx={{ color: "text.secondary", textTransform: "capitalize" }}
                 >
                   {room?.name}
                 </Typography>
               </Grid>
               <Grid item>
                 <Typography
                   align="center"
-                  variant="h6"
+                  variant="body2"
                   sx={{ color: "text.secondary" }}
                 >
-                  {timeLeft.type}
+                  {timeLeft.type === TimerType.Work
+                    ? "Turn off all distractions and focus on the task at hand. "
+                    : "You're on a break!"}
                 </Typography>
               </Grid>
-              <Grid item></Grid>
+            </Grid>
+          </Paper>
+          <Paper sx={paperStyle}>
+            <Grid
+              container
+              direction="column"
+              alignContent="center"
+              spacing={3}
+            >
               <Grid item>
-                <Grid
-                  container
-                  direction="row"
-                  justifyContent="space-evenly"
-                  spacing={1}
+                <Button
+                  variant="outlined"
+                  onClick={() => handleOnStart(25, TimerType.Work)}
                 >
-                  <Grid item>
-                    <Button
-                      variant="outlined"
-                      onClick={() => handleOnStart(25, TimerType.Work)}
-                    >
-                      Work
-                    </Button>
-                  </Grid>
-                  <Grid item>
-                    <Button
-                      color="secondary"
-                      variant="outlined"
-                      onClick={() => handleOnStart(5, TimerType.Break)}
-                    >
-                      Switch
-                    </Button>
-                  </Grid>
-                  <Grid item>
-                    <Button
-                      color="secondary"
-                      variant="outlined"
-                      onClick={() => handleOnStart(10, TimerType.Break)}
-                    >
-                      Break
-                    </Button>
-                  </Grid>
-                </Grid>
+                  25 Minute work timer
+                </Button>
+              </Grid>
+              <Grid item>
+                <Button
+                  color="secondary"
+                  variant="outlined"
+                  onClick={() => handleOnStart(5, TimerType.Break)}
+                >
+                  Short 5 minute break
+                </Button>
+              </Grid>
+              <Grid item>
+                <Button
+                  color="secondary"
+                  variant="outlined"
+                  onClick={() => handleOnStart(10, TimerType.Break)}
+                >
+                  Longer 10 minute break
+                </Button>
               </Grid>
               <Grid item>
                 <Grid
@@ -185,8 +204,23 @@ export default () => {
               </Grid>
             </Grid>
           </Paper>
-          <Paper sx={paperStyle}>arst</Paper>
-          <Paper sx={paperStyle}>arst</Paper>
+          <Paper sx={{ ...paperStyle, flexDirection: "column" }}>
+            <Typography variant="h6" sx={{ marginBottom: 1 }}>
+              Need help?
+            </Typography>
+            <Typography variant="body2" sx={{ marginBottom: 1 }}>
+              Decide on a task to dedicate a session to, then start a 25 minute
+              timer and try to eliminate all distractions.
+            </Typography>
+            <Typography variant="body2" sx={{ marginBottom: 1 }}>
+              When the 25 minutes have passed, take a short break and do
+              something else.
+            </Typography>
+            <Typography variant="body2">
+              Repeat this for some time until you feel like you need a longer
+              break.
+            </Typography>
+          </Paper>
         </Grid>
       </Container>