Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/features/player/components/full-screen-player-queue.tsx

@@ -1,12 +1,10 @@
-import { Group } from '@mantine/core';
-import { motion } from 'framer-motion';
-import { lazy, Suspense, useMemo } from 'react';
+import clsx from 'clsx';
+import { motion } from 'motion/react';
+import { CSSProperties, lazy, Suspense, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { HiOutlineQueueList } from 'react-icons/hi2';
-import { RiFileMusicLine, RiFileTextLine } from 'react-icons/ri';
-import styled from 'styled-components';
 
-import { Button } from '/@/renderer/components';
+import styles from './full-screen-player-queue.module.css';
+
 import { Lyrics } from '/@/renderer/features/lyrics/lyrics';
 import { PlayQueue } from '/@/renderer/features/now-playing';
 import { FullScreenSimilarSongs } from '/@/renderer/features/player/components/full-screen-similar-songs';
@@ -15,6 +13,8 @@ import {
     useFullScreenPlayerStore,
     useFullScreenPlayerStoreActions,
 } from '/@/renderer/store/full-screen-player.store';
+import { Button } from '/@/shared/components/button/button';
+import { Group } from '/@/shared/components/group/group';
 import { PlaybackType } from '/@/shared/types/types';
 
 const Visualizer = lazy(() =>
@@ -23,50 +23,6 @@ const Visualizer = lazy(() =>
     })),
 );
 
-const QueueContainer = styled.div`
-    position: relative;
-    display: flex;
-    height: 100%;
-
-    .ag-theme-alpine-dark {
-        --ag-header-background-color: rgb(0 0 0 / 0%) !important;
-        --ag-background-color: rgb(0 0 0 / 0%) !important;
-        --ag-odd-row-background-color: rgb(0 0 0 / 0%) !important;
-    }
-
-    .ag-header {
-        display: none !important;
-    }
-`;
-
-const ActiveTabIndicator = styled(motion.div)`
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background: var(--main-fg);
-`;
-
-const HeaderItemWrapper = styled.div`
-    position: relative;
-    z-index: 2;
-`;
-
-interface TransparentGridContainerProps {
-    opacity: number;
-}
-
-const GridContainer = styled.div<TransparentGridContainerProps>`
-    display: grid;
-    grid-template-rows: auto minmax(0, 1fr);
-    grid-template-columns: 1fr;
-    padding: 1rem;
-    /* stylelint-disable-next-line color-function-notation */
-    background: rgb(var(--main-bg-transparent), ${({ opacity }) => opacity}%);
-    border-radius: 5px;
-`;
-
 export const FullScreenPlayerQueue = () => {
     const { t } = useTranslation();
     const { activeTab, opacity } = useFullScreenPlayerStore();
@@ -77,19 +33,16 @@ export const FullScreenPlayerQueue = () => {
         const items = [
             {
                 active: activeTab === 'queue',
-                icon: <RiFileMusicLine size="1.5rem" />,
                 label: t('page.fullscreenPlayer.upNext'),
                 onClick: () => setStore({ activeTab: 'queue' }),
             },
             {
                 active: activeTab === 'related',
-                icon: <HiOutlineQueueList size="1.5rem" />,
                 label: t('page.fullscreenPlayer.related'),
                 onClick: () => setStore({ activeTab: 'related' }),
             },
             {
                 active: activeTab === 'lyrics',
-                icon: <RiFileTextLine size="1.5rem" />,
                 label: t('page.fullscreenPlayer.lyrics'),
                 onClick: () => setStore({ activeTab: 'lyrics' }),
             },
@@ -98,7 +51,6 @@ export const FullScreenPlayerQueue = () => {
         if (type === PlaybackType.WEB && webAudio) {
             items.push({
                 active: activeTab === 'visualizer',
-                icon: <RiFileTextLine size="1.5rem" />,
                 label: t('page.fullscreenPlayer.visualizer', { postProcess: 'titleCase' }),
                 onClick: () => setStore({ activeTab: 'visualizer' }),
             });
@@ -108,48 +60,54 @@ export const FullScreenPlayerQueue = () => {
     }, [activeTab, setStore, t, type, webAudio]);
 
     return (
-        <GridContainer
-            className="full-screen-player-queue-container"
-            opacity={opacity}
+        <div
+            className={clsx(styles.gridContainer, 'full-screen-player-queue-container')}
+            style={
+                {
+                    '--opacity': opacity / 100,
+                } as CSSProperties
+            }
         >
             <Group
                 align="center"
                 className="full-screen-player-queue-header"
+                gap={0}
                 grow
-                position="center"
+                justify="center"
             >
                 {headerItems.map((item) => (
-                    <HeaderItemWrapper key={`tab-${item.label}`}>
+                    <div
+                        className={styles.headerItemWrapper}
+                        key={`tab-${item.label}`}
+                    >
                         <Button
-                            fullWidth
+                            flex={1}
                             fw="600"
                             onClick={item.onClick}
                             pos="relative"
                             size="lg"
-                            sx={{
-                                alignItems: 'center',
-                                color: item.active
-                                    ? 'var(--main-fg) !important'
-                                    : 'var(--main-fg-secondary) !important',
-                                letterSpacing: '1px',
-                            }}
                             uppercase
                             variant="subtle"
                         >
                             {item.label}
                         </Button>
-                        {item.active ? <ActiveTabIndicator layoutId="underline" /> : null}
-                    </HeaderItemWrapper>
+                        {item.active ? (
+                            <motion.div
+                                className={styles.activeTabIndicator}
+                                layoutId="underline"
+                            />
+                        ) : null}
+                    </div>
                 ))}
             </Group>
             {activeTab === 'queue' ? (
-                <QueueContainer>
+                <div className={styles.queueContainer}>
                     <PlayQueue type="fullScreen" />
-                </QueueContainer>
+                </div>
             ) : activeTab === 'related' ? (
-                <QueueContainer>
+                <div className={styles.queueContainer}>
                     <FullScreenSimilarSongs />
-                </QueueContainer>
+                </div>
             ) : activeTab === 'lyrics' ? (
                 <Lyrics />
             ) : activeTab === 'visualizer' && type === PlaybackType.WEB && webAudio ? (
@@ -157,6 +115,6 @@ export const FullScreenPlayerQueue = () => {
                     <Visualizer />
                 </Suspense>
             ) : null}
-        </GridContainer>
+        </div>
     );
 };