Merge branch 'develop' of https://github.com/hackforla/tdm-calculator …

…into 1914-filter-icon-display-state
hackforla · Nov 3, 2024 · afbd976 · afbd976
2 parents 7abfca7 + baa223f
commit afbd976
Show file tree

Hide file tree

Showing 24 changed files with 277 additions and 216 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/src/components/Authorization/Login.jsx b/client/src/components/Authorization/Login.jsx
@@ -181,7 +181,7 @@ const Login = () => {
                   >
                     <Button
                       color="colorDefault"
-                      variant="text"
+                      variant="outlined"
                       onClick={() => {
                         navigate("/calculation/1/0");
                       }}

diff --git a/client/src/components/Checklist/ChecklistModal.jsx b/client/src/components/Checklist/ChecklistModal.jsx
@@ -3,7 +3,7 @@ import { createUseStyles } from "react-jss";
 import Modal from "react-modal";
 import PropTypes from "prop-types";
 import ChecklistContent from "./ChecklistContent";
-import { FaX } from "react-icons/fa6";
+import { MdClose } from "react-icons/md";
 
 import "./ChecklistModal.css";
 
@@ -68,8 +68,7 @@ const ChecklistModal = ({ checklistModalOpen, toggleChecklistModal }) => {
       className={classes.modal}
     >
       <span className={classes.close} onClick={toggleChecklistModal}>
-        {/* <FontAwesomeIcon icon={faX} /> */}
-        <FaX />
+        <MdClose />
       </span>
       <ChecklistContent />
     </Modal>

diff --git a/client/src/components/Faq/DeleteFaqModal.jsx b/client/src/components/Faq/DeleteFaqModal.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import ModalDialog from "../UI/AriaModal/ModalDialog";
 import Button from "../Button/Button";
-import WarningIcon from "../../images/warning-icon.png";
+import { MdWarning } from "react-icons/md";
 import { createUseStyles } from "react-jss";
 import { MdDelete } from "react-icons/md";
 
@@ -39,11 +39,11 @@ const DeleteFaqModal = ({ isModalOpen, closeModal, handleDelete, isFaq }) => {
         {` Delete ${type}`}
       </div>
       <div className={classes.modalSubHeader}>
-        <img src={WarningIcon} className={classes.warningIcon} alt="Warning" />
+        <MdWarning className={classes.warningIcon} alt="Warning" />
         {`Are you sure you want to permanently delete the ${type}?`}
       </div>
       <div className={classes.buttonFlexBox}>
-        <Button onClick={closeModal} variant="text" id="cancelButton">
+        <Button onClick={closeModal} variant="outlined" id="cancelButton">
           Cancel
         </Button>
         <Button onClick={handleDelete} variant="contained" color={"colorError"}>

diff --git a/client/src/components/Faq/SaveConfirmationModal.jsx b/client/src/components/Faq/SaveConfirmationModal.jsx
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import ModalDialog from "../UI/AriaModal/ModalDialog";
 import Button from "../Button/Button";
 import { createUseStyles } from "react-jss";
-import WarningIcon from "../../images/warning-icon.png";
+import { MdWarning } from "react-icons/md";
 import { MdSave } from "react-icons/md";
 
 const useStyles = createUseStyles(theme => ({
@@ -38,11 +38,11 @@ const SaveConfirmationModal = ({ isOpen, onClose, onYes }) => {
         {" Save Edits"}
       </div>
       <div className={classes.modalSubHeader}>
-        <img src={WarningIcon} className={classes.warningIcon} alt="Warning" />
+        <MdWarning className={classes.warningIcon} alt="Warning" />
         {"Are you sure you want to save FAQ page edits?"}
       </div>
       <div className={classes.buttonFlexBox}>
-        <Button onClick={onClose} variant="text" id="cancelButton">
+        <Button onClick={onClose} variant="outlined" id="cancelButton">
           Cancel
         </Button>
         <Button onClick={onYes} variant="contained" color={"colorPrimary"}>

diff --git a/client/src/components/Feedback/FeedbackPage.jsx b/client/src/components/Feedback/FeedbackPage.jsx
@@ -181,6 +181,7 @@ const FeedbackPage = ({ contentContainerRef }) => {
                   name="name"
                   innerRef={focusRef}
                   type="text"
+                  placeholder="required"
                   className={clsx(
                     classes.formInput,
                     errors.name && touched.name && classes.formErrorBorder
@@ -222,6 +223,7 @@ const FeedbackPage = ({ contentContainerRef }) => {
                 <Field
                   id="comment"
                   name="comment"
+                  placeholder="required"
                   as="textarea"
                   className={clsx(
                     classes.formTextArea,

diff --git a/client/src/components/Layout/NavBarToolTip.jsx b/client/src/components/Layout/NavBarToolTip.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { createUseStyles } from "react-jss";
-import WarningIcon from "../../images/warning-icon.png";
+import { MdWarning } from "react-icons/md";
 
 const useStyles = createUseStyles({
   container: {
@@ -60,7 +60,7 @@ const NavBarToolTip = () => {
 
   return (
     <div className={classes[tooltipVisibility]}>
-      <img src={WarningIcon} className={classes.warningIcon} alt="Warning" />
+      <MdWarning className={classes.warningIcon} alt="Warning" />
       <span>Only projects created after logging in can be saved</span>
       <div className={classes.arrowUp}> </div>
       <button

diff --git a/client/src/components/ProjectWizard/AffordableEdgeCaseModal.jsx b/client/src/components/ProjectWizard/AffordableEdgeCaseModal.jsx
@@ -62,7 +62,7 @@ const AffordableEdgeCaseModal = ({ isOpen, onClose, onYes }) => {
             {`100% affordable housing of less than 50 units are exempt from the TDM Ordinance. Did you intend to change to 100% Affordable Housing?`}
           </div>
           <div className={classes.buttonFlexBox}>
-            <Button onClick={onClose} variant="text" id="cancelButton">
+            <Button onClick={onClose} variant="outlined" id="cancelButton">
               NO
             </Button>
             <Button onClick={onYes} variant="contained" color={"colorPrimary"}>

diff --git a/client/src/components/ProjectWizard/NavConfirmDialog.jsx b/client/src/components/ProjectWizard/NavConfirmDialog.jsx
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import ModalDialog from "../UI/AriaModal/ModalDialog";
 import Button from "../Button/Button";
 import { createUseStyles } from "react-jss";
-import WarningIcon from "../../images/warning-icon.png";
+import { MdWarning } from "react-icons/md";
 
 const useStyles = createUseStyles({
   title: {
@@ -37,7 +37,7 @@ const NavConfirmDialog = ({ blocker }) => {
       </h2>
       <br />
       <p className={classes.warningWrapper}>
-        <img src={WarningIcon} alt="Warning" />
+        <MdWarning alt="Warning" />
         <span className={classes.warningMessage}>
           &nbsp; This will permanently delete any unsaved projects or changes to
           project.
@@ -46,7 +46,7 @@ const NavConfirmDialog = ({ blocker }) => {
       <div className={classes.modalActions}>
         <Button
           color="colorCancel"
-          variant="text"
+          variant="outlined"
           id="modalCancel"
           data-testid="transitionCancel"
           onClick={() => blocker.reset()}

diff --git a/client/src/components/ProjectWizard/WizardPages/Level0Page.jsx b/client/src/components/ProjectWizard/WizardPages/Level0Page.jsx
@@ -1,9 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 import PlanningIcon from "../../../images/planning.png";
-import WarningIcon from "../../../images/warning-icon.png";
-import { createUseStyles } from "react-jss";
+import { createUseStyles, useTheme } from "react-jss";
 import { MdLaunch } from "react-icons/md";
+import { MdWarning } from "react-icons/md";
 
 const useStyles = createUseStyles({
   level0NavButtons: {
@@ -12,20 +12,12 @@ const useStyles = createUseStyles({
     }
   },
   level0Container: {
-    textAlign: "center",
-
-    "& h1": {
-      fontFamily: "Oswald",
-      fontWeight: "bold",
-      fontSize: "30px",
-      lineHeight: "44px",
-      marginTop: "22px"
-    }
+    textAlign: "center"
   },
   level0Message: {
     marginTop: "20px",
     maxWidth: "800px",
-    backgroundColor: "#FEF4F2",
+    backgroundColor: "#F9DFDA",
     color: "#B64E38",
     fontSize: "22px",
     lineHeight: "38px",
@@ -43,21 +35,18 @@ const useStyles = createUseStyles({
 });
 
 const Level0Page = ({ isLevel0 }) => {
-  const classes = useStyles();
+  const theme = useTheme();
+  const classes = useStyles({ theme });
 
   return (
     <>
       {isLevel0 && (
         <div className={classes.level0NavButtons}>
           <div className={classes.level0Container}>
             <img src={PlanningIcon} alt="planningIcon" />
-            <h1>Your project level is 0!</h1>
+            <h1 style={theme.typography.heading1}>Your project level is 0!</h1>
             <div className={classes.level0Message}>
-              <img
-                src={WarningIcon}
-                className={classes.warningIcon}
-                alt="warningIcon"
-              />
+              <MdWarning className={classes.warningIcon} alt="Warning" />
               <p>
                 Based on the information you provided, the Transportation Demand
                 Management (TDM) Ordinance <strong>may</strong> not apply to

diff --git a/client/src/components/Projects/ColumnHeaderPopups/DatePopup.jsx b/client/src/components/Projects/ColumnHeaderPopups/DatePopup.jsx
@@ -96,7 +96,7 @@ const DatePopup = ({
 
       <hr style={{ width: "100%" }} />
       <div style={{ display: "flex" }}>
-        <Button onClick={setDefault} variant="text">
+        <Button onClick={setDefault} variant="outlined">
           Reset
         </Button>
         <Button

diff --git a/client/src/components/Projects/ColumnHeaderPopups/MultiSelectText.jsx b/client/src/components/Projects/ColumnHeaderPopups/MultiSelectText.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import SearchIcon from "../../../images/search.png";
+import { MdOutlineSearch } from "react-icons/md";
 import { createUseStyles } from "react-jss";
 
 const useStyles = createUseStyles({
@@ -81,6 +82,7 @@ const MultiSelectText = ({ options, selectedOptions, setSelectedOptions }) => {
           placeholder="Search"
           className={classes.searchBar}
         />
+        <MdOutlineSearch className={classes.searchIcon} alt="Search Icon" />
         <img
           className={classes.searchIcon}
           src={SearchIcon}

diff --git a/client/src/components/Projects/ColumnHeaderPopups/StatusPopup.jsx b/client/src/components/Projects/ColumnHeaderPopups/StatusPopup.jsx
@@ -119,7 +119,7 @@ const StatusPopup = ({
       </div>
       <hr style={{ width: "100%" }} />
       <div style={{ display: "flex" }}>
-        <Button onClick={setDefault} variant="text">
+        <Button onClick={setDefault} variant="outlined">
           Reset
         </Button>
         <Button

diff --git a/client/src/components/Projects/ColumnHeaderPopups/TextPopup.jsx b/client/src/components/Projects/ColumnHeaderPopups/TextPopup.jsx
@@ -4,7 +4,7 @@ import Button from "../../Button/Button";
 import RadioButton from "../../UI/RadioButton";
 import "react-datepicker/dist/react-datepicker.css";
 import { MdClose } from "react-icons/md";
-import SearchIcon from "../../../images/search.png";
+import { MdOutlineSearch } from "react-icons/md";
 import { createUseStyles } from "react-jss";
 
 const useStyles = createUseStyles({
@@ -190,11 +190,7 @@ const TextPopup = ({
           onChange={onChangeSearchString}
           className={classes.searchBar}
         />
-        <img
-          className={classes.searchIcon}
-          src={SearchIcon}
-          alt="Search Icon"
-        />
+        <MdOutlineSearch className={classes.searchIcon} alt="Search Icon" />
       </div>
 
       <div style={{ overflow: "auto", maxHeight: "12rem" }}>
@@ -217,7 +213,7 @@ const TextPopup = ({
 
       <hr style={{ width: "100%" }} />
       <div style={{ display: "flex", justifyContent: "center" }}>
-        <Button onClick={setDefault} variant="text">
+        <Button onClick={setDefault} variant="outlined">
           Reset
         </Button>
         <Button

diff --git a/client/src/components/Projects/ColumnHeaderPopups/VisibilityPopup.jsx b/client/src/components/Projects/ColumnHeaderPopups/VisibilityPopup.jsx
@@ -102,7 +102,7 @@ const VisibilityPopup = ({
 
       <hr style={{ width: "100%" }} />
       <div style={{ display: "flex" }}>
-        <Button onClick={setDefault} variant="text">
+        <Button onClick={setDefault} variant="outlined">
           Reset
         </Button>
         <Button

diff --git a/client/src/components/Projects/CopyProjectModal.jsx b/client/src/components/Projects/CopyProjectModal.jsx
@@ -56,7 +56,7 @@ export default function CopyProjectModal({
         />
       </div>
       <div className={classes.buttonFlexBox}>
-        <Button onClick={onClose} variant="text">
+        <Button onClick={onClose} variant="outlined">
           Cancel
         </Button>
         <Button

diff --git a/client/src/components/Projects/CsvModal.jsx b/client/src/components/Projects/CsvModal.jsx
@@ -158,7 +158,7 @@ const CsvModal = ({
               setProjectCollection("");
               setFilename("");
             }}
-            variant="text"
+            variant="outlined"
             id="cancelButton"
           >
             Cancel

diff --git a/client/src/components/Projects/DeleteProjectModal.jsx b/client/src/components/Projects/DeleteProjectModal.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { PropTypes } from "prop-types";
 import { MdDelete, MdRestoreFromTrash } from "react-icons/md";
 import Button from "../Button/Button";
-import WarningIcon from "../../images/warning-icon.png";
+import { MdWarning } from "react-icons/md";
 import { createUseStyles, useTheme } from "react-jss";
 import ModalDialog from "../UI/AriaModal/ModalDialog";
 
@@ -47,11 +47,7 @@ const DeleteProjectModal = ({ mounted, onClose, project }) => {
             <MdRestoreFromTrash /> Restore Project from Trash
           </div>
           <div style={theme.typography.subHeading}>
-            <img
-              src={WarningIcon}
-              className={classes.warningIcon}
-              alt="Warning"
-            />
+            <MdWarning className={classes.warningIcon} alt="Warning" />
             Are you sure you want to restore the project from the trash,
           </div>
         </>
@@ -61,11 +57,7 @@ const DeleteProjectModal = ({ mounted, onClose, project }) => {
             <MdDelete /> Delete Project
           </div>
           <div style={theme.typography.subHeading}>
-            <img
-              src={WarningIcon}
-              className={classes.warningIcon}
-              alt="Warning"
-            />
+            <MdWarning className={classes.warningIcon} alt="Warning" />
             Are you sure you want to delete the following? <br></br>(It will
             remain in the recycling bin for ninety days <br></br>before being
             permanently deleted)
@@ -76,7 +68,7 @@ const DeleteProjectModal = ({ mounted, onClose, project }) => {
         {Array.isArray(project.name) ? project.name.join(", ") : project.name}
       </div>
       <div className={classes.buttonFlexBox}>
-        <Button onClick={onClose} variant="text" id="cancelButton">
+        <Button onClick={onClose} variant="outlined" id="cancelButton">
           Cancel
         </Button>
         {project.dateTrashed ? (

diff --git a/client/src/components/Projects/DownloadProjectModal.jsx b/client/src/components/Projects/DownloadProjectModal.jsx
@@ -6,6 +6,8 @@ import Button from "../Button/Button";
 
 import ModalDialog from "../UI/AriaModal/ModalDialog";
 
+// This file appears to be obsolete
+
 const useStyles = createUseStyles(theme => ({
   buttonFlexBox: {
     display: "flex",
@@ -93,7 +95,7 @@ export default function DownloadProjectModal({
         </table>
       </div>
       <div className={classes.buttonFlexBox}>
-        <Button onClick={onClose} variant="text">
+        <Button onClick={onClose} variant="outlined">
           Close
         </Button>
         {/* <Button