feat: use system color theme

frontend/src/components/mantine/ThemeProvider.tsx

@@ -1,41 +0,0 @@
-import {
-  ColorScheme,
-  ColorSchemeProvider,
-  MantineProvider,
-} from "@mantine/core";
-import { ModalsProvider } from "@mantine/modals";
-import { setCookies } from "cookies-next";
-import { Dispatch, ReactNode, SetStateAction } from "react";
-import mantineTheme from "../../styles/mantine.style";
-
-const ThemeProvider = ({
-  children,
-  colorScheme,
-  setColorScheme,
-}: {
-  children: ReactNode;
-  colorScheme: ColorScheme;
-  setColorScheme: Dispatch<SetStateAction<ColorScheme>>;
-}) => {
-  const toggleColorScheme = (value?: ColorScheme) => {
-    const nextColorScheme =
-      value || (colorScheme === "dark" ? "light" : "dark");
-    setColorScheme(nextColorScheme);
-    setCookies("mantine-color-scheme", nextColorScheme, {
-      maxAge: 60 * 60 * 24 * 30,
-    });
-  };
-
-  return (
-    <MantineProvider theme={{ colorScheme, ...mantineTheme }} withGlobalStyles>
-      <ColorSchemeProvider
-        colorScheme={colorScheme}
-        toggleColorScheme={toggleColorScheme}
-      >
-        <ModalsProvider>{children}</ModalsProvider>
-      </ColorSchemeProvider>
-    </MantineProvider>
-  );
-};
-
-export default ThemeProvider;

frontend/src/components/navBar/ActionAvatar.tsx

@@ -1,8 +1,7 @@
 import { ActionIcon, Avatar, Menu } from "@mantine/core";
 import { NextLink } from "@mantine/next";
-import { DoorExit, Link, Moon } from "tabler-icons-react";
+import { DoorExit, Link } from "tabler-icons-react";
 import authService from "../../services/auth.service";
-import ToggleThemeButton from "./ToggleThemeButton";
 
 const ActionAvatar = () => {
   return (
@@ -13,13 +12,12 @@ const ActionAvatar = () => {
         </ActionIcon>
       </Menu.Target>
       <Menu.Dropdown>
-        <Menu.Label>My account</Menu.Label>
         <Menu.Item
           component={NextLink}
           href="/account/shares"
           icon={<Link size={14} />}
         >
-          Shares
+          My shares
         </Menu.Item>
         <Menu.Item
           onClick={async () => {
@@ -29,10 +27,6 @@ const ActionAvatar = () => {
         >
           Sign out
         </Menu.Item>
-        <Menu.Label>Settings</Menu.Label>
-        <Menu.Item icon={<Moon size={14} />}>
-          <ToggleThemeButton />
-        </Menu.Item>
       </Menu.Dropdown>
     </Menu>
   );

frontend/src/components/navBar/NavBar.tsx

@@ -1,4 +1,5 @@
 import {
+  Box,
   Burger,
   Container,
   createStyles,
@@ -111,7 +112,7 @@ const NavBar = () => {
   const user = useUser();
   const [opened, toggleOpened] = useDisclosure(false);
 
-  const [authenticatedLinks, setAuthenticatedLinks] = useState<Link[]>([
+  const authenticatedLinks = [
     {
       link: "/upload",
       label: "Upload",
@@ -119,7 +120,7 @@ const NavBar = () => {
     {
       component: <ActionAvatar />,
     },
-  ]);
+  ];
 
   const [unauthenticatedLinks, setUnauthenticatedLinks] = useState<Link[]>([
     {
@@ -149,16 +150,15 @@ const NavBar = () => {
   }, []);
 
   const { classes, cx } = useStyles();
-  console.log(user);
   const items = (
     <>
       {(user ? authenticatedLinks : unauthenticatedLinks).map((link) => {
         if (link.component) {
           return (
             <>
-              <Container pl={5} py={15}>
+              <Box pl={5} py={15}>
                 {link.component}
-              </Container>
+              </Box>
             </>
           );
         }
@@ -185,8 +185,8 @@ const NavBar = () => {
             <Image
               src="/img/logo.svg"
               alt="Pinvgin Share Logo"
-              height={40}
-              width={40}
+              height={35}
+              width={35}
             />
             <Text weight={600}>Pingvin Share</Text>
           </Group>

frontend/src/components/navBar/ToggleThemeButton.tsx

@@ -1,19 +0,0 @@
-import { Switch, useMantineColorScheme } from "@mantine/core";
-
-const ToggleThemeButton = () => {
-  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-
-  return (
-    <Switch
-      size="sm"
-      checked={colorScheme == "dark"}
-      onClick={(v) =>
-        toggleColorScheme(v.currentTarget.checked ? "dark" : "light")
-      }
-      onLabel="ON"
-      offLabel="OFF"
-    />
-  );
-};
-
-export default ToggleThemeButton;

frontend/src/pages/_app.tsx

@@ -5,15 +5,14 @@ import {
   MantineProvider,
   Stack,
 } from "@mantine/core";
+import { useColorScheme } from "@mantine/hooks";
 import { ModalsProvider } from "@mantine/modals";
 import { NotificationsProvider } from "@mantine/notifications";
-import { getCookie } from "cookies-next";
+import { getCookie, setCookies } from "cookies-next";
 import { GetServerSidePropsContext } from "next";
 import type { AppProps } from "next/app";
-import getConfig from "next/config";
 import { useEffect, useState } from "react";
 import Footer from "../components/Footer";
-import ThemeProvider from "../components/mantine/ThemeProvider";
 import Header from "../components/navBar/NavBar";
 import { UserContext } from "../hooks/user.hook";
 import authService from "../services/auth.service";
@@ -23,12 +22,13 @@ import globalStyle from "../styles/mantine.style";
 import { CurrentUser } from "../types/user.type";
 import { GlobalLoadingContext } from "../utils/loading.util";
 
-const {  publicRuntimeConfig } = getConfig()
-
 function App(
   props: AppProps & { colorScheme: ColorScheme; environmentVariables: any }
 ) {
   const { Component, pageProps } = props;
+
+  const systemTheme = useColorScheme();
+
   const [colorScheme, setColorScheme] = useState<ColorScheme>(
     props.colorScheme
   );
@@ -36,43 +36,52 @@ function App(
   const [user, setUser] = useState<CurrentUser | null>(null);
 
   const getInitalData = async () => {
-    console.log(publicRuntimeConfig)
     setIsLoading(true);
     setUser(await userService.getCurrentUser());
-
     setIsLoading(false);
   };
+
   useEffect(() => {
     setInterval(async () => await authService.refreshAccessToken(), 30 * 1000);
     getInitalData();
   }, []);
+
+  useEffect(() => {
+    setCookies("mantine-color-scheme", systemTheme, {
+      maxAge: 60 * 60 * 24 * 30,
+    });
+    setColorScheme(systemTheme);
+  }, [systemTheme]);
+
   return (
-    <MantineProvider withGlobalStyles withNormalizeCSS theme={globalStyle}>
-      <ThemeProvider colorScheme={colorScheme} setColorScheme={setColorScheme}>
-        <GlobalStyle />
-        <NotificationsProvider>
-          <ModalsProvider>
-            <GlobalLoadingContext.Provider value={{ isLoading, setIsLoading }}>
-              {isLoading ? (
-                <LoadingOverlay visible overlayOpacity={1} />
-              ) : (
-                <UserContext.Provider value={user}>
-                  <LoadingOverlay visible={isLoading} overlayOpacity={1} />
-                  <Stack justify="space-between" sx={{ minHeight: "100vh" }}>
-                    <div>
-                      <Header />
-                      <Container>
-                        <Component {...pageProps} />
-                      </Container>
-                    </div>
-                    <Footer />
-                  </Stack>
-                </UserContext.Provider>
-              )}
-            </GlobalLoadingContext.Provider>
-          </ModalsProvider>
-        </NotificationsProvider>
-      </ThemeProvider>
+    <MantineProvider
+      withGlobalStyles
+      withNormalizeCSS
+      theme={{ colorScheme, ...globalStyle }}
+    >
+      <GlobalStyle />
+      <NotificationsProvider>
+        <ModalsProvider>
+          <GlobalLoadingContext.Provider value={{ isLoading, setIsLoading }}>
+            {isLoading ? (
+              <LoadingOverlay visible overlayOpacity={1} />
+            ) : (
+              <UserContext.Provider value={user}>
+                <LoadingOverlay visible={isLoading} overlayOpacity={1} />
+                <Stack justify="space-between" sx={{ minHeight: "100vh" }}>
+                  <div>
+                    <Header />
+                    <Container>
+                      <Component {...pageProps} />
+                    </Container>
+                  </div>
+                  <Footer />
+                </Stack>
+              </UserContext.Provider>
+            )}
+          </GlobalLoadingContext.Provider>
+        </ModalsProvider>
+      </NotificationsProvider>
     </MantineProvider>
   );
 }