Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/checkbox/checkbox.module.css

@@ -0,0 +1,13 @@
+.input {
+    background: var(--theme-colors-surface);
+    border: 1px solid var(--theme-colors-border);
+
+    &[data-variant='filled'] {
+        background: var(--theme-colors-background);
+    }
+}
+
+.input:disabled {
+    border: 1px solid var(--theme-colors-border);
+    opacity: 0.6;
+}

src/shared/components/checkbox/checkbox.tsx

@@ -0,0 +1,22 @@
+import { Checkbox as MantineCheckbox, CheckboxProps as MantineCheckboxProps } from '@mantine/core';
+import { forwardRef } from 'react';
+
+import styles from './checkbox.module.css';
+
+interface CheckboxProps extends MantineCheckboxProps {}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+    ({ classNames, ...props }: CheckboxProps, ref) => {
+        return (
+            <MantineCheckbox
+                classNames={{
+                    input: styles.input,
+                    label: styles.label,
+                    ...classNames,
+                }}
+                ref={ref}
+                {...props}
+            />
+        );
+    },
+);