Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/features/shared/components/library-header-bar.tsx

@@ -1,67 +1,48 @@
-import { Box } from '@mantine/core';
 import { ReactNode } from 'react';
-import styled from 'styled-components';
 
-import { Paper, PaperProps, SpinnerIcon, TextTitle } from '/@/renderer/components';
-import { PlayButton as PlayBtn } from '/@/renderer/features/shared/components/play-button';
+import styles from './library-header-bar.module.css';
+
+import { PlayButton, PlayButtonProps } from '/@/renderer/features/shared/components/play-button';
+import { Badge, BadgeProps } from '/@/shared/components/badge/badge';
+import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
+import { TextTitle } from '/@/shared/components/text-title/text-title';
 
 interface LibraryHeaderBarProps {
     children: ReactNode;
 }
 
-const HeaderContainer = styled.div`
-    display: flex;
-    flex-wrap: nowrap;
-    gap: 1rem;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    padding: 0 1rem;
-`;
-
 export const LibraryHeaderBar = ({ children }: LibraryHeaderBarProps) => {
-    return <HeaderContainer>{children}</HeaderContainer>;
+    return <div className={styles.headerContainer}>{children}</div>;
 };
 
 interface TitleProps {
     children: ReactNode;
 }
 
+const HeaderPlayButton = ({ className, ...props }: PlayButtonProps) => {
+    return (
+        <div className={styles.playButtonContainer}>
+            <PlayButton
+                className={className}
+                {...props}
+            />
+        </div>
+    );
+};
+
 const Title = ({ children }: TitleProps) => {
     return (
         <TextTitle
+            fw={700}
             order={1}
             overflow="hidden"
-            weight={700}
         >
             {children}
         </TextTitle>
     );
 };
 
-interface PlayButtonProps {
-    onClick: (args: any) => void;
-}
-
-const PlayButton = ({ onClick }: PlayButtonProps) => {
-    return (
-        <Box>
-            <PlayBtn
-                h="45px"
-                onClick={onClick}
-                w="45px"
-            />
-        </Box>
-    );
-};
-
-const Badge = styled(Paper)`
-    padding: 0.3rem 1rem;
-    font-weight: 600;
-    border-radius: 0.3rem;
-`;
-
-interface HeaderBadgeProps extends PaperProps {
+interface HeaderBadgeProps extends BadgeProps {
     isLoading?: boolean;
 }
 
@@ -70,5 +51,5 @@ const HeaderBadge = ({ children, isLoading, ...props }: HeaderBadgeProps) => {
 };
 
 LibraryHeaderBar.Title = Title;
-LibraryHeaderBar.PlayButton = PlayButton;
+LibraryHeaderBar.PlayButton = HeaderPlayButton;
 LibraryHeaderBar.Badge = HeaderBadge;