feat: variant checkbox icon

package.json

@@ -35,7 +35,6 @@
         "react": "^18.2.0",
         "react-beautiful-dnd": "^13.1.1",
         "react-cytoscapejs": "^2.0.0",
-        "react-datepicker": "^4.24.0",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.2.0",
@@ -78,7 +77,6 @@
         "@types/cytoscape-popper": "^2.0.4",
         "@types/react-beautiful-dnd": "^13.1.4",
         "@types/react-cytoscapejs": "^1.2.4",
-        "@types/react-datepicker": "^4.19.3",
         "craco-alias": "^3.0.1",
         "cypress": "^13.4.0"
     }

src/assets/icons/Checkbox.tsx

@@ -0,0 +1,43 @@
+import { Box, useTheme } from "@mui/material";
+
+type CheckboxIconProps = {
+  checked?: boolean;
+};
+
+export const CheckboxIcon = ({ checked = false }: CheckboxIconProps) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        height: "24px",
+        width: "24px",
+        borderRadius: "6px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: checked
+          ? theme.palette.brightPurple.main
+          : theme.palette.background.default,
+        border: `1px solid ${theme.palette.grey2.main}`,
+      }}
+    >
+      {checked && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="15"
+          height="15"
+          viewBox="0 0 25 18"
+          fill="none"
+        >
+          <path
+            d="M2 9L10 16.5L22.5 1.5"
+            stroke="#ffffff"
+            strokeWidth="4"
+            strokeLinecap="round"
+          />
+        </svg>
+      )}
+    </Box>
+  );
+};

src/pages/ViewPublicationPage/questions/Date.tsx

@@ -4,8 +4,6 @@ import { Box, Typography } from "@mui/material";
 
 import { useQuizViewStore, updateAnswer } from "@root/quizView";
 
-// import "react-datepicker/dist/react-datepicker.css";
-
 import type { QuizQuestionDate } from "../../../model/questionTypes/date";
 import CalendarIcon from "@icons/CalendarIcon";
 

src/pages/ViewPublicationPage/questions/Variant.tsx

@@ -13,6 +13,7 @@ import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
 
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
+import { CheckboxIcon } from "@icons/Checkbox";
 
 import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
 
@@ -77,8 +78,8 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
                   currentQuestion.content.multi ? (
                     <Checkbox
                       checked={!!answer?.includes(variant.id)}
-                      checkedIcon={<RadioCheck />}
+                      checkedIcon={<CheckboxIcon checked />}
-                      icon={<RadioIcon />}
+                      icon={<CheckboxIcon />}
                     />
                   ) : (
                     <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />

src/ui_kit/CustomCheckbox.tsx

@@ -1,6 +1,8 @@
 import { FormControlLabel, Checkbox, useTheme, Box, useMediaQuery } from "@mui/material";
 import React from "react";
 
+import { CheckboxIcon } from "@icons/Checkbox";
+
 import type { SxProps } from "@mui/material";
 
 interface Props {
@@ -21,8 +23,8 @@ export default function CustomCheckbox({ label, handleChange, checked, sx, dataC
         <Checkbox
           sx={{ padding: "0px 13px 1px 11px" }}
           disableRipple
-          icon={<Icon />}
+          icon={<CheckboxIcon />}
-          checkedIcon={<CheckedIcon />}
+          checkedIcon={<CheckboxIcon checked />}
           onChange={handleChange}
           checked={checked}
           data-cy={dataCy}
@@ -37,42 +39,3 @@ export default function CustomCheckbox({ label, handleChange, checked, sx, dataC
     />
   );
 }
-
-function Icon() {
-  const theme = useTheme();
-
-  return (
-    <Box
-      sx={{
-        height: "24px",
-        width: "24px",
-        borderRadius: "6px",
-        backgroundColor: theme.palette.background.default,
-        border: `1px solid ${theme.palette.grey2.main}`,
-      }}
-    />
-  );
-}
-
-function CheckedIcon() {
-  const theme = useTheme();
-
-  return (
-    <Box
-      sx={{
-        height: "24px",
-        width: "24px",
-        borderRadius: "6px",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: theme.palette.brightPurple.main,
-        border: `1px solid ${theme.palette.grey2.main}`,
-      }}
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 18" fill="none">
-        <path d="M2 9L10 16.5L22.5 1.5" stroke="#ffffff" strokeWidth="4" strokeLinecap="round" />
-      </svg>
-    </Box>
-  );
-}

yarn.lock

@@ -1034,7 +1034,7 @@
     core-js-pure "^3.25.1"
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.1", "@babel/runtime@^7.23.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.23.1", "@babel/runtime@^7.23.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.23.2"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz"
   integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
@@ -1868,7 +1868,7 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
-"@popperjs/core@^2.0.0", "@popperjs/core@^2.11.8", "@popperjs/core@^2.9.2":
+"@popperjs/core@^2.0.0", "@popperjs/core@^2.11.8":
   version "2.11.8"
   resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
@@ -2412,16 +2412,6 @@
     "@types/cytoscape" "*"
     "@types/react" "*"
 
-"@types/react-datepicker@^4.19.3":
-  version "4.19.3"
-  resolved "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-4.19.3.tgz"
-  integrity sha512-85F9eKWu9fGiD9r4KVVMPYAdkJJswR3Wci9PvqplmB6T+D+VbUqPeKtifg96NZ4nEhufjehW+SX4JLrEWVplWw==
-  dependencies:
-    "@popperjs/core" "^2.9.2"
-    "@types/react" "*"
-    date-fns "^2.0.1"
-    react-popper "^2.2.5"
-
 "@types/react-dnd@^3.0.2":
   version "3.0.2"
   resolved "https://registry.npmjs.org/@types/react-dnd/-/react-dnd-3.0.2.tgz"
@@ -3610,11 +3600,6 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
-classnames@^2.2.6:
-  version "2.3.2"
-  resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz"
-  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
-
 clean-css@^5.2.2:
   version "5.3.1"
   resolved "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz"
@@ -4214,13 +4199,6 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-date-fns@^2.0.1, date-fns@^2.30.0:
-  version "2.30.0"
-  resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz"
-  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
-  dependencies:
-    "@babel/runtime" "^7.21.0"
-
 dayjs@^1.10.4, dayjs@^1.11.10:
   version "1.11.10"
   resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz"
@@ -7115,7 +7093,7 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -8544,18 +8522,6 @@ react-cytoscapejs@^2.0.0:
   dependencies:
     prop-types "^15.8.1"
 
-react-datepicker@^4.24.0:
-  version "4.24.0"
-  resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.24.0.tgz"
-  integrity sha512-2QUC2pP+x4v3Jp06gnFllxKsJR0yoT/K6y86ItxEsveTXUpsx+NBkChWXjU0JsGx/PL8EQnsxN0wHl4zdA1m/g==
-  dependencies:
-    "@popperjs/core" "^2.11.8"
-    classnames "^2.2.6"
-    date-fns "^2.30.0"
-    prop-types "^15.7.2"
-    react-onclickoutside "^6.13.0"
-    react-popper "^2.3.0"
-
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz"
@@ -8645,11 +8611,6 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-fast-compare@^3.0.1:
-  version "3.2.2"
-  resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz"
-  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
-
 react-image-crop@^10.1.5:
   version "10.1.8"
   resolved "https://registry.npmjs.org/react-image-crop/-/react-image-crop-10.1.8.tgz"
@@ -8675,19 +8636,6 @@ react-is@^18.0.0, react-is@^18.2.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-onclickoutside@^6.13.0:
-  version "6.13.0"
-  resolved "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz"
-  integrity sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==
-
-react-popper@^2.2.5, react-popper@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz"
-  integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
-  dependencies:
-    react-fast-compare "^3.0.1"
-    warning "^4.0.2"
-
 react-redux@^7.2.0:
   version "7.2.9"
   resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz"
@@ -10260,13 +10208,6 @@ walker@^1.0.7:
   dependencies:
     makeerror "1.0.12"
 
-warning@^4.0.2:
-  version "4.0.3"
-  resolved "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz"
-  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
-  dependencies:
-    loose-envify "^1.0.0"
-
 watchpack@^2.4.0:
   version "2.4.0"
   resolved "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz"