Merge pull request #2 from frudolph77/changeStateIcons

Modify state icons
alexander-zibert · Nov 26, 2023 · 594d640 · 594d640
2 parents 945f7d1 + 57477b6
commit 594d640
Showing 1 changed file with 10 additions and 23 deletions.
diff --git a/frontend/src/components/Round.tsx b/frontend/src/components/Round.tsx
@@ -1,5 +1,6 @@
-import SolvedIcon from "@mui/icons-material/CheckRounded";
-import UnsolvedIcon from "@mui/icons-material/CloseRounded";
+import SolvedIcon from "@mui/icons-material/CheckBoxRounded";
+import UnsolvedIcon from "@mui/icons-material/DisabledByDefaultRounded";
+import BlankBoxIcon from "@mui/icons-material/CheckBoxOutlineBlankRounded";
 import DeleteIcon from "@mui/icons-material/UndoRounded";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
@@ -93,37 +94,23 @@ const Round: FC<Props> = ({ round, index }) => {
                   <Box
                     sx={{
                       textAlign: "center",
-
                       borderRadius:
                         query.verifier === "F"
                           ? theme.spacing(0, 0, 2, 0)
                           : null,
                     }}
                   >
                     <SingleCharLabel>{query.verifier}</SingleCharLabel>
-                    <Box pt={1} pb={2} position="relative">
-                      <Box
-                        height={20}
-                        margin="auto"
-                        width={20}
-                        sx={{
-                          borderWidth: 2,
-                          borderStyle: "solid",
-                          borderColor: theme.palette.primary.main,
-                          borderRadius: theme.spacing(0.5),
-                        }}
-                      />
-                      <Box
-                        position="absolute"
-                        top={-2}
-                        left={3}
-                        sx={{ color: theme.palette.text.primary }}
-                      >
+                    <Box position="relative">
+                      <Box>
+                        {query.state === "unknown" && (
+                          <BlankBoxIcon sx={{ color: theme.palette.primary.main }} />
+                        )}
                         {query.state === "solved" && (
-                          <SolvedIcon fontSize="large" />
+                          <SolvedIcon sx={{ color: theme.palette.primary.dark }} />
                         )}
                         {query.state === "unsolved" && (
-                          <UnsolvedIcon fontSize="large" />
+                          <UnsolvedIcon sx={{ color: theme.palette.secondary.dark }} />
                         )}
                       </Box>
                     </Box>