feat: make radio and checkbox green (#234)

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/__snapshots__/index.test.jsx.snap

@@ -4,6 +4,7 @@ exports[`Checker component with multiple answers 1`] = `
 <Form.Checkbox
   checked={true}
   className="pt-2.5"
+  isValid={true}
   onChange={[Function]}
   value="A"
 >
@@ -15,6 +16,7 @@ exports[`Checker component with single answer 1`] = `
 <Radio
   checked={true}
   className="pt-2.5"
+  isValid={true}
   onChange={[Function]}
   value="A"
 >

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.jsx

@@ -15,6 +15,7 @@ const Checker = ({
       value={answer.id}
       onChange={(e) => setAnswer({ correct: e.target.checked })}
       checked={answer.correct}
+      isValid={answer.correct}
     >
       {answer.id}
     </CheckerType>

src/editors/containers/ProblemEditor/components/EditProblemView/index.scss

@@ -2,4 +2,19 @@
   .editProblemView-settingsColumn {
     flex-basis: 320px;
   }
-}
+}
+
+// overrides paragon in order to make checked radio and checkboxes green
+$checked-color: '%230D7D4D';
+
+.pgn__form-radio-input {
+  &:checked {
+    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$checked-color}'/></svg>")
+  }
+}
+
+.pgn__form-checkbox-input {
+  &:checked {
+    background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='#{$checked-color}'/></svg>");
+  }
+}