fix: update mode icons (#1434)

package.json

@@ -22,8 +22,9 @@
     "@graasp/map": "1.17.0",
     "@graasp/query-client": "3.22.3",
     "@graasp/sdk": "4.26.0",
+    "@graasp/stylis-plugin-rtl": "2.2.0",
     "@graasp/translations": "1.35.1",
-    "@graasp/ui": "4.26.0",
+    "@graasp/ui": "4.26.2",
     "@mui/icons-material": "5.16.4",
     "@mui/lab": "5.0.0-alpha.172",
     "@mui/material": "5.16.4",
@@ -57,7 +58,6 @@
     "react-router-dom": "6.26.0",
     "react-toastify": "10.0.5",
     "stylis": "4.3.2",
-    "stylis-plugin-rtl": "2.1.1",
     "uuid": "10.0.0",
     "validator": "13.12.0"
   },

src/components/item/header/ModeButton.tsx

@@ -1,30 +1,30 @@
 import { MouseEvent, useState } from 'react';
 import { useMatch } from 'react-router';
 
-import {
-  List as ListIcon,
-  ViewModule as ViewModuleIcon,
-} from '@mui/icons-material';
-import MapIcon from '@mui/icons-material/Map';
 import { IconButton } from '@mui/material';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 
+import { useButtonColor } from '@graasp/ui';
+
+import { LayoutGridIcon, ListIcon, MapIcon } from 'lucide-react';
+
 import { HOME_PATH, buildItemPath } from '@/config/paths';
 import { LAYOUT_MODE_BUTTON_ID } from '@/config/selectors';
 
 import { ItemLayoutMode } from '../../../enums';
 import { useLayoutContext } from '../../context/LayoutContext';
 
-const modeToIcon = (mode: ItemLayoutMode) => {
+const ModeIcon = ({ mode }: { mode: ItemLayoutMode }) => {
+  const { color } = useButtonColor('primary');
   switch (mode) {
     case ItemLayoutMode.Map:
-      return <MapIcon color="primary" />;
+      return <MapIcon color={color} />;
     case ItemLayoutMode.Grid:
-      return <ViewModuleIcon color="primary" />;
+      return <LayoutGridIcon color={color} />;
     case ItemLayoutMode.List:
     default:
-      return <ListIcon color="primary" />;
+      return <ListIcon color={color} />;
   }
 };
 
@@ -56,7 +56,7 @@ const ModeButton = (): JSX.Element | null => {
   return (
     <>
       <IconButton id={LAYOUT_MODE_BUTTON_ID} onClick={handleClick}>
-        {modeToIcon(mode)}
+        <ModeIcon mode={mode} />
       </IconButton>
       <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
         {options.map((value) => (
@@ -65,7 +65,7 @@ const ModeButton = (): JSX.Element | null => {
             onClick={() => handleChange(value)}
             value={value}
           >
-            {modeToIcon(value)}
+            <ModeIcon mode={value} />
           </MenuItem>
         ))}
       </Menu>

yarn.lock

@@ -1936,6 +1936,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@graasp/stylis-plugin-rtl@npm:2.2.0":
+  version: 2.2.0
+  resolution: "@graasp/stylis-plugin-rtl@npm:2.2.0"
+  dependencies:
+    cssjanus: "npm:^2.3.0"
+  peerDependencies:
+    stylis: 4.x
+  checksum: 10/4b873aa7465c894ff5422f851522feda36bf73923f7a859befc7d5c8049e660a80a103090b977d01fad5c7d2c7ab92e313a7fa3eb263e2ce41bdb9597762edac
+  languageName: node
+  linkType: hard
+
 "@graasp/translations@npm:1.30.3":
   version: 1.30.3
   resolution: "@graasp/translations@npm:1.30.3"
@@ -1995,9 +2006,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@npm:4.26.0":
-  version: 4.26.0
-  resolution: "@graasp/ui@npm:4.26.0"
+"@graasp/ui@npm:4.26.2":
+  version: 4.26.2
+  resolution: "@graasp/ui@npm:4.26.2"
   dependencies:
     "@ag-grid-community/client-side-row-model": "npm:31.3.4"
     "@ag-grid-community/react": "npm:^31.3.4"
@@ -2018,20 +2029,20 @@ __metadata:
     "@emotion/react": ~11.10.6 || ~11.11.0 || ~11.13.0
     "@emotion/styled": ~11.10.6 || ~11.11.0 || ~11.13.0
     "@graasp/sdk": ^4.14.0
+    "@graasp/stylis-plugin-rtl": ^2
     "@graasp/translations": ^1.23.0
     "@mui/icons-material": ~5.14.0 || ~5.15.0 || ~5.16.0
     "@mui/lab": ~5.0.0-alpha.150
     "@mui/material": ~5.14.0 || ~5.15.0 || ~5.16.0
     i18next: ^22.4.15 || ^23.0.0
     katex: 0.16.11
-    lucide-react: ^0.417.0 || ^0.429.0
+    lucide-react: ^0.417.0 || ^0.429.0 || ^0.436.0
     react: ^18.0.0
     react-dom: ^18.0.0
     react-i18next: ^13.0.0 || ^14.0.0 || ^15.0.0
     react-router-dom: ^6.11.0
     stylis: ^4.1.3
-    stylis-plugin-rtl: ^2.1.1
-  checksum: 10/a00af796b0f1c0dcbb1243715cb432c6d2013e679b77d5410badee9c13f44810869850e451fd66c24826bb50f5ae71adc22a6e19120115fa4ad6897a96fef9ed
+  checksum: 10/0a20d66a9653b13a07d7345d4d5d6e5c24b0ab8548d449f530b6f6231ed5170f116b8e678b193d1182620a01001d5d38af85773bbdeccb8b302e2130b306092d
   languageName: node
   linkType: hard
 
@@ -5845,6 +5856,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cssjanus@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "cssjanus@npm:2.3.0"
+  checksum: 10/eaa78f8b6047f52ea504964fd15b3f92b4d3603dd50350ad3c8c53dc51db8d4f75bac54570cd281df8ac368ed8759ccc677ae3cb53583af051688d63dc329232
+  languageName: node
+  linkType: hard
+
 "csstype@npm:^3.0.2, csstype@npm:^3.1.3":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
@@ -8082,8 +8100,9 @@ __metadata:
     "@graasp/map": "npm:1.17.0"
     "@graasp/query-client": "npm:3.22.3"
     "@graasp/sdk": "npm:4.26.0"
+    "@graasp/stylis-plugin-rtl": "npm:2.2.0"
     "@graasp/translations": "npm:1.35.1"
-    "@graasp/ui": "npm:4.26.0"
+    "@graasp/ui": "npm:4.26.2"
     "@mui/icons-material": "npm:5.16.4"
     "@mui/lab": "npm:5.0.0-alpha.172"
     "@mui/material": "npm:5.16.4"
@@ -8152,7 +8171,6 @@ __metadata:
     react-router-dom: "npm:6.26.0"
     react-toastify: "npm:10.0.5"
     stylis: "npm:4.3.2"
-    stylis-plugin-rtl: "npm:2.1.1"
     typescript: "npm:5.5.4"
     uuid: "npm:10.0.0"
     validator: "npm:13.12.0"