From 51aa8eb27e826e33ca764756f0d46a70b28126bd Mon Sep 17 00:00:00 2001 From: bilalbg Date: Fri, 9 Aug 2024 12:52:33 -0400 Subject: [PATCH] Change iconography with icons from Material UI #1760 --- client/package-lock.json | 3 -- client/package.json | 3 -- client/src/components/About.js | 19 ++++--- .../components/ArchiveDelete/RolesArchive.js | 13 ++--- .../ArchiveDelete/RolesContextMenu.js | 6 +-- .../ArchiveDelete/RolesDeleteContextMenu.js | 6 +-- .../RolesUnarchiveContextMenu.js | 6 +-- .../src/components/Button/AddNewCategory.jsx | 14 ++--- .../src/components/Button/DownloadButton.js | 5 +- .../src/components/Button/EditToggleButton.js | 5 +- client/src/components/Button/NavButton.js | 12 ++--- client/src/components/Button/PrintButton.js | 5 +- .../components/Checklist/ChecklistContent.js | 8 +-- .../components/Faq/CategoryInputContainer.jsx | 14 ++--- client/src/components/Faq/DeleteFaqModal.jsx | 5 +- client/src/components/Faq/ExpandButtons.jsx | 13 ++--- .../src/components/Faq/FaqButtonContainer.jsx | 23 ++++----- .../components/Faq/SaveConfirmationModal.jsx | 5 +- client/src/components/Layout/Footer.js | 10 ++-- client/src/components/Layout/Header.js | 5 +- client/src/components/Offline.js | 11 ++-- .../InapplicableStrategiesModal.js | 9 +--- .../PackagePanel/PackageTooltips.js | 17 +++---- .../ProjectWizard/RuleInput/RuleInputLabel.js | 5 +- .../ProjectWizard/WizardPages/Level0Page.jsx | 8 +-- .../WizardPages/ProjectMeasures.js | 8 +-- .../ProjectSummary/PointsEarnedMessage.jsx | 13 ++--- .../components/Projects/CopyProjectModal.js | 7 +-- client/src/components/Projects/CsvModal.js | 5 +- .../components/Projects/DeleteProjectModal.js | 7 ++- .../src/components/Projects/FilterDrawer.js | 5 +- .../Projects/MultiProjectToolbarMenu.js | 33 +++++------- .../components/Projects/ProjectContextMenu.js | 51 ++++++++----------- .../components/Projects/ProjectTableRow.js | 18 ++----- .../src/components/Projects/ProjectsPage.js | 18 ++----- .../Projects/SnapshotProjectModal.js | 6 +-- client/src/components/Roles.js | 10 ++-- client/src/components/ToolTip/ToolTipIcon.js | 18 ++----- client/src/components/ToolTip/ToolTipLabel.js | 23 ++------- client/src/components/UI/Pagination.js | 7 ++- package-lock.json | 12 +++-- package.json | 3 -- 42 files changed, 160 insertions(+), 314 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 6eb66284..6523c73e 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -9,9 +9,6 @@ "version": "0.2.50", "dependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "@fortawesome/fontawesome-svg-core": "^6.1.1", - "@fortawesome/free-solid-svg-icons": "^6.1.1", - "@fortawesome/react-fontawesome": "^0.2.0", "@react-pdf/renderer": "^3.1.9", "axios": "^1.6.1", "clsx": "^2.0.0", diff --git a/client/package.json b/client/package.json index 62ff3e60..34d07b32 100644 --- a/client/package.json +++ b/client/package.json @@ -30,9 +30,6 @@ }, "dependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "@fortawesome/fontawesome-svg-core": "^6.1.1", - "@fortawesome/free-solid-svg-icons": "^6.1.1", - "@fortawesome/react-fontawesome": "^0.2.0", "@react-pdf/renderer": "^3.1.9", "axios": "^1.6.1", "clsx": "^2.0.0", diff --git a/client/src/components/About.js b/client/src/components/About.js index 11badc27..ac806130 100644 --- a/client/src/components/About.js +++ b/client/src/components/About.js @@ -2,7 +2,7 @@ import React from "react"; import { createUseStyles } from "react-jss"; import packageInfo from "../../package.json"; import ContentContainer from "./Layout/ContentContainer"; -import { FaExternalLinkAlt } from "react-icons/fa"; +import { MdLaunch } from "react-icons/md"; const useStyles = createUseStyles({ aboutContent: { @@ -13,7 +13,7 @@ const useStyles = createUseStyles({ }, externalLinkIcon: { fontSize: "14px", - padding: " 0 0.5em", + padding: " 0 0.4em", color: "#00F" } }); @@ -62,8 +62,7 @@ const About = () => {

Learn more about{" "} - Hack for LA{" "} - + Hack for LA

Status of the TDM Calculator

@@ -83,7 +82,7 @@ const About = () => { target="external" > Glossary - +
  • @@ -92,7 +91,7 @@ const About = () => { target="external" > Los Angeles City Planning, Mobility - +
  • @@ -101,7 +100,7 @@ const About = () => { target="external" > Proposed Ordinances and Initiatives - +
  • @@ -110,7 +109,7 @@ const About = () => { target="external" > Informational Video (January 2021) - +
  • @@ -119,7 +118,7 @@ const About = () => { target="external" > Fact Sheet - English (January 2021) - +
  • @@ -128,7 +127,7 @@ const About = () => { target="external" > Hoja Informativa - Español (Enero 2021) - +
    • diff --git a/client/src/components/ArchiveDelete/RolesArchive.js b/client/src/components/ArchiveDelete/RolesArchive.js index 38a1cd27..09717040 100644 --- a/client/src/components/ArchiveDelete/RolesArchive.js +++ b/client/src/components/ArchiveDelete/RolesArchive.js @@ -2,8 +2,7 @@ import React, { useState, useEffect } from "react"; import { Link } from "react-router-dom"; import { createUseStyles } from "react-jss"; import Popup from "reactjs-popup"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faTrash, faUndo } from "@fortawesome/free-solid-svg-icons"; +import { MdDelete, MdUndo } from "react-icons/md"; import * as accountService from "../../services/account.service"; import { useToast } from "../../contexts/Toast"; import RolesUnarchiveContextMenu from "./RolesUnarchiveContextMenu"; @@ -178,10 +177,7 @@ const RolesArchive = () => { - + } position="bottom center" @@ -208,10 +204,7 @@ const RolesArchive = () => { className={`${classes.optionsButton}`} style={{ color: "red" }} > - + } position="bottom center" diff --git a/client/src/components/ArchiveDelete/RolesContextMenu.js b/client/src/components/ArchiveDelete/RolesContextMenu.js index 0adb6283..5c4ea8ff 100644 --- a/client/src/components/ArchiveDelete/RolesContextMenu.js +++ b/client/src/components/ArchiveDelete/RolesContextMenu.js @@ -1,7 +1,6 @@ import React from "react"; import PropTypes from "prop-types"; -import { faArchive } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { MdArchive } from "react-icons/md"; import { createUseStyles } from "react-jss"; const useStyles = createUseStyles({ @@ -26,8 +25,7 @@ const RolesContextMenu = ({ user, handleArchiveUser }) => { className={classes.listItem} style={{ color: "red" }} > - diff --git a/client/src/components/ArchiveDelete/RolesDeleteContextMenu.js b/client/src/components/ArchiveDelete/RolesDeleteContextMenu.js index 3da939dd..9e88d3c4 100644 --- a/client/src/components/ArchiveDelete/RolesDeleteContextMenu.js +++ b/client/src/components/ArchiveDelete/RolesDeleteContextMenu.js @@ -1,7 +1,6 @@ import React from "react"; import PropTypes from "prop-types"; -import { faTrash } from "@fortawesome/free-solid-svg-icons"; // faRemove -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { MdDelete } from "react-icons/md"; import { createUseStyles } from "react-jss"; const useStyles = createUseStyles({ @@ -27,8 +26,7 @@ const RolesDeleteContextMenu = ({ user, handleDeleteUser }) => { className={classes.listItem} style={{ color: "red" }} > - diff --git a/client/src/components/ArchiveDelete/RolesUnarchiveContextMenu.js b/client/src/components/ArchiveDelete/RolesUnarchiveContextMenu.js index 5f12fa6f..69679cb6 100644 --- a/client/src/components/ArchiveDelete/RolesUnarchiveContextMenu.js +++ b/client/src/components/ArchiveDelete/RolesUnarchiveContextMenu.js @@ -1,7 +1,6 @@ import React from "react"; import PropTypes from "prop-types"; -import { faUndo } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { MdUndo } from "react-icons/md"; import { createUseStyles } from "react-jss"; const useStyles = createUseStyles({ @@ -27,8 +26,7 @@ const RolesArchiveContextMenu = ({ user, handleUnarchiveUser }) => { className={classes.listItem} style={{ color: "black" }} > - diff --git a/client/src/components/Button/AddNewCategory.jsx b/client/src/components/Button/AddNewCategory.jsx index 8e3f42cf..ea1cff8a 100644 --- a/client/src/components/Button/AddNewCategory.jsx +++ b/client/src/components/Button/AddNewCategory.jsx @@ -1,15 +1,13 @@ import React from "react"; import PropTypes from "prop-types"; -import { faPlus } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { MdAddCircle } from "react-icons/md"; import Button from "../Button/Button"; import { createUseStyles } from "react-jss"; const useStyles = createUseStyles(theme => ({ - iconContainer: { - backgroundColor: theme.colorPrimary, - borderRadius: "50%", - padding: "5px" + icon: { + color: theme.colorPrimary, + fontSize: "xx-large" }, buttonContainer: { display: "flex", @@ -36,9 +34,7 @@ const AddNewCategoryButton = ({ id, onClick }) => { data-testid={id} >
    -
    - -
    +
    {` Add New Category `}
    diff --git a/client/src/components/Button/DownloadButton.js b/client/src/components/Button/DownloadButton.js index 87aabc20..465eddf8 100644 --- a/client/src/components/Button/DownloadButton.js +++ b/client/src/components/Button/DownloadButton.js @@ -1,8 +1,7 @@ import React from "react"; import PropTypes from "prop-types"; import Button from "./Button"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faPrint } from "@fortawesome/free-solid-svg-icons"; +import { MdPrint } from "react-icons/md"; const DownloadButton = ({ id, onClick, isDisplayed }) => { return ( @@ -15,7 +14,7 @@ const DownloadButton = ({ id, onClick, isDisplayed }) => { data-testid={id} isDisplayed={isDisplayed} > - + Print Summary ); diff --git a/client/src/components/Button/EditToggleButton.js b/client/src/components/Button/EditToggleButton.js index af4b3821..d321846a 100644 --- a/client/src/components/Button/EditToggleButton.js +++ b/client/src/components/Button/EditToggleButton.js @@ -1,8 +1,7 @@ import React from "react"; import PropTypes from "prop-types"; -import { faEdit } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import Button from "../Button/Button"; +import { MdEdit } from "react-icons/md"; const EditToggleButton = ({ id, onClick, editMode }) => { return ( @@ -15,7 +14,7 @@ const EditToggleButton = ({ id, onClick, editMode }) => { style={{ margin: "0" }} > <> - + {editMode ? ` SAVE EDITS` : ` EDIT FAQ PAGE`} diff --git a/client/src/components/Button/NavButton.js b/client/src/components/Button/NavButton.js index 47d672f6..48de81b8 100644 --- a/client/src/components/Button/NavButton.js +++ b/client/src/components/Button/NavButton.js @@ -1,8 +1,7 @@ import React from "react"; import PropTypes from "prop-types"; import { createUseStyles, useTheme } from "react-jss"; -import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { MdChevronLeft, MdChevronRight } from "react-icons/md"; import clsx from "clsx"; import Button from "./Button"; @@ -11,7 +10,6 @@ const useStyles = createUseStyles({ cursor: "pointer", padding: "0.35em 0.7em", margin: "0.5em", - fontSize: "2em", border: "1px solid rgba(0, 0, 0, 0.1)", boxShadow: "rgba(0, 46, 109, 0.3) 0px 3px 5px", "&:focus": { @@ -53,9 +51,11 @@ const NavButton = ({ onClick={onClick} disabled={isDisabled} > - + {navDirection === "previous" ? ( + + ) : ( + + )} ); }; diff --git a/client/src/components/Button/PrintButton.js b/client/src/components/Button/PrintButton.js index 719948cf..429ff45b 100644 --- a/client/src/components/Button/PrintButton.js +++ b/client/src/components/Button/PrintButton.js @@ -1,8 +1,7 @@ import React from "react"; import PropTypes from "prop-types"; import Button from "./Button"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faPrint } from "@fortawesome/free-solid-svg-icons"; +import { MdPrint } from "react-icons/md"; const PrintButton = ({ id, onClick, isDisabled, isDisplayed }) => { return ( @@ -16,7 +15,7 @@ const PrintButton = ({ id, onClick, isDisabled, isDisplayed }) => { disabled={isDisabled} isDisplayed={isDisplayed} > - + Print Summary ); diff --git a/client/src/components/Checklist/ChecklistContent.js b/client/src/components/Checklist/ChecklistContent.js index 2c93144d..4c4e6eb3 100644 --- a/client/src/components/Checklist/ChecklistContent.js +++ b/client/src/components/Checklist/ChecklistContent.js @@ -1,7 +1,6 @@ import React from "react"; import { createUseStyles } from "react-jss"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons"; +import { MdLaunch } from "react-icons/md"; const useStyles = createUseStyles({ container: { @@ -114,10 +113,7 @@ const ChecklistContent = () => { > {" "} Draft Revised TDM Ordinance{" "} - + {" "} for applicability and exemption details.

    diff --git a/client/src/components/Faq/CategoryInputContainer.jsx b/client/src/components/Faq/CategoryInputContainer.jsx index 9cbff0c1..af933653 100644 --- a/client/src/components/Faq/CategoryInputContainer.jsx +++ b/client/src/components/Faq/CategoryInputContainer.jsx @@ -1,11 +1,7 @@ import React from "react"; import PropTypes from "prop-types"; import { createUseStyles } from "react-jss"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faGripHorizontal, - faTrashAlt -} from "@fortawesome/free-solid-svg-icons"; +import { MdDelete, MdViewModule } from "react-icons/md"; import { CategoryInput } from "./CategoryInput"; const useStyles = createUseStyles({ @@ -65,16 +61,12 @@ export const CategoryInputContainer = ({ {admin && ( <> {isHovered && ( - )} - + )} diff --git a/client/src/components/Faq/DeleteFaqModal.jsx b/client/src/components/Faq/DeleteFaqModal.jsx index 86f10edf..69f4a57c 100644 --- a/client/src/components/Faq/DeleteFaqModal.jsx +++ b/client/src/components/Faq/DeleteFaqModal.jsx @@ -4,8 +4,7 @@ import ModalDialog from "../UI/AriaModal/ModalDialog"; import Button from "../Button/Button"; import WarningIcon from "../../images/warning-icon.png"; import { createUseStyles } from "react-jss"; -import { faTrash } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { MdDelete } from "react-icons/md"; const useStyles = createUseStyles(theme => ({ buttonFlexBox: { @@ -36,7 +35,7 @@ const DeleteFaqModal = ({ isModalOpen, closeModal, handleDelete, isFaq }) => { return (
    - + {` Delete ${type}`}
    diff --git a/client/src/components/Faq/ExpandButtons.jsx b/client/src/components/Faq/ExpandButtons.jsx index e97439ee..8282fa7f 100644 --- a/client/src/components/Faq/ExpandButtons.jsx +++ b/client/src/components/Faq/ExpandButtons.jsx @@ -1,9 +1,7 @@ import React from "react"; import PropTypes from "prop-types"; import { createUseStyles } from "react-jss"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faAngleUp } from "@fortawesome/free-solid-svg-icons"; -import { faAngleDown } from "@fortawesome/free-solid-svg-icons"; +import { MdExpandLess, MdExpandMore } from "react-icons/md"; const useStyles = createUseStyles({ expandCollapseFlexContainer: { @@ -18,7 +16,7 @@ const useStyles = createUseStyles({ flexDirection: "column" }, faqCarotIcon: { - fontSize: "14px", + fontSize: "large", margin: "-2px" }, expandCollapseAll: { @@ -41,10 +39,7 @@ const ExpandButtons = ({ toggleExpandCollapse }) => {
    - +
    - + diff --git a/client/src/components/Offline.js b/client/src/components/Offline.js index fae15fa1..9c073994 100644 --- a/client/src/components/Offline.js +++ b/client/src/components/Offline.js @@ -1,13 +1,12 @@ import React from "react"; import { createUseStyles } from "react-jss"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons"; +import { MdError } from "react-icons/md"; import wave from "../images/wave.svg"; const useStyles = createUseStyles(() => ({ failure: { color: "#E46247", - width: "3em" + fontSize: "3.5em" }, offlineContainer: { backgroundImage: `url(${wave})`, @@ -42,11 +41,7 @@ const OfflinePage = () => { return (
    - +


    diff --git a/client/src/components/ProjectWizard/InapplicableStrategiesModal.js b/client/src/components/ProjectWizard/InapplicableStrategiesModal.js index 1b5af989..f8e20024 100644 --- a/client/src/components/ProjectWizard/InapplicableStrategiesModal.js +++ b/client/src/components/ProjectWizard/InapplicableStrategiesModal.js @@ -3,8 +3,7 @@ import PropTypes from "prop-types"; import ModalDialog from "../UI/AriaModal/ModalDialog"; import Button from "../Button/Button"; import { createUseStyles } from "react-jss"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons"; +import { MdWarning } from "react-icons/md"; const useStyles = createUseStyles({ title: { @@ -34,11 +33,7 @@ const InapplicableStrategiesModal = props => { underlayClickExits={false} >
    - +

    Due to changes made to the project specifications, one or more TDM strategies are no longer applicable and have been automatically diff --git a/client/src/components/ProjectWizard/PackagePanel/PackageTooltips.js b/client/src/components/ProjectWizard/PackagePanel/PackageTooltips.js index 26b72fc9..709a7b29 100644 --- a/client/src/components/ProjectWizard/PackagePanel/PackageTooltips.js +++ b/client/src/components/ProjectWizard/PackagePanel/PackageTooltips.js @@ -1,7 +1,6 @@ import React from "react"; import { createUseStyles, useTheme } from "react-jss"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faCheck } from "@fortawesome/free-solid-svg-icons"; +import { MdCheck } from "react-icons/md"; const useStyles = createUseStyles({ box: { @@ -100,21 +99,21 @@ export const TooltipResidential = () => { - + Bike Parking + 2 Points - + Encouragement Program + 4 Points - + Unbundling Parking + 8 Points @@ -155,28 +154,28 @@ export const TooltipSchool = () => { - + Bike Parking + 2 Points - + Encouragement Program + 6 Points - + HOV Program + 2 Points - + School Safety Program + 4 Points diff --git a/client/src/components/ProjectWizard/RuleInput/RuleInputLabel.js b/client/src/components/ProjectWizard/RuleInput/RuleInputLabel.js index 400c9171..fbf57fb3 100644 --- a/client/src/components/ProjectWizard/RuleInput/RuleInputLabel.js +++ b/client/src/components/ProjectWizard/RuleInput/RuleInputLabel.js @@ -1,8 +1,7 @@ import React from "react"; import ToolTipLabel from "../../ToolTip/ToolTipLabel"; import PropTypes from "prop-types"; -import { faLink } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { MdLink } from "react-icons/md"; const RuleInputLabel = ({ id, @@ -29,7 +28,7 @@ const RuleInputLabel = ({ {link ? ( {name} - + ) : ( name diff --git a/client/src/components/ProjectWizard/WizardPages/Level0Page.jsx b/client/src/components/ProjectWizard/WizardPages/Level0Page.jsx index 92be2f98..441e1b0b 100644 --- a/client/src/components/ProjectWizard/WizardPages/Level0Page.jsx +++ b/client/src/components/ProjectWizard/WizardPages/Level0Page.jsx @@ -3,8 +3,7 @@ import PropTypes from "prop-types"; import PlanningIcon from "../../../images/planning.png"; import WarningIcon from "../../../images/warning-icon.png"; import { createUseStyles } from "react-jss"; -import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { MdLaunch } from "react-icons/md"; const useStyles = createUseStyles({ level0NavButtons: { @@ -69,10 +68,7 @@ const Level0Page = ({ isLevel0 }) => { target="external" > Draft Revised TDM Ordinance{" "} - + {" "} for applicability and exemption details.

    diff --git a/client/src/components/ProjectWizard/WizardPages/ProjectMeasures.js b/client/src/components/ProjectWizard/WizardPages/ProjectMeasures.js index df4504a9..f2452d57 100644 --- a/client/src/components/ProjectWizard/WizardPages/ProjectMeasures.js +++ b/client/src/components/ProjectWizard/WizardPages/ProjectMeasures.js @@ -4,8 +4,7 @@ import PackagePanel from "../PackagePanel/PackagePanel"; import RuleStrategyPanels from "../RuleStrategy/RuleStrategyPanels"; import { createUseStyles, useTheme } from "react-jss"; import ResetButtons from "./ResetButtons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faCheckCircle } from "@fortawesome/free-solid-svg-icons"; +import { MdCheckCircle } from "react-icons/md"; const useStyles = createUseStyles({ pkgSelectContainer: { @@ -81,10 +80,7 @@ function ProjectMeasure(props) { {(allowResidentialPackage || allowSchoolPackage) && ( <>
    - +
    You qualify for a bonus package to earn 1 extra point!
    diff --git a/client/src/components/ProjectWizard/WizardPages/ProjectSummary/PointsEarnedMessage.jsx b/client/src/components/ProjectWizard/WizardPages/ProjectSummary/PointsEarnedMessage.jsx index 8a40df30..7e948c5a 100644 --- a/client/src/components/ProjectWizard/WizardPages/ProjectSummary/PointsEarnedMessage.jsx +++ b/client/src/components/ProjectWizard/WizardPages/ProjectSummary/PointsEarnedMessage.jsx @@ -2,11 +2,7 @@ import React from "react"; import PropTypes from "prop-types"; import { createUseStyles } from "react-jss"; import clsx from "clsx"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faCheckCircle, - faExclamationTriangle -} from "@fortawesome/free-solid-svg-icons"; +import { MdCheckCircle, MdWarning } from "react-icons/md"; const useStyles = createUseStyles({ success: { @@ -53,7 +49,7 @@ const PointsEarnedMessage = props => { {targetPointsReached ? (
    - {" "} + {" "}
    You have successfully earned the target points.
    @@ -62,10 +58,7 @@ const PointsEarnedMessage = props => { ) : (
    - +
    You have not reached the target points.
    Please, go back and review your strategies diff --git a/client/src/components/Projects/CopyProjectModal.js b/client/src/components/Projects/CopyProjectModal.js index 0a21ca30..2bbc4544 100644 --- a/client/src/components/Projects/CopyProjectModal.js +++ b/client/src/components/Projects/CopyProjectModal.js @@ -1,11 +1,8 @@ import React, { useState, useEffect } from "react"; import PropTypes from "prop-types"; import { createUseStyles, useTheme } from "react-jss"; - import Button from "../Button/Button"; -import { faCopy } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; - +import { MdFileCopy } from "react-icons/md"; import ModalDialog from "../UI/AriaModal/ModalDialog"; const useStyles = createUseStyles(theme => ({ @@ -40,7 +37,7 @@ export default function CopyProjectModal({ initialFocus="#duplicateName" >
    - Duplicate Project + Duplicate Project
    Type a new name to duplicate the project diff --git a/client/src/components/Projects/CsvModal.js b/client/src/components/Projects/CsvModal.js index 93ad6b28..9a8908df 100644 --- a/client/src/components/Projects/CsvModal.js +++ b/client/src/components/Projects/CsvModal.js @@ -1,7 +1,6 @@ import React, { useState } from "react"; import { PropTypes } from "prop-types"; -import { faFileCsv } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { FaFileCsv } from "react-icons/fa"; import Button from "../Button/Button"; import { createUseStyles, useTheme } from "react-jss"; import ModalDialog from "../UI/AriaModal/ModalDialog"; @@ -90,7 +89,7 @@ const CsvModal = ({ // initialFocus="#cancelButton" >
    - Generate CSV File + Generate CSV File
    {project ? (
    diff --git a/client/src/components/Projects/DeleteProjectModal.js b/client/src/components/Projects/DeleteProjectModal.js index 6296dea6..ac374617 100644 --- a/client/src/components/Projects/DeleteProjectModal.js +++ b/client/src/components/Projects/DeleteProjectModal.js @@ -1,7 +1,6 @@ import React from "react"; import { PropTypes } from "prop-types"; -import { faTrash, faTrashArrowUp } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { MdDelete, MdRestoreFromTrash } from "react-icons/md"; import Button from "../Button/Button"; import WarningIcon from "../../images/warning-icon.png"; import { createUseStyles, useTheme } from "react-jss"; @@ -45,7 +44,7 @@ const DeleteProjectModal = ({ mounted, onClose, project }) => { className={classes.heading1} style={{ marginBottom: "1.5rem", color: "" }} > - Restore Project from Trash + Restore Project from Trash
    { ) : ( <>
    - Delete Project + Delete Project
    setCollapsed(true)} > - +

    Filters

    diff --git a/client/src/components/Projects/MultiProjectToolbarMenu.js b/client/src/components/Projects/MultiProjectToolbarMenu.js index 6d2e83d4..3c6fc845 100644 --- a/client/src/components/Projects/MultiProjectToolbarMenu.js +++ b/client/src/components/Projects/MultiProjectToolbarMenu.js @@ -2,15 +2,14 @@ import React, { useContext, useRef } from "react"; import UserContext from "../../contexts/UserContext"; import PropTypes from "prop-types"; import { createUseStyles } from "react-jss"; +import { FaFileCsv } from "react-icons/fa"; import { - faEyeSlash, - faEye, - faTrash, - faTrashArrowUp, - faPrint, - faFileCsv -} from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + MdDelete, + MdRestoreFromTrash, + MdPrint, + MdVisibility, + MdVisibilityOff +} from "react-icons/md"; import { Tooltip } from "react-tooltip"; import PdfPrint from "../PdfPrint/PdfPrint"; import { useReactToPrint } from "react-to-print"; @@ -118,7 +117,7 @@ const MultiProjectToolbarMenu = ({ className={classes.button} onClick={handleCsvModalOpen} > - +
  • @@ -128,7 +127,7 @@ const MultiProjectToolbarMenu = ({ onClick={handlePrintPdf} disabled={checkedProjectIds.length !== 1} > - + {checkedProjectIds.length !== 1 ? ( {!checkedProjectsStatusData.dateHidden ? ( - + ) : ( - + )} {!checkedProjectsStatusData.dateTrashed ? ( - + ) : ( - + )} handleClick(handleRenameSnapshotModalOpen)} > - @@ -80,8 +78,7 @@ const ProjectContextMenu = ({ {project.dateSnapshotted && project.loginId !== account.id ? (
  • - @@ -94,8 +91,7 @@ const ProjectContextMenu = ({ className={classes.listItem} onClick={() => handleClick(handleSnapshotModalOpen)} > - @@ -107,8 +103,7 @@ const ProjectContextMenu = ({ onClick={() => handleClick(handlePrintPdf)} className={classes.listItem} > - @@ -118,8 +113,7 @@ const ProjectContextMenu = ({ onClick={() => handleClick(() => handleCsvModalOpen(project))} className={classes.listItem} > - @@ -129,8 +123,7 @@ const ProjectContextMenu = ({ onClick={() => handleClick(handleCopyModalOpen)} className={classes.listItem} > - @@ -143,8 +136,7 @@ const ProjectContextMenu = ({ > {project.dateHidden ? ( <> - @@ -152,8 +144,7 @@ const ProjectContextMenu = ({ ) : ( <> - @@ -170,8 +161,7 @@ const ProjectContextMenu = ({ > {project.dateTrashed ? ( - @@ -179,8 +169,7 @@ const ProjectContextMenu = ({ ) : ( - diff --git a/client/src/components/Projects/ProjectTableRow.js b/client/src/components/Projects/ProjectTableRow.js index 0e72f379..1db1d12d 100644 --- a/client/src/components/Projects/ProjectTableRow.js +++ b/client/src/components/Projects/ProjectTableRow.js @@ -5,12 +5,7 @@ import { useState, useRef, useEffect } from "react"; import PropTypes from "prop-types"; import Popup from "reactjs-popup"; import "reactjs-popup/dist/index.css"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faEye, - faEyeSlash, - faEllipsisV -} from "@fortawesome/free-solid-svg-icons"; +import { MdVisibility, MdVisibilityOff, MdMoreVert } from "react-icons/md"; import { formatDate } from "../../helpers/util"; import { useReactToPrint } from "react-to-print"; import ProjectContextMenu from "./ProjectContextMenu"; @@ -110,15 +105,13 @@ const ProjectTableRow = ({ {project.dateHidden ? ( - ) : ( - - + } position="left center" diff --git a/client/src/components/Projects/ProjectsPage.js b/client/src/components/Projects/ProjectsPage.js index d12f6780..b369f297 100644 --- a/client/src/components/Projects/ProjectsPage.js +++ b/client/src/components/Projects/ProjectsPage.js @@ -3,12 +3,7 @@ import PropTypes from "prop-types"; import { useNavigate } from "react-router-dom"; import { createUseStyles } from "react-jss"; import UserContext from "../../contexts/UserContext.js"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faSortUp, - faSortDown, - faFilter -} from "@fortawesome/free-solid-svg-icons"; +import { MdFilterAlt, MdArrowDropDown, MdArrowDropUp } from "react-icons/md"; import SearchIcon from "../../images/search.png"; import Pagination from "../UI/Pagination.js"; import ContentContainerNoSidebar from "../Layout/ContentContainerNoSidebar"; @@ -691,10 +686,7 @@ const ProjectsPage = ({ contentContainerRef }) => { style={{ backgroundColor: "#0F2940", color: "white" }} onClick={() => setFilterCollapsed(false)} > - + Filter By ) : null} @@ -724,13 +716,11 @@ const ProjectsPage = ({ contentContainerRef }) => { {label}{" "} {order === "asc" ? ( - ) : ( - )} diff --git a/client/src/components/Projects/SnapshotProjectModal.js b/client/src/components/Projects/SnapshotProjectModal.js index e12af207..72630c41 100644 --- a/client/src/components/Projects/SnapshotProjectModal.js +++ b/client/src/components/Projects/SnapshotProjectModal.js @@ -3,9 +3,7 @@ import PropTypes from "prop-types"; import { createUseStyles, useTheme } from "react-jss"; import Button from "../Button/Button"; -import { faCopy } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; - +import { MdFileCopy } from "react-icons/md"; import ModalDialog from "../UI/AriaModal/ModalDialog"; const useStyles = createUseStyles(theme => ({ @@ -39,7 +37,7 @@ export default function SnapshotProjectModal({ initialFocus="#duplicateName" >
    - Convert " + Convert " {`${selectedProjectName}`}" Into a Snapshot?
    diff --git a/client/src/components/Roles.js b/client/src/components/Roles.js index 3a105727..5b958867 100644 --- a/client/src/components/Roles.js +++ b/client/src/components/Roles.js @@ -7,8 +7,7 @@ import { useToast } from "../contexts/Toast"; import UserContext from "../contexts/UserContext"; import Popup from "reactjs-popup"; import "reactjs-popup/dist/index.css"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faCheck, faEllipsisV } from "@fortawesome/free-solid-svg-icons"; +import { MdCheck, MdMoreVert } from "react-icons/md"; import RolesContextMenu from "./ArchiveDelete/RolesContextMenu"; import ContentContainer from "./Layout/ContentContainer"; @@ -279,7 +278,7 @@ const Roles = ({ contentContainerRef }) => { {account.emailConfirmed ? ( - + ) : ( "" )} @@ -306,10 +305,7 @@ const Roles = ({ contentContainerRef }) => { account.id === loggedInUserId } > - + } position="bottom center" diff --git a/client/src/components/ToolTip/ToolTipIcon.js b/client/src/components/ToolTip/ToolTipIcon.js index ea74063b..ba71ad7d 100644 --- a/client/src/components/ToolTip/ToolTipIcon.js +++ b/client/src/components/ToolTip/ToolTipIcon.js @@ -1,6 +1,5 @@ import React from "react"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faCircle, faQuestion } from "@fortawesome/free-solid-svg-icons"; +import { MdHelp } from "react-icons/md"; import { createUseStyles } from "react-jss"; import clsx from "clsx"; import { PropTypes } from "prop-types"; @@ -13,8 +12,8 @@ const useStyles = createUseStyles({ cursor: "pointer" } }, - circle: { - filter: "drop-shadow(0px 4px 2px rgba(0, 46, 109, 0.3))" + help: { + color: "#a7c539" }, tooltip: { color: "rgb(30, 36, 63) !important", @@ -45,16 +44,7 @@ const ToolTipIcon = ({ size = "small", id, tooltipContent }) => { data-iscapture="true" data-html="true" > - - + ); }; diff --git a/client/src/components/ToolTip/ToolTipLabel.js b/client/src/components/ToolTip/ToolTipLabel.js index f990d118..3ce55214 100644 --- a/client/src/components/ToolTip/ToolTipLabel.js +++ b/client/src/components/ToolTip/ToolTipLabel.js @@ -2,8 +2,7 @@ import React from "react"; import PropTypes from "prop-types"; import { createUseStyles } from "react-jss"; import clsx from "clsx"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faInfo, faCircle } from "@fortawesome/free-solid-svg-icons"; +import { MdInfo } from "react-icons/md"; const useStyles = createUseStyles(theme => ({ labelWrapper: { @@ -68,10 +67,7 @@ const useStyles = createUseStyles(theme => ({ color: theme.colors.warning } }, - faInfoIcon: { - color: "#ffffff" - }, - faCircle: { + infoIcon: { color: "#002E6D" }, iconContainer: { @@ -138,12 +134,8 @@ const ToolTipLabel = ({ className={clsx("fa-layers fa-fw", classes.iconContainer)} style={showDescription ? { visibility: "visible" } : {}} > - - + {/* */} + ) : null}
    @@ -192,12 +184,7 @@ const ToolTipLabel = ({ className={clsx("fa-layers fa-fw", classes.iconContainer)} style={showDescription ? { visibility: "visible" } : {}} > - - +     ) : null}
    • diff --git a/client/src/components/UI/Pagination.js b/client/src/components/UI/Pagination.js index 6f8e9f99..a2ad7dfa 100644 --- a/client/src/components/UI/Pagination.js +++ b/client/src/components/UI/Pagination.js @@ -3,8 +3,7 @@ import PropTypes from "prop-types"; import { Link } from "react-router-dom"; import { createUseStyles } from "react-jss"; import clsx from "clsx"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons"; +import { MdChevronLeft, MdChevronRight } from "react-icons/md"; const useStyles = createUseStyles(theme => ({ paginationContainer: { @@ -168,7 +167,7 @@ const Pagination = props => { className={clsx("hoverPointer", classes.button)} onClick={() => paginate("left")} > - + {leftPerimeterLink} @@ -195,7 +194,7 @@ const Pagination = props => { className={clsx("hoverPointer", classes.button)} onClick={() => paginate("right")} > - {" "} + {" "}
    diff --git a/package-lock.json b/package-lock.json index 10be103f..79fccef7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,13 +8,11 @@ "name": "root", "version": "0.2.50", "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", "i": "^0.3.7", "luxon": "^3.4.4", "react-csv": "^2.2.2", + "react-icons": "^5.2.1", "wait-on": "^7.1.0" }, "devDependencies": { @@ -6814,6 +6812,14 @@ "resolved": "https://registry.npmjs.org/react-csv/-/react-csv-2.2.2.tgz", "integrity": "sha512-RG5hOcZKZFigIGE8LxIEV/OgS1vigFQT4EkaHeKgyuCbUAu9Nbd/1RYq++bJcJJ9VOqO/n9TZRADsXNDR4VEpw==" }, + "node_modules/react-icons": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz", + "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", diff --git a/package.json b/package.json index 83d40693..4a2c71c8 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,6 @@ "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", "i": "^0.3.7", "luxon": "^3.4.4",