feat: update the checkbox's color

graasp · Sep 12, 2024 · 8a23735 · 8a23735
1 parent d325ad4
commit 8a23735
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/src/components/play/multipleChoices/ChoiceButton.tsx b/src/components/play/multipleChoices/ChoiceButton.tsx
@@ -12,6 +12,9 @@ const DEFAULT_COLOR = 'primary';
 const CORRECT_COLOR = 'success';
 const INCORRECT_COLOR = 'error';
 const DEFAULT_DISABLED = 'whitesmoke';
+const SUCCESS_COLOR = theme.palette.success.main;
+const ERROR_COLOR = theme.palette.error.main;
+const PRIMARY_COLOR = theme.palette.primary.main;
 
 const styleButton = ({
   color,
@@ -27,15 +30,12 @@ const styleButton = ({
   } as const);
 
 const computeDisabledSx = (choiceState: ChoiceState | undefined) => {
-  const successColor = theme.palette.success.main;
-  const errorColor = theme.palette.error.main;
-
   switch (choiceState) {
     case ChoiceState.CORRECT:
     case ChoiceState.MISSING:
-      return { backgroundColor: successColor, color: DEFAULT_DISABLED };
+      return { borderColor: SUCCESS_COLOR, color: SUCCESS_COLOR };
     case ChoiceState.INCORRECT:
-      return { backgroundColor: errorColor, color: DEFAULT_DISABLED };
+      return { borderColor: ERROR_COLOR, color: ERROR_COLOR };
     default:
       return {};
   }
@@ -78,23 +78,31 @@ const computeStyles = ({
 };
 
 const computeCheckboxSx = ({
-  isSelected,
   showState,
   choiceState,
 }: {
-  isSelected: boolean;
   showState: boolean;
   choiceState: number;
 }) => {
-  const borderColor =
-    (showState && choiceState !== ChoiceState.UNSELECTED) || isSelected
-      ? DEFAULT_DISABLED
-      : DEFAULT_COLOR;
-  const color = isSelected && showState ? DEFAULT_DISABLED : DEFAULT_COLOR;
+  let borderColor = PRIMARY_COLOR;
+
+  if (showState) {
+    switch (choiceState) {
+      case ChoiceState.CORRECT:
+      case ChoiceState.MISSING:
+        borderColor = SUCCESS_COLOR;
+        break;
+      case ChoiceState.INCORRECT:
+        borderColor = ERROR_COLOR;
+        break;
+      default:
+        borderColor = DEFAULT_DISABLED;
+    }
+  }
 
   return {
     '&.Mui-checked': {
-      color,
+      color: borderColor,
     },
     color: borderColor,
   };
@@ -132,7 +140,7 @@ export const ChoiceButton = ({
       startIcon={
         <Checkbox
           checked={isSelected}
-          sx={computeCheckboxSx({ isSelected, showState, choiceState })}
+          sx={computeCheckboxSx({ showState, choiceState })}
         />
       }
       onClick={handleClick}

diff --git a/src/components/play/multipleChoices/PlayMultipleChoices.tsx b/src/components/play/multipleChoices/PlayMultipleChoices.tsx
@@ -184,7 +184,7 @@ const PlayMultipleChoices = ({
         return (
           <Typography
             data-cy={buildMultipleChoiceHintPlayCy(el.idx)}
-            style={{ paddingLeft: '25px' }}
+            style={{ paddingLeft: '25px', fontStyle: 'italic' }}
           >
             {el.hint}
           </Typography>