diff --git a/apps/web/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx b/apps/web/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx
index fe9931d9b1..e04354485d 100644
--- a/apps/web/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx
+++ b/apps/web/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx
@@ -1,8 +1,16 @@
-import { IconButton, Modal, ModalWrapper } from '@affine/component';
+import { Empty, IconButton, Modal, ModalWrapper } from '@affine/component';
import { CloseIcon } from '@blocksuite/icons';
import type React from 'react';
-import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';
+import {
+ Content,
+ ContentTitle,
+ Header,
+ StyleButton,
+ StyleButtonContainer,
+ StyleImage,
+ StyleTips,
+} from './style';
interface TmpDisableAffineCloudModalProps {
open: boolean;
@@ -14,7 +22,7 @@ export const TmpDisableAffineCloudModal: React.FC<
> = ({ open, onClose }) => {
return (
-
+
{
@@ -29,9 +37,24 @@ export const TmpDisableAffineCloudModal: React.FC<
We are upgrading the AFFiNE Cloud service and it is temporarily
unavailable on the client side. If you wish to be notified the first
- time it's available, please click here
+ time it's available, please
+
+ click here
+
+ .
-
+
+
+
+
Got it
-
+
diff --git a/apps/web/src/components/affine/tmp-disable-affine-cloud-modal/style.ts b/apps/web/src/components/affine/tmp-disable-affine-cloud-modal/style.ts
index d49dd1a77d..7743bb3de5 100644
--- a/apps/web/src/components/affine/tmp-disable-affine-cloud-modal/style.ts
+++ b/apps/web/src/components/affine/tmp-disable-affine-cloud-modal/style.ts
@@ -1,4 +1,4 @@
-import { Button, styled } from '@affine/component';
+import { Button, displayFlex, styled } from '@affine/component';
export const Header = styled('div')({
height: '44px',
@@ -10,31 +10,46 @@ export const Header = styled('div')({
});
export const Content = styled('div')({
- textAlign: 'center',
+ padding: '0 40px',
});
-export const ContentTitle = styled('h1')({
- fontSize: '20px',
- lineHeight: '28px',
- fontWeight: 600,
- textAlign: 'center',
+export const ContentTitle = styled('h1')(({ theme }) => {
+ return {
+ fontSize: theme.font.h6,
+ lineHeight: '28px',
+ fontWeight: 600,
+ };
});
-export const StyleTips = styled('div')(() => {
+export const StyleTips = styled('div')(({ theme }) => {
return {
userSelect: 'none',
- width: '400px',
- margin: 'auto',
- marginBottom: '32px',
- marginTop: '12px',
+ margin: '20px 0',
+ a: {
+ color: theme.colors.primaryColor,
+ },
};
});
-export const StyleButton = styled(Button)(() => {
+export const StyleButton = styled(Button)(({ theme }) => {
return {
- width: '284px',
- display: 'block',
- margin: 'auto',
- marginTop: '16px',
+ textAlign: 'center',
+ margin: '20px 0',
+ borderRadius: '8px',
+ backgroundColor: theme.colors.primaryColor,
+ span: {
+ margin: '0',
+ },
+ };
+});
+export const StyleButtonContainer = styled('div')(() => {
+ return {
+ width: '100%',
+ ...displayFlex('flex-end', 'center'),
+ };
+});
+export const StyleImage = styled('div')(() => {
+ return {
+ width: '100%',
};
});
diff --git a/packages/component/src/components/workspace-card/styles.ts b/packages/component/src/components/workspace-card/styles.ts
index 8d8cd158d3..bd5161c4cd 100644
--- a/packages/component/src/components/workspace-card/styles.ts
+++ b/packages/component/src/components/workspace-card/styles.ts
@@ -83,6 +83,8 @@ export const StyledSettingLink = styled(IconButton)(({ theme }) => {
right: '6px',
bottom: '6px',
opacity: 0,
+ borderRadius: '4px',
+ color: theme.colors.primaryColor,
pointerEvents: 'none',
transition: 'all .15s',
':hover': {
diff --git a/packages/component/src/ui/empty/Empty.tsx b/packages/component/src/ui/empty/Empty.tsx
index 3d0acd64f8..7decf296f1 100644
--- a/packages/component/src/ui/empty/Empty.tsx
+++ b/packages/component/src/ui/empty/Empty.tsx
@@ -3,19 +3,19 @@ import type { CSSProperties } from 'react';
import { EmptySVG } from './EmptySVG';
import { StyledEmptyContainer } from './style';
export type EmptyContentProps = {
- imageStyle?: CSSProperties;
+ containerStyle?: CSSProperties;
description?: string;
descriptionStyle?: CSSProperties;
};
export const Empty = ({
- imageStyle,
+ containerStyle,
description,
descriptionStyle,
}: EmptyContentProps) => {
return (
-
-
+
+
{description}
);
diff --git a/packages/component/src/ui/empty/EmptySVG.tsx b/packages/component/src/ui/empty/EmptySVG.tsx
index 0a64d8215a..afb1fa9bf5 100644
--- a/packages/component/src/ui/empty/EmptySVG.tsx
+++ b/packages/component/src/ui/empty/EmptySVG.tsx
@@ -4,409 +4,408 @@ import SvgIcon from '@mui/material/SvgIcon';
export const EmptySVG = (props: SvgIconProps) => {
return (
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
diff --git a/packages/component/src/ui/empty/style.ts b/packages/component/src/ui/empty/style.ts
index b6791389a3..0532b2a5ef 100644
--- a/packages/component/src/ui/empty/style.ts
+++ b/packages/component/src/ui/empty/style.ts
@@ -1,14 +1,18 @@
+import type { CSSProperties } from 'react';
+
import { displayFlex, styled } from '../../styles';
-export const StyledEmptyContainer = styled('div')(() => {
- return {
- height: '100%',
- ...displayFlex('center', 'center'),
- flexDirection: 'column',
-
- '.empty-img': {
- width: '320px',
- height: '280px',
- },
- };
-});
+export const StyledEmptyContainer = styled('div')<{ style?: CSSProperties }>(
+ ({ style }) => {
+ return {
+ height: '100%',
+ ...displayFlex('center', 'center'),
+ flexDirection: 'column',
+ svg: {
+ width: style?.width ?? '320px',
+ height: style?.height ?? '280px',
+ fontSize: style?.fontSize ?? 'inherit',
+ },
+ };
+ }
+);