From 41eca1321dee350fa1b99777c4644e52557db348 Mon Sep 17 00:00:00 2001
From: kim <kim.phanhoang@epfl.ch>
Date: Wed, 6 Mar 2024 17:19:25 +0100
Subject: [PATCH] fix: invert colors for mobile platform switch

---
 src/components/main/Main.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/main/Main.tsx b/src/components/main/Main.tsx
index 28656688c..4cb5991d9 100644
--- a/src/components/main/Main.tsx
+++ b/src/components/main/Main.tsx
@@ -8,6 +8,7 @@ import {
   Platform,
   PlatformSwitch,
   defaultHostsMapper,
+  useMobileView,
   usePlatformNavigation,
 } from '@graasp/ui';
 
@@ -48,6 +49,7 @@ type Props = { children: JSX.Element | (JSX.Element & string) };
 const Main = ({ children }: Props): JSX.Element => {
   const { t } = useBuilderTranslation();
   const theme = useTheme();
+  const { isMobile } = useMobileView();
 
   const itemId = useParams()[ITEM_ID_PARAMS];
 
@@ -90,8 +92,12 @@ const Main = ({ children }: Props): JSX.Element => {
           id={APP_NAVIGATION_PLATFORM_SWITCH_ID}
           selected={Platform.Builder}
           platformsProps={platformProps}
-          color={theme.palette.primary.main}
-          accentColor={theme.palette.secondary.main}
+          color={
+            isMobile ? theme.palette.primary.main : theme.palette.secondary.main
+          }
+          accentColor={
+            isMobile ? theme.palette.secondary.main : theme.palette.primary.main
+          }
         />
       }
     >