feat: workspace setting general UI

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',
   };
 });

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>
   );
 };