Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/slider/slider.module.css

@@ -0,0 +1,17 @@
+.track {
+    height: 0.5rem;
+}
+
+.thumb {
+    background: var(--theme-colors-foreground);
+}
+
+.label {
+    max-width: 200px;
+    padding: var(--theme-spacing-sm) var(--theme-spacing-md);
+    font-size: var(--theme-font-size-md);
+    font-weight: 550;
+    color: var(--theme-colors-surface-foreground);
+    background: var(--theme-colors-surface);
+    box-shadow: 4px 4px 10px 0 rgb(0 0 0 / 20%);
+}

src/shared/components/slider/slider.tsx

@@ -0,0 +1,25 @@
+import type { SliderProps as MantineSliderProps } from '@mantine/core';
+
+import { Slider as MantineSlider } from '@mantine/core';
+
+import styles from './slider.module.css';
+
+export interface SliderProps extends MantineSliderProps {}
+
+export const Slider = ({ classNames, style, ...props }: SliderProps) => {
+    return (
+        <MantineSlider
+            classNames={{
+                bar: styles.bar,
+                label: styles.label,
+                thumb: styles.thumb,
+                track: styles.track,
+                ...classNames,
+            }}
+            style={{
+                ...style,
+            }}
+            {...props}
+        />
+    );
+};