Refactor add to playlist modal (#1236)

* Refactor add to playlist modal

* redesign base modal component, add ModalButton component

* improve visibility of filled button focus

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>

src/shared/components/modal/modal.module.css

@@ -1,17 +1,26 @@
-.title {
-    font-size: var(--theme-font-size-lg);
-    font-weight: 700;
-}
-
-.body {
-    padding: var(--theme-spacing-sm) var(--theme-spacing-md);
-}
-
 .header {
+    display: flex;
+    justify-content: center;
+    padding: none;
     background: var(--theme-colors-background);
-    border-bottom: none;
+    border-radius: 0;
+}
+
+.header h2 {
+    width: 100%;
+    font-size: var(--theme-font-size-2xl);
+    font-weight: 700;
+    user-select: none;
 }
 
 .content {
+    overflow: hidden;
     background: var(--theme-colors-background);
+    border: 2px solid var(--theme-colors-border);
+}
+
+.close {
+    position: absolute;
+    top: var(--theme-spacing-md);
+    right: var(--theme-spacing-md);
 }

src/shared/components/modal/modal.tsx

@@ -12,6 +12,7 @@ import { Button } from '/@/shared/components/button/button';
 import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
+import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
 import { Stack } from '/@/shared/components/stack/stack';
 
 export interface ModalProps extends Omit<MantineModalProps, 'onClose'> {
@@ -113,15 +114,23 @@ export const ModalsProvider = ({ children, ...rest }: ModalsProviderProps) => {
                 centered: true,
                 classNames: {
                     body: styles.body,
+                    close: styles.close,
                     content: styles.content,
                     header: styles.header,
+                    inner: styles.inner,
+                    overlay: styles.overlay,
                     root: styles.root,
                     title: styles.title,
                 },
                 closeButtonProps: {
-                    icon: <Icon icon="x" />,
+                    icon: <Icon icon="x" size="xl" />,
                 },
-                radius: 'lg',
+                overlayProps: {
+                    backgroundOpacity: 0.8,
+                    blur: 4,
+                },
+                radius: 'xl',
+                scrollAreaComponent: ScrollArea,
                 transitionProps: {
                     duration: 300,
                     exitDuration: 300,

src/shared/components/modal/model-shared.tsx

@@ -0,0 +1,9 @@
+import { Button, ButtonProps } from '/@/shared/components/button/button';
+
+export const ModalButton = ({ children, ...props }: ButtonProps) => {
+    return (
+        <Button px="2xl" uppercase variant="subtle" {...props}>
+            {children}
+        </Button>
+    );
+};