feat: rewrite publish style

packages/app/src/components/workspace-setting/PublishPage.tsx

@@ -14,16 +14,18 @@ import { toast } from '@/ui/toast';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { useTranslation } from '@affine/i18n';
-import Loading from '@/components/loading';
-import { Wrapper } from '@/ui/layout';
 import { EnableWorkspaceButton } from '../enable-workspace';
 export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const shareUrl = window.location.host + '/public-workspace/' + workspace.id;
   const { publishWorkspace } = useWorkspaceHelper();
   const { t } = useTranslation();
-  const [loaded, setLoaded] = useState(true);
+  const [loaded, setLoaded] = useState(false);
   const togglePublic = async (flag: boolean) => {
-    await publishWorkspace(workspace.id.toString(), flag);
+    try {
+      await publishWorkspace(workspace.id.toString(), flag);
+    } catch (e) {
+      toast('Failed to publish workspace');
+    }
   };
 
   const copyUrl = () => {
@@ -34,17 +36,21 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   return (
     <>
       {workspace.provider === 'affine' ? (
-        <div>
+        <div
+          style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+        >
           <StyledPublishContent>
             {workspace.published ? (
               <>
                 <StyledPublishExplanation>
-                  {t('Publishing')}
+                  The current workspace has been published to the web, everyone
+                  can view the contents of this workspace through the link.
                 </StyledPublishExplanation>
-                <StyledSettingH2 marginTop={48}>
+
-                  {t('Share with link')}
-                </StyledSettingH2>
                 <StyledPublishCopyContainer>
+                  <StyledSettingH2 marginBottom={16}>
+                    {t('Share with link')}
+                  </StyledSettingH2>
                   <Input width={500} value={shareUrl} disabled={true}></Input>
                   <StyledCopyButtonContainer>
                     <Button onClick={copyUrl} type="primary" shape="circle">
@@ -56,6 +62,20 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
             ) : (
               <StyledPublishExplanation>
                 {t('Publishing Description')}
+                <div style={{ marginTop: '64px' }}>
+                  <Button
+                    onClick={async () => {
+                      setLoaded(true);
+                      await togglePublic(true);
+                      setLoaded(false);
+                    }}
+                    loading={loaded}
+                    type="primary"
+                    shape="circle"
+                  >
+                    {t('Publish to web')}
+                  </Button>
+                </div>
               </StyledPublishExplanation>
             )}
           </StyledPublishContent>
@@ -64,10 +84,11 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
             <StyledStopPublishContainer>
               <Button
                 onClick={async () => {
-                  setLoaded(false);
+                  setLoaded(true);
                   await togglePublic(false);
                   setLoaded(true);
                 }}
+                loading={false}
                 type="danger"
                 shape="circle"
               >
@@ -75,39 +96,22 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
               </Button>
             </StyledStopPublishContainer>
           ) : (
-            <StyledPublishCopyContainer>
+            <></>
-              <Button
-                onClick={async () => {
-                  setLoaded(false);
-                  await togglePublic(true);
-                  setLoaded(true);
-                }}
-                type="primary"
-                shape="circle"
-              >
-                {t('Publish to web')}
-              </Button>
-            </StyledPublishCopyContainer>
           )}
         </div>
       ) : (
         <StyledPublishContent>
           <>
             <StyledPublishExplanation>
-              {t('Publishing')}
+              Publishing to web requires AFFiNE Cloud service.
             </StyledPublishExplanation>
 
-            <StyledPublishCopyContainer>
+            <div style={{ marginTop: '72px' }}>
               <EnableWorkspaceButton></EnableWorkspaceButton>
-            </StyledPublishCopyContainer>
+            </div>
           </>
         </StyledPublishContent>
       )}
-      {!loaded && (
-        <Wrapper>
-          <Loading size={25} />
-        </Wrapper>
-      )}
     </>
   );
 };

packages/app/src/components/workspace-setting/style.ts

@@ -1,4 +1,4 @@
-import { displayFlex, styled } from '@/styles';
+import { styled } from '@/styles';
 
 export const StyledSettingContainer = styled('div')(() => {
   return {
@@ -85,26 +85,25 @@ export const StyledSettingTagIconContainer = styled('div')(() => {
   };
 });
 
-export const StyledSettingH2 = styled('h2')<{ marginTop?: number }>(
+export const StyledSettingH2 = styled('h2')<{
-  ({ marginTop, theme }) => {
+  marginTop?: number;
-    return {
+  marginBottom?: number;
-      fontWeight: '500',
+}>(({ marginTop, marginBottom, theme }) => {
-      fontSize: theme.font.base,
+  return {
-      lineHeight: theme.font.lineHeightBase,
+    fontWeight: '500',
-      marginTop: marginTop ? `${marginTop}px` : '0px',
+    fontSize: theme.font.base,
-    };
+    lineHeight: theme.font.lineHeightBase,
-  }
+    marginTop: marginTop ? `${marginTop}px` : '0px',
-);
+    marginBottom: marginBottom ? `${marginBottom}px` : '0px',
+  };
+});
 
 export const StyledPublishExplanation = styled('div')(() => {
   return {
-    ...displayFlex('row', 'center', 'center'),
     paddingRight: '48px',
     fontWeight: '500',
     fontSize: '18px',
     lineHeight: '26px',
-    flex: 1,
-
     marginBottom: '22px',
   };
 });
@@ -126,21 +125,14 @@ export const StyledWorkspaceType = styled('div')(() => {
 export const StyledPublishCopyContainer = styled('div')(() => {
   return {
     marginTop: '12px',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'start',
-    justifyContent: 'center',
     marginBottom: '20px',
     paddingTop: '20px',
+    flex: 1,
   };
 });
 export const StyledStopPublishContainer = styled('div')(() => {
   return {
-    position: 'absolute',
+    textAlign: 'center',
-    bottom: '0',
-    left: '50%',
-    transform: 'translateX(-50%)',
-    marginBottom: '20px',
   };
 });