From d26bb22f45107f9fd82e9ada874f35039a5dab9a Mon Sep 17 00:00:00 2001 From: spaenleh Date: Wed, 11 Sep 2024 12:03:00 +0200 Subject: [PATCH] fix: update mode icons --- package.json | 4 +-- src/components/item/header/ModeButton.tsx | 22 +++++++-------- yarn.lock | 34 +++++++++++++++++------ 3 files changed, 39 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 606a29647..a3bc266cf 100644 --- a/package.json +++ b/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" }, diff --git a/src/components/item/header/ModeButton.tsx b/src/components/item/header/ModeButton.tsx index 22872021a..804726069 100644 --- a/src/components/item/header/ModeButton.tsx +++ b/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 ; + return ; case ItemLayoutMode.Grid: - return ; + return ; case ItemLayoutMode.List: default: - return ; + return ; } }; @@ -56,7 +56,7 @@ const ModeButton = (): JSX.Element | null => { return ( <> - {modeToIcon(mode)} + {options.map((value) => ( @@ -65,7 +65,7 @@ const ModeButton = (): JSX.Element | null => { onClick={() => handleChange(value)} value={value} > - {modeToIcon(value)} + ))} diff --git a/yarn.lock b/yarn.lock index d90568120..fdd6be356 100644 --- a/yarn.lock +++ b/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"