fix: update icons

graasp · Jan 15, 2024 · 3255228 · 3255228
1 parent c194d5c
commit 3255228
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 34 deletions.
diff --git a/src/modules/common/CommentActions.tsx b/src/modules/common/CommentActions.tsx
@@ -1,7 +1,14 @@
 import { useTranslation } from 'react-i18next';
 
-import { Delete, Edit } from '@mui/icons-material';
-import { ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
+import {
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  useTheme,
+} from '@mui/material';
+
+import { Edit2, Trash2 } from 'lucide-react';
 
 import { AppActionsType } from '@/config/appActions';
 import { CommentAppData } from '@/config/appData';
@@ -30,6 +37,7 @@ const CommentActions = ({
   // showFlag = true,
   comment,
 }: Props): JSX.Element => {
+  const theme = useTheme();
   const { t } = useTranslation();
   const { mutate: deleteAppData } = mutations.useDeleteAppData();
   const { mutate: postAction } = mutations.usePostAppAction();
@@ -62,7 +70,7 @@ const CommentActions = ({
           }}
         >
           <ListItemIcon>
-            <Edit color="primary" />
+            <Edit2 color={theme.palette.primary.main} />
           </ListItemIcon>
           <ListItemText>{t('EDIT_LABEL')}</ListItemText>
         </MenuItem>
@@ -79,7 +87,7 @@ const CommentActions = ({
           }}
         >
           <ListItemIcon>
-            <Delete color="error" />
+            <Trash2 color={theme.palette.error.main} />
           </ListItemIcon>
           <ListItemText>{t('DELETE_LABEL')}</ListItemText>
         </MenuItem>

diff --git a/src/modules/common/CommentEditor.tsx b/src/modules/common/CommentEditor.tsx
@@ -9,13 +9,6 @@ import {
   useTextAreaMarkdownEditor,
 } from 'react-mde';
 
-import {
-  Code,
-  FormatBold,
-  FormatItalic,
-  FormatQuote,
-  InsertLink,
-} from '@mui/icons-material';
 import {
   Box,
   FormHelperText,
@@ -26,6 +19,15 @@ import {
 
 import { Button } from '@graasp/ui';
 
+import {
+  Bold,
+  Code2,
+  Italic,
+  Link as LinkIcon,
+  Quote,
+  SendHorizonal,
+} from 'lucide-react';
+
 import { CommentAppData } from '@/config/appData';
 // import { DEFAULT_MAX_COMMENT_LENGTH_SETTING } from '@/config/appSetting';
 import {
@@ -121,39 +123,39 @@ const CommentEditor = ({
               await commandController.executeCommand('bold');
             }}
           >
-            <FormatBold fontSize="inherit" />
+            <Bold size={16} />
           </ToolbarButton>
           <ToolbarButton
             dataCy={COMMENT_EDITOR_ITALIC_BUTTON_CYPRESS}
             onClick={async () => {
               await commandController.executeCommand('italic');
             }}
           >
-            <FormatItalic fontSize="inherit" />
+            <Italic size={16} />
           </ToolbarButton>
           <ToolbarButton
             dataCy={COMMENT_EDITOR_CODE_BUTTON_CYPRESS}
             onClick={async () => {
               await commandController.executeCommand('code');
             }}
           >
-            <Code fontSize="inherit" />
+            <Code2 size={16} />
           </ToolbarButton>
           <ToolbarButton
             dataCy={COMMENT_EDITOR_LINK_BUTTON_CYPRESS}
             onClick={async () => {
               await commandController.executeCommand('link');
             }}
           >
-            <InsertLink fontSize="inherit" />
+            <LinkIcon size={16} />
           </ToolbarButton>
           <ToolbarButton
             dataCy={COMMENT_EDITOR_QUOTE_BUTTON_CYPRESS}
             onClick={async () => {
               await commandController.executeCommand('quote');
             }}
           >
-            <FormatQuote fontSize="inherit" />
+            <Quote size={16} />
           </ToolbarButton>
         </Stack>
         <TextArea
@@ -174,24 +176,23 @@ const CommentEditor = ({
           alignItems="center"
           justifyContent="space-between"
         >
-          <Stack direction="row" spacing={1} justifyContent="end">
-            <Button
-              dataCy={COMMENT_EDITOR_CANCEL_BUTTON_CYPRESS}
-              color="secondary"
-              variant="outlined"
-              onClick={() => onCancel()}
-            >
-              {t('CANCEL_LABEL')}
-            </Button>
-            <Button
-              dataCy={COMMENT_EDITOR_SAVE_BUTTON_CYPRESS}
-              color="primary"
-              variant="outlined"
-              onClick={() => onSend(text)}
-            >
-              {t('SEND_LABEL')}
-            </Button>
-          </Stack>
+          <Button
+            dataCy={COMMENT_EDITOR_CANCEL_BUTTON_CYPRESS}
+            color="secondary"
+            variant="outlined"
+            onClick={() => onCancel()}
+          >
+            {t('CANCEL_LABEL')}
+          </Button>
+          <Button
+            endIcon={<SendHorizonal />}
+            dataCy={COMMENT_EDITOR_SAVE_BUTTON_CYPRESS}
+            color="primary"
+            variant="outlined"
+            onClick={() => onSend(text)}
+          >
+            {t('SEND_LABEL')}
+          </Button>
         </Stack>
       </Stack>
     </Box>