Fix/UI issue (#946)

Co-authored-by: JimmFly <yangjinfei001@gmail.com>

apps/desktop/src/preload/components/enable-workspace-modal/index.tsx

@@ -0,0 +1,74 @@
+import { Modal, ModalWrapper } from '@affine/component';
+import { IconButton } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
+import { useAppState } from '@/providers/app-state-provider';
+import { useState } from 'react';
+import router from 'next/router';
+import { toast } from '@affine/component';
+import { CloseIcon } from '@blocksuite/icons';
+import { Header, Content, ContentTitle, StyleTips, StyleButton } from './style';
+
+interface EnableWorkspaceModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const EnableWorkspaceModal = ({
+  open,
+  onClose,
+}: EnableWorkspaceModalProps) => {
+  const { t } = useTranslation();
+  const { user, dataCenter, login, currentWorkspace } = useAppState();
+  const [loading, setLoading] = useState(false);
+  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 local cached data')}</StyleTips> */}
+          <div>
+            <StyleButton
+              shape="round"
+              type="primary"
+              loading={loading}
+              onClick={async () => {
+                setLoading(true);
+                if (!user) {
+                  await login();
+                }
+                if (currentWorkspace) {
+                  const workspace = await dataCenter.enableWorkspaceCloud(
+                    currentWorkspace
+                  );
+                  workspace &&
+                    router.push(`/workspace/${workspace.id}/setting`);
+                  toast(t('Enabled success'));
+                }
+              }}
+            >
+              {user ? t('Enable') : t('Sign in and Enable')}
+            </StyleButton>
+            <StyleButton
+              shape="round"
+              onClick={() => {
+                onClose();
+              }}
+            >
+              {t('Not now')}
+            </StyleButton>
+          </div>
+        </Content>
+      </ModalWrapper>
+    </Modal>
+  );
+};

apps/desktop/src/preload/components/enable-workspace-modal/style.ts

@@ -0,0 +1,39 @@
+import { Button, styled } from '@affine/component';
+
+export const Header = styled('div')({
+  height: '44px',
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  paddingRight: '10px',
+  paddingTop: '10px',
+});
+
+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',
+  };
+});

apps/desktop/src/preload/components/icons/index.tsx

@@ -0,0 +1,28 @@
+import {
+  JoinedWorkspaceIcon as DefaultJoinedWorkspaceIcon,
+  LocalWorkspaceIcon as DefaultLocalWorkspaceIcon,
+  CloudWorkspaceIcon as DefaultCloudWorkspaceIcon,
+  LocalDataIcon as DefaultLocalDataIcon,
+  PublishIcon as DefaultPublishIcon,
+} from '@blocksuite/icons';
+
+// Here are some icons with special color or size
+
+export const JoinedWorkspaceIcon = () => {
+  return <DefaultJoinedWorkspaceIcon style={{ color: '#FF646B' }} />;
+};
+export const LocalWorkspaceIcon = () => {
+  return <DefaultLocalWorkspaceIcon style={{ color: '#FDBD32' }} />;
+};
+
+export const CloudWorkspaceIcon = () => {
+  return <DefaultCloudWorkspaceIcon style={{ color: '##60A5FA' }} />;
+};
+
+export const LocalDataIcon = () => {
+  return <DefaultLocalDataIcon style={{ color: '#62CD80' }} />;
+};
+
+export const PublishIcon = () => {
+  return <DefaultPublishIcon style={{ color: '##8699FF' }} />;
+};