Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/features/action-required/components/action-required-container.tsx

@@ -1,8 +1,9 @@
-import { Group, Stack } from '@mantine/core';
 import { ReactNode } from 'react';
-import { RiAlertFill } from 'react-icons/ri';
 
-import { Text } from '/@/renderer/components';
+import { Group } from '/@/shared/components/group/group';
+import { Icon } from '/@/shared/components/icon/icon';
+import { Stack } from '/@/shared/components/stack/stack';
+import { Text } from '/@/shared/components/text/text';
 
 interface ActionRequiredContainerProps {
     children: ReactNode;
@@ -10,15 +11,16 @@ interface ActionRequiredContainerProps {
 }
 
 export const ActionRequiredContainer = ({ children, title }: ActionRequiredContainerProps) => (
-    <Stack sx={{ cursor: 'default', maxWidth: '700px' }}>
+    <Stack style={{ cursor: 'default', maxWidth: '700px' }}>
         <Group>
-            <RiAlertFill
-                color="var(--warning-color)"
-                size={30}
+            <Icon
+                fill="warn"
+                icon="warn"
+                size="lg"
             />
             <Text
                 size="xl"
-                sx={{ textTransform: 'uppercase' }}
+                style={{ textTransform: 'uppercase' }}
             >
                 {title}
             </Text>