Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/features/action-required/routes/invalid-route.tsx

@@ -1,35 +1,41 @@
-import { Center, Group, Stack } from '@mantine/core';
-import { RiQuestionLine } from 'react-icons/ri';
+import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { Button, Text } from '/@/renderer/components';
 import { AnimatedPage } from '/@/renderer/features/shared';
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { Center } from '/@/shared/components/center/center';
+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';
 
 const InvalidRoute = () => {
+    const { t } = useTranslation();
     const navigate = useNavigate();
     const location = useLocation();
 
     return (
         <AnimatedPage>
-            <Center sx={{ height: '100%', width: '100%' }}>
+            <Center style={{ height: '100%', width: '100%' }}>
                 <Stack>
                     <Group
-                        noWrap
-                        position="center"
+                        justify="center"
+                        wrap="nowrap"
                     >
-                        <RiQuestionLine
-                            color="var(--warning-color)"
-                            size={30}
+                        <Icon
+                            color="warn"
+                            icon="error"
                         />
-                        <Text size="xl">Page not found</Text>
+                        <Text size="xl">
+                            {t('error.apiRouteError', { postProcess: 'sentenceCase' })}
+                        </Text>
                     </Group>
                     <Text>{location.pathname}</Text>
-                    <Button
+                    <ActionIcon
+                        icon="arrowLeftS"
                         onClick={() => navigate(-1)}
                         variant="filled"
-                    >
-                        Go back
-                    </Button>
+                    />
                 </Stack>
             </Center>
         </AnimatedPage>