Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/text/text.module.css

@@ -0,0 +1,28 @@
+.root {
+    font-family: var(--font-family);
+    color: var(--theme-colors-foreground);
+    user-select: auto;
+}
+
+.root.muted {
+    color: var(--theme-colors-foreground-muted);
+}
+
+.root.link {
+    cursor: pointer;
+}
+
+.root.link:hover {
+    color: var(--theme-colors-foreground);
+    text-decoration: underline;
+}
+
+.root.overflow-hidden {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.root.no-select {
+    user-select: none;
+}

src/shared/components/text/text.tsx

@@ -0,0 +1,54 @@
+import { Text as MantineText, TextProps as MantineTextProps } from '@mantine/core';
+import clsx from 'clsx';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+import styles from './text.module.css';
+
+import { createPolymorphicComponent } from '/@/shared/utils/create-polymorphic-component';
+
+export interface TextProps extends MantineTextDivProps {
+    children?: ReactNode;
+    font?: Font;
+    isLink?: boolean;
+    isMuted?: boolean;
+    isNoSelect?: boolean;
+    overflow?: 'hidden' | 'visible';
+    to?: string;
+    weight?: number;
+}
+
+type Font = 'Epilogue' | 'Gotham' | 'Inter' | 'Poppins';
+
+type MantineTextDivProps = ComponentPropsWithoutRef<'div'> & MantineTextProps;
+
+export const _Text = ({
+    children,
+    font,
+    isLink,
+    isMuted,
+    isNoSelect,
+    overflow,
+    ...rest
+}: TextProps) => {
+    return (
+        <MantineText
+            className={clsx(styles.root, {
+                [styles.link]: isLink,
+                [styles.muted]: isMuted,
+                [styles.noSelect]: isNoSelect,
+                [styles.overflowHidden]: overflow === 'hidden',
+            })}
+            component="div"
+            style={
+                {
+                    '--font-family': font,
+                } as React.CSSProperties
+            }
+            {...rest}
+        >
+            {children}
+        </MantineText>
+    );
+};
+
+export const Text = createPolymorphicComponent<'div', TextProps>(_Text);