vinvoor: minor visual improvements

ZeusWPI · Jul 21, 2024 · a8d51b4 · a8d51b4
1 parent 51fbb7f
commit a8d51b4
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 47 deletions.
diff --git a/vinvoor/src/cards/CardsAdd.tsx b/vinvoor/src/cards/CardsAdd.tsx
@@ -73,7 +73,7 @@ export const CardsAdd = () => {
                     await postApi<CardPostResponse>(REGISTER_ENDPOINT)
                         .then(() => (started = true))
                         .catch((error) => {
-                            if (isResponseNot200Error(error))
+                            if (isResponseNot200Error(error)) {
                                 error.response
                                     .json()
                                     .then((response: CardPostResponse) => {
@@ -86,7 +86,7 @@ export const CardsAdd = () => {
                                                 variant: "error",
                                             });
                                     });
-                            else throw new Error(error);
+                            } else throw new Error(error);
                         });
                 }
 
@@ -95,29 +95,36 @@ export const CardsAdd = () => {
 
                 if (started) {
                     setRegistering(true);
-                    const id = randomInt().toString();
-                    enqueueSnackbar(requestSuccess, {
-                        variant: "info",
-                        persist: true,
-                        key: id,
-                    });
+                    let id: string | undefined;
+
+                    if (!(response.registering && response.isCurrentUser)) {
+                        id = randomInt().toString();
+                        enqueueSnackbar(requestSuccess, {
+                            variant: "info",
+                            persist: true,
+                            key: id,
+                        });
+                    }
 
                     checkCardsChange()
                         .then((scanned) => {
-                            closeSnackbar(id);
                             setRegistering(false);
-                            if (scanned) {
-                                enqueueSnackbar(registerSucces, {
-                                    variant: "success",
-                                });
-                                getApi<readonly Card[]>(
-                                    "cards",
-                                    convertCardJSON
-                                ).then((cards) => setCards(cards));
-                            } else
-                                enqueueSnackbar(registerFail, {
-                                    variant: "error",
-                                });
+                            if (id) {
+                                closeSnackbar(id);
+
+                                if (scanned) {
+                                    enqueueSnackbar(registerSucces, {
+                                        variant: "success",
+                                    });
+                                    getApi<readonly Card[]>(
+                                        "cards",
+                                        convertCardJSON
+                                    ).then((cards) => setCards(cards));
+                                } else
+                                    enqueueSnackbar(registerFail, {
+                                        variant: "error",
+                                    });
+                            }
                         })
                         .finally(() => setProgressProps(defaultProgressProps));
                 }

diff --git a/vinvoor/src/overview/Overview.tsx b/vinvoor/src/overview/Overview.tsx
@@ -50,12 +50,7 @@ export const Overview = () => {
         <LoadingSkeleton loading={loading}>
             <ScanContext.Provider value={{ scans }}>
                 {scans.length > 0 ? (
-                    <Grid
-                        container
-                        spacing={2}
-                        alignItems="stretch"
-                        justifyContent="space-between"
-                    >
+                    <Grid container spacing={2} justifyContent="space-between">
                         <Grid item xs={8} md={4} lg={3}>
                             <CheckIn />
                         </Grid>
@@ -88,8 +83,8 @@ export const Overview = () => {
                                     </Stack>
                                 </BrowserView>
                                 <Heatmap
-                                    startDate={new Date("2024-01-01")}
-                                    endDate={new Date("2024-12-31")}
+                                    startDate={new Date("2024-05-01")}
+                                    endDate={new Date("2024-09-30")}
                                     variant={
                                         checked
                                             ? HeatmapVariant.DAYS
@@ -131,7 +126,3 @@ export const Overview = () => {
         </LoadingSkeleton>
     );
 };
-
-// Current height of the heatmap is calculated using ref's and calculus
-// TODO: Change it as it is very very very very very very ugly ^^
-// Add a grid item underneath and see what happens
diff --git a/vinvoor/src/overview/heatmap/Heatmap.tsx b/vinvoor/src/overview/heatmap/Heatmap.tsx
@@ -271,7 +271,9 @@ export const Heatmap: FC<HeatmapProps> = ({
                 <g transform={getTransformForMonthLabels()}>
                     {renderMonthLabels()}
                 </g>
-                <g transform={getTransformForAllWeeks(variant)}>
+                <g
+                    transform={getTransformForAllWeeks(variant)}
+                >
                     {renderColumns()}
                 </g>
             </svg>

diff --git a/vinvoor/src/overview/heatmap/heatmap.css b/vinvoor/src/overview/heatmap/heatmap.css
@@ -2,11 +2,6 @@
     stroke-opacity: 0;
 }
 
-.rect {
-    animation: createBox 1s;
-    stroke-width: 1px;
-}
-
 @keyframes createBox {
     from {
         width: 0;
@@ -16,3 +11,8 @@
         transform: scale(1);
     }
 }
+
+.rect {
+    /* animation: createBox 1s; */
+    stroke-width: 1px;
+}
diff --git a/vinvoor/src/overview/heatmap/utils.ts b/vinvoor/src/overview/heatmap/utils.ts
@@ -88,8 +88,16 @@ export const getColumnCount = (
     variant: HeatmapVariant
 ) => {
     if (variant === HeatmapVariant.DAYS) {
+        const startOfWeek = new Date(startDate);
+        startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay());
+
+        const endOfWeek = new Date(endDate);
+        if (endOfWeek.getDay() === 0)
+            endOfWeek.setDate(endOfWeek.getDate() - endOfWeek.getDay());
+        else endOfWeek.setDate(endOfWeek.getDate() - endOfWeek.getDay() + 6);
+
         return Math.ceil(
-            (endDate.getTime() - startDate.getTime()) /
+            (endOfWeek.getTime() - startOfWeek.getTime()) /
                 (DAYS_IN_WEEK * MILLISECONDS_IN_ONE_DAY)
         );
     } else {

diff --git a/vinvoor/src/providers/CustomSnackbarProvider.tsx b/vinvoor/src/providers/CustomSnackbarProvider.tsx
@@ -24,7 +24,7 @@ export const CustomSnackbarProvider: FC<SnackbarProviderProps> = ({
         <SnackbarProvider
             anchorOrigin={{
                 horizontal: "center",
-                vertical: "top",
+                vertical: "bottom",
             }}
             Components={{
                 success: StyledMaterialDesignContent,

diff --git a/vinvoor/src/settings/SettingsOverview.tsx b/vinvoor/src/settings/SettingsOverview.tsx
@@ -6,6 +6,7 @@ import {
     FormControlLabel,
     Grid,
     Paper,
+    Stack,
     Tooltip,
     Typography,
 } from "@mui/material";
@@ -139,17 +140,17 @@ export const SettingsOverview = () => {
                 </Grid>
                 <Grid item xs={6}>
                     <Paper elevation={4} sx={{ p: "10px", height: "100%" }}>
-                        <Box
+                        <Stack
                             display="flex"
                             alignItems="center"
                             justifyContent="center"
                             height="100%"
-                            width="100%"
                         >
                             <Typography variant="body2">
                                 More settings coming soon!
                             </Typography>
-                        </Box>
+                            <Typography variant="body2">...yay?</Typography>
+                        </Stack>
                     </Paper>
                 </Grid>
                 <Grid item xs={12} sx={{ mt: "1rem" }}>

diff --git a/vinvoor/src/theme.ts b/vinvoor/src/theme.ts
@@ -2,9 +2,6 @@ import { createTheme, ThemeOptions } from "@mui/material";
 
 const baseTheme: ThemeOptions = {
     palette: {
-        primary: {
-            main: "#ff7f00",
-        },
         secondary: {
             main: "#002379",
         },
@@ -48,6 +45,10 @@ export const lightTheme = createTheme({
     palette: {
         ...baseTheme.palette,
         mode: "light",
+        primary: {
+            main: "#ff7f00",
+            contrastText: "#121212",
+        },
     },
 });
 
@@ -56,6 +57,10 @@ export const darkTheme = createTheme({
     palette: {
         ...baseTheme.palette,
         mode: "dark",
+        primary: {
+            main: "#ff7f00",
+            contrastText: "#ffffff",
+        },
         background: {
             default: "#121212",
         },