ChecklistModal css adjustment

client/src/components/Checklist/ChecklistModal.js

@@ -3,6 +3,8 @@ import { createUseStyles } from "react-jss";
 import Modal from "react-modal";
 import PropTypes from "prop-types";
 import ChecklistContent from "./ChecklistContent";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faX } from "@fortawesome/free-solid-svg-icons";
 
 import "./ChecklistModal.css";
 
@@ -15,31 +17,41 @@ const useStyles = createUseStyles({
   close: {
     display: "flex",
     justifyContent: "flex-end",
-    fontSize: "25px",
-    cursor: "pointer"
+    border: "0 solid white",
+    backgroundColor: "transparent",
+    "&:hover": {
+      cursor: "pointer"
+    }
   }
 });
 
 const modalStyleDefaultOverrides = {
   overlay: {
-    backgroundColor: "rgba(15, 41, 64, 0.4)",
+    zIndex: "999",
+    position: "fixed",
+    width: "100vw",
+    height: "100vh",
     display: "flex",
+    flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
-    zIndex: "20"
+    backgroundColor: "rgba(255, 255, 255, 0.7)",
+    fontSize: "1rem",
+    fontWeight: "normal"
   },
   content: {
-    position: "static",
-    top: "50px",
-    right: "auto",
-    bottom: "auto",
-    left: "200px",
+    maxWidth: "90vw",
+    minWidth: "40vw",
+    padding: "1rem",
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    border: "1px solid #d8dce3",
+    borderRadius: "0",
     boxSizing: "border-box",
-    maxHeight: "fit-content",
-    width: "500px",
-    padding: "25px",
-    backgroundColor: "#ffffff",
-    boxShadow: "0px 5px 10px rgba(0, 46, 109, 0.2)"
+    boxShadow: "0px 5px 10px rgba(0, 46, 109, 0.5)",
+    backgroundColor: "rgba(255, 255, 255, 1)"
   }
 };
 
@@ -57,7 +69,7 @@ const ChecklistModal = ({ checklistModalOpen, toggleChecklistModal }) => {
       className={classes.modal}
     >
       <span className={classes.close} onClick={toggleChecklistModal}>
-        x
+        <FontAwesomeIcon icon={faX} />
       </span>
       <ChecklistContent />
     </Modal>

package.json

@@ -10,6 +10,9 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "eslint": "^8.53.0",
     "react-csv": "^2.2.2",
     "react-modal": "^3.16.1",