Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/remote/app.tsx

@@ -1,7 +1,7 @@
 import { MantineProvider } from '@mantine/core';
 import { useEffect } from 'react';
 
-import './styles/global.scss';
+import './styles/global.css';
 
 import { Shell } from '/@/remote/components/shell';
 import { useIsDark, useReconnect } from '/@/remote/store';
@@ -16,8 +16,8 @@ export const App = () => {
 
     return (
         <MantineProvider
+            defaultColorScheme={isDark ? 'dark' : 'light'}
             theme={{
-                colorScheme: isDark ? 'dark' : 'light',
                 components: {
                     AppShell: {
                         styles: {
@@ -30,13 +30,13 @@ export const App = () => {
                     Modal: {
                         styles: {
                             body: {
-                                background: 'var(--modal-bg)',
+                                background: 'var(--theme-modal-bg)',
                                 height: '100vh',
                             },
                             close: { marginRight: '0.5rem' },
                             content: { borderRadius: '5px' },
                             header: {
-                                background: 'var(--modal-header-bg)',
+                                background: 'var(--theme-modal-header-bg)',
                                 paddingBottom: '1rem',
                             },
                             title: { fontSize: 'medium', fontWeight: 500 },
@@ -44,19 +44,8 @@ export const App = () => {
                     },
                 },
                 defaultRadius: 'xs',
-                dir: 'ltr',
                 focusRing: 'auto',
-                focusRingStyles: {
-                    inputStyles: () => ({
-                        border: '1px solid var(--primary-color)',
-                    }),
-                    resetStyles: () => ({ outline: 'none' }),
-                    styles: () => ({
-                        outline: '1px solid var(--primary-color)',
-                        outlineOffset: '-1px',
-                    }),
-                },
-                fontFamily: 'var(--content-font-family)',
+                fontFamily: 'var(--theme-content-font-family)',
                 fontSizes: {
                     lg: '1.1rem',
                     md: '1rem',
@@ -65,8 +54,8 @@ export const App = () => {
                     xs: '0.8rem',
                 },
                 headings: {
-                    fontFamily: 'var(--content-font-family)',
-                    fontWeight: 700,
+                    fontFamily: 'var(--theme-content-font-family)',
+                    fontWeight: '700',
                 },
                 other: {},
                 spacing: {
@@ -77,8 +66,6 @@ export const App = () => {
                     xs: '0rem',
                 },
             }}
-            withGlobalStyles
-            withNormalizeCSS
         >
             <Shell />
         </MantineProvider>