From 983d4b2d5f52f88e216e5e9f66d1ab21338a4aa5 Mon Sep 17 00:00:00 2001
From: MingLiang Wang <mingliangwang0o0@gmail.com>
Date: Mon, 19 Dec 2022 21:20:18 +0800
Subject: [PATCH] feat: workspace setting general UI

---
 .../src/components/workspace-setting/style.ts | 70 +++++++++++++++++--
 .../workspace-setting/workspace-setting.tsx   | 36 ++++++++--
 2 files changed, 95 insertions(+), 11 deletions(-)

diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts
index ec41b17dae..22c1d6e344 100644
--- a/packages/app/src/components/workspace-setting/style.ts
+++ b/packages/app/src/components/workspace-setting/style.ts
@@ -1,13 +1,16 @@
 import { styled } from '@/styles';
+import { Button } from '@/ui/button';
+import MuiAvatar from '@mui/material/Avatar';
 
-export const StyledSettingContent = styled('div')(({ theme }) => {
+export const StyledSettingContainer = styled('div')(({ theme }) => {
   return {
     position: 'relative',
     display: 'flex',
     padding: '0px',
-    width: '1080px',
+    width: '961px',
     background: theme.colors.popoverBackground,
     borderRadius: '12px',
+    overflow: 'hidden',
   };
 });
 
@@ -15,7 +18,23 @@ export const StyledSettingSidebar = styled('div')(({ theme }) => {
   {
     return {
       width: '236px',
-      height: '780px',
+      height: '620px',
+      background: theme.mode === 'dark' ? '#272727' : '#FBFBFC',
+    };
+  }
+});
+
+export const StyledSettingContent = styled('div')(({ theme }) => {
+  return {
+    paddingLeft: '48px',
+  };
+});
+
+export const StyledSetting = styled('div')(({ theme }) => {
+  {
+    return {
+      width: '236px',
+      height: '620px',
       background: theme.mode === 'dark' ? '#272727' : '#FBFBFC',
     };
   }
@@ -71,10 +90,47 @@ export const StyledSettingTagIconContainer = styled('div')(({ theme }) => {
   };
 });
 
-export const StyledSettingH2 = styled('h2')(({ theme }) => {
+export const StyledSettingH2 = styled('h2')<{ marginTop?: number }>(
+  ({ marginTop, theme }) => {
+    return {
+      fontWeight: '500',
+      fontSize: '18px',
+      lineHeight: '26px',
+      marginTop: marginTop ? `${marginTop}px` : '0px',
+    };
+  }
+);
+
+export const StyledSettingAvatarContent = styled('div')(({ theme }) => {
   return {
-    fontWeight: '500',
-    fontSize: '18px',
-    lineHeight: '26px',
+    marginTop: '12px',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: '72px',
+  };
+});
+
+export const StyledSettingAvatar = styled(MuiAvatar)(({ theme }) => {
+  return { height: '72px', width: '72px' };
+});
+
+export const StyledAvatarUploadBtn = styled(Button)(({ theme }) => {
+  return {
+    backgroundColor: theme.colors.hoverBackground,
+    color: theme.colors.primaryColor,
+    margin: '0 12px 0 24px',
+  };
+});
+
+export const StyledSettingInputContainer = styled('div')(({ theme }) => {
+  return {
+    marginTop: '12px',
+  };
+});
+
+export const StyledDeleteButtonContainer = styled('div')(({ theme }) => {
+  return {
+    marginTop: '158px',
   };
 });
diff --git a/packages/app/src/components/workspace-setting/workspace-setting.tsx b/packages/app/src/components/workspace-setting/workspace-setting.tsx
index 8e059d6838..d405510491 100644
--- a/packages/app/src/components/workspace-setting/workspace-setting.tsx
+++ b/packages/app/src/components/workspace-setting/workspace-setting.tsx
@@ -1,7 +1,13 @@
 import Modal from '@/ui/modal';
 import {
+  StyledAvatarUploadBtn,
+  StyledDeleteButtonContainer,
+  StyledSettingAvatar,
+  StyledSettingAvatarContent,
+  StyledSettingContainer,
   StyledSettingContent,
   StyledSettingH2,
+  StyledSettingInputContainer,
   StyledSettingSidebar,
   StyledSettingSidebarHeader,
   StyledSettingTabContainer,
@@ -10,6 +16,8 @@ import {
 } from './style';
 import { EditIcon, UsersIcon, PublishIcon } from '@blocksuite/icons';
 import { useState } from 'react';
+import { Button } from '@/ui/button';
+import Input from '@/ui/input';
 
 enum ActiveTab {
   'general' = 'general',
@@ -69,7 +77,7 @@ export const WorkspaceSetting = () => {
   };
   return (
     <Modal open={true}>
-      <StyledSettingContent>
+      <StyledSettingContainer>
         <StyledSettingSidebar>
           <StyledSettingSidebarHeader>
             Workspace Settings
@@ -79,8 +87,10 @@ export const WorkspaceSetting = () => {
             onTabChange={handleTabChange}
           />
         </StyledSettingSidebar>
-        {activeTab === ActiveTab.general && <GeneralPage />}
-      </StyledSettingContent>
+        <StyledSettingContent>
+          {activeTab === ActiveTab.general && <GeneralPage />}
+        </StyledSettingContent>
+      </StyledSettingContainer>
     </Modal>
   );
 };
@@ -88,7 +98,25 @@ export const WorkspaceSetting = () => {
 const GeneralPage = () => {
   return (
     <div>
-      <StyledSettingH2>Workspace Avatar</StyledSettingH2>
+      <StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2>
+      <StyledSettingAvatarContent>
+        <StyledSettingAvatar alt="workspace avatar">W</StyledSettingAvatar>
+        <StyledAvatarUploadBtn shape="round">upload</StyledAvatarUploadBtn>
+        <Button shape="round">remove</Button>
+      </StyledSettingAvatarContent>
+      <StyledSettingH2 marginTop={36}>Workspace Name</StyledSettingH2>
+      <StyledSettingInputContainer>
+        <Input width={327} placeholder="Workspace Name"></Input>
+      </StyledSettingInputContainer>
+      <StyledSettingH2 marginTop={36}>Workspace Owner</StyledSettingH2>
+      <StyledSettingInputContainer>
+        <Input width={327} placeholder="Workspace Owner"></Input>
+      </StyledSettingInputContainer>
+      <StyledDeleteButtonContainer>
+        <Button type="danger" shape="circle">
+          Delete Workspace
+        </Button>
+      </StyledDeleteButtonContainer>
     </div>
   );
 };