fix: rewrite workspacesetting layout

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

@@ -4,7 +4,7 @@ import { Trans } from '@affine/i18n';
 export const ExportPageTitleContainer = styled('div')(() => {
   return {
     display: 'flex',
-    marginTop: '60px',
+
     fontWeight: '500',
     flex: 1,
   };

packages/app/src/components/workspace-setting/general/General.tsx

@@ -5,6 +5,8 @@ import {
   StyledSettingInputContainer,
   StyledDoneButtonContainer,
   StyledInput,
+  StyledProviderInfo,
+  StyleGeneral,
 } from './style';
 import { StyledSettingH2 } from '../style';
 
@@ -13,12 +15,13 @@ import { Button } from '@/ui/button';
 import { useAppState } from '@/providers/app-state-provider';
 import { WorkspaceDelete } from './delete';
 import { WorkspaceLeave } from './leave';
-import { DoneIcon, CloudUnsyncedIcon } from '@blocksuite/icons';
+import { DoneIcon, UsersIcon } from '@blocksuite/icons';
 // import { Upload } from '@/components/file-upload';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { useTranslation } from '@affine/i18n';
+import { CloudIcon, LocalIcon } from '@/components/workspace-modal/icons';
 export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const [showDelete, setShowDelete] = useState<boolean>(false);
   const [showLeave, setShowLeave] = useState<boolean>(false);
@@ -45,57 +48,76 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   // };
 
   return workspace ? (
-    <div>
-      <StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2>
-      <StyledSettingAvatarContent>
-        <div
-          style={{
-            float: 'left',
-            marginRight: '20px',
-          }}
-        >
-          <WorkspaceUnitAvatar
-            size={60}
-            name={workspace.name}
-            workspaceUnit={workspace}
-          />
-        </div>
-        {/* TODO: Wait for image sync to complete  */}
-        {/* <Upload
+    <StyleGeneral>
+      <div style={{ flex: 1, overflow: 'auto' }}>
+        <StyledSettingH2>Workspace Avatar</StyledSettingH2>
+        <StyledSettingAvatarContent>
+          <div
+            style={{
+              float: 'left',
+              marginRight: '20px',
+            }}
+          >
+            <WorkspaceUnitAvatar
+              size={60}
+              name={workspace.name}
+              workspaceUnit={workspace}
+            />
+          </div>
+          {/* TODO: Wait for image sync to complete  */}
+          {/* <Upload
           accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
           fileChange={fileChange}
         >
           <Button loading={uploading}>{t('Upload')}</Button>
         </Upload> */}
-        {/* TODO: add upload logic */}
-      </StyledSettingAvatarContent>
-      <StyledSettingH2 marginTop={20}>{t('Workspace Name')}</StyledSettingH2>
-      <StyledSettingInputContainer>
-        <StyledInput
-          width={284}
-          height={32}
-          value={workspaceName}
-          placeholder={t('Workspace Name')}
-          maxLength={14}
-          minLength={1}
-          disabled={!isOwner}
-          onChange={handleChangeWorkSpaceName}
-        ></StyledInput>
-        {isOwner ? (
-          <StyledDoneButtonContainer
-            onClick={() => {
-              handleUpdateWorkspaceName();
-            }}
-          >
-            <DoneIcon />
-          </StyledDoneButtonContainer>
-        ) : null}
-      </StyledSettingInputContainer>
-      <StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2>
-      <StyledSettingInputContainer>
-        <CloudUnsyncedIcon style={{ marginRight: '15px' }} />
-        Local workspace
-      </StyledSettingInputContainer>
+          {/* TODO: add upload logic */}
+        </StyledSettingAvatarContent>
+        <StyledSettingH2 marginTop={20}>{t('Workspace Name')}</StyledSettingH2>
+        <StyledSettingInputContainer>
+          <StyledInput
+            width={284}
+            height={32}
+            value={workspaceName}
+            placeholder={t('Workspace Name')}
+            maxLength={14}
+            minLength={1}
+            disabled={!isOwner}
+            onChange={handleChangeWorkSpaceName}
+          ></StyledInput>
+          {isOwner ? (
+            <StyledDoneButtonContainer
+              onClick={() => {
+                handleUpdateWorkspaceName();
+              }}
+            >
+              <DoneIcon />
+            </StyledDoneButtonContainer>
+          ) : null}
+        </StyledSettingInputContainer>
+        <StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2>
+        <StyledSettingInputContainer>
+          {isOwner ? (
+            currentWorkspace?.provider === 'local' ? (
+              <StyledProviderInfo>
+                <LocalIcon />
+                Local Workspace
+              </StyledProviderInfo>
+            ) : (
+              <StyledProviderInfo>
+                <CloudIcon />
+                All data can be accessed offline
+              </StyledProviderInfo>
+            )
+          ) : (
+            <StyledProviderInfo>
+              <UsersIcon fontSize={20} color={'#FF646B'} />
+              Joined Workspace
+            </StyledProviderInfo>
+          )}
+        </StyledSettingInputContainer>
+      </div>
+
       <StyledDeleteButtonContainer>
         {isOwner ? (
           <>
@@ -137,6 +159,6 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
           </>
         )}
       </StyledDeleteButtonContainer>
-    </div>
+    </StyleGeneral>
   ) : null;
 };

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

@@ -13,11 +13,14 @@ export const StyledSettingInputContainer = styled('div')(() => {
 
 export const StyledDeleteButtonContainer = styled('div')(() => {
   return {
-    position: 'absolute',
-    bottom: '0',
-    left: '50%',
-    marginBottom: '20px',
-    transform: 'translateX(-50%)',
+    textAlign: 'center',
+  };
+});
+export const StyleGeneral = styled('div')(() => {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
   };
 });
 export const StyledDoneButtonContainer = styled(IconButton)(({ theme }) => {
@@ -53,3 +56,14 @@ export const StyledSettingAvatarContent = styled('div')(() => {
 export const StyledSettingAvatar = styled(MuiAvatar)(() => {
   return { height: '72px', width: '72px', marginRight: '24px' };
 });
+
+export const StyledProviderInfo = styled('p')(({ theme }) => {
+  return {
+    color: theme.colors.iconColor,
+    fontSize: theme.font.sm,
+    svg: {
+      verticalAlign: 'sub',
+      marginRight: '10px',
+    },
+  };
+});

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

@@ -109,7 +109,7 @@ export const StyledMemberWarp = styled('div')(() => {
   return {
     display: 'flex',
     flexDirection: 'column',
-    padding: '48px 0',
+    padding: '0 0 48px 0',
     fontWeight: '500',
     fontSize: '18px',
   };

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

@@ -4,23 +4,27 @@ export const StyledSettingContainer = styled('div')(() => {
   return {
     display: 'flex',
     flexDirection: 'column',
-    marginTop: '24px',
-    marginLeft: '48px',
-    overflow: 'auto',
+
+    padding: '0 34px 20px 48px',
+    height: '100vh',
   };
 });
 
 export const StyledSettingSidebar = styled('div')(() => {
   {
     return {
-      flexShrink: 0,
-      flexGrow: 0,
+      // height: '48px',
+      marginTop: '50px',
     };
   }
 });
 
 export const StyledSettingContent = styled('div')(() => {
-  return {};
+  return {
+    overflow: 'hidden',
+    flex: 1,
+    paddingTop: '48px',
+  };
 });
 
 export const StyledSetting = styled('div')(({ theme }) => {
@@ -48,7 +52,6 @@ export const StyledSettingTabContainer = styled('ul')(() => {
   {
     return {
       display: 'flex',
-      marginTop: '25px',
     };
   }
 });
@@ -58,8 +61,7 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
     {
       return {
         display: 'flex',
-        position: 'relative',
-        margin: '0 48px 8px 0',
+        margin: '0 48px 0 0',
         height: '34px',
         color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
         fontWeight: '500',
@@ -67,16 +69,9 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
         lineHeight: theme.font.lineHeightBase,
         cursor: 'pointer',
         transition: 'all 0.15s ease',
-        '::after': {
-          content: '""',
-          width: '100%',
-          height: '2px',
-          background: isActive ? theme.colors.primaryColor : 'transparent',
-          transition: 'all 0.15s ease',
-          position: 'absolute',
-          left: '0',
-          bottom: '0',
-        },
+        borderBottom: `2px solid ${
+          isActive ? theme.colors.primaryColor : 'none'
+        }`,
         ':hover': { color: theme.colors.primaryColor },
       };
     }
@@ -87,9 +82,6 @@ export const StyledSettingTagIconContainer = styled('div')(() => {
   return {
     display: 'flex',
     alignItems: 'center',
-    marginRight: '14.64px',
-    width: '14.47px',
-    fontSize: '14.47px',
   };
 });
 
@@ -112,7 +104,7 @@ export const StyledPublishExplanation = styled('div')(() => {
     fontSize: '18px',
     lineHeight: '26px',
     flex: 1,
-    marginTop: '60px',
+
     marginBottom: '22px',
   };
 });