chore: update General style

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

@@ -3,15 +3,17 @@ import {
   // StyledSettingAvatar,
   StyledSettingAvatarContent,
   StyledSettingInputContainer,
+  StyledDoneButtonContainer,
+  StyledInput,
 } from './style';
 import { StyledSettingH2 } from '../style';
 
 import { useState } from 'react';
-import { Button, TextButton } from '@/ui/button';
+import { Button } from '@/ui/button';
-import Input from '@/ui/input';
 import { useAppState } from '@/providers/app-state-provider';
 import { WorkspaceDelete } from './delete';
 import { WorkspaceLeave } from './leave';
+import { DoneIcon, CloudUnsyncedIcon } from '@blocksuite/icons';
 // import { Upload } from '@/components/file-upload';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { WorkspaceUnit } from '@affine/datacenter';
@@ -44,7 +46,7 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
 
   return workspace ? (
     <div>
-      <StyledSettingH2 marginTop={56}>{t('Workspace Icon')}</StyledSettingH2>
+      <StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2>
       <StyledSettingAvatarContent>
         <div
           style={{
@@ -69,29 +71,30 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
       </StyledSettingAvatarContent>
       <StyledSettingH2 marginTop={20}>{t('Workspace Name')}</StyledSettingH2>
       <StyledSettingInputContainer>
-        <Input
+        <StyledInput
-          width={327}
+          width={284}
+          height={32}
           value={workspaceName}
           placeholder={t('Workspace Name')}
           maxLength={14}
           minLength={1}
           disabled={!isOwner}
           onChange={handleChangeWorkSpaceName}
-        ></Input>
+        ></StyledInput>
         {isOwner ? (
-          <TextButton
+          <StyledDoneButtonContainer
             onClick={() => {
               handleUpdateWorkspaceName();
             }}
-            style={{ marginLeft: '0px' }}
           >
-            ✔️
+            <DoneIcon />
-          </TextButton>
+          </StyledDoneButtonContainer>
         ) : null}
       </StyledSettingInputContainer>
       <StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2>
       <StyledSettingInputContainer>
-        <code>{workspace.provider} </code>
+        <CloudUnsyncedIcon style={{ marginRight: '15px' }} />
+        Local workspace
       </StyledSettingInputContainer>
       <StyledDeleteButtonContainer>
         {isOwner ? (
@@ -99,6 +102,7 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
             <Button
               type="danger"
               shape="circle"
+              style={{ borderRadius: '40px' }}
               onClick={() => {
                 setShowDelete(true);
               }}

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

@@ -1,11 +1,11 @@
-import { styled } from '@/styles';
+import { displayFlex, styled } from '@/styles';
 
 export const StyledSettingContainer = styled('div')(() => {
   return {
     display: 'flex',
-    padding: '50px',
     flexDirection: 'column',
-    height: '100vh',
+    marginTop: '24px',
+    marginLeft: '48px',
     overflow: 'auto',
   };
 });
@@ -20,9 +20,7 @@ export const StyledSettingSidebar = styled('div')(() => {
 });
 
 export const StyledSettingContent = styled('div')(() => {
-  return {
+  return {};
-    paddingLeft: '48px',
-  };
 });
 
 export const StyledSetting = styled('div')(({ theme }) => {
@@ -60,14 +58,26 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
     {
       return {
         display: 'flex',
-        marginBottom: '12px',
+        position: 'relative',
-        padding: '0 24px',
+        margin: '0 48px 8px 0',
-        height: '32px',
+        height: '34px',
         color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
-        fontWeight: '400',
+        fontWeight: '500',
-        fontSize: '16px',
+        fontSize: theme.font.base,
-        lineHeight: '32px',
+        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',
+        },
+        ':hover': { color: theme.colors.primaryColor },
       };
     }
   }
@@ -84,11 +94,11 @@ export const StyledSettingTagIconContainer = styled('div')(() => {
 });
 
 export const StyledSettingH2 = styled('h2')<{ marginTop?: number }>(
-  ({ marginTop }) => {
+  ({ marginTop, theme }) => {
     return {
       fontWeight: '500',
-      fontSize: '18px',
+      fontSize: theme.font.base,
-      lineHeight: '26px',
+      lineHeight: theme.font.lineHeightBase,
       marginTop: marginTop ? `${marginTop}px` : '0px',
     };
   }
@@ -96,12 +106,28 @@ export const StyledSettingH2 = styled('h2')<{ marginTop?: number }>(
 
 export const StyledPublishExplanation = styled('div')(() => {
   return {
+    ...displayFlex('row', 'center', 'center'),
     paddingRight: '48px',
     fontWeight: '500',
     fontSize: '18px',
     lineHeight: '26px',
     flex: 1,
     marginTop: '60px',
+    marginBottom: '22px',
+  };
+});
+export const StyledWorkspaceName = styled('div')(() => {
+  return {
+    fontWeight: '400',
+    fontSize: '18px',
+    lineHeight: '26px',
+  };
+});
+export const StyledWorkspaceType = styled('div')(() => {
+  return {
+    fontWeight: '500',
+    fontSize: '18px',
+    lineHeight: '26px',
   };
 });
 
@@ -109,16 +135,26 @@ export const StyledPublishCopyContainer = styled('div')(() => {
   return {
     marginTop: '12px',
     display: 'flex',
-    flexDirection: 'row',
+    flexDirection: 'column',
-    alignItems: 'center',
+    alignItems: 'start',
+    justifyContent: 'center',
     marginBottom: '20px',
     paddingTop: '20px',
   };
 });
+export const StyledStopPublishContainer = styled('div')(() => {
+  return {
+    position: 'absolute',
+    bottom: '0',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    marginBottom: '20px',
+  };
+});
 
 export const StyledCopyButtonContainer = styled('div')(() => {
   return {
-    marginLeft: '12px',
+    marginTop: '64px',
   };
 });