Migrate Settings to Mantine ui

frontend/src/App.js

@@ -1,15 +1,28 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { GeistProvider, CssBaseline } from '@geist-ui/core';
-import { MantineProvider, AppShell, Container } from '@mantine/core';
+import {
+  MantineProvider,
+  createTheme,
+  AppShell,
+  Container,
+} from '@mantine/core';
+import { Notifications } from '@mantine/notifications';
+import { ModalsProvider } from '@mantine/modals';
 import Header from './components/Header';
 import MainContent from './components/MainContent';
 import { SettingsProvider, useSettings } from './contexts/SettingsContext';
 import { ModalProvider } from './contexts/ModalContext';
 import '@mantine/core/styles.css';
+import '@mantine/notifications/styles.css';
 import './App.scss';
 
+const mantineTheme = createTheme({
+  /** You can add your Mantine theme overrides here */
+});
+
 function AppContent() {
   const { settings, loading } = useSettings();
+  const [opened, setOpened] = useState(false);
 
   if (loading) {
     return <div>Loading...</div>;
@@ -17,40 +30,21 @@ function AppContent() {
 
   return (
     <GeistProvider themeType={settings.theme}>
-      <MantineProvider
-        withGlobalStyles
-        withNormalizeCSS
-        theme={{
-          colorScheme: settings.theme,
-          components: {
-            Container: {
-              defaultProps: {
-                sizes: {
-                  xs: 540,
-                  sm: 720,
-                  md: 960,
-                  lg: 1140,
-                  xl: 1320,
-                },
-              },
-            },
-          },
-        }}
-      >
-        <CssBaseline />
-        <AppShell header={{ height: 60 }} padding="md">
-          <AppShell.Header>
-            <Container size="xl">
+      <CssBaseline />
+      <MantineProvider theme={mantineTheme} defaultColorScheme={settings.theme}>
+        <Notifications />
+        <ModalsProvider>
+          <AppShell header={{ height: 60 }} padding="md">
+            <AppShell.Header>
               <Header />
-            </Container>
-          </AppShell.Header>
-
-          <AppShell.Main>
-            <Container size="xl">
-              <MainContent />
-            </Container>
-          </AppShell.Main>
-        </AppShell>
+            </AppShell.Header>
+            <AppShell.Main>
+              <Container size="xl">
+                <MainContent />
+              </Container>
+            </AppShell.Main>
+          </AppShell>
+        </ModalsProvider>
       </MantineProvider>
     </GeistProvider>
   );