style : analysis tabs sizes rework

src/pages/index.tsx

@@ -31,7 +31,6 @@ export default function GameReview() {
   const theme = useTheme();
   const [tab, setTab] = useState(0);
   const isLgOrGreater = useMediaQuery(theme.breakpoints.up("lg"));
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const { reset: resetBoard } = useChessActions(boardAtom);
   const { reset: resetGame } = useChessActions(gameAtom);
@@ -77,14 +76,14 @@ export default function GameReview() {
           borderWidth: 2,
           boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
         }}
-        padding={2.5}
+        padding={2}
         style={{
           maxWidth: "1200px",
         }}
         rowGap={2}
         maxHeight={{ lg: "calc(95vh - 130px)", xs: "900px" }}
         display="grid"
-        gridTemplateRows="repeat(4, auto) fit-content(100%)"
+        gridTemplateRows="repeat(3, auto) fit-content(100%)"
         marginTop={isLgOrGreater && window.innerHeight > 780 ? 4 : 0}
         size={{
           xs: 12,
@@ -114,19 +113,18 @@ export default function GameReview() {
             onChange={(_, newValue) => setTab(newValue)}
             aria-label="basic tabs example"
             variant="fullWidth"
+            sx={{ minHeight: 0 }}
           >
             <Tab
               label="Analysis"
               id="tab0"
-              icon={
+              icon={<Icon icon="mdi:magnify" color="#27f019" height={15} />}
-                <Icon
-                  icon="mdi:magnify"
-                  color="#27f019"
-                  height={isMobile ? 15 : 20}
-                />
-              }
               iconPosition="start"
-              sx={{ textTransform: "none", minHeight: 20, paddingX: 0 }}
+              sx={{
+                textTransform: "none",
+                minHeight: 15,
+                padding: "5px 0em 12px",
+              }}
               disableFocusRipple
             />
 
@@ -137,15 +135,15 @@ export default function GameReview() {
                 <Icon
                   icon="mdi:format-list-bulleted"
                   color="#27f019"
-                  height={isMobile ? 15 : 20}
+                  height={15}
                 />
               }
               iconPosition="start"
               sx={{
                 textTransform: "none",
-                minHeight: 20,
+                minHeight: 15,
                 display: isGameLoaded ? undefined : "none",
-                paddingX: 0,
+                padding: "5px 0em 12px",
               }}
               disableFocusRipple
             />
@@ -153,19 +151,13 @@ export default function GameReview() {
             <Tab
               label="Graph"
               id="tab2"
-              icon={
+              icon={<Icon icon="mdi:chart-line" color="#27f019" height={15} />}
-                <Icon
-                  icon="mdi:chart-line"
-                  color="#27f019"
-                  height={isMobile ? 15 : 20}
-                />
-              }
               iconPosition="start"
               sx={{
                 textTransform: "none",
-                minHeight: 20,
+                minHeight: 15,
                 display: gameEval ? undefined : "none",
-                paddingX: 0,
+                padding: "5px 0em 12px",
               }}
               disableFocusRipple
             />
@@ -182,8 +174,12 @@ export default function GameReview() {
 
         <GraphTab role="tabpanel" hidden={tab !== 2} id="tabContent2" />
 
-        {isLgOrGreater && <Divider sx={{ marginX: "5%" }} />}
+        {isLgOrGreater && (
-        {isLgOrGreater && <PanelToolBar key="review-panel-toolbar" />}
+          <Box>
+            <Divider sx={{ marginX: "5%", marginBottom: 1.5 }} />
+            <PanelToolBar key="review-panel-toolbar" />
+          </Box>
+        )}
 
         {!isLgOrGreater && gameEval && <Divider sx={{ marginX: "5%" }} />}
         {!isLgOrGreater && gameEval && (

src/sections/analysis/panelBody/analysisTab/lineEvaluation.tsx

@@ -35,7 +35,7 @@ export default function LineEvaluation({ line }: Props) {
         }}
         borderRadius="5px"
         border="1px solid #424242"
-        fontWeight="bold"
+        fontWeight="500"
       >
         {showSkeleton ? (
           <Skeleton

src/sections/analysis/panelBody/analysisTab/moveInfo.tsx

@@ -25,7 +25,12 @@ export default function MoveInfo() {
 
   if (!bestMoveSan) {
     return (
-      <Grid size={12} justifyItems="center" alignContent="center">
+      <Grid
+        size={12}
+        justifyItems="center"
+        alignContent="center"
+        marginTop={0.5}
+      >
         <Skeleton
           variant="rounded"
           animation="wave"
@@ -55,7 +60,13 @@ export default function MoveInfo() {
       : `${bestMoveSan} was the best move`;
 
   return (
-    <Grid container columnGap={5} justifyContent="center" size={12}>
+    <Grid
+      container
+      columnGap={5}
+      justifyContent="center"
+      size={12}
+      marginTop={0.5}
+    >
       {moveLabel && (
         <Stack direction="row" alignItems="center" spacing={1}>
           {moveClassification && (

src/sections/analysis/panelBody/analysisTab/playersMetric.tsx

@@ -19,30 +19,39 @@ export default function PlayersMetric({
       columnGap={{ xs: "8vw", md: 10 }}
       size={12}
     >
-      <Typography
+      <ValueBlock value={whiteValue} color="white" />
-        align="center"
+
-        sx={{ backgroundColor: "white", color: "black" }}
+      <Typography align="center" fontSize="0.8em">
-        borderRadius="5px"
+        {title}
-        lineHeight={1}
-        padding={1}
-        fontWeight="bold"
-        border="1px solid #424242"
-      >
-        {whiteValue}
       </Typography>
 
-      <Typography align="center">{title}</Typography>
+      <ValueBlock value={blackValue} color="black" />
-      <Typography
-        align="center"
-        sx={{ backgroundColor: "black", color: "white" }}
-        borderRadius="5px"
-        lineHeight={1}
-        padding={1}
-        fontWeight="bold"
-        border="1px solid #424242"
-      >
-        {blackValue}
-      </Typography>
     </Grid>
   );
 }
+
+const ValueBlock = ({
+  value,
+  color,
+}: {
+  value: string | number;
+  color: "white" | "black";
+}) => {
+  return (
+    <Typography
+      align="center"
+      sx={{
+        backgroundColor: color,
+        color: color === "white" ? "black" : "white",
+      }}
+      borderRadius="5px"
+      lineHeight="1em"
+      fontSize="0.9em"
+      padding={0.8}
+      fontWeight="500"
+      border="1px solid #424242"
+    >
+      {value}
+    </Typography>
+  );
+};

src/sections/analysis/panelHeader/analyzeButton.tsx

@@ -17,6 +17,7 @@ import { logAnalyticsEvent } from "@/lib/firebase";
 import { SavedEvals } from "@/types/eval";
 import { useEffect, useCallback } from "react";
 import { usePlayersData } from "@/hooks/usePlayersData";
+import { Typography } from "@mui/material";
 
 export default function AnalyzeButton() {
   const engineName = useAtomValue(engineNameAtom);
@@ -107,11 +108,13 @@ export default function AnalyzeButton() {
     <LoadingButton
       variant="contained"
       size="small"
-      startIcon={<Icon icon="streamline:magnifying-glass-solid" />}
+      startIcon={<Icon icon="streamline:magnifying-glass-solid" height={12} />}
       onClick={handleAnalyze}
       disabled={!readyToAnalyse}
     >
-      {gameEval ? "Analyze again" : "Analyze"}
+      <Typography fontSize="0.9em" fontWeight="500" lineHeight="1.4em">
+        {gameEval ? "Analyze again" : "Analyze"}
+      </Typography>
     </LoadingButton>
   );
 }

src/sections/loadGame/loadGameButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@mui/material";
+import { Button, Typography } from "@mui/material";
 import { useState } from "react";
 import NewGameDialog from "./loadGameDialog";
 import { Chess } from "chess.js";
@@ -19,7 +19,9 @@ export default function LoadGameButton({ setGame, label, size }: Props) {
         onClick={() => setOpenDialog(true)}
         size={size}
       >
-        {label || "Add game"}
+        <Typography fontSize="0.9em" fontWeight="500" lineHeight="1.4em">
+          {label || "Add game"}
+        </Typography>
       </Button>
 
       <NewGameDialog