vinvoor: add retro theme

ZeusWPI · Aug 26, 2024 · 0d82709 · 0d82709
1 parent bd744d8
commit 0d82709
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 4 deletions.
diff --git a/vinvoor/src/navbar/NavBarLogo.tsx b/vinvoor/src/navbar/NavBarLogo.tsx
@@ -26,7 +26,7 @@ export const NavBarLogo: FC<NavBarLogoProps> = ({ sx }) => {
         pressedAmount === CLICK_AMOUNT &&
         Date.now() - startTimePress <= CLICK_TIME_MS
       )
-        setTheme("hidden");
+        setTheme("kak");
     }
   };
 

diff --git a/vinvoor/src/providers/CustomSnackbarProvider.tsx b/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}

diff --git a/vinvoor/src/theme.ts b/vinvoor/src/theme.ts
@@ -67,7 +67,7 @@ export const darkTheme = createTheme({
   },
 });
 
-export const hiddenTheme = createTheme({
+export const kakTheme = createTheme({
   palette: {
     mode: "light",
     primary: {
@@ -163,6 +163,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 +286,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,
 };