mirror of
https://github.com/antebudimir/feishin.git
synced 2025-12-31 10:03:33 +00:00
Migrate to Mantine v8 and Design Changes (#961)
* mantine v8 migration * various design changes and improvements
This commit is contained in:
parent
bea55d48a8
commit
c1330d92b2
473 changed files with 12469 additions and 11607 deletions
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue