Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/switch/switch.module.css

@@ -0,0 +1,16 @@
+.thumb {
+    background: var(--theme-colors-foreground);
+}
+
+.track {
+    background-color: var(--theme-colors-surface);
+    border: 1px solid var(--theme-colors-border);
+
+    input:checked + & {
+        background-color: var(--theme-colors-primary-filled);
+
+        & > .thumb {
+            background: var(--theme-colors-primary-contrast);
+        }
+    }
+}

src/shared/components/switch/switch.tsx

@@ -0,0 +1,23 @@
+import type { SwitchProps as MantineSwitchProps } from '@mantine/core';
+
+import { Switch as MantineSwitch } from '@mantine/core';
+
+import styles from './switch.module.css';
+
+type SwitchProps = MantineSwitchProps;
+
+export const Switch = ({ classNames, ...props }: SwitchProps) => {
+    return (
+        <MantineSwitch
+            classNames={{
+                input: styles.input,
+                root: styles.root,
+                thumb: styles.thumb,
+                track: styles.track,
+                ...classNames,
+            }}
+            withThumbIndicator={false}
+            {...props}
+        />
+    );
+};