Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/tabs/tabs.module.css

@@ -0,0 +1,37 @@
+.root {
+    height: 100%;
+}
+
+.list {
+    padding-right: var(--theme-spacing-md);
+
+    &::before {
+        border: 1px solid var(--theme-colors-border);
+    }
+}
+
+.tab {
+    padding: var(--theme-spacing-md);
+    font-weight: 500;
+    color: var(--theme-btn-subtle-fg);
+    transition: color 0.2s ease-in-out;
+
+    &:hover {
+        color: var(--theme-btn-subtle-fg-hover);
+        background: var(--theme-btn-subtle-bg-hover);
+    }
+}
+
+.panel {
+    padding: var(--theme-spacing-lg) var(--theme-spacing-sm);
+}
+
+.tab[data-active] {
+    color: var(--theme-btn-subtle-fg);
+    background: none;
+    border-color: var(--theme-colors-primary-filled);
+
+    &:hover {
+        background: none;
+    }
+}

src/shared/components/tabs/tabs.tsx

@@ -0,0 +1,34 @@
+import { Tabs as MantineTabs, TabsProps as MantineTabsProps, TabsPanelProps } from '@mantine/core';
+import { Suspense } from 'react';
+
+import styles from './tabs.module.css';
+
+type TabsProps = MantineTabsProps;
+
+export const Tabs = ({ children, ...props }: TabsProps) => {
+    return (
+        <MantineTabs
+            classNames={{
+                list: styles.list,
+                panel: styles.panel,
+                root: styles.root,
+                tab: styles.tab,
+            }}
+            {...props}
+        >
+            {children}
+        </MantineTabs>
+    );
+};
+
+const Panel = ({ children, ...props }: TabsPanelProps) => {
+    return (
+        <MantineTabs.Panel {...props}>
+            <Suspense fallback={<></>}>{children}</Suspense>
+        </MantineTabs.Panel>
+    );
+};
+
+Tabs.List = MantineTabs.List;
+Tabs.Panel = Panel;
+Tabs.Tab = MantineTabs.Tab;