Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/dialog/dialog.module.css

@@ -0,0 +1,5 @@
+.root {
+    color: var(--theme-colors-surface-foreground);
+    background: var(--theme-colors-surface);
+    box-shadow: 2px 2px 10px 2px rgb(0 0 0 / 40%);
+}

src/shared/components/dialog/dialog.tsx

@@ -0,0 +1,19 @@
+import type { DialogProps as MantineDialogProps } from '@mantine/core';
+
+import { Dialog as MantineDialog } from '@mantine/core';
+
+import styles from './dialog.module.css';
+
+interface DialogProps extends MantineDialogProps {}
+
+export const Dialog = ({ classNames, style, ...props }: DialogProps) => {
+    return (
+        <MantineDialog
+            classNames={{ root: styles.root, ...classNames }}
+            style={{
+                ...style,
+            }}
+            {...props}
+        />
+    );
+};