fix: update item menu icons (#1435)

* fix: menu icons * fix: udpate more icons * fix: update short links icons * fix: update ui * fix: udpate transaltions
graasp · Sep 13, 2024 · ca3e099 · ca3e099
1 parent 77c47f8
commit ca3e099
Show file tree

Hide file tree

Showing 27 changed files with 318 additions and 263 deletions.
diff --git a/package.json b/package.json
@@ -21,10 +21,10 @@
     "@graasp/chatbox": "3.2.1",
     "@graasp/map": "1.17.0",
     "@graasp/query-client": "3.22.3",
-    "@graasp/sdk": "4.26.0",
+    "@graasp/sdk": "4.27.0",
     "@graasp/stylis-plugin-rtl": "2.2.0",
     "@graasp/translations": "1.35.1",
-    "@graasp/ui": "4.26.2",
+    "@graasp/ui": "4.27.0",
     "@mui/icons-material": "5.16.4",
     "@mui/lab": "5.0.0-alpha.172",
     "@mui/material": "5.16.4",

diff --git a/src/components/common/CollapseButton.tsx b/src/components/common/CollapseButton.tsx
@@ -1,11 +1,12 @@
 import { useEffect, useState } from 'react';
 
-import { ExpandLess, ExpandMore } from '@mui/icons-material';
 import { IconButton, ListItemIcon, MenuItem, Tooltip } from '@mui/material';
 
 import { DiscriminatedItem, ItemType } from '@graasp/sdk';
 import { ActionButton, ActionButtonVariant } from '@graasp/ui';
 
+import { ChevronsDownUpIcon, ChevronsUpDownIcon } from 'lucide-react';
+
 import { useBuilderTranslation } from '../../config/i18n';
 import { mutations } from '../../config/queryClient';
 import { COLLAPSE_ITEM_BUTTON_CLASS } from '../../config/selectors';
@@ -50,7 +51,7 @@ const CollapseButton = ({
     onClick?.();
   };
 
-  const icon = isCollapsible ? <ExpandLess color="primary" /> : <ExpandMore />;
+  const icon = isCollapsible ? <ChevronsUpDownIcon /> : <ChevronsDownUpIcon />;
   let text;
   if (disabled) {
     text = translateBuilder(BUILDER.SETTINGS_COLLAPSE_FOLDER_INFORMATION);

diff --git a/src/components/common/DeleteButton.tsx b/src/components/common/DeleteButton.tsx
@@ -46,7 +46,7 @@ const DeleteButton = ({
     onClose?.();
   };
 
-  const text = translateBuilder(BUILDER.DELETE_BUTTON);
+  const text = translateBuilder(BUILDER.DELETE_BUTTON, { count: items.length });
 
   return (
     <>

diff --git a/src/components/common/DuplicateButton.tsx b/src/components/common/DuplicateButton.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
-
-import FileCopyIcon from '@mui/icons-material/FileCopy';
 import { ListItemIcon, MenuItem } from '@mui/material';
 
 import { DiscriminatedItem } from '@graasp/sdk';
 
+import { CopyIcon } from 'lucide-react';
+
 import { useBuilderTranslation } from '@/config/i18n';
 import { mutations } from '@/config/queryClient';
 import { ITEM_MENU_DUPLICATE_BUTTON_CLASS } from '@/config/selectors';
@@ -39,7 +38,7 @@ const DuplicateButton = ({
       className={ITEM_MENU_DUPLICATE_BUTTON_CLASS}
     >
       <ListItemIcon>
-        <FileCopyIcon />
+        <CopyIcon />
       </ListItemIcon>
       {translateBuilder(BUILDER.ITEM_MENU_DUPLICATE_MENU_ITEM)}
     </MenuItem>

diff --git a/src/components/common/HideButton.tsx b/src/components/common/HideButton.tsx
@@ -1,9 +1,10 @@
-import { Visibility, VisibilityOff } from '@mui/icons-material';
 import { IconButton, ListItemIcon, MenuItem, Tooltip } from '@mui/material';
 
 import { ItemTagType, PackedItem } from '@graasp/sdk';
 import { ActionButton, ActionButtonVariant } from '@graasp/ui';
 
+import { EyeIcon, EyeOffIcon } from 'lucide-react';
+
 import { useBuilderTranslation } from '../../config/i18n';
 import { mutations } from '../../config/queryClient';
 import {
@@ -12,7 +13,7 @@ import {
 } from '../../config/selectors';
 import { BUILDER } from '../../langs/constants';
 
-type Props = {
+type HideButtonProps = {
   item: PackedItem;
   type?: ActionButtonVariant;
   onClick?: () => void;
@@ -22,7 +23,7 @@ const HideButton = ({
   item,
   type = ActionButton.ICON_BUTTON,
   onClick,
-}: Props): JSX.Element => {
+}: HideButtonProps): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
 
   const postTag = mutations.usePostItemTag();
@@ -57,7 +58,7 @@ const HideButton = ({
     tooltip = translateBuilder(BUILDER.HIDE_ITEM_HIDDEN_PARENT_INFORMATION);
   }
 
-  const icon = hiddenTag ? <VisibilityOff /> : <Visibility />;
+  const icon = hiddenTag ? <EyeIcon /> : <EyeOffIcon />;
 
   switch (type) {
     case ActionButton.MENU_ITEM: {

diff --git a/src/components/common/PinButton.tsx b/src/components/common/PinButton.tsx
@@ -46,7 +46,7 @@ const PinButton = ({
 
   return (
     <GraaspPinButton
-      color={isPinned ? 'primary' : 'inherit'}
+      color="inherit"
       type={type}
       onClick={handlePin}
       isPinned={isPinned}

diff --git a/src/components/common/PublishButton.tsx b/src/components/common/PublishButton.tsx
@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom';
 
 import { IconButton, Tooltip } from '@mui/material';
 
-import { LibraryIcon } from '@graasp/ui';
+import { LibraryBigIcon } from 'lucide-react';
 
 import { buildItemPublishPath } from '@/config/paths';
 
@@ -31,14 +31,7 @@ const PublishButton = ({ itemId }: Props): JSX.Element => {
         to={buildItemPublishPath(itemId)}
         component={Link}
       >
-        <LibraryIcon
-          size={24}
-          showSetting
-          primaryColor="#777"
-          secondaryColor="#fff"
-          disableHover
-          selected
-        />
+        <LibraryBigIcon />
       </IconButton>
     </Tooltip>
   );

diff --git a/src/components/common/QRCode.tsx b/src/components/common/QRCode.tsx
@@ -1,9 +1,10 @@
 import { useState } from 'react';
 import QR from 'react-qr-code';
 
-import { Close, QrCode2 } from '@mui/icons-material';
 import { Box, Dialog, DialogContent, IconButton, Tooltip } from '@mui/material';
 
+import { QrCodeIcon, XIcon } from 'lucide-react';
+
 import { useBuilderTranslation } from '@/config/i18n';
 import {
   SHARE_ITEM_QR_BTN_ID,
@@ -28,7 +29,7 @@ const QRCode = ({ value, disabled = false }: Props): JSX.Element => {
           id={SHARE_ITEM_QR_BTN_ID}
           disabled={disabled}
         >
-          <QrCode2 />
+          <QrCodeIcon />
         </IconButton>
       </Tooltip>
       <Dialog
@@ -45,7 +46,7 @@ const QRCode = ({ value, disabled = false }: Props): JSX.Element => {
             top: 8,
           }}
         >
-          <Close />
+          <XIcon />
         </IconButton>
         <DialogContent sx={{ p: 5 }}>
           <Box width={{ xs: '60vw', sm: '50vw', md: '30vw', lg: '24vw' }}>

diff --git a/src/components/common/RestoreButton.tsx b/src/components/common/RestoreButton.tsx
@@ -1,6 +1,7 @@
-import { RestoreFromTrash } from '@mui/icons-material';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 
+import { Undo2Icon } from 'lucide-react';
+
 import { useBuilderTranslation } from '../../config/i18n';
 import { mutations } from '../../config/queryClient';
 import { RESTORE_ITEMS_BUTTON_CLASS } from '../../config/selectors';
@@ -28,7 +29,9 @@ const RestoreButton = ({
     onClickFn?.();
   };
 
-  const title = translateBuilder(BUILDER.RESTORE_ITEM_BUTTON);
+  const title = translateBuilder(BUILDER.RESTORE_ITEM_BUTTON, {
+    count: itemIds.length,
+  });
 
   return (
     <Tooltip title={title}>
@@ -40,7 +43,7 @@ const RestoreButton = ({
           className={RESTORE_ITEMS_BUTTON_CLASS}
           onClick={onClick}
         >
-          <RestoreFromTrash />
+          <Undo2Icon />
         </IconButton>
       </span>
     </Tooltip>

diff --git a/src/components/item/header/Actions.tsx b/src/components/item/header/Actions.tsx
@@ -104,20 +104,16 @@ const Actions = ({ item }: Props): JSX.Element | null => {
             )}
           </>
         )}
-        {canAdmin ? (
-          <>
-            <Divider />
-            <RecycleButton
-              key="recycle"
-              type={ActionButton.MENU_ITEM}
-              itemIds={[item.id]}
-              onClick={closeMenu}
-            />
-          </>
-        ) : (
-          <Divider />
-        )}
+        <Divider />
         <FlagButton item={item} />
+        {canAdmin && (
+          <RecycleButton
+            key="recycle"
+            type={ActionButton.MENU_ITEM}
+            itemIds={[item.id]}
+            onClick={closeMenu}
+          />
+        )}
       </Menu>
     </>
   );

diff --git a/src/components/item/header/ItemHeaderActions.tsx b/src/components/item/header/ItemHeaderActions.tsx
@@ -79,7 +79,7 @@ const ItemHeaderActions = ({ itemId }: Props): JSX.Element | null => {
 
         <ShareButton itemId={item.id} />
         <ChatboxButton
-          showChat
+          showChat={isChatboxMenuOpen}
           tooltip={translateBuilder(BUILDER.ITEM_CHATBOX_TITLE, {
             name: item.name,
           })}

diff --git a/src/components/item/sharing/shortLink/AliasInput.tsx b/src/components/item/sharing/shortLink/AliasInput.tsx
@@ -1,8 +1,9 @@
 import { ChangeEvent } from 'react';
 
-import { Cached } from '@mui/icons-material';
 import { IconButton, Stack, TextField, Tooltip } from '@mui/material';
 
+import { RefreshCcwIcon } from 'lucide-react';
+
 import { useBuilderTranslation } from '@/config/i18n';
 import {
   SHORT_LINK_ALIAS_INPUT_ID,
@@ -42,7 +43,7 @@ const AliasInput = ({ alias, onChange, hasError }: Props): JSX.Element => {
             onClick={() => onChange(randomAlias())}
             id={SHORT_LINK_RANDOMIZE_BUTTON_ID}
           >
-            <Cached />
+            <RefreshCcwIcon />
           </IconButton>
         </span>
       </Tooltip>

diff --git a/src/components/item/sharing/shortLink/ConfirmDeleteLink.tsx b/src/components/item/sharing/shortLink/ConfirmDeleteLink.tsx
@@ -51,38 +51,36 @@ const ConfirmDeleteLink = ({
   const CONFIRM_DELETE_DIALOG_DESC = `alert-dialog-desc-delete-${shortLink}`;
 
   return (
-    <div>
-      <Dialog
-        open={open}
-        onClose={onClose}
-        aria-labelledby={CONFIRM_DELETE_DIALOG_TITLE}
-        aria-describedby={CONFIRM_DELETE_DIALOG_DESC}
-      >
-        <DialogTitle id={CONFIRM_DELETE_DIALOG_TITLE}>
-          {translateBuilder(BUILDER.CONFIRM_DELETE_SHORT_LINK_TITLE)}
-        </DialogTitle>
-        <DialogContent>
-          <DialogContentText id={CONFIRM_DELETE_DIALOG_DESC}>
-            {translateBuilder(BUILDER.CONFIRM_DELETE_SHORT_LINK_MSG, {
-              shortLink,
-            })}
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <CancelButton
-            onClick={handleClose}
-            id={buildShortLinkCancelBtnId(shortLink)}
-          />
-          <Button
-            onClick={handleClickDelete}
-            color="error"
-            id={buildShortLinkConfirmDeleteBtnId(shortLink)}
-          >
-            {translateBuilder(BUILDER.DELETE_BTN)}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </div>
+    <Dialog
+      open={open}
+      onClose={onClose}
+      aria-labelledby={CONFIRM_DELETE_DIALOG_TITLE}
+      aria-describedby={CONFIRM_DELETE_DIALOG_DESC}
+    >
+      <DialogTitle id={CONFIRM_DELETE_DIALOG_TITLE}>
+        {translateBuilder(BUILDER.CONFIRM_DELETE_SHORT_LINK_TITLE)}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText id={CONFIRM_DELETE_DIALOG_DESC}>
+          {translateBuilder(BUILDER.CONFIRM_DELETE_SHORT_LINK_MSG, {
+            shortLink,
+          })}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <CancelButton
+          onClick={handleClose}
+          id={buildShortLinkCancelBtnId(shortLink)}
+        />
+        <Button
+          onClick={handleClickDelete}
+          color="error"
+          id={buildShortLinkConfirmDeleteBtnId(shortLink)}
+        >
+          {translateBuilder(BUILDER.DELETE_BTN)}
+        </Button>
+      </DialogActions>
+    </Dialog>
   );
 };
 

diff --git a/src/components/item/sharing/shortLink/ShortLinkMenu.tsx b/src/components/item/sharing/shortLink/ShortLinkMenu.tsx
@@ -1,10 +1,5 @@
 import React, { useState } from 'react';
 
-import CreateIcon from '@mui/icons-material/Create';
-import DeleteIcon from '@mui/icons-material/Delete';
-import EditIcon from '@mui/icons-material/Edit';
-import FileCopyIcon from '@mui/icons-material/FileCopy';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
 import {
   IconButton,
   ListItemIcon,
@@ -18,6 +13,8 @@ import {
 import { ShortLink, ShortLinkPayload } from '@graasp/sdk';
 import { FAILURE_MESSAGES, SUCCESS_MESSAGES } from '@graasp/translations';
 
+import { CopyIcon, MoreVerticalIcon, PenIcon, TrashIcon } from 'lucide-react';
+
 import QRCode from '@/components/common/QRCode';
 import { useBuilderTranslation, useMessagesTranslation } from '@/config/i18n';
 import notifier from '@/config/notifier';
@@ -108,7 +105,7 @@ const ShortLinkMenu = ({
       <Tooltip title={translateBuilder(BUILDER.SHARE_ITEM_LINK_COPY_TOOLTIP)}>
         <span>
           <IconButton onClick={handleCopy}>
-            <FileCopyIcon />
+            <CopyIcon />
           </IconButton>
         </span>
       </Tooltip>
@@ -123,7 +120,7 @@ const ShortLinkMenu = ({
                 id={buildShortLinkMenuBtnId(alias)}
                 onClick={handleMenuClick}
               >
-                <MoreVertIcon />
+                <MoreVerticalIcon />
               </IconButton>
               <Menu
                 id={buildShortLinkMenuBtnId(alias)}
@@ -136,7 +133,7 @@ const ShortLinkMenu = ({
                   id={buildShortLinkEditBtnId(alias)}
                 >
                   <ListItemIcon>
-                    <EditIcon fontSize="small" />
+                    <PenIcon />
                   </ListItemIcon>
                   <ListItemText>
                     {translateBuilder(BUILDER.EDIT_SHORT_LINK_TITLE)}
@@ -147,7 +144,7 @@ const ShortLinkMenu = ({
                   id={buildShortLinkDeleteBtnId(alias)}
                 >
                   <ListItemIcon>
-                    <DeleteIcon fontSize="small" />
+                    <TrashIcon />
                   </ListItemIcon>
                   <ListItemText>
                     {translateBuilder(BUILDER.DELETE_SHORT_LINK_TITLE)}
@@ -164,7 +161,7 @@ const ShortLinkMenu = ({
                   id={buildShortLinkShortenBtnId(itemId, platform)}
                   onClick={() => onCreate(platform)}
                 >
-                  <CreateIcon />
+                  <PenIcon />
                 </IconButton>
               </span>
             </Tooltip>