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/pill/pill.module.css

@@ -0,0 +1,32 @@
+.label {
+  font-family: var(--theme-content-font-family);
+}
+
+.label.sm {
+  font-size: var(--theme-font-size-sm);
+}
+
+.label.md {
+  font-size: var(--theme-font-size-md);
+}
+
+.label.lg {
+  font-size: var(--theme-font-size-lg);
+}
+
+.label.xl {
+  font-size: var(--theme-font-size-xl);
+}
+
+.label.xs {
+  font-size: var(--theme-font-size-xs);
+}
+
+
+.remove {
+    transition: color 0.1s ease-in-out;
+
+    &:hover {
+        color: var(--theme-colors-foreground-muted);
+    }
+}

src/shared/components/pill/pill.tsx

@@ -0,0 +1,29 @@
+import { Pill as MantinePill, PillProps as MantinePillProps } from '@mantine/core';
+import clsx from 'clsx';
+
+import styles from './pill.module.css';
+
+export const Pill = ({ children, size = 'md', ...props }: MantinePillProps) => {
+    return (
+        <MantinePill
+            classNames={{
+                label: clsx({
+                    [styles.label]: true,
+                    [styles.lg]: size === 'lg',
+                    [styles.md]: size === 'md',
+                    [styles.sm]: size === 'sm',
+                    [styles.xl]: size === 'xl',
+                    [styles.xs]: size === 'xs',
+                }),
+                remove: styles.remove,
+                root: styles.root,
+            }}
+            size="md"
+            {...props}
+        >
+            {children}
+        </MantinePill>
+    );
+};
+
+Pill.Group = MantinePill.Group;