fix: detail reduction of UI (#1131)

apps/web/src/components/header/QuickSearchButton.tsx

@@ -1,6 +1,6 @@
 import { IconButton, IconButtonProps } from '@affine/component';
 import { styled } from '@affine/component';
-import { ArrowDownIcon } from '@blocksuite/icons';
+import { ArrowDownSmallIcon } from '@blocksuite/icons';
 import React from 'react';
 
 import { useModal } from '@/store/globalModal';
@@ -34,7 +34,7 @@ export const QuickSearchButton = ({
         triggerQuickSearchModal();
       }}
     >
-      <ArrowDownIcon />
+      <ArrowDownSmallIcon />
     </StyledIconButtonWithAnimate>
   );
 };

apps/web/src/components/header/header-right-items/EditorOptionMenu.tsx

@@ -3,15 +3,15 @@ import { IconButton } from '@affine/component';
 import { toast } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import {
+  DeleteTemporarilyIcon,
   EdgelessIcon,
   ExportIcon,
   ExportToHtmlIcon,
   ExportToMarkdownIcon,
-  FavouritedIcon,
-  FavouritesIcon,
+  FavoritedIcon,
+  FavoriteIcon,
   MoreVerticalIcon,
   PaperIcon,
-  TrashIcon,
 } from '@blocksuite/icons';
 
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
@@ -41,9 +41,9 @@ const PopoverContent = () => {
             favorite ? t('Removed from Favorites') : t('Added to Favorites')
           );
         }}
-        icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
+        icon={favorite ? <FavoritedIcon /> : <FavoriteIcon />}
       >
-        {favorite ? t('Remove from favorites') : t('Add to favorites')}
+        {favorite ? t('Remove from favorites') : t('Add to Favorites')}
       </MenuItem>
       <MenuItem
         icon={mode === 'page' ? <EdgelessIcon /> : <PaperIcon />}
@@ -97,7 +97,7 @@ const PopoverContent = () => {
             confirm && toast(t('Moved to Trash'));
           });
         }}
-        icon={<TrashIcon />}
+        icon={<DeleteTemporarilyIcon />}
       >
         {t('Delete')}
       </MenuItem>
@@ -107,7 +107,7 @@ const PopoverContent = () => {
 
 export const EditorOptionMenu = () => {
   return (
-    <Menu content={<PopoverContent />} placement="bottom-end">
+    <Menu content={<PopoverContent />} placement="bottom-end" trigger="click">
       <IconButton>
         <MoreVerticalIcon />
       </IconButton>

apps/web/src/components/page-list/DateCell.tsx

@@ -1,4 +1,4 @@
-import { TableCell } from '@affine/component';
+import { TableCell, TableCellProps } from '@affine/component';
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import React from 'react';
@@ -11,15 +11,15 @@ export const DateCell = ({
   pageMeta,
   dateKey,
   backupKey = '',
+  ...props
 }: {
   pageMeta: PageMeta;
   dateKey: keyof PageMeta;
   backupKey?: keyof PageMeta;
-}) => {
-  // dayjs().format('L LT');
+} & Omit<TableCellProps, 'children'>) => {
   const value = pageMeta[dateKey] ?? pageMeta[backupKey];
   return (
-    <TableCell ellipsis={true}>
+    <TableCell ellipsis={true} {...props}>
       {value ? dayjs(value as string).format('YYYY-MM-DD HH:mm') : '--'}
     </TableCell>
   );

apps/web/src/components/page-list/OperationCell.tsx

@@ -8,13 +8,13 @@ import {
 import { toast } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import {
-  DeleteForeverIcon,
-  FavouritedIcon,
-  FavouritesIcon,
+  DeletePermanentlyIcon,
+  DeleteTemporarilyIcon,
+  FavoritedIcon,
+  FavoriteIcon,
   MoreVerticalIcon,
   OpenInNewIcon,
-  RestoreIcon,
-  TrashIcon,
+  ResetIcon,
 } from '@blocksuite/icons';
 
 import { usePageHelper } from '@/hooks/use-page-helper';
@@ -36,9 +36,9 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
             favorite ? t('Removed from Favorites') : t('Added to Favorites')
           );
         }}
-        icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
+        icon={favorite ? <FavoritedIcon /> : <FavoriteIcon />}
       >
-        {favorite ? t('Remove from favorites') : t('Add to favorites')}
+        {favorite ? t('Remove from favorites') : t('Add to Favorites')}
       </MenuItem>
       <MenuItem
         onClick={() => {
@@ -62,7 +62,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
             confirm && toast(t('Moved to Trash'));
           });
         }}
-        icon={<TrashIcon />}
+        icon={<DeleteTemporarilyIcon />}
       >
         {t('Delete')}
       </MenuItem>
@@ -70,7 +70,12 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   );
   return (
     <FlexWrapper alignItems="center" justifyContent="center">
-      <Menu content={OperationMenu} placement="bottom-end" disablePortal={true}>
+      <Menu
+        content={OperationMenu}
+        placement="bottom-end"
+        disablePortal={true}
+        trigger="click"
+      >
         <IconButton darker={true}>
           <MoreVerticalIcon />
         </IconButton>
@@ -99,7 +104,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
             openPage(id);
           }}
         >
-          <RestoreIcon />
+          <ResetIcon />
         </IconButton>
       </Tooltip>
       <Tooltip content={t('Delete permanently')} placement="top-start">
@@ -117,7 +122,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
             });
           }}
         >
-          <DeleteForeverIcon />
+          <DeletePermanentlyIcon />
         </IconButton>
       </Tooltip>
     </FlexWrapper>

apps/web/src/components/page-list/index.tsx

@@ -5,15 +5,12 @@ import {
   TableHead,
   TableRow,
 } from '@affine/component';
-import { Content } from '@affine/component';
-import { IconButton } from '@affine/component';
-import { Tooltip } from '@affine/component';
-import { toast } from '@affine/component';
+import { Content, IconButton, toast, Tooltip } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import {
   EdgelessIcon,
-  FavouritedIcon,
-  FavouritesIcon,
+  FavoritedIcon,
+  FavoriteIcon,
   PaperIcon,
 } from '@blocksuite/icons';
 import { useRouter } from 'next/router';
@@ -62,9 +59,9 @@ const FavoriteTag = ({
         className={favorite ? '' : 'favorite-button'}
       >
         {favorite ? (
-          <FavouritedIcon data-testid="favorited-icon" />
+          <FavoritedIcon data-testid="favorited-icon" />
         ) : (
-          <FavouritesIcon />
+          <FavoriteIcon />
         )}
       </IconButton>
     </Tooltip>
@@ -108,23 +105,24 @@ export const PageList = ({
         </TableHead>
         <TableBody>
           {pageList.map((pageMeta, index) => {
+            // On click event must be set on the table cell, since the last operation cell is not clickable, and if set on the row, the menu will have bug on close.
+            const onClick = () => {
+              if (isPublic) {
+                router.push(
+                  `/public-workspace/${router.query.workspaceId}/${pageMeta.id}`
+                );
+              } else {
+                router.push(
+                  `/workspace/${currentWorkspace?.id}/${pageMeta.id}`
+                );
+              }
+            };
             return (
               <StyledTableRow
                 data-testid="page-list-item"
                 key={`${pageMeta.id}-${index}`}
-                onClick={() => {
-                  if (isPublic) {
-                    router.push(
-                      `/public-workspace/${router.query.workspaceId}/${pageMeta.id}`
-                    );
-                  } else {
-                    router.push(
-                      `/workspace/${currentWorkspace?.id}/${pageMeta.id}`
-                    );
-                  }
-                }}
               >
-                <TableCell>
+                <TableCell onClick={onClick}>
                   <StyledTitleWrapper>
                     <StyledTitleLink>
                       {pageMeta.mode === 'edgeless' ? (
@@ -139,19 +137,21 @@ export const PageList = ({
                     {showFavoriteTag && <FavoriteTag pageMeta={pageMeta} />}
                   </StyledTitleWrapper>
                 </TableCell>
-                <DateCell pageMeta={pageMeta} dateKey="createDate" />
+                <DateCell
+                  pageMeta={pageMeta}
+                  dateKey="createDate"
+                  onClick={onClick}
+                />
                 <DateCell
                   pageMeta={pageMeta}
                   dateKey={isTrash ? 'trashDate' : 'updatedDate'}
                   backupKey={isTrash ? 'trashDate' : 'createDate'}
+                  onClick={onClick}
                 />
-                {!isPublic ? (
+                {!isPublic && (
                   <TableCell
                     style={{ padding: 0 }}
                     data-testid={`more-actions-${pageMeta.id}`}
-                    onClick={e => {
-                      e.stopPropagation();
-                    }}
                   >
                     {isTrash ? (
                       <TrashOperationCell pageMeta={pageMeta} />
@@ -159,7 +159,7 @@ export const PageList = ({
                       <OperationCell pageMeta={pageMeta} />
                     )}
                   </TableCell>
-                ) : null}
+                )}
               </StyledTableRow>
             );
           })}

apps/web/src/components/quick-search/config.ts

@@ -1,9 +1,9 @@
 import { useTranslation } from '@affine/i18n';
 import {
-  AllPagesIcon,
-  FavouritesIcon,
+  DeleteTemporarilyIcon,
+  FavoriteIcon,
+  FolderIcon,
   SettingsIcon,
-  TrashIcon,
 } from '@blocksuite/icons';
 import { FC, SVGProps } from 'react';
 
@@ -19,14 +19,14 @@ export const useSwitchToConfig = (
     {
       title: t('All pages'),
       href: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/all` : '',
-      icon: AllPagesIcon,
+      icon: FolderIcon,
     },
     {
       title: t('Favorites'),
       href: currentWorkspaceId
         ? `/workspace/${currentWorkspaceId}/favorite`
         : '',
-      icon: FavouritesIcon,
+      icon: FavoriteIcon,
     },
     {
       title: t('Workspace Settings'),
@@ -38,7 +38,7 @@ export const useSwitchToConfig = (
     {
       title: t('Trash'),
       href: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/trash` : '',
-      icon: TrashIcon,
+      icon: DeleteTemporarilyIcon,
     },
   ];
 };

apps/web/src/components/quick-search/style.ts

@@ -102,7 +102,7 @@ export const StyledModalDivider = styled('div')(({ theme }) => {
     height: '0',
     margin: '6px 16px 6.5px 16px',
     position: 'relative',
-    borderTop: `0.5px solid ${theme.colors.placeHolderColor}`,
+    borderTop: `0.5px solid ${theme.colors.borderColor}`,
     transition: 'all 0.15s',
   };
 });

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

@@ -3,7 +3,7 @@ import { Button } from '@affine/component';
 import { Menu, MenuItem } from '@affine/component';
 import { LOCALES } from '@affine/i18n';
 import { useTranslation } from '@affine/i18n';
-import { ArrowDownIcon } from '@blocksuite/icons';
+import { ArrowDownSmallIcon } from '@blocksuite/icons';
 
 const LanguageMenuContent = () => {
   const { i18n } = useTranslation();
@@ -41,7 +41,7 @@ export const LanguageMenu = () => {
       disablePortal={true}
     >
       <Button
-        icon={<ArrowDownIcon />}
+        icon={<ArrowDownSmallIcon />}
         iconPosition="end"
         noBorder={true}
         style={{ textTransform: 'capitalize' }}

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

@@ -10,7 +10,7 @@ export const StyledSplitLine = styled.div(({ theme }) => {
   return {
     width: '1px',
     height: '20px',
-    background: theme.colors.iconColor,
+    background: theme.colors.borderColor,
     marginRight: '24px',
   };
 });

apps/web/src/components/workspace-setting/ExportPage.tsx

@@ -3,6 +3,8 @@ import { Button } from '@affine/component';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useTranslation } from '@affine/i18n';
 export const ExportPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
+  console.log('workspace', workspace);
+
   const { t } = useTranslation();
   return (
     <>

apps/web/src/components/workspace-setting/general/delete/Delete.tsx

@@ -42,6 +42,7 @@ export const WorkspaceDelete = ({
     onClose();
     router.push(`/workspace`);
   };
+  console.log('workspace', workspace);
 
   return (
     <Modal open={open} onClose={onClose}>

apps/web/src/components/workspace-setting/member/InviteMemberModal.tsx

@@ -50,7 +50,7 @@ export const InviteMemberModal = ({
   onInviteSuccess,
 }: LoginModalProps) => {
   const [email, setEmail] = useState<string>('');
-  const [showMember, setShowMember] = useState<boolean>(false);
+  const [showMember, setShowMember] = useState<boolean>(true);
   const [showTip, setShowTip] = useState<boolean>(false);
   const [userData, setUserData] = useState<User | null>(null);
   const { inviteMember, getUserByEmail } = useMembers();
@@ -90,7 +90,7 @@ export const InviteMemberModal = ({
                 value={email}
                 onChange={inputChange}
                 onBlur={() => {
-                  setShowMember(false);
+                  // setShowMember(false);
                 }}
                 placeholder={t('Invite placeholder')}
               ></Input>
@@ -211,7 +211,6 @@ const MemberIcon = styled('div')(({ theme }) => {
     borderRadius: '50%',
     color: theme.colors.primaryColor,
     background: '#F5F5F5',
-    marginRight: '8px',
     textAlign: 'center',
     lineHeight: '45px',
     // icon size
@@ -231,5 +230,6 @@ const Email = styled('div')(({ theme }) => {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
+    marginLeft: '8px',
   };
 });

apps/web/src/components/workspace-setting/member/MembersPage.tsx

@@ -5,7 +5,11 @@ import { toast } from '@affine/component';
 import { FlexWrapper } from '@affine/component';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useTranslation } from '@affine/i18n';
-import { EmailIcon, MoreVerticalIcon, TrashIcon } from '@blocksuite/icons';
+import {
+  DeleteTemporarilyIcon,
+  EmailIcon,
+  MoreVerticalIcon,
+} from '@blocksuite/icons';
 import { useState } from 'react';
 
 import Loading from '@/components/loading';
@@ -111,7 +115,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                                       })
                                     );
                                   }}
-                                  icon={<TrashIcon />}
+                                  icon={<DeleteTemporarilyIcon />}
                                 >
                                   {t('Remove from workspace')}
                                 </MenuItem>
@@ -119,6 +123,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                             }
                             placement="bottom-end"
                             disablePortal={true}
+                            trigger="click"
                           >
                             <IconButton>
                               <MoreVerticalIcon />

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

@@ -3,13 +3,13 @@ import { Tooltip } from '@affine/component';
 import { IconButton } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import {
-  AllPagesIcon,
-  ArrowDownIcon,
-  FavouritesIcon,
+  ArrowDownSmallIcon,
+  DeleteTemporarilyIcon,
+  FavoriteIcon,
+  FolderIcon,
   PlusIcon,
   SearchIcon,
   SettingsIcon,
-  TrashIcon,
 } from '@blocksuite/icons';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -127,13 +127,13 @@ export const WorkSpaceSliderBar = () => {
           </StyledListItem>
           <Link href={{ pathname: paths.all }}>
             <StyledListItem active={router.asPath === paths.all}>
-              <AllPagesIcon />
+              <FolderIcon />
               <span data-testid="all-pages">{t('All pages')}</span>
             </StyledListItem>
           </Link>
           <StyledListItem active={router.asPath === paths.favorite}>
             <StyledLink href={{ pathname: paths.favorite }}>
-              <FavouritesIcon />
+              <FavoriteIcon />
               {t('Favorites')}
             </StyledLink>
             <IconButton
@@ -142,7 +142,7 @@ export const WorkSpaceSliderBar = () => {
                 setShowSubFavorite(!showSubFavorite);
               }}
             >
-              <ArrowDownIcon
+              <ArrowDownSmallIcon
                 style={{
                   transform: `rotate(${showSubFavorite ? '180' : '0'}deg)`,
                 }}
@@ -174,7 +174,7 @@ export const WorkSpaceSliderBar = () => {
 
           <Link href={{ pathname: paths.trash }}>
             <StyledListItem active={router.asPath === paths.trash}>
-              <TrashIcon /> {t('Trash')}
+              <DeleteTemporarilyIcon /> {t('Trash')}
             </StyledListItem>
           </Link>
           <StyledNewPageButton