Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/router/app-outlet.tsx

@@ -1,12 +1,13 @@
-import { Center } from '@mantine/core';
 import isElectron from 'is-electron';
 import { useEffect, useMemo } from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 
-import { Spinner, toast } from '/@/renderer/components';
 import { useServerAuthenticated } from '/@/renderer/hooks/use-server-authenticated';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useSetPlayerFallback } from '/@/renderer/store';
+import { Center } from '/@/shared/components/center/center';
+import { Spinner } from '/@/shared/components/spinner/spinner';
+import { toast } from '/@/shared/components/toast/toast';
 import { AuthState } from '/@/shared/types/types';
 
 const ipc = isElectron() ? window.api.ipc : null;

src/renderer/router/app-router.tsx

@@ -1,16 +1,15 @@
-import { ModalsProvider } from '@mantine/modals';
 import { lazy, Suspense } from 'react';
 import { HashRouter, Route, Routes } from 'react-router-dom';
 
 import { AppRoute } from './routes';
 
-import { BaseContextModal } from '/@/renderer/components';
 import ArtistListRoute from '/@/renderer/features/artists/routes/artist-list-route';
 import { AddToPlaylistContextModal } from '/@/renderer/features/playlists';
 import { ShareItemContextModal } from '/@/renderer/features/sharing';
-import { DefaultLayout } from '/@/renderer/layouts';
+import { DefaultLayout } from '/@/renderer/layouts/default-layout';
 import { AppOutlet } from '/@/renderer/router/app-outlet';
 import { TitlebarOutlet } from '/@/renderer/router/titlebar-outlet';
+import { BaseContextModal, ModalsProvider } from '/@/shared/components/modal/modal';
 
 const NowPlayingRoute = lazy(
     () => import('/@/renderer/features/now-playing/routes/now-playing-route'),
@@ -72,18 +71,6 @@ export const AppRouter = () => {
     const router = (
         <HashRouter future={{ v7_startTransition: true }}>
             <ModalsProvider
-                modalProps={{
-                    centered: true,
-                    styles: {
-                        body: { position: 'relative' },
-                        content: { overflow: 'auto' },
-                    },
-                    transitionProps: {
-                        duration: 300,
-                        exitDuration: 300,
-                        transition: 'fade',
-                    },
-                }}
                 modals={{
                     addToPlaylist: AddToPlaylistContextModal,
                     base: BaseContextModal,

src/renderer/router/titlebar-outlet.module.css

@@ -0,0 +1,8 @@
+.container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 5000;
+    height: 65px;
+    -webkit-app-region: drag;
+}

src/renderer/router/titlebar-outlet.tsx

@@ -1,29 +1,20 @@
 import { Outlet } from 'react-router';
-import styled from 'styled-components';
+
+import styles from './titlebar-outlet.module.css';
 
 import { Titlebar } from '/@/renderer/features/titlebar/components/titlebar';
 import { useWindowSettings } from '/@/renderer/store/settings.store';
 import { Platform } from '/@/shared/types/types';
 
-const TitlebarContainer = styled.header`
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 5000;
-    height: 65px;
-    background: var(--titlebar-controls-bg);
-    -webkit-app-region: drag;
-`;
-
 export const TitlebarOutlet = () => {
     const { windowBarStyle } = useWindowSettings();
 
     return (
         <>
             {windowBarStyle === Platform.WEB && (
-                <TitlebarContainer>
+                <header className={styles.container}>
                     <Titlebar />
-                </TitlebarContainer>
+                </header>
             )}
             <Outlet />
         </>