chore: update temp disable affine cloud modal style (#2046)

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 (
     <Modal open={open} onClose={onClose}>
-      <ModalWrapper width={560} height={292}>
+      <ModalWrapper width={480}>
         <Header>
           <IconButton
             onClick={() => {
@@ -29,9 +37,24 @@ export const TmpDisableAffineCloudModal: React.FC<
           <StyleTips>
             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&apos;s available, please <a href="#">click here</a>
+            time it&apos;s available, please&nbsp;
+            <a
+              href="https://github.com/toeverything/AFFiNE/releases"
+              target="_blank"
+            >
+              click here
+            </a>
+            .
           </StyleTips>
-          <div>
+          <StyleImage>
+            <Empty
+              containerStyle={{
+                width: '200px',
+                height: '112px',
+              }}
+            />
+          </StyleImage>
+          <StyleButtonContainer>
             <StyleButton
               shape="round"
               type="primary"
@@ -41,7 +64,7 @@ export const TmpDisableAffineCloudModal: React.FC<
             >
               Got it
             </StyleButton>
-          </div>
+          </StyleButtonContainer>
         </Content>
       </ModalWrapper>
     </Modal>

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%',
   };
 });