From 46427ee156bbf7ef28832e41f9f2d5e315c41f37 Mon Sep 17 00:00:00 2001
From: Raymond Zhou <56318341+rayzhou-bit@users.noreply.github.com>
Date: Wed, 8 Feb 2023 11:41:36 -0800
Subject: [PATCH] feat: make radio and checkbox green (#234)

---
 .../Checker/__snapshots__/index.test.jsx.snap   |  2 ++
 .../AnswerWidget/components/Checker/index.jsx   |  1 +
 .../components/EditProblemView/index.scss       | 17 ++++++++++++++++-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/__snapshots__/index.test.jsx.snap
index a9692438d..86f530613 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/__snapshots__/index.test.jsx.snap
+++ b/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"
 >
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.jsx
index 2ac2a4d7a..70813d0f2 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.jsx
+++ b/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>
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss b/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss
index 343a67a19..bd2699f85 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss
@@ -2,4 +2,19 @@
   .editProblemView-settingsColumn {
     flex-basis: 320px;
   }
-}
\ No newline at end of file
+}
+
+// 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>");
+  }
+}