fix: fix platform switch mobile colors (#556)

graasp · Mar 11, 2024 · bb3e5bd · bb3e5bd
1 parent b172333
commit bb3e5bd
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 105 deletions.
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "@graasp/query-client": "2.7.1",
     "@graasp/sdk": "4.1.0",
     "@graasp/translations": "1.25.2",
-    "@graasp/ui": "4.9.0",
+    "@graasp/ui": "4.9.1",
     "@mui/icons-material": "5.15.11",
     "@mui/lab": "5.0.0-alpha.151",
     "@mui/material": "5.15.11",

diff --git a/src/modules/header/HeaderNavigation.tsx b/src/modules/header/HeaderNavigation.tsx
diff --git a/src/modules/header/HeaderRightContent.tsx b/src/modules/header/HeaderRightContent.tsx
diff --git a/src/modules/layout/PageWrapper.tsx b/src/modules/layout/PageWrapper.tsx
@@ -1,13 +1,14 @@
 import { Link, Outlet, useParams } from 'react-router-dom';
 
-import { Typography, styled } from '@mui/material';
+import { Typography, styled, useTheme } from '@mui/material';
 
 import { Context } from '@graasp/sdk';
 import {
   Main,
   Platform,
   PlatformSwitch,
   defaultHostsMapper,
+  useMobileView,
   usePlatformNavigation,
 } from '@graasp/ui';
 
@@ -52,7 +53,8 @@ const LinkComponent = ({
 
 const PageWrapper = (): JSX.Element => {
   const { t } = usePlayerTranslation();
-
+  const theme = useTheme();
+  const { isMobile } = useMobileView();
   const { rootId } = useParams();
   const { data: item } = hooks.useItem();
   const getNavigationEvents = usePlatformNavigation(platformsHostsMap, rootId);
@@ -90,6 +92,16 @@ const PageWrapper = (): JSX.Element => {
             selected={Platform.Player}
             platformsProps={platformProps}
             disabledColor="#999"
+            color={
+              isMobile
+                ? theme.palette.primary.main
+                : theme.palette.secondary.main
+            }
+            accentColor={
+              isMobile
+                ? theme.palette.secondary.main
+                : theme.palette.primary.main
+            }
           />
         }
         headerLeftContent={<Typography noWrap>{item?.name}</Typography>}

diff --git a/yarn.lock b/yarn.lock
@@ -1279,9 +1279,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@npm:4.9.0":
-  version: 4.9.0
-  resolution: "@graasp/ui@npm:4.9.0"
+"@graasp/ui@npm:4.9.1":
+  version: 4.9.1
+  resolution: "@graasp/ui@npm:4.9.1"
   dependencies:
     "@ag-grid-community/client-side-row-model": "npm:31.1.1"
     "@ag-grid-community/react": "npm:^31.1.1"
@@ -1313,7 +1313,7 @@ __metadata:
     react-router-dom: ^6.11.0
     stylis: ^4.1.3
     stylis-plugin-rtl: ^2.1.1
-  checksum: 10/e4c3fc8497e35ad28e91098d475029479174cf9e7090bf9061700e5b7f04ce2a9fc584fa9d1ce29e13b03184bf513a54ee4bed7b682a070f76ba378deb056c57
+  checksum: 10/a101ff9b7a6365d9959c331f07a77f1f96bb0293bd354763a1633b719162f3e57c709990c014f42639184f78a30fb5077837a820cb6d7abde13267f126510731
   languageName: node
   linkType: hard
 
@@ -6409,7 +6409,7 @@ __metadata:
     "@graasp/query-client": "npm:2.7.1"
     "@graasp/sdk": "npm:4.1.0"
     "@graasp/translations": "npm:1.25.2"
-    "@graasp/ui": "npm:4.9.0"
+    "@graasp/ui": "npm:4.9.1"
     "@mui/icons-material": "npm:5.15.11"
     "@mui/lab": "npm:5.0.0-alpha.151"
     "@mui/material": "npm:5.15.11"