Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

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

@@ -1,10 +1,10 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 
-import { Box, Flex } from '@mantine/core';
 import { useRef } from 'react';
 
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
 import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
+import { Flex } from '/@/shared/components/flex/flex';
 import { Song } from '/@/shared/types/domain-types';
 
 export const DrawerPlayQueue = () => {
@@ -15,17 +15,19 @@ export const DrawerPlayQueue = () => {
             direction="column"
             h="100%"
         >
-            <Box
-                bg="var(--main-bg)"
-                sx={{ borderRadius: '10px' }}
+            <div
+                style={{
+                    backgroundColor: 'var(--theme-colors-background)',
+                    borderRadius: '10px',
+                }}
             >
                 <PlayQueueListControls
                     tableRef={queueRef}
                     type="sideQueue"
                 />
-            </Box>
+            </div>
             <Flex
-                bg="var(--main-bg)"
+                bg="var(--theme-colors-background)"
                 h="100%"
                 mb="0.6rem"
             >