From 65c1bee7f05eb9e2ba94b804cecc059b703a3712 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Thu, 20 Apr 2023 15:27:26 +0800 Subject: [PATCH] chore: update temp disable affine cloud modal style (#2046) --- .../tmp-disable-affine-cloud-modal/index.tsx | 35 ++- .../tmp-disable-affine-cloud-modal/style.ts | 49 ++-- .../src/components/workspace-card/styles.ts | 2 + packages/component/src/ui/empty/Empty.tsx | 8 +- packages/component/src/ui/empty/EmptySVG.tsx | 251 +++++++++--------- packages/component/src/ui/empty/style.ts | 28 +- 6 files changed, 208 insertions(+), 165 deletions(-) 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', + }, + }; + } +);