Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/features/now-playing/components/sidebar-play-queue.tsx

@@ -1,14 +1,15 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 
-import { Stack } from '@mantine/core';
 import { useRef } from 'react';
 
 import { PlayQueueListControls } from './play-queue-list-controls';
 
-import { PageHeader, Paper } from '/@/renderer/components';
+import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { VirtualGridContainer } from '/@/renderer/components/virtual-grid';
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
 import { useWindowSettings } from '/@/renderer/store/settings.store';
+import { Box } from '/@/shared/components/box/box';
+import { Stack } from '/@/shared/components/stack/stack';
 import { Song } from '/@/shared/types/domain-types';
 import { Platform } from '/@/shared/types/types';
 
@@ -21,10 +22,10 @@ export const SidebarPlayQueue = () => {
         <VirtualGridContainer>
             {isWeb && (
                 <Stack mr={isWeb ? '130px' : undefined}>
-                    <PageHeader backgroundColor="var(--titlebar-bg)" />
+                    <PageHeader />
                 </Stack>
             )}
-            <Paper
+            <Box
                 display={!isWeb ? 'flex' : undefined}
                 h={!isWeb ? '65px' : undefined}
             >
@@ -32,7 +33,7 @@ export const SidebarPlayQueue = () => {
                     tableRef={queueRef}
                     type="sideQueue"
                 />
-            </Paper>
+            </Box>
             <PlayQueue
                 ref={queueRef}
                 type="sideQueue"