Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/popover/popover.module.css

@@ -0,0 +1,7 @@
+.dropdown {
+    padding: var(--theme-spacing-xs);
+    color: var(--theme-colors-surface-foreground);
+    background: var(--theme-colors-surface);
+    border: 1px solid var(--theme-colors-border);
+    filter: drop-shadow(0 0 5px rgb(0 0 0 / 50%));
+}

src/shared/components/popover/popover.tsx

@@ -0,0 +1,29 @@
+import type {
+    PopoverDropdownProps as MantinePopoverDropdownProps,
+    PopoverProps as MantinePopoverProps,
+} from '@mantine/core';
+
+import { Popover as MantinePopover } from '@mantine/core';
+
+import styles from './popover.module.css';
+
+export interface PopoverDropdownProps extends MantinePopoverDropdownProps {}
+export interface PopoverProps extends MantinePopoverProps {}
+
+export const Popover = ({ children, ...props }: PopoverProps) => {
+    return (
+        <MantinePopover
+            classNames={{
+                dropdown: styles.dropdown,
+            }}
+            transitionProps={{ transition: 'fade' }}
+            withinPortal
+            {...props}
+        >
+            {children}
+        </MantinePopover>
+    );
+};
+
+Popover.Target = MantinePopover.Target;
+Popover.Dropdown = MantinePopover.Dropdown;