Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

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 />
         </>