Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 04:18:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(core): error page 500 status dark mode (#5180)

Browse Source 
close #5155
This commit is contained in:
Joooye_34
2023-12-05 10:40:48 +00:00
parent 246fbd8d4f
commit 48f4d6a06c
3 changed files with 66 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
packages/frontend/core/src/components/affine/affine-error-boundary/error-assets/dark-500-status.assets.svg Normal file
View File

@@ -0,0 +1,43 @@
<svg width="420" height="208" viewBox="0 0 420 208" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.744 133.603C13.7034 140.028 15.0861 145.722 17.8923 150.683C20.6984 155.645 24.5823 159.529 29.5439 162.335C34.5055 165.141 40.2195 166.544 46.6858 166.544C53.8842 166.544 60.2692 164.775 65.8409 161.237C71.4125 157.699 75.7844 152.88 78.9566 146.779C82.1288 140.679 83.7352 133.765 83.7758 126.038C83.8165 117.986 82.1084 110.97 78.6516 104.992C75.2354 98.973 70.6805 94.3164 64.9868 91.0222C59.3338 87.6874 53.1522 86.02 46.4418 86.02C41.4395 86.02 36.8643 86.8943 32.7161 88.6431C28.5678 90.3512 24.928 92.649 21.7965 95.5365H21.3084L27.6528 43.8057H79.6276" stroke="#EAEAEA" stroke-width="1.71785"/>
<ellipse cx="80.6482" cy="43.7108" rx="3.34449" ry="3.34069" fill="#EAEAEA"/>
<ellipse cx="13.6516" cy="133.897" rx="3.34449" ry="3.34069" fill="#EAEAEA"/>
<ellipse cx="27.3948" cy="43.7108" rx="3.34449" ry="3.34069" fill="#EAEAEA"/>
<ellipse cx="21.3821" cy="95.245" rx="3.34449" ry="3.34069" fill="#EAEAEA"/>
<path d="M129.77 50.7832L236.585 157.478" stroke="#727272" stroke-width="0.858927"/>
<rect x="129.799" y="50.8133" width="106.757" height="106.635" stroke="#727272" stroke-width="0.858927"/>
<path d="M236.261 104.331C236.738 101.203 236.985 98.0005 236.985 94.7401C236.985 59.8702 208.685 31.6025 173.776 31.6025C138.866 31.6025 110.566 59.8702 110.566 94.7401C110.566 129.61 138.866 157.878 173.776 157.878C176.901 157.878 179.973 157.651 182.977 157.213" stroke="#727272" stroke-width="0.858927"/>
<path d="M182.978 157.154C186.108 157.63 189.315 157.878 192.579 157.878C227.489 157.878 255.788 129.61 255.788 94.7401C255.788 59.8702 227.489 31.6025 192.579 31.6025C157.669 31.6025 129.37 59.8702 129.37 94.7401C129.37 98.0005 129.617 101.203 130.094 104.331" stroke="#727272" stroke-width="0.858927"/>
<path d="M129.634 104.33C129.196 107.331 128.969 110.4 128.969 113.521C128.969 148.391 157.269 176.659 192.179 176.659C227.088 176.659 255.388 148.391 255.388 113.521C255.388 78.6514 227.088 50.3838 192.179 50.3838C189.053 50.3838 185.981 50.6103 182.977 51.0479" stroke="#727272" stroke-width="0.858927"/>
<path d="M182.977 51.0479C179.973 50.6103 176.901 50.3838 173.776 50.3838C138.866 50.3838 110.566 78.6514 110.566 113.521C110.566 148.391 138.866 176.659 173.776 176.659C208.685 176.659 236.985 148.391 236.985 113.521C236.985 110.4 236.758 107.331 236.32 104.33" stroke="#727272" stroke-width="0.858927"/>
<path d="M236.585 50.7832L129.77 157.478" stroke="#727272" stroke-width="0.858927"/>
<path d="M129.37 104.33H236.585" stroke="#727272" stroke-width="0.858927"/>
<path d="M182.978 50.3838V157.877" stroke="#727272" stroke-width="0.858927"/>
<ellipse cx="236.585" cy="104.331" rx="3.20048" ry="3.19684" fill="#EAEAEA"/>
<ellipse cx="236.585" cy="50.7838" rx="3.20048" ry="3.19684" fill="#EAEAEA"/>
<ellipse cx="236.585" cy="157.878" rx="3.20048" ry="3.19684" fill="#EAEAEA"/>
<ellipse cx="129.77" cy="157.878" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
<ellipse cx="182.977" cy="104.331" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
<ellipse cx="182.977" cy="50.7838" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
<ellipse cx="129.77" cy="104.331" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
<ellipse cx="129.77" cy="50.7838" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
<ellipse cx="182.977" cy="157.878" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
<path d="M290.381 50.7812L397.197 157.476" stroke="#727272" stroke-width="0.858927"/>
<rect x="290.41" y="50.8113" width="106.757" height="106.635" stroke="#727272" stroke-width="0.858927"/>
<path d="M396.872 104.329C397.349 101.201 397.596 97.9986 397.596 94.7381C397.596 59.8682 369.297 31.6006 334.387 31.6006C299.478 31.6006 271.178 59.8682 271.178 94.7381C271.178 129.608 299.478 157.876 334.387 157.876C337.512 157.876 340.585 157.649 343.588 157.212" stroke="#727272" stroke-width="0.858927"/>
<path d="M343.589 157.152C346.72 157.629 349.926 157.876 353.19 157.876C388.1 157.876 416.4 129.608 416.4 94.7381C416.4 59.8682 388.1 31.6006 353.19 31.6006C318.281 31.6006 289.981 59.8682 289.981 94.7381C289.981 97.9986 290.228 101.201 290.705 104.329" stroke="#727272" stroke-width="0.858927"/>
<path d="M290.245 104.328C289.807 107.329 289.581 110.398 289.581 113.519C289.581 148.389 317.88 176.657 352.79 176.657C387.699 176.657 415.999 148.389 415.999 113.519C415.999 78.6495 387.699 50.3818 352.79 50.3818C349.665 50.3818 346.592 50.6084 343.589 51.046" stroke="#727272" stroke-width="0.858927"/>
<path d="M343.588 51.046C340.585 50.6084 337.512 50.3818 334.387 50.3818C299.478 50.3818 271.178 78.6495 271.178 113.519C271.178 148.389 299.478 176.657 334.387 176.657C369.297 176.657 397.596 148.389 397.596 113.519C397.596 110.398 397.37 107.329 396.932 104.328" stroke="#727272" stroke-width="0.858927"/>
<path d="M397.197 50.7812L290.381 157.476" stroke="#727272" stroke-width="0.858927"/>
<path d="M289.981 104.328H397.197" stroke="#727272" stroke-width="0.858927"/>
<path d="M343.589 50.3818V157.875" stroke="#727272" stroke-width="0.858927"/>
<ellipse cx="397.197" cy="104.329" rx="3.20048" ry="3.19684" fill="#EAEAEA"/>
<ellipse cx="397.197" cy="50.7818" rx="3.20048" ry="3.19684" fill="#EAEAEA"/>
<ellipse cx="397.197" cy="157.876" rx="3.20048" ry="3.19684" fill="#EAEAEA"/>
<ellipse cx="290.381" cy="157.876" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
<ellipse cx="343.589" cy="104.329" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
<ellipse cx="343.589" cy="50.7818" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
<ellipse cx="290.381" cy="104.329" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
<ellipse cx="290.381" cy="50.7818" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
<ellipse cx="343.589" cy="157.876" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

0
packages/frontend/core/src/components/affine/affine-error-boundary/error-assets/500-status.assets.svg → packages/frontend/core/src/components/affine/affine-error-boundary/error-assets/light-500-status.assets.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

27
packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.tsx
View File

@@ -2,6 +2,7 @@ import { Button } from '@affine/component/ui/button';
import { Trans } from '@affine/i18n';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
import { useTheme } from 'next-themes';
import {
type FC,
type PropsWithChildren,
@@ -10,7 +11,8 @@ import {
} from 'react';
import imageUrlFor404 from '../error-assets/404-status.assets.svg';
import imageUrlFor500 from '../error-assets/500-status.assets.svg';
import imageUrlForDark500 from '../error-assets/dark-500-status.assets.svg';
import imageUrlForLight500 from '../error-assets/light-500-status.assets.svg';
import * as styles from './error-detail.css';
export enum ErrorStatus {
@@ -30,8 +32,20 @@ export interface ErrorDetailProps extends PropsWithChildren {
}
const imageMap = new Map([
[ErrorStatus.NotFound, imageUrlFor404],
[ErrorStatus.Unexpected, imageUrlFor500],
[
ErrorStatus.NotFound,
{
light: imageUrlFor404, // TODO: Ask designer for dark/light mode image.
dark: imageUrlFor404,
},
],
[
ErrorStatus.Unexpected,
{
light: imageUrlForLight500, // TODO: Split assets lib and use image hook to handle light and dark.
dark: imageUrlForDark500,
},
],
]);
/**
@@ -49,6 +63,7 @@ export const ErrorDetail: FC<ErrorDetailProps> = props => {
const descriptions = Array.isArray(description) ? description : [description];
const [isBtnLoading, setBtnLoading] = useState(false);
const t = useAFFiNEI18N();
const { resolvedTheme } = useTheme();
const onBtnClick = useAsyncCallback(async () => {
try {
@@ -83,7 +98,11 @@ export const ErrorDetail: FC<ErrorDetailProps> = props => {
{withoutImage ? null : (
<div
className={styles.errorImage}
style={{ backgroundImage: `url(${imageMap.get(status)})` }}
style={{
backgroundImage: `url(${imageMap.get(status)?.[
resolvedTheme as 'light' | 'dark'
]})`,
}}
/>
)}
</div>