Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/hover-card/hover-card.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/hover-card/hover-card.tsx

@@ -0,0 +1,25 @@
+import {
+    HoverCard as MantineHoverCard,
+    HoverCardProps as MantineHoverCardProps,
+} from '@mantine/core';
+
+import styles from './hover-card.module.css';
+
+interface HoverCardProps extends MantineHoverCardProps {}
+
+export const HoverCard = ({ children, classNames, ...props }: HoverCardProps) => {
+    return (
+        <MantineHoverCard
+            classNames={{
+                dropdown: styles.dropdown,
+                ...classNames,
+            }}
+            {...props}
+        >
+            {children}
+        </MantineHoverCard>
+    );
+};
+
+HoverCard.Target = MantineHoverCard.Target;
+HoverCard.Dropdown = MantineHoverCard.Dropdown;