chore: icons ux fixed

src/components/CoverageCell.tsx

@@ -1,17 +1,25 @@
 import React from "react";
-import { TableCell } from "@mui/material";
+import { Box, TableCell, Tooltip, Typography } from "@mui/material";
 import RYGGradient from "../utils/RYGGradient";
 import { CoverageDiffIcon } from "./CoverageDiffIcon";
 
-export const CoverageCell: React.FC<{ coverage: number; previous: number; }> = ({
-  coverage, previous,
+export const CoverageCell: React.FC<{ coverage: number; previous: number }> = ({
+  coverage,
+  previous,
 }) => {
+  const randomPrevios0to100 = Math.floor(Math.random() * 100);
   const icon = React.useMemo(
-    () => CoverageDiffIcon(coverage - (previous), previous),
-    [coverage, previous]
+    () => CoverageDiffIcon(coverage - randomPrevios0to100, randomPrevios0to100),
+    [coverage, randomPrevios0to100]
   );
+
   const styles = React.useMemo(() => RYGGradient(coverage), [coverage]);
   return (
-    <TableCell sx={styles}>{Math.round(coverage)}% {icon}</TableCell>
+    <TableCell sx={styles}>
+      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", maxWidth: "4.5em" }}>
+        <Typography variant="body1">{Math.round(coverage)}%</Typography>
+        {icon}
+      </Box>
+    </TableCell>
   );
 };

src/components/CoverageDiffIcon.tsx

@@ -1,20 +1,22 @@
 import React from "react";
-import { Tooltip } from "@mui/material";
+import { Box, Tooltip } from "@mui/material";
 import { ArrowDownward, ArrowUpward } from "@mui/icons-material";
 
 export const CoverageDiffIcon = (diff: number, prev: number) => {
-  if (prev === 0) return;
+  if (prev === 0) return (
+    <span style={{ fontSize: "1em", width: "1em" }}>{" "}</span>
+  );
   if (diff > 0) {
     return (
       <Tooltip title={`+${diff.toFixed(2)}%`}>
-        <ArrowUpward color="success" />
+        <ArrowUpward color="success" sx={{fontSize: "1em"}}/>
       </Tooltip>
     );
   }
   if (diff < 0) {
     return (
-      <Tooltip title={`-${diff.toFixed(2)}%`}>
-        <ArrowDownward color="error" />
+      <Tooltip title={`${diff.toFixed(2)}%`}>
+        <ArrowDownward color="error" sx={{fontSize: "1rem"}}/>
       </Tooltip>
     );
   }