chore: upgrade mantine to v6

frontend/src/pages/404.tsx

@@ -1,14 +1,13 @@
-import React from "react";
 import {
-  createStyles,
-  Title,
-  Text,
   Button,
   Container,
+  createStyles,
   Group,
+  Text,
+  Title,
 } from "@mantine/core";
-import Meta from "../components/Meta";
 import Link from "next/link";
+import Meta from "../components/Meta";
 
 const useStyles = createStyles((theme) => ({
   root: {
@@ -21,7 +20,7 @@ const useStyles = createStyles((theme) => ({
     fontWeight: 900,
     fontSize: 220,
     lineHeight: 1,
-    marginBottom: theme.spacing.xl * 1.5,
+    marginBottom: `calc(${theme.spacing.xl} * 100)`,
     color: theme.colors.gray[2],
 
     [theme.fn.smallerThan("sm")]: {
@@ -32,7 +31,7 @@ const useStyles = createStyles((theme) => ({
   description: {
     maxWidth: 500,
     margin: "auto",
-    marginBottom: theme.spacing.xl * 1.5,
+    marginBottom: `calc(${theme.spacing.xl} * 100)`,
   },
 }));
 

frontend/src/pages/_app.tsx

@@ -6,7 +6,7 @@ import {
 } from "@mantine/core";
 import { useColorScheme } from "@mantine/hooks";
 import { ModalsProvider } from "@mantine/modals";
-import { NotificationsProvider } from "@mantine/notifications";
+import { Notifications } from "@mantine/notifications";
 import axios from "axios";
 import { getCookie, setCookie } from "cookies-next";
 import { GetServerSidePropsContext } from "next";
@@ -76,40 +76,39 @@ function App({ Component, pageProps }: AppProps) {
         toggleColorScheme={toggleColorScheme}
       >
         <GlobalStyle />
-        <NotificationsProvider>
-          <ModalsProvider>
-            <ConfigContext.Provider
+        <Notifications />
+        <ModalsProvider>
+          <ConfigContext.Provider
+            value={{
+              configVariables,
+              refresh: async () => {
+                setConfigVariables(await configService.list());
+              },
+            }}
+          >
+            <UserContext.Provider
               value={{
-                configVariables,
-                refresh: async () => {
-                  setConfigVariables(await configService.list());
+                user,
+                refreshUser: async () => {
+                  const user = await userService.getCurrentUser();
+                  setUser(user);
+                  return user;
                 },
               }}
             >
-              <UserContext.Provider
-                value={{
-                  user,
-                  refreshUser: async () => {
-                    const user = await userService.getCurrentUser();
-                    setUser(user);
-                    return user;
-                  },
-                }}
-              >
-                {excludeDefaultLayoutRoutes.includes(route) ? (
-                  <Component {...pageProps} />
-                ) : (
-                  <>
-                    <Header />
-                    <Container>
-                      <Component {...pageProps} />
-                    </Container>
-                  </>
-                )}
-              </UserContext.Provider>
-            </ConfigContext.Provider>
-          </ModalsProvider>
-        </NotificationsProvider>
+              {excludeDefaultLayoutRoutes.includes(route) ? (
+                <Component {...pageProps} />
+              ) : (
+                <>
+                  <Header />
+                  <Container>
+                    <Component {...pageProps} />
+                  </Container>
+                </>
+              )}
+            </UserContext.Provider>
+          </ConfigContext.Provider>
+        </ModalsProvider>
       </ColorSchemeProvider>
     </MantineProvider>
   );

frontend/src/pages/index.tsx

@@ -20,13 +20,13 @@ const useStyles = createStyles((theme) => ({
   inner: {
     display: "flex",
     justifyContent: "space-between",
-    paddingTop: theme.spacing.xl * 4,
-    paddingBottom: theme.spacing.xl * 4,
+    paddingTop: `calc(${theme.spacing.md} * 4)`,
+    paddingBottom: `calc(${theme.spacing.md} * 4)`,
   },
 
   content: {
     maxWidth: 480,
-    marginRight: theme.spacing.xl * 3,
+    marginRight: `calc(${theme.spacing.md} * 3)`,
 
     [theme.fn.smallerThan("md")]: {
       maxWidth: "100%",

frontend/src/pages/upload/index.tsx

@@ -125,7 +125,7 @@ const Upload = ({
         toast.error(
           `${fileErrorCount} file(s) failed to upload. Trying again.`,
           {
-            disallowClose: true,
+            withCloseButton: false,
             autoClose: false,
           }
         );