Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/spinner/spinner.module.css

@@ -0,0 +1,18 @@
+.container {
+    width: 100%;
+    height: 100%;
+}
+
+.icon {
+    animation: rotating 1s ease-in-out infinite;
+}
+
+@keyframes rotating {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}

src/shared/components/spinner/spinner.tsx

@@ -0,0 +1,35 @@
+import { Center } from '@mantine/core';
+import { IconBaseProps } from 'react-icons';
+import { RiLoader5Fill } from 'react-icons/ri';
+
+import styles from './spinner.module.css';
+
+interface SpinnerProps extends IconBaseProps {
+    color?: string;
+    container?: boolean;
+    size?: number;
+}
+
+export const SpinnerIcon = RiLoader5Fill;
+
+export const Spinner = ({ ...props }: SpinnerProps) => {
+    if (props.container) {
+        return (
+            <Center className={styles.container}>
+                <SpinnerIcon
+                    className={styles.icon}
+                    color={props.color}
+                    size={props.size}
+                />
+            </Center>
+        );
+    }
+
+    return (
+        <SpinnerIcon
+            className={styles.icon}
+            color={props.color}
+            size={props.size}
+        />
+    );
+};