Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/layouts/window-bar.tsx

@@ -1,7 +1,7 @@
+import clsx from 'clsx';
 import isElectron from 'is-electron';
 import { useCallback, useState } from 'react';
 import { RiCheckboxBlankLine, RiCloseLine, RiSubtractLine } from 'react-icons/ri';
-import styled from 'styled-components';
 
 import appIcon from '../../../assets/icons/32x32.png';
 import macCloseHover from './assets/close-mac-hover.png';
@@ -10,59 +10,15 @@ import macMaxHover from './assets/max-mac-hover.png';
 import macMax from './assets/max-mac.png';
 import macMinHover from './assets/min-mac-hover.png';
 import macMin from './assets/min-mac.png';
+import styles from './window-bar.module.css';
 
 import { useCurrentStatus, useQueueStatus } from '/@/renderer/store';
 import { useWindowSettings } from '/@/renderer/store/settings.store';
+import { Text } from '/@/shared/components/text/text';
 import { Platform, PlayerStatus } from '/@/shared/types/types';
 
 const localSettings = isElectron() ? window.api.localSettings : null;
 
-const WindowsContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100vw;
-    color: var(--window-bar-fg);
-    background-color: var(--window-bar-bg);
-    -webkit-app-region: drag;
-`;
-
-const WindowsButtonGroup = styled.div`
-    display: flex;
-    width: 130px;
-    height: 100%;
-    -webkit-app-region: no-drag;
-`;
-
-const WindowsButton = styled.div<{ $exit?: boolean }>`
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: center;
-    -webkit-app-region: no-drag;
-    width: 50px;
-    height: 30px;
-
-    img {
-        width: 35%;
-        height: 50%;
-    }
-
-    &:hover {
-        background: ${({ $exit }) => ($exit ? 'var(--danger-color)' : 'rgba(125, 125, 125, 30%)')};
-    }
-`;
-
-const PlayerStatusContainer = styled.div`
-    display: flex;
-    gap: 0.5rem;
-    max-width: 45vw;
-    padding-left: 1rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-`;
-
 const browser = isElectron() ? window.api.browser : null;
 const close = () => browser?.exit();
 const minimize = () => browser?.minimize();
@@ -82,82 +38,43 @@ const WindowsControls = ({ controls, title }: WindowBarControlsProps) => {
     const { handleClose, handleMaximize, handleMinimize } = controls;
 
     return (
-        <WindowsContainer>
-            <PlayerStatusContainer>
+        <div className={styles.windowsContainer}>
+            <div className={styles.playerStatusContainer}>
                 <img
                     alt=""
                     height={18}
                     src={appIcon}
                     width={18}
                 />
-                {title}
-            </PlayerStatusContainer>
-            <WindowsButtonGroup>
-                <WindowsButton
+                <Text>{title}</Text>
+            </div>
+            <div className={styles.windowsButtonGroup}>
+                <div
+                    className={styles.windowsButton}
                     onClick={handleMinimize}
                     role="button"
                 >
                     <RiSubtractLine size={19} />
-                </WindowsButton>
-                <WindowsButton
+                </div>
+                <div
+                    className={styles.windowsButton}
                     onClick={handleMaximize}
                     role="button"
                 >
                     <RiCheckboxBlankLine size={13} />
-                </WindowsButton>
-                <WindowsButton
-                    $exit
+                </div>
+                <div
+                    className={clsx(styles.windowsButton, styles.exit)}
                     onClick={handleClose}
                     role="button"
                 >
                     <RiCloseLine size={19} />
-                </WindowsButton>
-            </WindowsButtonGroup>
-        </WindowsContainer>
+                </div>
+            </div>
+        </div>
     );
 };
 
-const MacOsContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100vw;
-    -webkit-app-region: drag;
-    color: var(--window-bar-fg);
-    background-color: var(--window-bar-bg);
-`;
-
-const MacOsButtonGroup = styled.div`
-    position: absolute;
-    top: 5px;
-    left: 0.5rem;
-    display: grid;
-    grid-template-columns: repeat(3, 20px);
-    height: 100%;
-
-    -webkit-app-region: no-drag;
-`;
-
-export const MacOsButton = styled.div<{
-    $maxButton?: boolean;
-    $minButton?: boolean;
-    $restoreButton?: boolean;
-}>`
-    grid-row: 1 / span 1;
-    grid-column: ${(props) =>
-        props.$minButton ? 2 : props.$maxButton || props.$restoreButton ? 3 : 1};
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    user-select: none;
-
-    img {
-        width: 18px;
-        height: 18px;
-    }
-`;
-
 const MacOsControls = ({ controls, title }: WindowBarControlsProps) => {
     const { handleClose, handleMaximize, handleMinimize } = controls;
 
@@ -166,11 +83,10 @@ const MacOsControls = ({ controls, title }: WindowBarControlsProps) => {
     const [hoverClose, setHoverClose] = useState(false);
 
     return (
-        <MacOsContainer>
-            <MacOsButtonGroup>
-                <MacOsButton
-                    $minButton
-                    className="button"
+        <div className={styles.macosContainer}>
+            <div className={styles.macosButtonGroup}>
+                <div
+                    className={clsx(styles.macosButton, styles.minButton)}
                     id="min-button"
                     onClick={handleMinimize}
                     onMouseLeave={() => setHoverMin(false)}
@@ -182,10 +98,9 @@ const MacOsControls = ({ controls, title }: WindowBarControlsProps) => {
                         draggable="false"
                         src={hoverMin ? macMinHover : macMin}
                     />
-                </MacOsButton>
-                <MacOsButton
-                    $maxButton
-                    className="button"
+                </div>
+                <div
+                    className={clsx(styles.macosButton, styles.maxButton)}
                     id="max-button"
                     onClick={handleMaximize}
                     onMouseLeave={() => setHoverMax(false)}
@@ -197,9 +112,9 @@ const MacOsControls = ({ controls, title }: WindowBarControlsProps) => {
                         draggable="false"
                         src={hoverMax ? macMaxHover : macMax}
                     />
-                </MacOsButton>
-                <MacOsButton
-                    className="button"
+                </div>
+                <div
+                    className={clsx(styles.macosButton)}
                     id="close-button"
                     onClick={handleClose}
                     onMouseLeave={() => setHoverClose(false)}
@@ -211,10 +126,12 @@ const MacOsControls = ({ controls, title }: WindowBarControlsProps) => {
                         draggable="false"
                         src={hoverClose ? macCloseHover : macClose}
                     />
-                </MacOsButton>
-            </MacOsButtonGroup>
-            <PlayerStatusContainer>{title}</PlayerStatusContainer>
-        </MacOsContainer>
+                </div>
+            </div>
+            <div className={styles.playerStatusContainer}>
+                <Text>{title}</Text>
+            </div>
+        </div>
     );
 };