Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements
This commit is contained in:
Jeff 2025-06-24 00:04:36 -07:00 committed by GitHub
parent bea55d48a8
commit c1330d92b2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
473 changed files with 12469 additions and 11607 deletions

View file

@ -1,12 +1,20 @@
import { Box, Center, Divider, Group, Stack } from '@mantine/core';
import { RiArrowLeftSLine, RiErrorWarningLine, RiHome4Line, RiMenuFill } from 'react-icons/ri';
import { useTranslation } from 'react-i18next';
import { useNavigate, useRouteError } from 'react-router';
import { Button, DropdownMenu, Text } from '/@/renderer/components';
import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
import { AppRoute } from '/@/renderer/router/routes';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Button } from '/@/shared/components/button/button';
import { Center } from '/@/shared/components/center/center';
import { Divider } from '/@/shared/components/divider/divider';
import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
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 RouteErrorBoundary = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const error = useRouteError() as any;
console.log('error', error);
@ -24,47 +32,47 @@ const RouteErrorBoundary = () => {
};
return (
<Box bg="var(--main-bg)">
<Center sx={{ height: '100vh' }}>
<Stack sx={{ maxWidth: '50%' }}>
<div style={{ backgroundColor: 'var(--theme-colors-background)' }}>
<Center style={{ height: '100vh' }}>
<Stack style={{ maxWidth: '50%' }}>
<Group>
<Button
<ActionIcon
icon="arrowLeftS"
onClick={handleReturn}
px={10}
variant="subtle"
>
<RiArrowLeftSLine size={20} />
</Button>
<RiErrorWarningLine
color="var(--danger-color)"
size={30}
/>
<Text size="lg">Something went wrong</Text>
<Icon
fill="error"
icon="error"
size="lg"
/>
<Text size="lg">{t('error.genericError')}</Text>
</Group>
<Divider my={5} />
<Text size="sm">{error?.message}</Text>
<Group
gap="sm"
grow
spacing="sm"
>
<Button
leftIcon={<RiHome4Line />}
leftSection={<Icon icon="home" />}
onClick={handleHome}
size="md"
sx={{ flex: 0.5 }}
style={{ flex: 0.5 }}
variant="default"
>
Go home
{t('page.home.title')}
</Button>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
leftIcon={<RiMenuFill />}
leftSection={<Icon icon="menu" />}
size="md"
sx={{ flex: 0.5 }}
style={{ flex: 0.5 }}
variant="default"
>
Menu
{t('common.menu')}
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
@ -78,12 +86,12 @@ const RouteErrorBoundary = () => {
size="md"
variant="filled"
>
Reload
{t('common.reload')}
</Button>
</Group>
</Stack>
</Center>
</Box>
</div>
);
};