Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/multi-select/multi-select.module.css

@@ -0,0 +1,59 @@
+.root {
+    & [data-disabled='true'] {
+        opacity: 0.6;
+    }
+}
+
+.label {
+    margin-bottom: var(--theme-spacing-sm);
+}
+
+.dropdown {
+    padding: var(--theme-spacing-xs);
+    color: var(--theme-colors-surface-foreground);
+    background: var(--theme-colors-surface);
+    border: 1px solid var(--theme-colors-border);
+}
+
+.input {
+    width: 100%;
+    border: 1px solid transparent;
+
+    &[data-variant='default'] {
+        color: var(--theme-colors-surface-foreground);
+        background: var(--theme-colors-surface);
+    }
+
+    &[data-variant='filled'] {
+        color: var(--theme-colors-foreground);
+        background: var(--theme-colors-background);
+    }
+}
+
+.input:focus,
+.input:focus-visible {
+    border-color: lighten(var(--theme-colors-border), 10%);
+}
+
+.option {
+    position: relative;
+    padding: var(--theme-spacing-sm) var(--theme-spacing-md);
+
+    &[data-checked='true'] {
+        &::before {
+            position: absolute;
+            top: 50%;
+            left: 2px;
+            width: 4px;
+            height: 50%;
+            content: '';
+            background-color: var(--theme-colors-primary-filled);
+            border-radius: var(--theme-border-radius-xl);
+            transform: translateY(-50%);
+        }
+    }
+}
+
+.option:hover {
+    background: lighten(var(--theme-colors-surface), 5%);
+}

src/shared/components/multi-select/multi-select.tsx

@@ -0,0 +1,36 @@
+import {
+    MultiSelect as MantineMultiSelect,
+    MultiSelectProps as MantineMultiSelectProps,
+} from '@mantine/core';
+import { CSSProperties } from 'react';
+
+import styles from './multi-select.module.css';
+
+export interface MultiSelectProps extends MantineMultiSelectProps {
+    maxWidth?: CSSProperties['maxWidth'];
+    width?: CSSProperties['width'];
+}
+
+export const MultiSelect = ({
+    classNames,
+    maxWidth,
+    variant = 'default',
+    width,
+    ...props
+}: MultiSelectProps) => {
+    return (
+        <MantineMultiSelect
+            classNames={{
+                dropdown: styles.dropdown,
+                input: styles.input,
+                option: styles.option,
+                root: styles.root,
+                ...classNames,
+            }}
+            style={{ maxWidth, width }}
+            variant={variant}
+            withCheckIcon={false}
+            {...props}
+        />
+    );
+};