style : analysis UI size rework

src/pages/index.tsx

@@ -57,8 +57,8 @@ export default function GameReport() {
           borderWidth: 2,
           boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
         }}
-        padding={3}
+        padding={2.5}
-        rowGap={3}
+        rowGap={2}
         style={{
           maxWidth: "1200px",
         }}

src/sections/analysis/reviewPanelBody/classificationPanel/movesClassificationsRecap/classificationRow.tsx

@@ -86,6 +86,7 @@ export default function ClassificationRow({ classification }: Props) {
         width={"3rem"}
         style={{ cursor: whiteNb ? "pointer" : "default" }}
         onClick={() => handleClick(Color.White)}
+        fontSize="0.9rem"
       >
         {whiteNb}
       </Grid>
@@ -102,15 +103,17 @@ export default function ClassificationRow({ classification }: Props) {
         <Image
           src={`/icons/${classification}.png`}
           alt="move-icon"
-          width={20}
+          width={18}
-          height={20}
+          height={18}
           style={{
-            maxWidth: "3.6vw",
+            maxWidth: "3.5vw",
-            maxHeight: "3.6vw",
+            maxHeight: "3.5vw",
           }}
         />
 
-        <Typography align="center">{capitalize(classification)}</Typography>
+        <Typography align="center" fontSize="0.9rem">
+          {capitalize(classification)}
+        </Typography>
       </Grid>
 
       <Grid
@@ -121,6 +124,7 @@ export default function ClassificationRow({ classification }: Props) {
         width={"3rem"}
         style={{ cursor: blackNb ? "pointer" : "default" }}
         onClick={() => handleClick(Color.Black)}
+        fontSize="0.9rem"
       >
         {blackNb}
       </Grid>

src/sections/analysis/reviewPanelBody/classificationPanel/movesClassificationsRecap/index.tsx

@@ -17,7 +17,7 @@ export default function MovesClassificationsRecap() {
       item
       justifyContent="center"
       alignItems="center"
-      rowGap={2}
+      rowGap={1}
       xs={6}
       sx={{ scrollbarWidth: "thin", overflowY: "auto" }}
       maxHeight="100%"
@@ -30,13 +30,13 @@ export default function MovesClassificationsRecap() {
         wrap="nowrap"
         xs={12}
       >
-        <Typography width="12rem" align="center" noWrap>
+        <Typography width="12rem" align="center" noWrap fontSize="0.9rem">
           {whiteName}
         </Typography>
 
         <Typography width="7rem" />
 
-        <Typography width="12rem" align="center" noWrap>
+        <Typography width="12rem" align="center" noWrap fontSize="0.9rem">
           {blackName}
         </Typography>
       </Grid>

src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/index.tsx

@@ -43,7 +43,7 @@ export default function MovesPanel() {
       item
       justifyContent="center"
       alignItems="start"
-      gap={1}
+      gap={0.8}
       sx={{ scrollbarWidth: "thin", overflowY: "auto" }}
       maxHeight="100%"
       xs={6}

src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/moveItem.tsx

@@ -48,7 +48,7 @@ export default function MoveItem({ san, moveClassification, moveIdx }: Props) {
       width="5rem"
       wrap="nowrap"
       onClick={handleClick}
-      paddingY={0.5}
+      paddingY={0.6}
       sx={{
         cursor: isCurrentMove ? undefined : "pointer",
         backgroundColor: isCurrentMove ? "#4f4f4f" : undefined,
@@ -60,15 +60,21 @@ export default function MoveItem({ san, moveClassification, moveIdx }: Props) {
         <Image
           src={`/icons/${moveClassification}.png`}
           alt="move-icon"
-          width={15}
+          width={14}
-          height={15}
+          height={14}
           style={{
-            maxWidth: "3.6vw",
+            maxWidth: "3.5vw",
-            maxHeight: "3.6vw",
+            maxHeight: "3.5vw",
           }}
         />
       )}
-      <Typography color={getMoveColor(moveClassification)}>{san}</Typography>
+      <Typography
+        color={getMoveColor(moveClassification)}
+        fontSize="0.9rem"
+        lineHeight="0.9rem"
+      >
+        {san}
+      </Typography>
     </Grid>
   );
 }

src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/movesLine.tsx

@@ -13,11 +13,13 @@ export default function MovesLine({ moves, moveNb }: Props) {
       container
       item
       justifyContent="space-evenly"
-      alignItems="start"
+      alignItems="center"
       xs={12}
       wrap="nowrap"
     >
-      <Typography width="2rem">{moveNb}.</Typography>
+      <Typography width="2rem" fontSize="0.9rem">
+        {moveNb}.
+      </Typography>
 
       <MoveItem {...moves[0]} moveIdx={(moveNb - 1) * 2 + 1} />
 

src/sections/analysis/reviewPanelBody/index.tsx

@@ -41,7 +41,7 @@ export default function ReviewPanelBody() {
       xs={12}
       justifyContent="center"
       alignItems="center"
-      rowGap={1.5}
+      rowGap={1.2}
     >
       <Grid
         item

src/sections/analysis/reviewPanelBody/lineEvaluation.tsx

@@ -28,6 +28,7 @@ export default function LineEvaluation({ line }: Props) {
         overflow="visible"
         width="3em"
         textAlign="center"
+        fontSize="0.9rem"
       >
         {showSkeleton ? (
           <Skeleton
@@ -45,6 +46,7 @@ export default function LineEvaluation({ line }: Props) {
       <Typography
         noWrap
         maxWidth={{ xs: "15em", sm: "25em", md: "30em", lg: "25em" }}
+        fontSize="0.9rem"
       >
         {showSkeleton ? (
           <Skeleton variant="rounded" animation="wave" width="15em" />

src/sections/analysis/reviewPanelBody/moveInfo.tsx

@@ -37,8 +37,16 @@ export default function MoveInfo() {
 
   return (
     <Grid item container columnGap={5} xs={12} justifyContent="center">
-      {moveLabel && <Typography align="center">{moveLabel}</Typography>}
+      {moveLabel && (
-      {bestMoveLabel && <Typography align="center">{bestMoveLabel}</Typography>}
+        <Typography align="center" fontSize="0.9rem">
+          {moveLabel}
+        </Typography>
+      )}
+      {bestMoveLabel && (
+        <Typography align="center" fontSize="0.9rem">
+          {bestMoveLabel}
+        </Typography>
+      )}
     </Grid>
   );
 }

src/sections/analysis/reviewPanelBody/opening.tsx

@@ -9,7 +9,9 @@ export default function Opening() {
 
   return (
     <Grid item xs={12}>
-      <Typography align="center">{opening}</Typography>
+      <Typography align="center" fontSize="0.9rem">
+        {opening}
+      </Typography>
     </Grid>
   );
 }

src/sections/analysis/reviewPanelHeader/gamePanel.tsx

@@ -22,19 +22,19 @@ export default function GamePanel() {
       columnGap={3}
     >
       <Grid item container xs justifyContent="center" alignItems="center">
-        <Typography noWrap>
+        <Typography noWrap fontSize="0.9rem">
           Site : {gameFromUrl?.site || game.header().Site || "?"}
         </Typography>
       </Grid>
 
       <Grid item container xs justifyContent="center" alignItems="center">
-        <Typography noWrap>
+        <Typography noWrap fontSize="0.9rem">
           Date : {gameFromUrl?.date || game.header().Date || "?"}
         </Typography>
       </Grid>
 
       <Grid item container xs justifyContent="center" alignItems="center">
-        <Typography noWrap>
+        <Typography noWrap fontSize="0.9rem">
           Result :{" "}
           {gameFromUrl?.termination || game.header().Termination || "?"}
         </Typography>

src/sections/analysis/reviewPanelHeader/index.tsx

@@ -17,7 +17,7 @@ export default function ReviewPanelHeader() {
       justifyContent="center"
       alignItems="center"
       xs={12}
-      rowGap={3}
+      rowGap={2}
     >
       <Grid
         item
@@ -40,7 +40,7 @@ export default function ReviewPanelHeader() {
         xs={12}
         justifyContent="center"
         alignItems="center"
-        rowGap={3}
+        rowGap={2}
         columnGap={12}
       >
         <GamePanel />

src/sections/analysis/reviewPanelToolbar/flipBoardButton.tsx

@@ -8,7 +8,10 @@ export default function FlipBoardButton() {
 
   return (
     <Tooltip title="Flip board">
-      <IconButton onClick={() => setBoardOrientation((prev) => !prev)}>
+      <IconButton
+        onClick={() => setBoardOrientation((prev) => !prev)}
+        sx={{ paddingX: 1.2, paddingY: 0.5 }}
+      >
         <Icon icon="eva:flip-fill" />
       </IconButton>
     </Tooltip>

src/sections/analysis/reviewPanelToolbar/goToLastPositionButton.tsx

@@ -39,6 +39,7 @@ export default function GoToLastPositionButton() {
             setBoardPgn(game.pgn());
           }}
           disabled={isButtonDisabled}
+          sx={{ paddingX: 1.2, paddingY: 0.5 }}
         >
           <Icon icon="ri:skip-forward-line" />
         </IconButton>

src/sections/analysis/reviewPanelToolbar/index.tsx

@@ -43,6 +43,7 @@ export default function ReviewPanelToolBar() {
           <IconButton
             onClick={() => resetBoard({ fen: getStartingFen({ game: board }) })}
             disabled={boardHistory.length === 0}
+            sx={{ paddingX: 1.2, paddingY: 0.5 }}
           >
             <Icon icon="ri:skip-back-line" />
           </IconButton>
@@ -54,6 +55,7 @@ export default function ReviewPanelToolBar() {
           <IconButton
             onClick={() => undoBoardMove()}
             disabled={boardHistory.length === 0}
+            sx={{ paddingX: 1.2, paddingY: 0.5 }}
           >
             <Icon icon="ri:arrow-left-s-line" height={30} />
           </IconButton>

src/sections/analysis/reviewPanelToolbar/nextMoveButton.tsx

@@ -52,6 +52,7 @@ export default function NextMoveButton() {
         <IconButton
           onClick={() => addNextGameMoveToBoard()}
           disabled={!isButtonEnabled}
+          sx={{ paddingX: 1.2, paddingY: 0.5 }}
         >
           <Icon icon="ri:arrow-right-s-line" height={30} />
         </IconButton>

src/sections/analysis/reviewPanelToolbar/saveButton.tsx

@@ -41,7 +41,7 @@ export default function SaveButton() {
       {gameFromUrl ? (
         <Tooltip title="Game saved in database">
           <Grid>
-            <IconButton disabled={true}>
+            <IconButton disabled={true} sx={{ paddingX: 1.2, paddingY: 0.5 }}>
               <Icon icon="ri:folder-check-line" />
             </IconButton>
           </Grid>
@@ -49,7 +49,11 @@ export default function SaveButton() {
       ) : (
         <Tooltip title="Save game">
           <Grid>
-            <IconButton onClick={handleSave} disabled={!enableSave}>
+            <IconButton
+              onClick={handleSave}
+              disabled={!enableSave}
+              sx={{ paddingX: 1.2, paddingY: 0.5 }}
+            >
               <Icon icon="ri:save-3-line" />
             </IconButton>
           </Grid>