From e352dc7f6187bd4e6382dd3e1281e37755b928c2 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Wed, 18 Jan 2023 16:01:39 +0800
Subject: [PATCH] chore: update membersPage style

---
 .../member/InviteMemberModal.tsx              |   8 +-
 .../workspace-setting/member/MembersPage.tsx  | 112 +++++++++---------
 .../workspace-setting/member/style.ts         |  10 +-
 .../app/src/hooks/use-workspace-helper.ts     |   2 +
 4 files changed, 71 insertions(+), 61 deletions(-)

diff --git a/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx b/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx
index c965e6c0bf..7bd542efb6 100644
--- a/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx
+++ b/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx
@@ -122,6 +122,7 @@ export const InviteMemberModal = ({
             <Button
               shape="circle"
               type="primary"
+              style={{ width: '364px', height: '38px', borderRadius: '40px' }}
               onClick={async () => {
                 await inviteMember(email);
                 onInviteSuccess();
@@ -143,10 +144,8 @@ const Header = styled('div')({
 
 const Content = styled('div')({
   display: 'flex',
-  padding: '0 48px',
   flexDirection: 'column',
   alignItems: 'center',
-  gap: '16px',
 });
 
 const ContentTitle = styled('h1')({
@@ -158,9 +157,8 @@ const ContentTitle = styled('h1')({
 });
 
 const Footer = styled('div')({
-  height: '70px',
-  paddingLeft: '24px',
-  marginTop: '32px',
+  height: '102px',
+  margin: '32px 0',
   textAlign: 'center',
 });
 
diff --git a/packages/app/src/components/workspace-setting/member/MembersPage.tsx b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
index dc6a7132f3..25748cee35 100644
--- a/packages/app/src/components/workspace-setting/member/MembersPage.tsx
+++ b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
@@ -69,63 +69,65 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                   member.user
                 );
                 return (
-                  <StyledMemberListItem key={index}>
-                    <StyledMemberNameContainer>
-                      <StyledMemberAvatar
-                        alt="member avatar"
-                        src={user.avatar_url}
-                      >
-                        <EmailIcon />
-                      </StyledMemberAvatar>
+                  <>
+                    <StyledMemberListItem key={index}>
+                      <StyledMemberNameContainer>
+                        <StyledMemberAvatar
+                          alt="member avatar"
+                          src={user.avatar_url}
+                        >
+                          <EmailIcon />
+                        </StyledMemberAvatar>
 
-                      <StyledMemberInfo>
-                        <StyledMemberName>{user.name}</StyledMemberName>
-                        <StyledMemberEmail>
-                          {member.user.email}
-                        </StyledMemberEmail>
-                      </StyledMemberInfo>
-                    </StyledMemberNameContainer>
-                    <StyledMemberRoleContainer>
-                      {member.accepted
-                        ? member.type !== 99
-                          ? 'Member'
-                          : 'Workspace Owner'
-                        : 'Pending'}
-                    </StyledMemberRoleContainer>
-                    <StyledMoreVerticalButton>
-                      <Menu
-                        content={
-                          <>
-                            <MenuItem
-                              onClick={async () => {
-                                const confirmRemove = await confirm({
-                                  title: 'Delete Member?',
-                                  content: `will delete member`,
-                                  confirmText: 'Delete',
-                                  confirmType: 'danger',
-                                });
+                        <StyledMemberInfo>
+                          <StyledMemberName>{user.name}</StyledMemberName>
+                          <StyledMemberEmail>
+                            {member.user.email}
+                          </StyledMemberEmail>
+                        </StyledMemberInfo>
+                      </StyledMemberNameContainer>
+                      <StyledMemberRoleContainer>
+                        {member.accepted
+                          ? member.type !== 99
+                            ? 'Member'
+                            : 'Workspace Owner'
+                          : 'Pending'}
+                      </StyledMemberRoleContainer>
+                      <StyledMoreVerticalButton>
+                        <Menu
+                          content={
+                            <>
+                              <MenuItem
+                                onClick={async () => {
+                                  const confirmRemove = await confirm({
+                                    title: 'Delete Member?',
+                                    content: `will delete member`,
+                                    confirmText: 'Delete',
+                                    confirmType: 'danger',
+                                  });
 
-                                if (!confirmRemove) {
-                                  return;
-                                }
-                                await removeMember(member.id);
-                                toast(`${user.name} has been removed`);
-                              }}
-                              icon={<TrashIcon />}
-                            >
-                              Delete
-                            </MenuItem>
-                          </>
-                        }
-                        placement="bottom-end"
-                        disablePortal={true}
-                      >
-                        <IconButton>
-                          <MoreVerticalIcon />
-                        </IconButton>
-                      </Menu>
-                    </StyledMoreVerticalButton>
-                  </StyledMemberListItem>
+                                  if (!confirmRemove) {
+                                    return;
+                                  }
+                                  await removeMember(member.id);
+                                  toast(`${user.name} has been removed`);
+                                }}
+                                icon={<TrashIcon />}
+                              >
+                                Delete
+                              </MenuItem>
+                            </>
+                          }
+                          placement="bottom-end"
+                          disablePortal={true}
+                        >
+                          <IconButton>
+                            <MoreVerticalIcon />
+                          </IconButton>
+                        </Menu>
+                      </StyledMoreVerticalButton>
+                    </StyledMemberListItem>
+                  </>
                 );
               })}
             </>
diff --git a/packages/app/src/components/workspace-setting/member/style.ts b/packages/app/src/components/workspace-setting/member/style.ts
index eeea67d6d8..df99d2d94c 100644
--- a/packages/app/src/components/workspace-setting/member/style.ts
+++ b/packages/app/src/components/workspace-setting/member/style.ts
@@ -19,6 +19,7 @@ export const StyledMemberNameContainer = styled('div')(() => {
     display: 'flex',
     alignItems: 'center',
     width: '402px',
+    flex: 2,
   };
 });
 
@@ -27,6 +28,7 @@ export const StyledMemberRoleContainer = styled('div')(() => {
     display: 'flex',
     alignItems: 'center',
     width: '222px',
+    flex: 1,
   };
 });
 
@@ -34,6 +36,8 @@ export const StyledMemberListContainer = styled('ul')(() => {
   return {
     marginTop: '15px',
     overflowY: 'scroll',
+    width: '100%',
+    maxHeight: 'calc(100vh - 300px)',
   };
 });
 
@@ -42,6 +46,7 @@ export const StyledMemberListItem = styled('li')(() => {
     display: 'flex',
     alignItems: 'center',
     height: '72px',
+    width: '100%',
   };
 });
 
@@ -71,7 +76,9 @@ export const StyledMemberEmail = styled('div')(({ theme }) => {
 
 export const StyledMemberButtonContainer = styled('div')(() => {
   return {
-    marginTop: '14px',
+    position: 'absolute',
+    bottom: '0',
+    marginBottom: '20px',
   };
 });
 
@@ -83,6 +90,7 @@ export const StyledMoreVerticalButton = styled('button')(() => {
     width: '24px',
     height: '24px',
     cursor: 'pointer',
+    paddingRight: '48px',
   };
 });
 
diff --git a/packages/app/src/hooks/use-workspace-helper.ts b/packages/app/src/hooks/use-workspace-helper.ts
index 64387a9848..2a1977f968 100644
--- a/packages/app/src/hooks/use-workspace-helper.ts
+++ b/packages/app/src/hooks/use-workspace-helper.ts
@@ -42,6 +42,8 @@ export const useWorkspaceHelper = () => {
       content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
       confirmText: user ? 'Enable' : 'Sign in and Enable',
       cancelText: 'Skip',
+      confirmType: 'primary',
+      buttonDirection: 'column',
     }).then(async confirm => {
       if (confirm && currentWorkspace) {
         if (!user) {