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"