vinvoor: make various css improvements

vinvoor/src/App.tsx

@@ -4,7 +4,7 @@ import { Navigate, Outlet, useOutlet } from "react-router-dom";
 import { LoadingSkeleton } from "./components/LoadingSkeleton";
 import { NavBar } from "./navbar/NavBar";
 import { Overview } from "./overview/Overview";
-import { UserContext } from "./user/UserProvider";
+import { UserContext } from "./providers/UserProvider";
 import { WelcomePage } from "./WelcomePage";
 
 export const App = () => {

vinvoor/src/WelcomePage.tsx

@@ -29,26 +29,21 @@ export const WelcomePage = () => {
         >
             <TypographyG variant="h3">Welcome to Vinvoor!</TypographyG>
             <TypographyG variant="h4">Log in to start scanning</TypographyG>
-            <Login variant="contained">
-                <Typography>Log in with Zauth</Typography>
-                <ShakerOutline sx={{ ml: 1 }} />
-            </Login>
-            <Button
-                variant="contained"
-                color="github"
-                onClick={handleClick}
-                sx={{ mt: 3 }}
-            >
-                <GitHub sx={{ mr: 1 }} />
-                <Typography>Github Repository</Typography>
-            </Button>
+            <Box mt={2}>
+                <Login variant="contained" fullWidth>
+                    <Typography>Log in with Zauth</Typography>
+                    <ShakerOutline sx={{ ml: 1 }} />
+                </Login>
+                <Button
+                    variant="outlined"
+                    onClick={handleClick}
+                    fullWidth
+                    sx={{ mt: 1 }}
+                >
+                    <GitHub sx={{ mr: 1 }} />
+                    <Typography>Github Repository</Typography>
+                </Button>
+            </Box>
         </Box>
     );
 };
-
-// <UnstyledLink to="/login">
-//     <Button variant="contained">
-//         <Typography>Log in with Zauth</Typography>
-//         <ShakerOutline sx={{ ml: 1 }} />
-//     </Button>
-// </UnstyledLink>

vinvoor/src/cards/CardsDelete.tsx

@@ -1,23 +1,27 @@
 import DeleteIcon from "@mui/icons-material/Delete";
 import { IconButton, Link, Tooltip, Typography } from "@mui/material";
 import { useConfirm } from "material-ui-confirm";
+import { useSnackbar } from "notistack";
 import { FC } from "react";
 
 interface CardDeleteProps {
     selected: readonly string[];
 }
 
+const deletePressed = "Not implemented yet :'(";
+
 export const CardsDelete: FC<CardDeleteProps> = ({ selected }) => {
     const confirm = useConfirm();
+    const { enqueueSnackbar } = useSnackbar();
     const numSelected = selected.length;
 
     const title = `Delete card${numSelected > 1 ? "s" : ""}`;
     const content = (
-        <Typography>
-            ` Are you sure you want to delete ${numSelected} card$
+        <Typography component="span">
+            Are you sure you want to delete {numSelected} card
             {numSelected > 1 ? "s" : ""}? Unfortunately, this feature isn't
             available yet. Let's convince Hannes to add this feature by signing
-            this <Link href="https://chng.it/nQ6GSXVRMJ">petition!</Link>`
+            this <Link href="https://chng.it/nQ6GSXVRMJ">petition!</Link>
         </Typography>
     );
 
@@ -26,7 +30,7 @@ export const CardsDelete: FC<CardDeleteProps> = ({ selected }) => {
             title: title,
             description: content,
             confirmationText: "Delete",
-        }).then(() => console.log("Card deleted!"));
+        }).then(() => enqueueSnackbar(deletePressed, { variant: "error" }));
     };
 
     return (

vinvoor/src/cards/CardsTable.tsx

@@ -20,8 +20,8 @@ const getComparator = <Key extends keyof Card>(
     order: TableOrder,
     orderBy: Key
 ): ((
-    a: { [key in Key]: number | string | Date },
-    b: { [key in Key]: number | string | Date }
+    a: Record<Key, number | string | Date>,
+    b: Record<Key, number | string | Date>
 ) => number) => {
     return order === "desc"
         ? (a, b) => descendingComparator(a, b, orderBy)

vinvoor/src/cards/CardsTableBody.tsx

@@ -77,7 +77,7 @@ export const CardsTableBody: FC<CardsTableBodyProps> = ({
 
     const editButton = (id: number, name: string) => (
         <IconButton onClick={() => handleEditClick(id, name)}>
-            <EditOutlined />
+            <EditOutlined fontSize="small" />
         </IconButton>
     );
 

vinvoor/src/cards/CardsTableHead.tsx

@@ -57,7 +57,9 @@ export const CardsTableHead: FC<CardTableHeadProps> = ({
                             direction={orderBy === headCell.id ? order : "asc"}
                             onClick={createSortHandler(headCell.id)}
                         >
-                            <Typography>{headCell.label}</Typography>
+                            <Typography variant="h6">
+                                {headCell.label}
+                            </Typography>
                         </TableSortLabel>
                     </TableCell>
                 ))}

vinvoor/src/cards/CardsTableToolbar.tsx

@@ -37,7 +37,11 @@ export const CardsTableToolbar: FC<CardTableToolbarProps> = ({ selected }) => {
                 </>
             ) : (
                 <>
-                    <Typography sx={{ flex: "1" }} variant="h6">
+                    <Typography
+                        sx={{ flex: "1" }}
+                        variant="h5"
+                        fontWeight="bold"
+                    >
                         Cards
                     </Typography>
                     <CardsAdd />

vinvoor/src/components/DarkModeToggle.tsx

@@ -1,14 +1,13 @@
 import { DarkModeOutlined, LightModeOutlined } from "@mui/icons-material";
 import { IconButton, Tooltip } from "@mui/material";
 import { useContext } from "react";
-import { ThemeContext } from "../theme/ThemeProvider";
+import { ThemeContext } from "../providers/ThemeProvider";
 
 export const DarkModeToggle = () => {
-    const { themeMode, toggleTheme } = useContext(ThemeContext);
+    const { themeMode, setTheme } = useContext(ThemeContext);
 
-    const handleThemeChange = () => {
-        toggleTheme();
-    };
+    const handleThemeChange = () =>
+        setTheme(themeMode === "light" ? "dark" : "light");
 
     return (
         <Tooltip
@@ -25,3 +24,4 @@ export const DarkModeToggle = () => {
         </Tooltip>
     );
 };
+``

vinvoor/src/leaderboard/Leaderboard.tsx

@@ -20,7 +20,7 @@ export const Leaderboard = () => {
             <Paper elevation={4}>
                 <LeaderboardTableToolbar />
                 <Divider
-                    sx={{ bgcolor: "primary.main", borderBottomWidth: 3 }}
+                    sx={{ borderColor: "primary.main", borderBottomWidth: 3 }}
                 />
                 <TableContainer>
                     <Table>

vinvoor/src/leaderboard/LeaderboardTableBody.tsx

@@ -5,16 +5,11 @@ import {
     TableRow,
     Typography,
 } from "@mui/material";
-import { alpha } from "@mui/material/styles";
-import {
-    ArrowDownBoldHexagonOutline,
-    ArrowUpBoldHexagonOutline,
-    Minus,
-} from "mdi-material-ui";
+import { alpha, Theme, useTheme } from "@mui/material/styles";
 import { FC, useContext } from "react";
+import { UserContext } from "../providers/UserProvider";
 import { TableHeadCell } from "../types/general";
 import { leaderboardHeadCells, LeaderboardItem } from "../types/leaderboard";
-import { UserContext } from "../user/UserProvider";
 import FirstPlaceIcon from "/first_place.svg";
 import SecondPlaceIcon from "/second_place.svg";
 import ThirdPlaceIcon from "/third_place.svg";
@@ -23,42 +18,61 @@ interface LeaderboardTableBodyProps {
     leaderboardItems: readonly LeaderboardItem[];
 }
 
+const leaderboardColors = [
+    (theme: Theme) => theme.leaderboard.first,
+    (theme: Theme) => theme.leaderboard.second,
+    (theme: Theme) => theme.leaderboard.third,
+];
+
+const leaderboardText = [
+    { fontSize: "30px", fontWeight: "bold" },
+    { fontSize: "25px", fontWeight: "bold" },
+    { fontSize: "18px", fontWeight: "bold" },
+];
+
+const getLeaderboardColor = (index: number, theme: Theme) =>
+    leaderboardColors[index]
+        ? { backgroundColor: leaderboardColors[index](theme) }
+        : {};
+
+const getLeaderboardText = (index: number) => leaderboardText[index] || {};
+
 const getPositionChange = (positionChange: number) => {
-    let icon: JSX.Element | null = null;
+    let color = "text.primary";
+    let prefix = "";
 
     if (positionChange > 0) {
-        icon = <ArrowUpBoldHexagonOutline color="success" />;
+        color = "success.light";
+        prefix = "+";
     } else if (positionChange < 0) {
-        icon = <ArrowDownBoldHexagonOutline color="error" />;
-    } else {
-        icon = <Minus />;
+        color = "error.light";
     }
 
     return (
-        <>
-            {icon}
-            <Typography>{positionChange}</Typography>
-        </>
+        <Typography color={color} fontWeight="bold">
+            {prefix}
+            {positionChange !== 0 && positionChange}
+        </Typography>
     );
 };
 
 const getPosition = (position: number) => {
     switch (position) {
         case 1:
             return (
-                <Icon>
+                <Icon sx={{ fontSize: "40px", overflow: "visible" }}>
                     <img src={FirstPlaceIcon} />
                 </Icon>
             );
         case 2:
             return (
-                <Icon>
+                <Icon sx={{ fontSize: "35px", overflow: "visible" }}>
                     <img src={SecondPlaceIcon} />
                 </Icon>
             );
         case 3:
             return (
-                <Icon>
+                <Icon sx={{ fontSize: "30px", overflow: "visible" }}>
                     <img src={ThirdPlaceIcon} />
                 </Icon>
             );
@@ -77,13 +91,22 @@ const getCell = (
         case "position":
             return getPosition(row[headCell.id]);
         default:
-            return <Typography>{row[headCell.id]}</Typography>;
+            return (
+                <Typography
+                    sx={{
+                        ...getLeaderboardText(row.position - 1),
+                    }}
+                >
+                    {row[headCell.id]}
+                </Typography>
+            );
     }
 };
 
 export const LeaderboardTableBody: FC<LeaderboardTableBodyProps> = ({
     leaderboardItems: rows,
 }) => {
+    const theme = useTheme();
     const {
         userState: { user },
     } = useContext(UserContext);
@@ -107,6 +130,7 @@ export const LeaderboardTableBody: FC<LeaderboardTableBodyProps> = ({
                                         theme.palette.action.activatedOpacity
                                     ),
                             }),
+                            ...getLeaderboardColor(index, theme),
                         }}
                     >
                         {leaderboardHeadCells.map((headCell) => (

vinvoor/src/leaderboard/LeaderboardTableToolbar.tsx

@@ -2,7 +2,7 @@ import { MoveDown } from "@mui/icons-material";
 import { Button, Toolbar, Typography } from "@mui/material";
 import { FC, useContext } from "react";
 import { HashLink } from "react-router-hash-link";
-import { UserContext } from "../user/UserProvider";
+import { UserContext } from "../providers/UserProvider";
 
 interface LeaderboardTableToolbarProps {}
 

vinvoor/src/main.tsx

@@ -4,7 +4,6 @@ import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
 import { CssBaseline } from "@mui/material";
 import { ConfirmProvider } from "material-ui-confirm";
-import { SnackbarProvider } from "notistack";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
@@ -13,12 +12,13 @@ import { App } from "./App.tsx";
 import { Cards } from "./cards/Cards.tsx";
 import { ErrorPage } from "./errors/ErrorPage.tsx";
 import { Leaderboard } from "./leaderboard/Leaderboard.tsx";
+import { CustomSnackbarProvider } from "./providers/CustomSnackbarProvider.tsx";
+import { ThemeProvider } from "./providers/ThemeProvider.tsx";
+import { UserProvider } from "./providers/UserProvider.tsx";
 import { Scans } from "./scans/Scans.tsx";
 import { SettingsOverview } from "./settings/SettingsOverview.tsx";
-import { ThemeProvider } from "./theme/ThemeProvider";
 import { Login } from "./user/Login.tsx";
 import { Logout } from "./user/Logout.tsx";
-import { UserProvider } from "./user/UserProvider.tsx";
 
 const router = createBrowserRouter([
     {
@@ -60,14 +60,9 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
             <CssBaseline enableColorScheme>
                 <UserProvider>
                     <ConfirmProvider>
-                        <SnackbarProvider
-                            anchorOrigin={{
-                                horizontal: "center",
-                                vertical: "top",
-                            }}
-                        >
+                        <CustomSnackbarProvider>
                             <RouterProvider router={router} />
-                        </SnackbarProvider>
+                        </CustomSnackbarProvider>
                     </ConfirmProvider>
                 </UserProvider>
             </CssBaseline>

vinvoor/src/navbar/NavBar.tsx

@@ -7,7 +7,7 @@ import {
 } from "mdi-material-ui";
 import { useContext } from "react";
 import { DarkModeToggle } from "../components/DarkModeToggle";
-import { UserContext } from "../user/UserProvider";
+import { UserContext } from "../providers/UserProvider";
 import { NavBarLogo } from "./NavBarLogo";
 import { NavBarPages } from "./NavBarPages";
 import { NavBarSandwich } from "./NavBarSandwich";
@@ -39,13 +39,7 @@ export const NavBar = () => {
     };
 
     return (
-        <AppBar
-            position="static"
-            sx={{
-                background:
-                    "rgb(255,164,0) linear-gradient(45deg, rgba(255,164,0,1) 0%, rgba(255,127,0,1) 100%)",
-            }}
-        >
+        <AppBar position="static">
             <Container maxWidth="xl">
                 <Toolbar disableGutters>
                     {/* Display either the ZeSS logo or a sandwich menu */}