style : analysis tabs sizes rework

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
-        align="center"
-        sx={{ backgroundColor: "white", color: "black" }}
-        borderRadius="5px"
-        lineHeight={1}
-        padding={1}
-        fontWeight="bold"
-        border="1px solid #424242"
-      >
-        {whiteValue}
+      <ValueBlock value={whiteValue} color="white" />
+
+      <Typography align="center" fontSize="0.8em">
+        {title}
       </Typography>
 
-      <Typography align="center">{title}</Typography>
-      <Typography
-        align="center"
-        sx={{ backgroundColor: "black", color: "white" }}
-        borderRadius="5px"
-        lineHeight={1}
-        padding={1}
-        fontWeight="bold"
-        border="1px solid #424242"
-      >
-        {blackValue}
-      </Typography>
+      <ValueBlock value={blackValue} color="black" />
     </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>
   );
 }