vinvoor: added retro theme

vinvoor/src/navbar/NavBar.tsx

@@ -5,7 +5,7 @@ import {
   CreditCardMultipleOutline,
   CreditCardScanOutline,
 } from "mdi-material-ui";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { DarkModeToggle } from "../components/DarkModeToggle";
 import { UserContext } from "../providers/UserProvider";
 import { NavBarLogo } from "./NavBarLogo";
@@ -30,20 +30,27 @@ const userMenuPages: PageIcon[] = [
 
 export const NavBar = () => {
   const { user } = useContext(UserContext);
+  const [selectedPage, setSelectedPage] = useState<string>("");
 
   const screenSize = {
     mobile: { xs: "flex", md: "none" },
     desktop: { xs: "none", md: "flex" },
   };
 
+  const handleSelectedPage = (page: string) => setSelectedPage(page);
+
   return (
     <AppBar position="static">
       <Container maxWidth="xl">
         <Toolbar disableGutters>
           {/* Display either the ZeSS logo or a sandwich menu */}
 
           <Box sx={{ flexGrow: 1 }}>
-            <NavBarLogo sx={{ display: screenSize.desktop }} />
+            <NavBarLogo
+              sx={{ display: screenSize.desktop }}
+              selectedPage={selectedPage}
+              handleSelectedPage={handleSelectedPage}
+            />
 
             {user && (
               <NavBarSandwich
@@ -60,6 +67,8 @@ export const NavBar = () => {
               <NavBarPages
                 pageIcons={navBarPages}
                 sx={{ display: screenSize.desktop }}
+                selectedPage={selectedPage}
+                handleSelectedPage={handleSelectedPage}
               />
             )}
 
@@ -70,7 +79,11 @@ export const NavBar = () => {
 
           <Box sx={{ flexGrow: 0 }}>
             <DarkModeToggle />
-            <NavBarUserMenu pageIcons={userMenuPages} />
+            <NavBarUserMenu
+              pageIcons={userMenuPages}
+              selectedPage={selectedPage}
+              handleSelectedPage={handleSelectedPage}
+            />
           </Box>
         </Toolbar>
       </Container>

vinvoor/src/navbar/NavBarLogo.tsx

@@ -6,6 +6,8 @@ import { ThemeContext } from "../providers/ThemeProvider";
 
 interface NavBarLogoProps {
   sx?: SxProps<Theme>;
+  selectedPage?: string;
+  handleSelectedPage?: (page: string) => void;
 }
 
 const CLICK_AMOUNT = 10;
@@ -14,9 +16,15 @@ const CLICK_TIME_MS = 1000;
 let pressedAmount = 0;
 let startTimePress = 0;
 
-export const NavBarLogo: FC<NavBarLogoProps> = ({ sx }) => {
+export const NavBarLogo: FC<NavBarLogoProps> = ({
+  sx,
+  selectedPage,
+  handleSelectedPage,
+}) => {
   const { setTheme } = useContext(ThemeContext);
   const handleClick = () => {
+    if (handleSelectedPage) handleSelectedPage("home");
+
     if (pressedAmount < CLICK_AMOUNT) {
       if (pressedAmount === 0) startTimePress = Date.now();
 
@@ -26,7 +34,7 @@ export const NavBarLogo: FC<NavBarLogoProps> = ({ sx }) => {
         pressedAmount === CLICK_AMOUNT &&
         Date.now() - startTimePress <= CLICK_TIME_MS
       )
-        setTheme("hidden");
+        setTheme("kak");
     }
   };
 
@@ -40,6 +48,12 @@ export const NavBarLogo: FC<NavBarLogoProps> = ({ sx }) => {
             ...sx,
             textTransform: "none",
             color: "secondary.contrastText",
+            borderTop: "2px solid transparent",
+            borderBottom: "2px solid transparent",
+            ...(selectedPage === "home" && {
+              borderBottom: theme =>
+                `2px solid ${theme.palette.secondary.main}`,
+            }),
           }}
         >
           <HexagonSlice6 sx={{ mr: ".3rem" }} />

vinvoor/src/navbar/NavBarPages.tsx

@@ -6,16 +6,31 @@ import { PageIcon } from "./NavBar";
 interface NavBarPagesProps {
   pageIcons: readonly PageIcon[];
   sx?: SxProps<Theme>;
+  selectedPage: string;
+  handleSelectedPage: (page: string) => void;
 }
 
-export const NavBarPages: FC<NavBarPagesProps> = ({ pageIcons, sx }) => {
+export const NavBarPages: FC<NavBarPagesProps> = ({
+  pageIcons,
+  sx,
+  selectedPage,
+  handleSelectedPage,
+}) => {
   return (
     <Box sx={{ ...sx }}>
       {pageIcons.map(({ page, icon }) => (
         <UnstyledLink key={page} to={page.toLowerCase()}>
           <Button
+            onClick={() => handleSelectedPage(page)}
             sx={{
               color: "secondary.contrastText",
+              borderTop: "2px solid transparent",
+              borderBottom: "2px solid transparent",
+              ...(selectedPage === page && {
+                borderBottom: theme =>
+                  `2px solid ${theme.palette.secondary.main}`,
+              }),
+              mr: 1,
             }}
           >
             {icon}

vinvoor/src/navbar/NavBarUserMenu.tsx

@@ -1,21 +1,37 @@
-import { Button, Divider, Menu, MenuItem, Typography } from "@mui/material";
+import {
+  Button,
+  Divider,
+  Menu,
+  MenuItem,
+  Typography,
+  useMediaQuery,
+} from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { Cow, ExitRun, ShieldAccountOutline } from "mdi-material-ui";
 import { FC, MouseEvent, useContext, useState } from "react";
 import { UnstyledLink } from "../components/UnstyledLink";
 import { UserContext } from "../providers/UserProvider";
-import { Optional } from "../types/general";
 import { Login } from "../user/Login";
 import { Logout } from "../user/Logout";
 import { PageIcon } from "./NavBar";
 
 interface NavBarUserMenuProps {
   pageIcons: readonly PageIcon[];
+  selectedPage: string;
+  handleSelectedPage: (page: string) => void;
 }
 
-export const NavBarUserMenu: FC<NavBarUserMenuProps> = ({ pageIcons }) => {
+export const NavBarUserMenu: FC<NavBarUserMenuProps> = ({
+  pageIcons,
+  selectedPage,
+  handleSelectedPage,
+}) => {
   const { user } = useContext(UserContext);
-  const [anchorElUser, setAnchorElUser] =
-    useState<Optional<HTMLElement>>(undefined);
+  const theme = useTheme();
+  const isBrowserView = useMediaQuery(theme.breakpoints.up("sm"));
+  const [anchorElUser, setAnchorElUser] = useState<HTMLElement | undefined>(
+    undefined,
+  );
 
   const handleOpenUserMenu = (event: MouseEvent<HTMLElement>) => {
     setAnchorElUser(event.currentTarget);
@@ -34,6 +50,12 @@ export const NavBarUserMenu: FC<NavBarUserMenuProps> = ({ pageIcons }) => {
             sx={{
               textTransform: "none",
               color: "secondary.contrastText",
+              borderTop: "2px solid transparent",
+              borderBottom: "2px solid transparent",
+              ...(selectedPage === "user" && {
+                borderBottom: theme =>
+                  `2px solid ${theme.palette.secondary.main}`,
+              }),
             }}
           >
             <ShieldAccountOutline sx={{ mr: "3px" }} />
@@ -56,7 +78,12 @@ export const NavBarUserMenu: FC<NavBarUserMenuProps> = ({ pageIcons }) => {
           >
             {pageIcons.map(({ page, icon }) => (
               <UnstyledLink key={page} to={page.toLowerCase()}>
-                <MenuItem onClick={handleCloseUserMenu}>
+                <MenuItem
+                  onClick={() => {
+                    handleCloseUserMenu();
+                    if (isBrowserView) handleSelectedPage("user");
+                  }}
+                >
                   {icon}
                   <Typography>{page}</Typography>
                 </MenuItem>
@@ -66,7 +93,10 @@ export const NavBarUserMenu: FC<NavBarUserMenuProps> = ({ pageIcons }) => {
             {user.admin && (
               <UnstyledLink to="admin">
                 <MenuItem
-                  onClick={handleCloseUserMenu}
+                  onClick={() => {
+                    handleCloseUserMenu();
+                    if (isBrowserView) handleSelectedPage("user");
+                  }}
                   sx={{
                     paddingX: "0",
                     justifyContent: "center",

vinvoor/src/providers/CustomSnackbarProvider.tsx

@@ -18,6 +18,9 @@ export const CustomSnackbarProvider: FC<SnackbarProviderProps> = ({
     "&.notistack-MuiContent-error": {
       backgroundColor: theme.palette.error.dark,
     },
+    "&.notistack-MuiContent-info": {
+      backgroundColor: theme.palette.primary.main,
+    },
   }));
 
   return (
@@ -29,6 +32,7 @@ export const CustomSnackbarProvider: FC<SnackbarProviderProps> = ({
       Components={{
         success: StyledMaterialDesignContent,
         error: StyledMaterialDesignContent,
+        info: StyledMaterialDesignContent,
       }}
     >
       {children}

vinvoor/src/theme.ts

@@ -3,7 +3,8 @@ import { createTheme, ThemeOptions } from "@mui/material";
 const baseTheme: ThemeOptions = {
   palette: {
     secondary: {
-      main: "#002379",
+      main: "#ffffff",
+      contrastText: "#ffffff",
     },
   },
   leaderboard: {
@@ -67,7 +68,7 @@ export const darkTheme = createTheme({
   },
 });
 
-export const hiddenTheme = createTheme({
+export const kakTheme = createTheme({
   palette: {
     mode: "light",
     primary: {
@@ -163,6 +164,73 @@ export const hiddenTheme = createTheme({
   },
 });
 
+export const retroTheme = createTheme({
+  palette: {
+    mode: "light",
+    primary: {
+      main: "#244855",
+    },
+    secondary: {
+      main: "#E64833",
+    },
+    background: {
+      default: "#FBE9D0",
+      paper: "#F3DDC7",
+    },
+    success: {
+      main: "#008000",
+    },
+    error: {
+      main: "#ab0c26",
+      dark: "#7a0f20",
+    },
+    info: {
+      main: "#024950",
+    },
+  },
+  leaderboard: {
+    first: "#FFE55C",
+    second: "#E0E0E0",
+    third: "#DAAA5E",
+  },
+  heatmap: {
+    color0: { fill: "#e9ded1", stroke: "#ccc1b1" },
+    color1: { fill: "#ccc1b1", stroke: "#a5a59b" },
+    color2: { fill: "#a5a59b", stroke: "#778482" },
+    color3: { fill: "#778482", stroke: "#50686d" },
+    color4: { fill: "#50686d", stroke: "#244855" },
+    color5: { fill: "#244855", stroke: "#193540" },
+    colorActive: { fill: "#50686d", stroke: "#244855" },
+    colorInActive: { fill: "#e9ded1", stroke: "#ccc1b1" },
+  },
+  days: {
+    color0: "#a3bfd0",
+    color1: "#7f9dad",
+    color2: "#5b7c8a",
+    color3: "#406270",
+    color4: "#244855",
+  },
+  components: {
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottom: "1px solid #874F41",
+        },
+      },
+    },
+    MuiAlert: {
+      styleOverrides: {
+        outlinedError: {
+          borderColor: "#7a0f20",
+        },
+        outlinedSuccess: {
+          borderColor: "#008000",
+        },
+      },
+    },
+  },
+});
+
 export interface HeatmapRectStyle {
   fill: string;
   stroke: string;
@@ -219,10 +287,11 @@ declare module "@mui/material/styles" {
   }
 }
 
-export type ThemeMode = "light" | "dark" | "hidden";
+export type ThemeMode = "light" | "dark" | "kak" | "retro";
 
 export const themeModes: Record<ThemeMode, ThemeOptions> = {
   light: lightTheme,
   dark: darkTheme,
-  hidden: hiddenTheme,
+  kak: kakTheme,
+  retro: retroTheme,
 };