chore: improve disable legacy cloud (#2041)

2026-07-25 14:28:51 +08:00 · 2023-04-20 12:25:45 +08:00
parent 9f33e73429
commit 031ab2cfa2
5 changed files with 188 additions and 78 deletions
@@ -0,0 +1,49 @@
+import { IconButton, Modal, ModalWrapper } from '@affine/component';
+import { CloseIcon } from '@blocksuite/icons';
+import type React from 'react';
+
+import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';
+
+interface TmpDisableAffineCloudModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const TmpDisableAffineCloudModal: React.FC<
+  TmpDisableAffineCloudModalProps
+> = ({ open, onClose }) => {
+  return (
+    <Modal open={open} onClose={onClose}>
+      <ModalWrapper width={560} height={292}>
+        <Header>
+          <IconButton
+            onClick={() => {
+              onClose();
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+        </Header>
+        <Content>
+          <ContentTitle>AFFiNE Cloud is upgrading now.</ContentTitle>
+          <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>
+          </StyleTips>
+          <div>
+            <StyleButton
+              shape="round"
+              type="primary"
+              onClick={() => {
+                onClose();
+              }}
+            >
+              Got it
+            </StyleButton>
+          </div>
+        </Content>
+      </ModalWrapper>
+    </Modal>
+  );
+};
@@ -0,0 +1,40 @@
+import { Button, styled } from '@affine/component';
+
+export const Header = styled('div')({
+  height: '44px',
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  paddingRight: '10px',
+  paddingTop: '10px',
+  flexShrink: 0,
+});
+
+export const Content = styled('div')({
+  textAlign: 'center',
+});
+
+export const ContentTitle = styled('h1')({
+  fontSize: '20px',
+  lineHeight: '28px',
+  fontWeight: 600,
+  textAlign: 'center',
+});
+
+export const StyleTips = styled('div')(() => {
+  return {
+    userSelect: 'none',
+    width: '400px',
+    margin: 'auto',
+    marginBottom: '32px',
+    marginTop: '12px',
+  };
+});
+
+export const StyleButton = styled(Button)(() => {
+  return {
+    width: '284px',
+    display: 'block',
+    margin: 'auto',
+    marginTop: '16px',
+  };
+});