Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/badge/badge.module.css

@@ -0,0 +1,13 @@
+.root[data-variant='filled'] {
+    background: var(--theme-colors-primary-filled);
+}
+
+.root[data-variant='outline'] {
+    background: transparent;
+}
+
+.root {
+    padding: var(--theme-spacing-xs) var(--theme-spacing-sm);
+    font-weight: 500;
+    background: var(--theme-colors-surface);
+}

src/shared/components/badge/badge.tsx

@@ -0,0 +1,28 @@
+import {
+    ElementProps,
+    Badge as MantineBadge,
+    BadgeProps as MantineBadgeProps,
+} from '@mantine/core';
+
+import styles from './badge.module.css';
+
+import { createPolymorphicComponent } from '/@/shared/utils/create-polymorphic-component';
+
+export interface BadgeProps
+    extends ElementProps<'div', keyof MantineBadgeProps>,
+        MantineBadgeProps {}
+
+const _Badge = ({ children, classNames, variant = 'default', ...props }: BadgeProps) => {
+    return (
+        <MantineBadge
+            classNames={{ root: styles.root, ...classNames }}
+            radius="md"
+            variant={variant}
+            {...props}
+        >
+            {children}
+        </MantineBadge>
+    );
+};
+
+export const Badge = createPolymorphicComponent<'button', BadgeProps>(_Badge);