Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/pagination/pagination.module.css

@@ -0,0 +1,31 @@
+.control {
+    color: var(--theme-btn-default-fg);
+    background-color: var(--theme-btn-default-bg);
+    border: none;
+    transition:
+        background 0.2s ease-in-out,
+        color 0.2s ease-in-out;
+
+    &[data-active] {
+        color: var(--theme-btn-primary-fg);
+        background-color: var(--theme-btn-primary-bg);
+    }
+
+    &[data-dots] {
+        background-color: transparent;
+    }
+
+    &:hover {
+        color: var(--theme-btn-default-fg-hover);
+        background-color: var(--theme-btn-default-bg-hover);
+
+        &[data-active] {
+            color: var(--theme-btn-primary-fg-hover);
+            background-color: var(--theme-btn-primary-bg-hover);
+        }
+
+        &[data-dots] {
+            background-color: transparent;
+        }
+    }
+}

src/shared/components/pagination/pagination.tsx

@@ -0,0 +1,24 @@
+import {
+    Pagination as MantinePagination,
+    PaginationProps as MantinePaginationProps,
+} from '@mantine/core';
+
+import styles from './pagination.module.css';
+
+interface PaginationProps extends MantinePaginationProps {}
+
+export const Pagination = ({ classNames, style, ...props }: PaginationProps) => {
+    return (
+        <MantinePagination
+            classNames={{
+                control: styles.control,
+                ...classNames,
+            }}
+            radius="xl"
+            style={{
+                ...style,
+            }}
+            {...props}
+        />
+    );
+};