chore: update membersPage style

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

packages/app/src/components/workspace-setting/member/MembersPage.tsx

@@ -69,6 +69,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                   member.user
                 );
                 return (
+                  <>
                     <StyledMemberListItem key={index}>
                       <StyledMemberNameContainer>
                         <StyledMemberAvatar
@@ -126,6 +127,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                         </Menu>
                       </StyledMoreVerticalButton>
                     </StyledMemberListItem>
+                  </>
                 );
               })}
             </>

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

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) {