style : analysis UI size rework

2024-04-06 17:34:18 +02:00
parent bcb3366895
commit 71fef9014c
17 changed files with 66 additions and 31 deletions
--- 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",
        }}
--- 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>
--- 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>
--- 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}
--- 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>
  );
 }
--- 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} />

--- 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
--- 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" />
--- 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>
  );
 }
--- 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>
  );
 }
--- 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>
--- 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 />
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>