Migrate to mantine v6 (#15)

* Add letter spacing to cell text

* Set window control height in px

* Add temp unused routes

* Migrate text title font weights

* Bump mantine to v6 alpha

* Migrate modals / notifications

* Increase header bar to 65px

* Adjust play button props

* Migrate various components

* Migrate various pages and root styles

* Adjust default badge padding

* Fix sidebar spacing

* Fix list header badges

* Adjust default theme

src/renderer/app.tsx

@@ -4,10 +4,10 @@ import { ModuleRegistry } from '@ag-grid-community/core';
 import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model';
 import { MantineProvider } from '@mantine/core';
 import { ModalsProvider } from '@mantine/modals';
-import { NotificationsProvider } from '@mantine/notifications';
 import { initSimpleImg } from 'react-simple-img';
 import { BaseContextModal } from './components';
 import { useTheme } from './hooks';
+import { Notifications } from '@mantine/notifications';
 import { AppRouter } from './router/app-router';
 import { useSettingsStore } from './store/settings.store';
 import './styles/global.scss';
@@ -36,13 +36,6 @@ export const App = () => {
       withGlobalStyles
       withNormalizeCSS
       theme={{
-        breakpoints: {
-          lg: 1200,
-          md: 1000,
-          sm: 800,
-          xl: 1400,
-          xs: 500,
-        },
         colorScheme: theme as 'light' | 'dark',
         components: { Modal: { styles: { body: { padding: '.5rem' } } } },
         defaultRadius: 'xs',
@@ -60,53 +53,52 @@ export const App = () => {
         },
         fontFamily: 'var(--content-font-family)',
         fontSizes: {
-          lg: 16,
-          md: 14,
-          sm: 12,
-          xl: 18,
-          xs: 10,
+          lg: '1.5rem',
+          md: '1.1rem',
+          sm: '0.9rem',
+          xl: '2rem',
+          xs: '0.8rem',
+        },
+        headings: {
+          fontFamily: 'var(--content-font-family)',
+          fontWeight: 700,
+          sizes: {
+            h1: '6rem',
+            h2: '4rem',
+            h3: '3rem',
+            h4: '1.5rem',
+            h5: '1.2rem',
+            h6: '1rem',
+          },
         },
-        headings: { fontFamily: 'var(--content-font-family)' },
         other: {},
         spacing: {
-          lg: 12,
-          md: 8,
-          sm: 4,
-          xl: 16,
-          xs: 2,
+          lg: '2rem',
+          md: '1rem',
+          sm: '0.5rem',
+          xl: '4rem',
+          xs: '0rem',
         },
       }}
     >
-      <NotificationsProvider
-        autoClose={1500}
-        position="bottom-center"
-        style={{
-          marginBottom: '85px',
-          opacity: '.8',
-          userSelect: 'none',
-          width: '300px',
-        }}
-        transitionDuration={200}
-      >
-        <ModalsProvider
-          modalProps={{
-            centered: true,
-            exitTransitionDuration: 300,
-            overflow: 'inside',
-            overlayBlur: 0,
-            overlayOpacity: 0.8,
+      <ModalsProvider
+        modalProps={{
+          centered: true,
+          transitionDuration: 300,
+          transitionProps: {
+            exitDuration: 300,
             transition: 'slide-down',
-            transitionDuration: 300,
-          }}
-          modals={{ base: BaseContextModal }}
-        >
-          <PlayQueueHandlerContext.Provider value={{ handlePlayQueueAdd }}>
-            <ContextMenuProvider>
-              <AppRouter />
-            </ContextMenuProvider>
-          </PlayQueueHandlerContext.Provider>
-        </ModalsProvider>
-      </NotificationsProvider>
+          },
+        }}
+        modals={{ base: BaseContextModal }}
+      >
+        <PlayQueueHandlerContext.Provider value={{ handlePlayQueueAdd }}>
+          <ContextMenuProvider>
+            <Notifications />
+            <AppRouter />
+          </ContextMenuProvider>
+        </PlayQueueHandlerContext.Provider>
+      </ModalsProvider>
     </MantineProvider>
   );
 };