Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/features/lyrics/synchronized-lyrics.tsx

@@ -1,6 +1,9 @@
+import clsx from 'clsx';
 import isElectron from 'is-electron';
 import { useCallback, useEffect, useRef } from 'react';
-import styled from 'styled-components';
+
+import styles from './synchronized-lyrics.module.css';
+import './synchronized-lyrics.css';
 
 import { LyricLine } from '/@/renderer/features/lyrics/lyric-line';
 import { useScrobble } from '/@/renderer/features/player/hooks/use-scrobble';
@@ -22,38 +25,6 @@ const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
 const utils = isElectron() ? window.api.utils : null;
 const mpris = isElectron() && utils?.isLinux() ? window.api.mpris : null;
 
-const SynchronizedLyricsContainer = styled.div<{ $gap: number }>`
-    display: flex;
-    flex-direction: column;
-    gap: ${(props) => props.$gap || 5}px;
-    width: 100%;
-    height: 100%;
-    padding: 10vh 0 50vh;
-    overflow: scroll;
-    word-break: break-word;
-
-    -webkit-mask-image: linear-gradient(
-        180deg,
-        transparent 5%,
-        rgb(0 0 0 / 100%) 20%,
-        rgb(0 0 0 / 100%) 85%,
-        transparent 95%
-    );
-
-    mask-image: linear-gradient(
-        180deg,
-        transparent 5%,
-        rgb(0 0 0 / 100%) 20%,
-        rgb(0 0 0 / 100%) 85%,
-        transparent 95%
-    );
-    transform: translateY(-2rem);
-
-    @media screen and (orientation: portrait) {
-        padding: 5vh 0;
-    }
-`;
-
 export interface SynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
     lyrics: SynchronizedLyricsArray;
     translatedLyrics?: null | string;
@@ -344,12 +315,12 @@ export const SynchronizedLyrics = ({
     };
 
     return (
-        <SynchronizedLyricsContainer
-            $gap={settings.gap}
-            className="synchronized-lyrics overlay-scrollbar"
+        <div
+            className={clsx(styles.container, 'synchronized-lyrics overlay-scrollbar')}
             id="sychronized-lyrics-scroll-container"
             onMouseEnter={showScrollbar}
             onMouseLeave={hideScrollbar}
+            style={{ gap: `${settings.gap}px` }}
         >
             {settings.showProvider && source && (
                 <LyricLine
@@ -388,6 +359,6 @@ export const SynchronizedLyrics = ({
                     )}
                 </div>
             ))}
-        </SynchronizedLyricsContainer>
+        </div>
     );
 };