refactor!: next generation AFFiNE code structure (#1176)

apps/web/src/components/affine/enable-affine-cloud-modal/index.tsx

@@ -0,0 +1,64 @@
+import { IconButton, Modal, ModalWrapper } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
+import { CloseIcon } from '@blocksuite/icons';
+import React from 'react';
+
+import { useCurrentUser } from '../../../hooks/current/use-current-user';
+import { AffineRemoteWorkspace } from '../../../shared';
+import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';
+
+interface EnableAffineCloudModalProps {
+  workspace: AffineRemoteWorkspace;
+  open: boolean;
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+export const EnableAffineCloudModal: React.FC<EnableAffineCloudModalProps> = ({
+  onConfirm,
+  open,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+  const user = useCurrentUser();
+
+  return (
+    <Modal open={open} onClose={onClose} data-testid="logout-modal">
+      <ModalWrapper width={560} height={292}>
+        <Header>
+          <IconButton
+            onClick={() => {
+              onClose();
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+        </Header>
+        <Content>
+          <ContentTitle>{t('Enable AFFiNE Cloud')}?</ContentTitle>
+          <StyleTips>{t('Enable AFFiNE Cloud Description')}</StyleTips>
+          {/* <StyleTips>{t('Retain cached cloud data')}</StyleTips> */}
+          <div>
+            <StyleButton
+              shape="round"
+              type="primary"
+              onClick={() => {
+                onConfirm();
+              }}
+            >
+              {user ? t('Enable') : t('Sign in and Enable')}
+            </StyleButton>
+            <StyleButton
+              shape="round"
+              onClick={() => {
+                onClose();
+              }}
+            >
+              {t('Not now')}
+            </StyleButton>
+          </div>
+        </Content>
+      </ModalWrapper>
+    </Modal>
+  );
+};

apps/web/src/components/affine/enable-affine-cloud-modal/style.ts

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