Re-style Info and Other Modals

hackforla · Mar 2, 2025 · 10b1693 · 10b1693
1 parent bd704f9
commit 10b1693
Show file tree

Hide file tree

Showing 7 changed files with 153 additions and 142 deletions.
diff --git a/client/src/components/Checklist/ChecklistContent.jsx b/client/src/components/Checklist/ChecklistContent.jsx
@@ -1,60 +1,52 @@
 import React from "react";
-import { createUseStyles } from "react-jss";
+import { createUseStyles, useTheme } from "react-jss";
 import { MdLaunch } from "react-icons/md";
 
-const useStyles = createUseStyles({
+const useStyles = createUseStyles(theme => ({
   container: {
-    maxWidth: "30rem"
+    padding: "0 2.5rem 1rem 2.5rem ",
+    maxWidth: "30rem",
+    marginTop: "0px"
   },
-  title: {
-    margin: "2px"
-  },
-  text: {
-    color: "#0F2940",
-    fontSize: "18px"
-  },
-  section: {
-    paddingLeft: "30px",
-    fontSize: "16px"
-  },
-  sectionLast: {
-    paddingLeft: "30px",
-    fontSize: "16px",
-    marginBottom: "5px"
-  },
-  indent: {
-    paddingLeft: "25px",
-    fontSize: "16px"
-  },
-  indentSpecial: {
-    paddingLeft: "68px",
-    fontSize: "16px"
+  heading1: { ...theme.typography.heading1, marginTop: "0px" },
+  mainBullet: {
+    ...theme.typography.paragraph1,
+    fontWeight: "700",
+    marginTop: "1rem",
+    marginLeft: "2rem",
+    textAlign: "left",
+    lineHeight: "1.5rem"
   },
   bulletIndent: {
     paddingLeft: "100px",
-    marginTop: "2px",
-    fontSize: "16px"
+    marginTop: "2px"
   },
-  undoBold: {
-    fontWeight: "normal"
+  indentSpecial: {
+    ...theme.typography.paragraph1,
+    fontWeight: "700",
+    marginTop: "1rem",
+    marginLeft: "5.2rem",
+    textAlign: "left",
+    lineHeight: "1.5rem"
   }
-});
+}));
 
 const ChecklistContent = () => {
-  const classes = useStyles();
+  const theme = useTheme();
+  const classes = useStyles(theme);
   return (
     <div className={classes.container}>
-      <h1 className={classes.title}>Checklist</h1>
-      <br />
-      <p className={classes.text}>
+      <h1 className={classes.heading1}>Checklist</h1>
+      <p className={theme.typography.subHeading}>
         Listed below are the documents that you may need when using{" "}
         <a href="/calculation">Create Project.</a>
       </p>
-      <br />
       <div>
-        <article className={classes.section}>
+        <article className={classes.mainBullet}>
           p.1
-          <span className={classes.indent}>General project information</span>
+          <span className={classes.mainBullet}>
+            General project information
+          </span>
         </article>
         <ul className={classes.bulletIndent}>
           <li>Name</li>
@@ -63,9 +55,9 @@ const ChecklistContent = () => {
         </ul>
       </div>
       <div>
-        <article className={classes.section}>
+        <article className={classes.mainBullet}>
           p.2
-          <span className={classes.indent}>
+          <span className={classes.mainBullet}>
             Planned floor area (sqft) for specific use types
           </span>
         </article>
@@ -86,25 +78,26 @@ const ChecklistContent = () => {
         </ul>
       </div>
       <div>
-        <article className={classes.section}>
+        <article className={classes.mainBullet}>
           p.3
-          <span className={classes.indent}>
+          <span className={classes.mainBullet}>
             Planned number of parking spaces provided
           </span>
         </article>
       </div>
-      <br />
       <div>
-        <article className={classes.sectionLast}>
+        <article className={classes.mainBullet}>
           p.4
-          <span className={classes.indent}>
+          <span className={classes.mainBullet}>
             Planned TDM strategies{" "}
             <span className={classes.undoBold}>(Optional)</span>
           </span>
         </article>
       </div>
-      <br />
-      <p className={classes.text}>
+      <div
+        className={theme.typography.paragraph1}
+        style={{ marginTop: "1rem" }}
+      >
         If your project&apos;s land use is not listed above, please check LAMC
         Section 12.26 J.3(c) of the{" "}
         <a
@@ -116,7 +109,7 @@ const ChecklistContent = () => {
           <MdLaunch className={classes.externalLinkIcon} />
         </a>{" "}
         for applicability and exemption details.
-      </p>
+      </div>
     </div>
   );
 };

diff --git a/client/src/components/Checklist/ChecklistModal.jsx b/client/src/components/Checklist/ChecklistModal.jsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { createUseStyles } from "react-jss";
 import Modal from "react-modal";
+import { createUseStyles } from "react-jss";
 import PropTypes from "prop-types";
 import ChecklistContent from "./ChecklistContent";
 import { MdClose } from "react-icons/md";
@@ -16,6 +16,7 @@ const useStyles = createUseStyles({
   close: {
     display: "flex",
     justifyContent: "flex-end",
+    marginBottom: "0",
     border: "0 solid white",
     backgroundColor: "transparent",
     "&:hover": {
@@ -39,9 +40,9 @@ const modalStyleDefaultOverrides = {
     fontWeight: "normal"
   },
   content: {
-    maxWidth: "90vw",
-    minWidth: "40vw",
-    padding: "1rem",
+    // maxWidth: "90vw",
+    // minWidth: "40vw",
+    padding: "0.5rem",
     position: "relative",
     display: "flex",
     flexDirection: "column",
@@ -67,9 +68,9 @@ const ChecklistModal = ({ checklistModalOpen, toggleChecklistModal }) => {
       style={modalStyleDefaultOverrides}
       className={classes.modal}
     >
-      <span className={classes.close} onClick={toggleChecklistModal}>
+      <div className={classes.close} onClick={toggleChecklistModal}>
         <MdClose />
-      </span>
+      </div>
       <ChecklistContent />
     </Modal>
   );

diff --git a/client/src/components/Modals/ActionSnapshotRename.jsx b/client/src/components/Modals/ActionSnapshotRename.jsx
@@ -21,7 +21,8 @@ const useStyles = createUseStyles(theme => ({
   subheading: {
     ...theme.typography.subHeading,
     marginTop: "1rem",
-    marginBottom: "1rem"
+    marginBottom: "1rem",
+    width: "20rem"
   },
   icon: {
     height: "40px",

diff --git a/client/src/components/Modals/ActionSnapshotShare.jsx b/client/src/components/Modals/ActionSnapshotShare.jsx
@@ -4,7 +4,7 @@ import { createUseStyles, useTheme } from "react-jss";
 import Button from "../Button/Button";
 import ModalDialog from "../UI/AriaModal/ModalDialog";
 import * as projectShareService from "../../services/projectShare.service";
-import { MdCameraAlt } from "react-icons/md";
+import { MdCameraAlt, MdWarning } from "react-icons/md";
 
 const useStyles = createUseStyles(theme => ({
   buttonFlexBox: {
@@ -26,6 +26,12 @@ const useStyles = createUseStyles(theme => ({
     marginBottom: "0",
     verticalAlign: "middle"
   },
+  unshareIcon: {
+    height: "80px",
+    width: "80px",
+    color: theme.colorCritical,
+    marginBottom: "-1rem"
+  },
   buttonDisabled: {
     cursor: "default"
   },
@@ -223,7 +229,7 @@ If you don't already have a [TDM Calculator](${tdmLink}) account, please set one
               )}
               <div
                 className={classes.buttonFlexBox}
-                style={{ justifyContent: "right" }}
+                style={{ justifyContent: "center" }}
               >
                 <Button
                   className={maybeDisabled}
@@ -316,7 +322,7 @@ If you don't already have a [TDM Calculator](${tdmLink}) account, please set one
                 className={classes.buttonFlexBox}
                 style={{
                   flexDirection: "row",
-                  justifyContent: "space-between"
+                  justifyContent: "center"
                 }}
               >
                 <Button
@@ -358,9 +364,9 @@ If you don't already have a [TDM Calculator](${tdmLink}) account, please set one
               className={classes.heading1}
               style={{ marginBottom: "1.5rem" }}
             >
-              <MdCameraAlt className={classes.icon} />
-              Confirm Unsharing
+              <MdWarning className={classes.unshareIcon} />
             </div>
+            <h1 className={classes.heading1}>Confirm Unsharing</h1>
             <div className={classes.viewPermissionsList}>
               <div style={{ display: "flex", justifyContent: "center" }}>
                 Are you sure you want to remove {selectedEmail.email} from

diff --git a/client/src/components/Modals/InfoWizardInapplicableStrategies.jsx b/client/src/components/Modals/InfoWizardInapplicableStrategies.jsx
@@ -2,53 +2,66 @@ import React from "react";
 import PropTypes from "prop-types";
 import ModalDialog from "../UI/AriaModal/ModalDialog";
 import Button from "../Button/Button";
-import { createUseStyles } from "react-jss";
-import { MdWarning } from "react-icons/md";
+import { createUseStyles, useTheme } from "react-jss";
+import { MdInfo } from "react-icons/md";
 
-const useStyles = createUseStyles({
-  title: {
-    textAlign: "center"
+const useStyles = createUseStyles(theme => ({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
   },
-  deselectedWrapper: {
-    textAlign: "center"
+  icon: {
+    height: "80px",
+    width: "80px",
+    color: theme.colorLADOT,
+    marginBottom: "0",
+    verticalAlign: "middle"
   },
-  deselectedAlign: {
-    lineHeight: "40px"
+  heading: theme.typography.heading1,
+  subheading: {
+    ...theme.typography.subHeading,
+    marginTop: "1rem",
+    marginBottom: "1rem",
+    maxWidth: "30rem"
   },
   modalActions: {
     display: "flex",
     justifyContent: "center"
   }
-});
+}));
+
 const InapplicableStrategiesModal = props => {
   const { inapplicableStrategiesModal, closeStrategiesModal } = props;
-  const classes = useStyles();
+  const theme = useTheme();
+  const classes = useStyles(theme);
 
   return (
     <ModalDialog
       mounted={inapplicableStrategiesModal}
       onClose={closeStrategiesModal}
-      showCloseBox={false}
+      showCloseBox={true}
       escapeExits={false}
       underlayClickExits={false}
     >
-      <div className={classes.deselectedWrapper}>
-        <MdWarning style={{ color: "#E46247", height: "80px" }} alt="Warning" />
-        <h2 className={classes.deselectedAlign}>
+      <div className={classes.container}>
+        <MdInfo className={classes.icon} alt="Info" />
+        <h1 className={classes.heading1}>Inapplicable Strategies</h1>
+        <div className={classes.subheading}>
           Due to changes made to the project specifications, one or more TDM
           strategies are no longer applicable and have been automatically
           de-selected
-        </h2>
-      </div>
-      <div className={classes.modalActions}>
-        <Button
-          color="colorDeselect"
-          id="modalProceed"
-          data-testid="transitionProceed"
-          onClick={closeStrategiesModal}
-        >
-          Okay, I Understand
-        </Button>
+        </div>
+        <div className={classes.modalActions}>
+          <Button
+            variant="primary"
+            id="modalProceed"
+            data-testid="transitionProceed"
+            onClick={closeStrategiesModal}
+          >
+            Okay, I Understand
+          </Button>
+        </div>
       </div>
     </ModalDialog>
   );