Fix: invite (#1064)

apps/web/src/components/workspace-modal/WorkspaceCard.tsx

@@ -19,22 +19,22 @@ const WorkspaceType = ({ workspaceData }: { workspaceData: WorkspaceUnit }) => {
 
   if (workspaceData.provider === 'local') {
     return (
-      <p>
+      <p title={t('Local Workspace')}>
         <LocalWorkspaceIcon />
-        {t('Local Workspace')}
+        <span>{t('Local Workspace')}</span>
       </p>
     );
   }
 
   return isOwner ? (
-    <p>
+    <p title={t('Cloud Workspace')}>
       <CloudWorkspaceIcon />
-      {t('Cloud Workspace')}
+      <span>{t('Cloud Workspace')}</span>
     </p>
   ) : (
-    <p>
+    <p title={t('Joined Workspace')}>
       <JoinedWorkspaceIcon />
-      {t('Joined Workspace')}
+      <span>{t('Joined Workspace')}</span>
     </p>
   );
 };
@@ -66,15 +66,15 @@ export const WorkspaceCard = ({
         </StyleWorkspaceTitle>
         <WorkspaceType workspaceData={workspaceData} />
         {workspaceData.provider === 'local' && (
-          <p>
+          <p title={t('Available Offline')}>
             <LocalDataIcon />
-            {t('Available Offline')}
+            <span>{t('Available Offline')}</span>
           </p>
         )}
         {workspaceData.published && (
-          <p>
+          <p title={t('Published to Web')}>
             <PublishIcon />
-            {t('Published to Web')}
+            <span>{t('Published to Web')}</span>
           </p>
         )}
       </StyleWorkspaceInfo>

apps/web/src/components/workspace-modal/styles.ts

@@ -18,6 +18,7 @@ export const StyledSplitLine = styled.div(({ theme }) => {
 export const StyleWorkspaceInfo = styled.div(({ theme }) => {
   return {
     marginLeft: '15px',
+    width: '202px',
     p: {
       color: theme.colors.popoverColor,
       height: '20px',
@@ -27,6 +28,11 @@ export const StyleWorkspaceInfo = styled.div(({ theme }) => {
     svg: {
       marginRight: '10px',
       fontSize: '16px',
+      flexShrink: 0,
+    },
+    span: {
+      flexGrow: 1,
+      ...textEllipsis(1),
     },
   };
 });

apps/web/src/components/workspace-setting/general/General.tsx

@@ -5,7 +5,7 @@ import {
   StyledEditButton,
 } from './style';
 import { StyledSettingKey, StyledRow } from '../style';
-import { FlexWrapper } from '@affine/component';
+import { FlexWrapper, MuiAvatar } from '@affine/component';
 
 import { useCallback, useState } from 'react';
 import { Button } from '@affine/component';
@@ -24,6 +24,7 @@ import { CameraIcon } from './icons';
 import { Upload } from '@/components/file-upload';
 import { MuiFade } from '@affine/component';
 import { useGlobalState } from '@/store/app';
+import { EmailIcon } from '@blocksuite/icons';
 export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const [showDelete, setShowDelete] = useState<boolean>(false);
   const [showLeave, setShowLeave] = useState<boolean>(false);
@@ -143,6 +144,30 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
         </div>
       </StyledRow>
 
+      {!isOwner && (
+        <StyledRow>
+          <StyledSettingKey>{t('Workspace Owner')}</StyledSettingKey>
+          <FlexWrapper alignItems="center">
+            <MuiAvatar
+              sx={{ width: 72, height: 72, marginRight: '12px' }}
+              alt="owner avatar"
+              src={currentWorkspace?.owner?.avatar}
+            >
+              <EmailIcon />
+            </MuiAvatar>
+            <span>{currentWorkspace?.owner?.name}</span>
+          </FlexWrapper>
+        </StyledRow>
+      )}
+      {!isOwner && (
+        <StyledRow>
+          <StyledSettingKey>{t('Members')}</StyledSettingKey>
+          <FlexWrapper alignItems="center">
+            <span>{currentWorkspace?.memberCount}</span>
+          </FlexWrapper>
+        </StyledRow>
+      )}
+
       <StyledRow>
         <StyledSettingKey>{t('Workspace Type')}</StyledSettingKey>
         {isOwner ? (

apps/web/src/components/workspace-setting/style.ts

@@ -47,7 +47,6 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
 export const StyledSettingKey = styled.div(({ theme }) => {
   return {
     width: '140px',
-    textAlign: 'right',
     fontSize: theme.font.base,
     fontWeight: 500,
     marginRight: '56px',

apps/web/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts

@@ -1,12 +1,18 @@
 import { MuiAvatar, textEllipsis } from '@affine/component';
 import { styled } from '@affine/component';
-export const SelectorWrapper = styled('div')({
-  height: '100%',
-  display: 'flex',
-  alignItems: 'center',
-  ':hover': {
-    cursor: 'pointer',
-  },
+export const SelectorWrapper = styled('div')(({ theme }) => {
+  return {
+    height: '42px',
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0 12px',
+    borderRadius: '5px',
+    color: theme.colors.textColor,
+    ':hover': {
+      cursor: 'pointer',
+      background: theme.colors.hoverBackground,
+    },
+  };
 });
 
 export const Avatar = styled(MuiAvatar)({
@@ -19,7 +25,6 @@ export const WorkspaceName = styled('span')(({ theme }) => {
     marginLeft: '12px',
     fontSize: theme.font.h6,
     fontWeight: 500,
-    color: theme.colors.iconColor,
     marginTop: '4px',
     flexGrow: 1,
     ...textEllipsis(1),

apps/web/src/components/workspace-slider-bar/index.tsx

@@ -4,7 +4,6 @@ import {
   StyledArrowButton,
   StyledLink,
   StyledListItem,
-  StyledListItemForWorkspace,
   StyledNewPageButton,
   StyledSliderBar,
   StyledSliderBarWrapper,
@@ -112,9 +111,8 @@ export const WorkSpaceSliderBar = () => {
         </Tooltip>
 
         <StyledSliderBarWrapper data-testid="sliderBar">
-          <StyledListItemForWorkspace>
-            <WorkspaceSelector />
-          </StyledListItemForWorkspace>
+          <WorkspaceSelector />
+
           <StyledListItem
             data-testid="sliderBar-quickSearchButton"
             style={{ cursor: 'pointer' }}

apps/web/src/components/workspace-slider-bar/style.ts

@@ -82,11 +82,6 @@ export const StyledListItem = styled.div<{
   };
 });
 
-export const StyledListItemForWorkspace = styled.div({
-  height: '42px',
-  padding: '0 12px',
-});
-
 export const StyledLink = styled(Link)(() => {
   return {
     flexGrow: 1,