Merge pull request #771 from ajnart/mantine-v6

🎉 Move to Mantine v6

src/pages/404.tsx

@@ -56,7 +56,7 @@ const useStyles = createStyles((theme) => ({
     maxWidth: 540,
     margin: 'auto',
     marginTop: theme.spacing.xl,
-    marginBottom: theme.spacing.xl * 1.5,
+    marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
   },
 }));
 

src/pages/_app.tsx

@@ -2,7 +2,6 @@ import { ColorScheme, ColorSchemeProvider, MantineProvider, MantineTheme } from
 import { useColorScheme, useHotkeys, useLocalStorage } from '@mantine/hooks';
 import { ModalsProvider } from '@mantine/modals';
 import Consola from 'consola';
-import { NotificationsProvider } from '@mantine/notifications';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { getCookie } from 'cookies-next';
@@ -11,6 +10,7 @@ import { appWithTranslation } from 'next-i18next';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
 import { useEffect, useState } from 'react';
+import { Notifications } from '@mantine/notifications';
 import 'video.js/dist/video-js.css';
 import { ChangeAppPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal';
 import { ChangeWidgetPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal';
@@ -112,21 +112,20 @@ function App(
               withNormalizeCSS
             >
               <ConfigProvider>
-                <NotificationsProvider limit={4} position="bottom-left">
-                  <ModalsProvider
-                    modals={{
-                      editApp: EditAppModal,
-                      selectElement: SelectElementModal,
-                      integrationOptions: WidgetsEditModal,
-                      integrationRemove: WidgetsRemoveModal,
-                      categoryEditModal: CategoryEditModal,
-                      changeAppPositionModal: ChangeAppPositionModal,
-                      changeIntegrationPositionModal: ChangeWidgetPositionModal,
-                    }}
-                  >
-                    <Component {...pageProps} />
-                  </ModalsProvider>
-                </NotificationsProvider>
+                <Notifications limit={4} position="bottom-left" />
+                <ModalsProvider
+                  modals={{
+                    editApp: EditAppModal,
+                    selectElement: SelectElementModal,
+                    integrationOptions: WidgetsEditModal,
+                    integrationRemove: WidgetsRemoveModal,
+                    categoryEditModal: CategoryEditModal,
+                    changeAppPositionModal: ChangeAppPositionModal,
+                    changeIntegrationPositionModal: ChangeWidgetPositionModal,
+                  }}
+                >
+                  <Component {...pageProps} />
+                </ModalsProvider>
               </ConfigProvider>
             </MantineProvider>
           </ColorTheme.Provider>

src/pages/login.tsx

@@ -62,7 +62,7 @@ export default function AuthenticationTitle() {
               title: t('notifications.checking.title'),
               message: t('notifications.checking.message'),
               autoClose: false,
-              disallowClose: true,
+              withCloseButton: false,
             });
             axios
               .post('/api/configs/tryPassword', {

src/pages/migrate.tsx

@@ -56,7 +56,7 @@ const useStyles = createStyles((theme) => ({
     fontWeight: 900,
     fontSize: 110,
     lineHeight: 1,
-    marginBottom: theme.spacing.xl * 1.5,
+    marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
 
     [theme.fn.smallerThan('sm')]: {
       fontSize: 60,
@@ -90,7 +90,7 @@ const useStyles = createStyles((theme) => ({
     maxWidth: 700,
     margin: 'auto',
     marginTop: theme.spacing.xl,
-    marginBottom: theme.spacing.xl * 1.5,
+    marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
   },
 }));