add logo and change text for non-local;

This commit is contained in:
Mary Hipp 2024-05-22 11:05:18 -04:00 committed by psychedelicious
parent dd1d5bdb25
commit 106674175c
2 changed files with 11 additions and 3 deletions

View File

@ -2,6 +2,7 @@
"accessibility": { "accessibility": {
"about": "About", "about": "About",
"createIssue": "Create Issue", "createIssue": "Create Issue",
"submitSupportTicket": "Submit Support Ticket",
"invokeProgressBar": "Invoke progress bar", "invokeProgressBar": "Invoke progress bar",
"menu": "Menu", "menu": "Menu",
"mode": "Mode", "mode": "Mode",

View File

@ -1,7 +1,8 @@
import { Button, Flex, Heading, Link, Text } from '@invoke-ai/ui-library'; import { Button, Flex, Heading, Image, Link, Text } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { toast } from 'features/toast/toast'; import { toast } from 'features/toast/toast';
import newGithubIssueUrl from 'new-github-issue-url'; import newGithubIssueUrl from 'new-github-issue-url';
import InvokeLogoYellow from 'public/assets/images/invoke-symbol-ylw-lrg.svg';
import { memo, useCallback, useMemo } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiArrowCounterClockwiseBold, PiArrowSquareOutBold, PiCopyBold } from 'react-icons/pi'; import { PiArrowCounterClockwiseBold, PiArrowSquareOutBold, PiCopyBold } from 'react-icons/pi';
@ -41,7 +42,11 @@ const AppErrorBoundaryFallback = ({ error, resetErrorBoundary }: Props) => {
return ( return (
<Flex layerStyle="body" w="100vw" h="100vh" alignItems="center" justifyContent="center" p={4}> <Flex layerStyle="body" w="100vw" h="100vh" alignItems="center" justifyContent="center" p={4}>
<Flex layerStyle="first" flexDir="column" borderRadius="base" justifyContent="center" gap={8} p={16}> <Flex layerStyle="first" flexDir="column" borderRadius="base" justifyContent="center" gap={8} p={16}>
<Heading>{t('common.somethingWentWrong')}</Heading> <Flex alignItems="center" gap="2">
<Image src={InvokeLogoYellow} alt="invoke-logo" w="24px" h="24px" minW="24px" minH="24px" userSelect="none" />
<Heading fontSize="2xl">{t('common.somethingWentWrong')}</Heading>
</Flex>
<Flex <Flex
layerStyle="second" layerStyle="second"
px={8} px={8}
@ -63,7 +68,9 @@ const AppErrorBoundaryFallback = ({ error, resetErrorBoundary }: Props) => {
{t('common.copyError')} {t('common.copyError')}
</Button> </Button>
<Link href={url} isExternal> <Link href={url} isExternal>
<Button leftIcon={<PiArrowSquareOutBold />}>{t('accessibility.createIssue')}</Button> <Button leftIcon={<PiArrowSquareOutBold />}>
{isLocal ? t('accessibility.createIssue') : t('accessibility.submitSupportTicket')}
</Button>
</Link> </Link>
</Flex> </Flex>
</Flex> </Flex>