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

fix: empty icon color error (#2686)

Browse Source
This commit is contained in:
JimmFly
2023-06-05 18:06:17 +08:00
committed by GitHub
parent efae4cccd6
commit 5807f34935
2 changed files with 15 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
packages/component/src/ui/empty/empty-svg.tsx
View File

@@ -1,154 +1,33 @@
import SvgIcon from '@mui/material/SvgIcon';
import { memo } from 'react';
export const EmptyLightSvg = memo(function EmptySvg() {
export const EmptySvg = memo(function EmptySvg() {
return (
<SvgIcon
<svg
width="248"
height="216"
viewBox="0 0 248 216"
fill="none"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M124.321 4.45459L5.2627 210.669H243.379L124.321 4.45459ZM239.666 207.565L182.825 109.114L125.984 141.931L239.666 207.565ZM125.153 140.49L181.993 107.673L125.153 9.22248L125.153 140.49ZM123.489 9.22248L123.489 140.49L66.6484 107.673L123.489 9.22248ZM65.8166 109.114L8.97592 207.565L122.657 141.931L65.8166 109.114ZM123.489 143.372L9.80773 209.006H123.489V143.372ZM125.153 209.006H238.834L125.153 143.372L125.153 209.006Z"
fill="black"
fillOpacity="0.3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M124.283 208.367C161.062 208.367 190.89 178.415 190.89 141.452C190.89 104.489 161.062 74.5371 124.283 74.5371C87.5044 74.5371 57.6765 104.489 57.6765 141.452C57.6765 178.415 87.5044 208.367 124.283 208.367ZM124.283 210.031C161.988 210.031 192.553 179.327 192.553 141.452C192.553 103.577 161.988 72.8735 124.283 72.8735C86.5785 72.8735 56.0129 103.577 56.0129 141.452C56.0129 179.327 86.5785 210.031 124.283 210.031Z"
fill="black"
fillOpacity="0.3"
/>
<circle
cx="65.7267"
cy="107.881"
r="4.93369"
fill="black"
fillOpacity="0.8"
/>
<circle
cx="5.26255"
cy="210.014"
r="4.93369"
fill="black"
fillOpacity="0.8"
/>
<circle
cx="124.359"
cy="210.014"
r="4.93369"
fill="black"
fillOpacity="0.8"
/>
<circle
cx="243.06"
cy="210.014"
r="4.93369"
fill="black"
fillOpacity="0.8"
/>
<circle
cx="183.499"
cy="107.881"
r="4.93369"
fill="black"
fillOpacity="0.8"
/>
<circle
cx="124.396"
cy="141.83"
r="4.93369"
fill="black"
fillOpacity="0.8"
/>
<circle
cx="124.344"
cy="5.00449"
r="4.93369"
fill="black"
fillOpacity="0.8"
/>
</SvgIcon>
);
});
export const EmptyDarkSvg = memo(function EmptySvg() {
return (
<SvgIcon
width="248"
height="216"
viewBox="0 0 248 216"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M124.321 4.45459L5.26257 210.669H243.379L124.321 4.45459ZM239.666 207.565L182.825 109.114L125.984 141.931L239.666 207.565ZM125.153 140.49L181.993 107.673L125.153 9.22248L125.153 140.49ZM123.489 9.22248L123.489 140.49L66.6483 107.673L123.489 9.22248ZM65.8165 109.114L8.9758 207.565L122.657 141.931L65.8165 109.114ZM123.489 143.372L9.80761 209.006H123.489V143.372ZM125.153 209.006H238.834L125.153 143.372L125.153 209.006Z"
fill="white"
fillOpacity="0.3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M124.283 208.367C161.062 208.367 190.89 178.415 190.89 141.452C190.89 104.489 161.062 74.5371 124.283 74.5371C87.5043 74.5371 57.6764 104.489 57.6764 141.452C57.6764 178.415 87.5043 208.367 124.283 208.367ZM124.283 210.031C161.988 210.031 192.553 179.327 192.553 141.452C192.553 103.577 161.988 72.8735 124.283 72.8735C86.5784 72.8735 56.0128 103.577 56.0128 141.452C56.0128 179.327 86.5784 210.031 124.283 210.031Z"
fill="white"
fillOpacity="0.3"
/>
<circle
cx="65.7267"
cy="107.881"
r="4.93369"
fill="white"
fillOpacity="0.8"
/>
<circle
cx="5.26255"
cy="210.014"
r="4.93369"
fill="white"
fillOpacity="0.8"
/>
<circle
cx="124.359"
cy="210.014"
r="4.93369"
fill="white"
fillOpacity="0.8"
/>
<circle
cx="243.06"
cy="210.014"
r="4.93369"
fill="white"
fillOpacity="0.8"
/>
<circle
cx="183.499"
cy="107.881"
r="4.93369"
fill="white"
fillOpacity="0.8"
/>
<circle
cx="124.396"
cy="141.83"
r="4.93369"
fill="white"
fillOpacity="0.8"
/>
<circle
cx="124.343"
cy="5.00449"
r="4.93369"
fill="white"
fillOpacity="0.8"
/>
</SvgIcon>
<circle cx="65.7267" cy="107.881" r="4.93369" fillOpacity="0.8" />
<circle cx="5.26255" cy="210.014" r="4.93369" fillOpacity="0.8" />
<circle cx="124.359" cy="210.014" r="4.93369" fillOpacity="0.8" />
<circle cx="243.06" cy="210.014" r="4.93369" fillOpacity="0.8" />
<circle cx="183.499" cy="107.881" r="4.93369" fillOpacity="0.8" />
<circle cx="124.396" cy="141.83" r="4.93369" fillOpacity="0.8" />
<circle cx="124.344" cy="5.00449" r="4.93369" fillOpacity="0.8" />
</svg>
);
});

9
packages/component/src/ui/empty/empty.tsx
View File

@@ -1,7 +1,6 @@
import { useTheme } from 'next-themes';
import type { CSSProperties } from 'react';
import { EmptyDarkSvg, EmptyLightSvg } from './empty-svg';
import { EmptySvg } from './empty-svg';
import { StyledEmptyContainer } from './style';
export type EmptyContentProps = {
containerStyle?: CSSProperties;
@@ -14,11 +13,11 @@ export const Empty = ({
description,
descriptionStyle,
}: EmptyContentProps) => {
const { theme } = useTheme();
const isDark = theme === 'dark';
return (
<StyledEmptyContainer style={containerStyle}>
{isDark ? <EmptyDarkSvg /> : <EmptyLightSvg />}
<div style={{ color: 'var(--affine-black)' }}>
<EmptySvg />
</div>
<p style={{ marginTop: '30px', ...descriptionStyle }}>{description}</p>
</StyledEmptyContainer>
);