From 582deef404e3a9e4a7706dca0470ef00fea3ad5a Mon Sep 17 00:00:00 2001 From: simeng-li Date: Tue, 21 Feb 2023 16:10:14 +0800 Subject: [PATCH] style(ui): replace error page icon (#3174) --- packages/ui/src/assets/icons/empty_state.svg | 61 +++++++++++++++++ .../ui/src/assets/icons/empty_state_dark.svg | 58 ++++++++++++++++ packages/ui/src/assets/icons/error.svg | 66 ------------------- .../ui/src/pages/ErrorPage/index.module.scss | 1 + packages/ui/src/pages/ErrorPage/index.tsx | 8 ++- 5 files changed, 126 insertions(+), 68 deletions(-) create mode 100644 packages/ui/src/assets/icons/empty_state.svg create mode 100644 packages/ui/src/assets/icons/empty_state_dark.svg delete mode 100644 packages/ui/src/assets/icons/error.svg diff --git a/packages/ui/src/assets/icons/empty_state.svg b/packages/ui/src/assets/icons/empty_state.svg new file mode 100644 index 000000000..d312b51f0 --- /dev/null +++ b/packages/ui/src/assets/icons/empty_state.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/ui/src/assets/icons/empty_state_dark.svg b/packages/ui/src/assets/icons/empty_state_dark.svg new file mode 100644 index 000000000..eba64c3e8 --- /dev/null +++ b/packages/ui/src/assets/icons/empty_state_dark.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/ui/src/assets/icons/error.svg b/packages/ui/src/assets/icons/error.svg deleted file mode 100644 index 6d22a8ae7..000000000 --- a/packages/ui/src/assets/icons/error.svg +++ /dev/null @@ -1,66 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/ui/src/pages/ErrorPage/index.module.scss b/packages/ui/src/pages/ErrorPage/index.module.scss index 5275b9dc0..1f5be4472 100644 --- a/packages/ui/src/pages/ErrorPage/index.module.scss +++ b/packages/ui/src/pages/ErrorPage/index.module.scss @@ -11,6 +11,7 @@ } .title { + margin-top: _.unit(8); text-align: center; } diff --git a/packages/ui/src/pages/ErrorPage/index.tsx b/packages/ui/src/pages/ErrorPage/index.tsx index 213b74340..1387bad57 100644 --- a/packages/ui/src/pages/ErrorPage/index.tsx +++ b/packages/ui/src/pages/ErrorPage/index.tsx @@ -1,10 +1,13 @@ +import { useContext } from 'react'; import type { TFuncKey } from 'react-i18next'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; -import ErrorImage from '@/assets/icons/error.svg'; +import EmptyState from '@/assets/icons/empty_state.svg'; +import EmptyStateDark from '@/assets/icons/empty_state_dark.svg'; import Button from '@/components/Button'; import NavBar from '@/components/NavBar'; +import { PageContext } from '@/hooks/use-page-context'; import * as styles from './index.module.scss'; @@ -17,6 +20,7 @@ type Props = { const ErrorPage = ({ title = 'description.not_found', message, rawMessage }: Props) => { const { t } = useTranslation(); const navigate = useNavigate(); + const { theme } = useContext(PageContext); const errorMessage = rawMessage ?? (message && t(message)); @@ -24,7 +28,7 @@ const ErrorPage = ({ title = 'description.not_found', message, rawMessage }: Pro
- + {theme === 'light' ? : }
{t(title)}
{errorMessage &&
{String(errorMessage)}
}