Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

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

@@ -0,0 +1,27 @@
+.root {
+    color: var(--theme-colors-foreground);
+    transition: color 0.2s ease-in-out;
+}
+
+.muted {
+    color: var(--theme-colors-foreground-muted);
+}
+
+.link {
+    cursor: pointer;
+}
+
+.link:hover {
+    color: var(--theme-colors-foreground);
+    text-decoration: underline;
+}
+
+.no-select {
+    user-select: none;
+}
+
+.overflow-hidden {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

src/shared/components/text-title/text-title.tsx

@@ -0,0 +1,49 @@
+import type { TitleProps as MantineTitleProps } from '@mantine/core';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+import { createPolymorphicComponent, Title as MantineHeader } from '@mantine/core';
+import clsx from 'clsx';
+
+import styles from './text-title.module.css';
+
+type MantineTextTitleDivProps = ComponentPropsWithoutRef<'div'> & MantineTitleProps;
+
+interface TextTitleProps extends MantineTextTitleDivProps {
+    children?: ReactNode;
+    isLink?: boolean;
+    isMuted?: boolean;
+    isNoSelect?: boolean;
+    overflow?: 'hidden' | 'visible';
+    to?: string;
+    weight?: number;
+}
+
+const _TextTitle = ({
+    children,
+    className,
+    isLink,
+    isMuted,
+    isNoSelect,
+    overflow,
+    ...rest
+}: TextTitleProps) => {
+    return (
+        <MantineHeader
+            className={clsx(
+                styles.root,
+                {
+                    [styles.link]: isLink,
+                    [styles.muted]: isMuted,
+                    [styles.noSelect]: isNoSelect,
+                    [styles.overflowHidden]: overflow === 'hidden' && !rest.lineClamp,
+                },
+                className,
+            )}
+            {...rest}
+        >
+            {children}
+        </MantineHeader>
+    );
+};
+
+export const TextTitle = createPolymorphicComponent<'div', TextTitleProps>(_TextTitle);