From f0f6a65c1cf66bf5cadb708f220148fd85387a25 Mon Sep 17 00:00:00 2001
From: GuillaumeSD <gsd.lfny@gmail.com>
Date: Mon, 26 Feb 2024 01:40:24 +0100
Subject: [PATCH] style : inverse info panel for mobile

---
 src/pages/index.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6d74e69..d6c5c3e 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -9,17 +9,21 @@ import {
   gameAtom,
   gameEvalAtom,
 } from "@/sections/analysis/states";
-import { Divider, Grid } from "@mui/material";
+import { Divider, Grid, useMediaQuery, useTheme } from "@mui/material";
 import { Chess } from "chess.js";
 import { useSetAtom } from "jotai";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 export default function GameReport() {
+  const theme = useTheme();
+  const isMdOrGreater = useMediaQuery(theme.breakpoints.up("md"));
+
   const { reset: resetBoard } = useChessActions(boardAtom);
   const { setPgn: setGamePgn } = useChessActions(gameAtom);
   const setEval = useSetAtom(gameEvalAtom);
   const setBoardOrientation = useSetAtom(boardOrientationAtom);
+
   const router = useRouter();
   const { gameId } = router.query;
 
@@ -77,7 +81,7 @@ export default function GameReport() {
           padding={3}
           gap={3}
         >
-          <ReviewPanelHeader />
+          {isMdOrGreater ? <ReviewPanelHeader /> : <ReviewPanelToolBar />}
 
           <Divider sx={{ width: "90%" }} />
 
@@ -85,7 +89,7 @@ export default function GameReport() {
 
           <Divider sx={{ width: "90%" }} />
 
-          <ReviewPanelToolBar />
+          {isMdOrGreater ? <ReviewPanelToolBar /> : <ReviewPanelHeader />}
         </Grid>
       </Grid>
     </Grid>