fix: update color

package.json

@@ -46,45 +46,45 @@
     "remark-gfm": "^4.0.0"
   },
   "devDependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@graasp/query-client": "^4.2.0",
-    "@graasp/sdk": "^4.32.1",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@graasp/query-client": "^5.6.1",
+    "@graasp/sdk": "^4.35.0",
     "@graasp/stylis-plugin-rtl": "^2.2.0",
-    "@graasp/translations": "^1.40.0",
-    "@graasp/ui": "^5.4.0",
-    "@mui/icons-material": "^6.1.5",
+    "@graasp/translations": "^1.42.0",
+    "@graasp/ui": "^5.4.2",
+    "@mui/icons-material": "^6.1.9",
     "@mui/lab": "6.0.0-beta.13",
-    "@mui/material": "^6.1.5",
-    "@tanstack/react-query": "5.59.16",
+    "@mui/material": "^6.1.9",
+    "@tanstack/react-query": "5.61.5",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/lodash.groupby": "^4.6.9",
     "@types/lodash.truncate": "^4.4.9",
-    "@types/node": "^20.17.0",
+    "@types/node": "^22.10.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@types/react-mentions": "^4.4.0",
-    "@typescript-eslint/eslint-plugin": "^8.11.0",
-    "@typescript-eslint/parser": "^8.11.0",
-    "@vitejs/plugin-react": "^4.3.3",
-    "cypress": "^13.15.0",
+    "@types/react-mentions": "^4.4.1",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "cypress": "^13.16.0",
     "date-fns": "^4.1.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.13",
-    "i18next": "23.16.3",
-    "lucide-react": "^0.453.0",
-    "prettier": "^3.3.3",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "i18next": "23.16.8",
+    "lucide-react": "^0.462.0",
+    "prettier": "^3.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-i18next": "^15.1.0",
-    "react-router-dom": "^6.27.0",
+    "react-i18next": "^15.1.2",
+    "react-router-dom": "^7.0.1",
     "rollup-plugin-visualizer": "^5.12.0",
     "stylis-plugin-rtl": "^2.1.1",
     "tsc-alias": "^1.8.10",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.10",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.1",
     "vite-plugin-dts": "^4.3.0"
   },
   "peerDependencies": {

src/components/Chatbox/Input.tsx

@@ -105,16 +105,16 @@ const Input: FC<Props> = ({
         borderRadius: inputRadius,
       },
       item: {
-        display: {
-          // change the style of the suggestions
-        },
+        // display: {
+        //   // change the style of the suggestions
+        // },
         padding: theme.spacing(0.5, 2),
         '&focused': {
           backgroundColor: '#b9b9ed',
         },
       },
     },
-  };
+  } as const;
 
   const { members } = useMessagesContext();
   const currentMember = useCurrentMemberContext();

src/components/Mentions/MentionButton.tsx

@@ -1,19 +1,19 @@
 import { useState } from 'react';
 
-import { Notifications } from '@mui/icons-material';
-import { Badge, BadgeProps, IconButton, SvgIconProps } from '@mui/material';
+import { Badge, BadgeProps, IconButton } from '@mui/material';
 
 import { ChatMention, MentionStatus } from '@graasp/sdk';
 
 import { UseQueryResult } from '@tanstack/react-query';
+import { BellIcon } from 'lucide-react';
 
 import { mentionButtonCypress } from '@/config/selectors.js';
 
 import MentionsDialog from './MentionsDialog.js';
 import MentionsTable from './MentionsTable.js';
 
 type Props = {
-  color?: SvgIconProps['color'];
+  color?: string;
   badgeColor?: BadgeProps['color'];
   useMentions: (
     options?: { getUpdates?: boolean | undefined } | undefined,
@@ -24,7 +24,7 @@ type Props = {
 };
 
 const MentionButton = ({
-  color = 'secondary',
+  color = 'white',
   badgeColor = 'primary',
   useMentions,
   patchMentionFunction,
@@ -50,7 +50,7 @@ const MentionButton = ({
               ?.length || 0
           }
         >
-          <Notifications color={color} />
+          <BellIcon color={color} />
         </Badge>
       </IconButton>
       <MentionsDialog

src/components/Mentions/MentionsDialog.tsx

@@ -1,9 +1,11 @@
 import { ReactElement } from 'react';
 
-import { Notifications } from '@mui/icons-material';
 import { Dialog, DialogContent, DialogTitle, Stack } from '@mui/material';
 
 import { CHATBOX } from '@graasp/translations';
+import { useButtonColor } from '@graasp/ui';
+
+import { BellIcon } from 'lucide-react';
 
 import { useChatboxTranslation } from '@/config/i18n.js';
 
@@ -15,11 +17,12 @@ type Props = {
 
 const MentionsDialog = ({ content, open, setOpen }: Props): JSX.Element => {
   const { t } = useChatboxTranslation();
+  const { color } = useButtonColor('primary');
   return (
     <Dialog open={open} onClose={(): void => setOpen(false)} maxWidth="lg">
       <DialogTitle>
         <Stack direction="row" spacing={1} alignItems="center">
-          <Notifications color="primary" />
+          <BellIcon color={color} />
           {t(CHATBOX.NOTIFICATIONS_DIALOG_TITLE)}
         </Stack>
       </DialogTitle>

src/components/Mentions/MentionsTable.tsx

@@ -5,6 +5,7 @@ import {
   Button,
   Grid2 as Grid,
   IconButton,
+  Stack,
   Table,
   TableBody,
   TableCell,
@@ -118,8 +119,8 @@ const MentionsTable = ({
   };
 
   return (
-    <Grid container direction="column">
-      <Grid container direction="row" justifyContent="space-between">
+    <Stack direction="column">
+      <Stack direction="row" justifyContent="space-between" gap={2}>
         <Button
           variant="outlined"
           onClick={(): void => {
@@ -148,21 +149,19 @@ const MentionsTable = ({
           }}
           onCancel={(): void => setOpenConfirmation(false)}
         />
-      </Grid>
-      <Grid>
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell>{t(CHATBOX.COL_STATUS)}</TableCell>
-              <TableCell>{t(CHATBOX.COL_MESSAGE)}</TableCell>
-              <TableCell>{t(CHATBOX.COL_BY)}</TableCell>
-              <TableCell>{t(CHATBOX.COL_ACTIONS)}</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>{renderMentionTableContent()}</TableBody>
-        </Table>
-      </Grid>
-    </Grid>
+      </Stack>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>{t(CHATBOX.COL_STATUS)}</TableCell>
+            <TableCell>{t(CHATBOX.COL_MESSAGE)}</TableCell>
+            <TableCell>{t(CHATBOX.COL_BY)}</TableCell>
+            <TableCell>{t(CHATBOX.COL_ACTIONS)}</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>{renderMentionTableContent()}</TableBody>
+      </Table>
+    </Stack>
   );
 };