From 71fef9014c120dbc52889d53d82d2773defa9120 Mon Sep 17 00:00:00 2001
From: GuillaumeSD <gsd.lfny@gmail.com>
Date: Sat, 6 Apr 2024 17:34:18 +0200
Subject: [PATCH] style : analysis UI size rework

---
 src/pages/index.tsx                            |  4 ++--
 .../classificationRow.tsx                      | 14 +++++++++-----
 .../movesClassificationsRecap/index.tsx        |  6 +++---
 .../classificationPanel/movesPanel/index.tsx   |  2 +-
 .../movesPanel/moveItem.tsx                    | 18 ++++++++++++------
 .../movesPanel/movesLine.tsx                   |  6 ++++--
 .../analysis/reviewPanelBody/index.tsx         |  2 +-
 .../reviewPanelBody/lineEvaluation.tsx         |  2 ++
 .../analysis/reviewPanelBody/moveInfo.tsx      | 12 ++++++++++--
 .../analysis/reviewPanelBody/opening.tsx       |  4 +++-
 .../analysis/reviewPanelHeader/gamePanel.tsx   |  6 +++---
 .../analysis/reviewPanelHeader/index.tsx       |  4 ++--
 .../reviewPanelToolbar/flipBoardButton.tsx     |  5 ++++-
 .../goToLastPositionButton.tsx                 |  1 +
 .../analysis/reviewPanelToolbar/index.tsx      |  2 ++
 .../reviewPanelToolbar/nextMoveButton.tsx      |  1 +
 .../analysis/reviewPanelToolbar/saveButton.tsx |  8 ++++++--
 17 files changed, 66 insertions(+), 31 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ab1482f..a25292d 100644
--- a/src/pages/index.tsx
+++ b/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}
-        rowGap={3}
+        padding={2.5}
+        rowGap={2}
         style={{
           maxWidth: "1200px",
         }}
diff --git a/src/sections/analysis/reviewPanelBody/classificationPanel/movesClassificationsRecap/classificationRow.tsx b/src/sections/analysis/reviewPanelBody/classificationPanel/movesClassificationsRecap/classificationRow.tsx
index b63cf8b..da3c664 100644
--- a/src/sections/analysis/reviewPanelBody/classificationPanel/movesClassificationsRecap/classificationRow.tsx
+++ b/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}
-          height={20}
+          width={18}
+          height={18}
           style={{
-            maxWidth: "3.6vw",
-            maxHeight: "3.6vw",
+            maxWidth: "3.5vw",
+            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>
diff --git a/src/sections/analysis/reviewPanelBody/classificationPanel/movesClassificationsRecap/index.tsx b/src/sections/analysis/reviewPanelBody/classificationPanel/movesClassificationsRecap/index.tsx
index 9b75130..eee1b7a 100644
--- a/src/sections/analysis/reviewPanelBody/classificationPanel/movesClassificationsRecap/index.tsx
+++ b/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>
diff --git a/src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/index.tsx b/src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/index.tsx
index 6fb001f..e97fdeb 100644
--- a/src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/index.tsx
+++ b/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}
diff --git a/src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/moveItem.tsx b/src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/moveItem.tsx
index 639eec8..529afd6 100644
--- a/src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/moveItem.tsx
+++ b/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}
-          height={15}
+          width={14}
+          height={14}
           style={{
-            maxWidth: "3.6vw",
-            maxHeight: "3.6vw",
+            maxWidth: "3.5vw",
+            maxHeight: "3.5vw",
           }}
         />
       )}
-      <Typography color={getMoveColor(moveClassification)}>{san}</Typography>
+      <Typography
+        color={getMoveColor(moveClassification)}
+        fontSize="0.9rem"
+        lineHeight="0.9rem"
+      >
+        {san}
+      </Typography>
     </Grid>
   );
 }
diff --git a/src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/movesLine.tsx b/src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/movesLine.tsx
index 4662f5c..0ac298d 100644
--- a/src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/movesLine.tsx
+++ b/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} />
 
diff --git a/src/sections/analysis/reviewPanelBody/index.tsx b/src/sections/analysis/reviewPanelBody/index.tsx
index 47070fd..49a9b8c 100644
--- a/src/sections/analysis/reviewPanelBody/index.tsx
+++ b/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
diff --git a/src/sections/analysis/reviewPanelBody/lineEvaluation.tsx b/src/sections/analysis/reviewPanelBody/lineEvaluation.tsx
index 329e3a1..ba8fc5a 100644
--- a/src/sections/analysis/reviewPanelBody/lineEvaluation.tsx
+++ b/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" />
diff --git a/src/sections/analysis/reviewPanelBody/moveInfo.tsx b/src/sections/analysis/reviewPanelBody/moveInfo.tsx
index abe852a..21eaf2c 100644
--- a/src/sections/analysis/reviewPanelBody/moveInfo.tsx
+++ b/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>}
-      {bestMoveLabel && <Typography align="center">{bestMoveLabel}</Typography>}
+      {moveLabel && (
+        <Typography align="center" fontSize="0.9rem">
+          {moveLabel}
+        </Typography>
+      )}
+      {bestMoveLabel && (
+        <Typography align="center" fontSize="0.9rem">
+          {bestMoveLabel}
+        </Typography>
+      )}
     </Grid>
   );
 }
diff --git a/src/sections/analysis/reviewPanelBody/opening.tsx b/src/sections/analysis/reviewPanelBody/opening.tsx
index 57f1f30..76106c7 100644
--- a/src/sections/analysis/reviewPanelBody/opening.tsx
+++ b/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>
   );
 }
diff --git a/src/sections/analysis/reviewPanelHeader/gamePanel.tsx b/src/sections/analysis/reviewPanelHeader/gamePanel.tsx
index cabe588..d06fbfa 100644
--- a/src/sections/analysis/reviewPanelHeader/gamePanel.tsx
+++ b/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>
diff --git a/src/sections/analysis/reviewPanelHeader/index.tsx b/src/sections/analysis/reviewPanelHeader/index.tsx
index ec3b878..faa43a9 100644
--- a/src/sections/analysis/reviewPanelHeader/index.tsx
+++ b/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 />
diff --git a/src/sections/analysis/reviewPanelToolbar/flipBoardButton.tsx b/src/sections/analysis/reviewPanelToolbar/flipBoardButton.tsx
index 42306d2..24a3986 100644
--- a/src/sections/analysis/reviewPanelToolbar/flipBoardButton.tsx
+++ b/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>
diff --git a/src/sections/analysis/reviewPanelToolbar/goToLastPositionButton.tsx b/src/sections/analysis/reviewPanelToolbar/goToLastPositionButton.tsx
index 7a5d1dc..8242683 100644
--- a/src/sections/analysis/reviewPanelToolbar/goToLastPositionButton.tsx
+++ b/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>
diff --git a/src/sections/analysis/reviewPanelToolbar/index.tsx b/src/sections/analysis/reviewPanelToolbar/index.tsx
index 39b7380..2f978de 100644
--- a/src/sections/analysis/reviewPanelToolbar/index.tsx
+++ b/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>
diff --git a/src/sections/analysis/reviewPanelToolbar/nextMoveButton.tsx b/src/sections/analysis/reviewPanelToolbar/nextMoveButton.tsx
index 8121052..2f7d1b6 100644
--- a/src/sections/analysis/reviewPanelToolbar/nextMoveButton.tsx
+++ b/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>
diff --git a/src/sections/analysis/reviewPanelToolbar/saveButton.tsx b/src/sections/analysis/reviewPanelToolbar/saveButton.tsx
index ff31bb7..ba9b7d5 100644
--- a/src/sections/analysis/reviewPanelToolbar/saveButton.tsx
+++ b/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>