Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/date-time-picker/date-time-picker.module.css

@@ -0,0 +1,19 @@
+.root {
+    & [data-disabled='true'] {
+        opacity: 0.6;
+    }
+}
+
+.input {
+    color: var(--theme-colors-surface-foreground);
+    background: var(--theme-colors-surface);
+    border: 1px solid transparent;
+}
+
+.section {
+    color: var(--theme-colors-foreground-muted);
+}
+
+.required {
+    color: var(--theme-colors-state-error);
+}

src/shared/components/date-time-picker/date-time-picker.tsx

@@ -0,0 +1,37 @@
+import type { DateTimePickerProps as MantineDateTimePickerProps } from '@mantine/dates';
+
+import { DateTimePicker as MantineDateTimePicker } from '@mantine/dates';
+
+import styles from './date-time-picker.module.css';
+
+interface DateTimePickerProps extends MantineDateTimePickerProps {
+    maxWidth?: number | string;
+    width?: number | string;
+}
+
+export const DateTimePicker = ({
+    classNames,
+    maxWidth,
+    popoverProps,
+    size = 'sm',
+    style,
+    width,
+    ...props
+}: DateTimePickerProps) => {
+    return (
+        <MantineDateTimePicker
+            classNames={{
+                input: styles.input,
+                label: styles.label,
+                required: styles.required,
+                root: styles.root,
+                section: styles.section,
+                ...classNames,
+            }}
+            popoverProps={{ withinPortal: true, ...popoverProps }}
+            size={size}
+            style={{ maxWidth, width, ...style }}
+            {...props}
+        />
+    );
+};