Change iconography with icons from Material UI #1760 (#1786)

hackforla · Aug 15, 2024 · 9c4d342 · 9c4d342
1 parent 66a7def
commit 9c4d342
Show file tree

Hide file tree

Showing 42 changed files with 160 additions and 379 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git 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
@@ -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 = () => {
         <p>
           Learn more about{" "}
           <a href="http://www.hackforla.org" target="external">
-            Hack for LA{" "}
-            <FaExternalLinkAlt className={classes.externalLinkIcon} />
+            Hack for LA <MdLaunch className={classes.externalLinkIcon} />
           </a>
         </p>
         <h3>Status of the TDM Calculator</h3>
@@ -83,7 +82,7 @@ const About = () => {
               target="external"
             >
               Glossary
-              <FaExternalLinkAlt className={classes.externalLinkIcon} />
+              <MdLaunch className={classes.externalLinkIcon} />
             </a>
           </li>
           <li className={classes.linklist}>
@@ -92,7 +91,7 @@ const About = () => {
               target="external"
             >
               Los Angeles City Planning, Mobility
-              <FaExternalLinkAlt className={classes.externalLinkIcon} />
+              <MdLaunch className={classes.externalLinkIcon} />
             </a>
           </li>
           <li className={classes.linklist}>
@@ -101,7 +100,7 @@ const About = () => {
               target="external"
             >
               Proposed Ordinances and Initiatives
-              <FaExternalLinkAlt className={classes.externalLinkIcon} />
+              <MdLaunch className={classes.externalLinkIcon} />
             </a>
           </li>
           <li className={classes.linklist}>
@@ -110,7 +109,7 @@ const About = () => {
               target="external"
             >
               Informational Video (January 2021)
-              <FaExternalLinkAlt className={classes.externalLinkIcon} />
+              <MdLaunch className={classes.externalLinkIcon} />
             </a>
           </li>
           <li className={classes.linklist}>
@@ -119,7 +118,7 @@ const About = () => {
               target="external"
             >
               Fact Sheet - English (January 2021)
-              <FaExternalLinkAlt className={classes.externalLinkIcon} />
+              <MdLaunch className={classes.externalLinkIcon} />
             </a>
           </li>
           <li className={classes.linklist}>
@@ -128,7 +127,7 @@ const About = () => {
               target="external"
             >
               Hoja Informativa - Español (Enero 2021)
-              <FaExternalLinkAlt className={classes.externalLinkIcon} />
+              <MdLaunch className={classes.externalLinkIcon} />
             </a>
           </li>
         </ul>

diff --git 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 = () => {
                 <Popup
                   trigger={
                     <button className={`${classes.optionsButton}`}>
-                      <FontAwesomeIcon
-                        icon={faUndo}
-                        alt={`Unarchive ${account.email}`}
-                      />
+                      <MdUndo alt={`Unarchive ${account.email}`} />
                     </button>
                   }
                   position="bottom center"
@@ -208,10 +204,7 @@ const RolesArchive = () => {
                       className={`${classes.optionsButton}`}
                       style={{ color: "red" }}
                     >
-                      <FontAwesomeIcon
-                        icon={faTrash}
-                        alt={`Permanently Delete ${account.email}`}
-                      />
+                      <MdDelete alt={`Permanently Delete ${account.email}`} />
                     </button>
                   }
                   position="bottom center"

diff --git 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" }}
       >
-        <FontAwesomeIcon
-          icon={faArchive}
+        <MdArchive
           className={classes.listItemIcon}
           alt={`Archive User #${user.id} Icon`}
         />

diff --git 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" }}
       >
-        <FontAwesomeIcon
-          icon={faTrash}
+        <MdDelete
           className={classes.listItemIcon}
           alt={`Delete User #${user.id} Icon`}
         />

diff --git 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" }}
       >
-        <FontAwesomeIcon
-          icon={faUndo}
+        <MdUndo
           className={classes.listItemIcon}
           alt={`Archive User #${user.id} Icon`}
         />

diff --git 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}
     >
       <div className={classes.buttonContainer}>
-        <div className={classes.iconContainer}>
-          <FontAwesomeIcon icon={faPlus} size="lg" />
-        </div>
+        <MdAddCircle className={classes.icon} color="primary" />
         <div className={classes.text}>{` Add New Category `}</div>
       </div>
     </Button>

diff --git 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}
     >
-      <FontAwesomeIcon icon={faPrint} style={{ marginRight: "0.5em" }} />
+      <MdPrint style={{ marginRight: "0.5em" }} />
       Print Summary
     </Button>
   );

diff --git 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" }}
     >
       <>
-        <FontAwesomeIcon icon={faEdit} />
+        <MdEdit />
         {editMode ? ` SAVE EDITS` : ` EDIT FAQ PAGE`}
       </>
     </Button>

diff --git 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}
     >
-      <FontAwesomeIcon
-        icon={navDirection === "previous" ? faAngleLeft : faAngleRight}
-      />
+      {navDirection === "previous" ? (
+        <MdChevronLeft fontSize="2em" />
+      ) : (
+        <MdChevronRight fontSize="2em" />
+      )}
     </Button>
   );
 };

diff --git 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}
     >
-      <FontAwesomeIcon icon={faPrint} style={{ marginRight: "0.5em" }} />
+      <MdPrint style={{ marginRight: "0.5em" }} />
       Print Summary
     </Button>
   );