Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/flex/flex.tsx

@@ -0,0 +1,17 @@
+import { Flex as MantineFlex, FlexProps as MantineFlexProps } from '@mantine/core';
+import { forwardRef } from 'react';
+
+export interface FlexProps extends MantineFlexProps {}
+
+export const Flex = forwardRef<HTMLDivElement, FlexProps>(({ children, ...props }, ref) => {
+    return (
+        <MantineFlex
+            classNames={{ ...props.classNames }}
+            ref={ref}
+            style={{ ...props.style }}
+            {...props}
+        >
+            {children}
+        </MantineFlex>
+    );
+});