fonts, confirmation dialog, tooltip fix, new task

okplanbo · Aug 25, 2023 · 9662582 · 9662582
1 parent 0faf45e
commit 9662582
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="node_modules/modern-normalize/modern-normalize.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+
     <title>Vite + React + TS</title>
   </head>
   <body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,12 @@
 import { useCallback, useState } from "react";
 
-import { Paper, Tooltip, FormControlLabel, Checkbox, 
-    Typography, LinearProgress, Button, Box } from "@mui/material";
+import { Paper, Tooltip, FormControlLabel, Checkbox, Dialog, DialogActions,
+    DialogContent, DialogContentText, DialogTitle, Typography, LinearProgress,
+    Button, useMediaQuery, Box } from "@mui/material";
 
-import { basicList, storage_key, total_percent } from ":src/constants";
+import { useTheme } from '@mui/material/styles';
+
+import { basicList, storage_key, tooptip_offset, total_percent } from ":src/constants";
 
 import "./App.scss";
 
@@ -32,34 +35,57 @@ const calcProgress = (tasks: Task[]) => {
 export default function App(): JSX.Element {
     const [tasks, setTasks] = useState<Task[]>(saved_tasks ? JSON.parse(saved_tasks) : initialTasks);
     const [progress, setProgress] = useState(calcProgress(tasks));
-
+    const [open, setOpen] = useState(false);
+    const theme = useTheme();
+    const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
+
     const updateTasks = (newTasks: Task[]) => {
         localStorage.setItem(storage_key, JSON.stringify(newTasks));
         setTasks(newTasks);
         setProgress(calcProgress(newTasks));
     }
 
-    const toggleTask = (index: number) => {
+    const toggleTask = useCallback((index: number) => {
         const newTasks = [...tasks];
         newTasks[index] = {...newTasks[index], checked: !newTasks[index].checked};
         updateTasks(newTasks);
-    };
+    }, [tasks]);
 
-    const restartHandler = useCallback(() => {
+    const handleRestart = useCallback(() => {
         const newTasks = initialTasks;
         updateTasks(newTasks);
+        setOpen(false);
     }, []);
 
+    const handleDialogOpen = () => {
+        setOpen(true);
+    };
+
+    const handleDialogClose = () => {
+        setOpen(false);
+    };
+
     return (
         <>
             <Typography variant="h2" component="h1" align="center">
                 <Tooltip
                     title="is Georgian for 'List'"
-                    placement="right-start"
+                    placement="top"
+                    enterTouchDelay={0}
+                    PopperProps={{
+                        modifiers: [
+                            {
+                                name: "offset",
+                                options: {
+                                    offset: tooptip_offset,
+                                },
+                            },
+                        ],
+                    }}
                 >
-                    <div>
+                    <Box sx={{ userSelect: 'none' }}>
                         Sia*
-                    </div>
+                    </Box>
                 </Tooltip>
             </Typography>
             <Paper variant="outlined" component="main">
@@ -77,10 +103,33 @@ export default function App(): JSX.Element {
                     />
                 ))}
             </Paper>
-            <Box display="flex" justifyContent="center">
-                <Button variant="outlined" sx={{fontWeight: 600}} onClick={restartHandler}>Restart the day</Button>
+            <Box display="flex" justifyContent="center" marginTop="2rem">
+                <Button variant="outlined" onClick={handleDialogOpen}>Restart</Button>
             </Box>
             <LinearProgress variant="determinate" value={progress} className="progress" />
+            <Dialog
+                fullScreen={fullScreen}
+                open={open}
+                onClose={handleDialogClose}
+                aria-labelledby="responsive-dialog-title"
+            >
+                <DialogTitle id="responsive-dialog-title">
+                    Good morning, dear!
+                </DialogTitle>
+                <DialogContent sx={{ minWidth: '400px '}}>
+                    <DialogContentText>
+                        Are you ready to start a new day?
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button autoFocus onClick={handleDialogClose}>
+                        False alarm
+                    </Button>
+                    <Button onClick={handleRestart} variant="contained" autoFocus>
+                        Yes, I&#39;m awesome!
+                    </Button>
+                </DialogActions>
+            </Dialog>
         </>
     );
 }
diff --git a/src/constants.ts b/src/constants.ts
@@ -1,3 +1,4 @@
+/*eslint no-magic-numbers: "off"*/
 export const basicList = [
     "Open to-do list",
     "Make a bed",
@@ -24,7 +25,9 @@ export const basicList = [
     "Dinner",
     "Wash dishes",
     "Brush teeth before bed",
+    "Put phone to charge",
     "23:00 - go to sleep",
 ];
 export const storage_key = "SIA_TASKS_STATE";
-export const total_percent = 100;
+export const total_percent = 100;
+export const tooptip_offset = [45, -10];