fix: update short links icons

graasp · Sep 11, 2024 · 83f52f3 · 83f52f3
1 parent 63097d1
commit 83f52f3
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 55 deletions.
diff --git a/src/components/common/DeleteButton.tsx b/src/components/common/DeleteButton.tsx
@@ -46,7 +46,10 @@ const DeleteButton = ({
     onClose?.();
   };
 
-  const text = translateBuilder(BUILDER.DELETE_BUTTON);
+  const text =
+    items.length > 1
+      ? translateBuilder(BUILDER.DELETE_ALL_SELECTED_ITEMS_BUTTON)
+      : translateBuilder(BUILDER.DELETE_BUTTON);
 
   return (
     <>

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,11 @@ const RestoreButton = ({
     onClickFn?.();
   };
 
-  const title = translateBuilder(BUILDER.RESTORE_ITEM_BUTTON);
+  const title =
+    // adapt the tooltip to the number of items that will be restored
+    itemIds.length > 1
+      ? translateBuilder(BUILDER.RESTORE_ALL_SELECTED_ITEMS_BUTTON)
+      : translateBuilder(BUILDER.RESTORE_ITEM_BUTTON);
 
   return (
     <Tooltip title={title}>
@@ -40,7 +45,7 @@ const RestoreButton = ({
           className={RESTORE_ITEMS_BUTTON_CLASS}
           onClick={onClick}
         >
-          <RestoreFromTrash />
+          <Undo2Icon />
         </IconButton>
       </span>
     </Tooltip>

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>

diff --git a/src/components/main/list/SelectionToolbar.tsx b/src/components/main/list/SelectionToolbar.tsx
@@ -1,6 +1,7 @@
-import { Close } from '@mui/icons-material';
 import { IconButton, Stack } from '@mui/material';
 
+import { XIcon } from 'lucide-react';
+
 import { useSelectionContext } from './SelectionContext';
 
 const SelectionToolbar = ({
@@ -21,7 +22,7 @@ const SelectionToolbar = ({
     >
       <Stack direction="row" alignItems="center">
         <IconButton onClick={clearSelection}>
-          <Close />
+          <XIcon />
         </IconButton>
         <Stack>{selectedIds.length} selected</Stack>
       </Stack>

diff --git a/src/config/env.ts b/src/config/env.ts
@@ -31,7 +31,8 @@ export const GRAASP_ANALYZER_HOST =
 export const GRAASP_ACCOUNT_HOST =
   VITE_GRAASP_ACCOUNT_HOST || 'http://localhost:3114';
 
-export const GRAASP_REDIRECTION_HOST = VITE_GRAASP_REDIRECTION_HOST;
+export const GRAASP_REDIRECTION_HOST =
+  VITE_GRAASP_REDIRECTION_HOST || 'http://localhost:3000/items/short-links';
 
 export const H5P_INTEGRATION_URL =
   VITE_H5P_INTEGRATION_URL || `${API_HOST}/p/h5p-integration`;

diff --git a/src/langs/constants.ts b/src/langs/constants.ts
@@ -42,6 +42,7 @@ export const BUILDER = {
   CROP_IMAGE_MODAL_IMAGE_ALT_TEXT: 'CROP_IMAGE_MODAL_IMAGE_ALT_TEXT',
   CROP_IMAGE_MODAL_UNEXPECTED_ERROR: 'CROP_IMAGE_MODAL_UNEXPECTED_ERROR',
   DELETE_BUTTON: 'DELETE_BUTTON',
+  DELETE_ALL_SELECTED_ITEMS_BUTTON: 'DELETE_ALL_SELECTED_ITEMS_BUTTON',
   DELETE_ITEM_MODAL_CONFIRM_BUTTON: 'DELETE_ITEM_MODAL_CONFIRM_BUTTON',
   DELETE_ITEM_MODAL_CONTENT: 'DELETE_ITEM_MODAL_CONTENT',
   DELETE_ITEM_MODAL_TITLE: 'DELETE_ITEM_MODAL_TITLE',
@@ -104,6 +105,7 @@ export const BUILDER = {
   BOOKMARKS_NO_ITEM: 'BOOKMARKS_NO_ITEM',
   BOOKMARKS_NO_ITEM_SEARCH: 'BOOKMARKS_NO_ITEM_SEARCH',
   RESTORE_ITEM_BUTTON: 'RESTORE_ITEM_BUTTON',
+  RESTORE_ALL_SELECTED_ITEMS_BUTTON: 'RESTORE_ALL_SELECTED_ITEMS_BUTTON',
   SHARE_ITEM_BUTTON: 'SHARE_ITEM_BUTTON',
   ITEM_METADATA_CREATOR_TITLE: 'ITEM_METADATA_CREATOR_TITLE',
   ITEM_METADATA_TYPE_TITLE: 'ITEM_METADATA_TYPE_TITLE',

diff --git a/src/langs/en.json b/src/langs/en.json
@@ -44,6 +44,7 @@
   "CROP_IMAGE_MODAL_IMAGE_ALT_TEXT": "Crop me",
   "CROP_IMAGE_MODAL_UNEXPECTED_ERROR": "An unexpected error happened, please try again later. You can dismiss this modal, refresh the page and try again. If this issue persists please contact us.",
   "DELETE_BUTTON": "Delete",
+  "DELETE_ALL_SELECTED_ITEMS_BUTTON": "Delete all selected",
   "DELETE_ITEM_MODAL_CONFIRM_BUTTON": "Delete Permanently",
   "DELETE_ITEM_MODAL_CONTENT_one": "This item will be deleted permanently.",
   "DELETE_ITEM_MODAL_CONTENT_other": "These items will be deleted permanently.",
@@ -258,6 +259,7 @@
   "RECYCLE_BIN_TITLE": "Trash",
   "RECYCLE_ITEM_BUTTON": "Trash",
   "RESTORE_ITEM_BUTTON": "Restore",
+  "RESTORE_ALL_SELECTED_ITEMS_BUTTON": "Restore all selected",
   "SAVE_ACTIONS_TOGGLE_TOOLTIP": "Coming soon!",
   "SETTINGS_COLLAPSE_FOLDER_INFORMATION": "A folder cannot be collapsed",
   "SETTINGS_COLLAPSE_LABEL": "Set as collapsible item",