Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/features/player/components/playerbar.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent, useCallback } from 'react';
-import styled from 'styled-components';
+
+import styles from './playerbar.module.css';
 
 import { AudioPlayer } from '/@/renderer/components';
 import { CenterControls } from '/@/renderer/features/player/components/center-controls';
@@ -25,47 +26,6 @@ import {
 } from '/@/renderer/store/settings.store';
 import { PlaybackType } from '/@/shared/types/types';
 
-const PlayerbarContainer = styled.div`
-    width: 100vw;
-    height: 100%;
-    border-top: var(--playerbar-border-top);
-`;
-
-const PlayerbarControlsGrid = styled.div`
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
-    gap: 1rem;
-    height: 100%;
-
-    @media (width <= 768px) {
-        grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr) minmax(0, 0.5fr);
-    }
-`;
-
-const RightGridItem = styled.div`
-    align-self: center;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-`;
-
-const LeftGridItem = styled.div`
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-`;
-
-const CenterGridItem = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-`;
-
 export const Playerbar = () => {
     const playersRef = PlayersRef;
     const settings = useSettingsStore((state) => state.playback);
@@ -92,20 +52,21 @@ export const Playerbar = () => {
     }, [autoNext]);
 
     return (
-        <PlayerbarContainer
+        <div
+            className={styles.container}
             onClick={playerbarOpenDrawer ? handleToggleFullScreenPlayer : undefined}
         >
-            <PlayerbarControlsGrid>
-                <LeftGridItem>
+            <div className={styles.controlsGrid}>
+                <div className={styles.leftGridItem}>
                     <LeftControls />
-                </LeftGridItem>
-                <CenterGridItem>
+                </div>
+                <div className={styles.centerGridItem}>
                     <CenterControls playersRef={playersRef} />
-                </CenterGridItem>
-                <RightGridItem>
+                </div>
+                <div className={styles.rightGridItem}>
                     <RightControls />
-                </RightGridItem>
-            </PlayerbarControlsGrid>
+                </div>
+            </div>
             {playbackType === PlaybackType.WEB && (
                 <AudioPlayer
                     autoNext={autoNextFn}
@@ -122,6 +83,6 @@ export const Playerbar = () => {
                     volume={(volume / 100) ** 2}
                 />
             )}
-        </PlayerbarContainer>
+        </div>
     );
 };