Fix bug in ModalDialog

hackforla · Sep 3, 2024 · a61aee7 · a61aee7
1 parent 82e4aa1
commit a61aee7
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 28 deletions.
diff --git a/client/src/components/ProjectWizard/AffordableEdgeCaseModal.js b/client/src/components/ProjectWizard/AffordableEdgeCaseModal.js
@@ -6,6 +6,12 @@ import { createUseStyles } from "react-jss";
 import { MdError } from "react-icons/md";
 
 const useStyles = createUseStyles(theme => ({
+  contentFlexBox: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    margin: 0
+  },
   container: {
     width: "80%",
     maxWidth: "35rem",
@@ -37,27 +43,32 @@ const AffordableEdgeCaseModal = ({ isOpen, onClose, onYes }) => {
   const classes = useStyles();
   return (
     <ModalDialog mounted={isOpen} onClose={onClose} omitCloseBox={true}>
-      <div className={classes.container}>
-        <div className={classes.modalHeader} style={{ marginBottom: "1.5rem" }}>
-          <MdError
-            style={{
-              marginBottom: "-5px",
-              color: "#C35302",
-              height: "80px",
-              width: "5rem"
-            }}
-          />
-        </div>
-        <div className={classes.modalSubHeader}>
-          {`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">
-            NO
-          </Button>
-          <Button onClick={onYes} variant="contained" color={"colorPrimary"}>
-            YES
-          </Button>
+      <div className={classes.contentFlexBox}>
+        <div className={classes.container}>
+          <div
+            className={classes.modalHeader}
+            style={{ marginBottom: "1.5rem" }}
+          >
+            <MdError
+              style={{
+                marginBottom: "-5px",
+                color: "#C35302",
+                height: "80px",
+                width: "5rem"
+              }}
+            />
+          </div>
+          <div className={classes.modalSubHeader}>
+            {`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">
+              NO
+            </Button>
+            <Button onClick={onYes} variant="contained" color={"colorPrimary"}>
+              YES
+            </Button>
+          </div>
         </div>
       </div>
     </ModalDialog>

diff --git a/client/src/components/UI/AriaModal/ModalDialog.js b/client/src/components/UI/AriaModal/ModalDialog.js
@@ -41,12 +41,6 @@ const useStyles = createUseStyles({
     justifyContent: "flex-end",
     margin: 0
   },
-  contentFlexBox: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    margin: 0
-  },
   closeButton: {
     border: "0 solid white",
     backgroundColor: "transparent",
@@ -99,7 +93,7 @@ export default function ModalDialog({
             </button>
           </div>
         )}
-        <div className={classes.contentFlexBox}>{children}</div>
+        {children}
       </div>
     </AriaModal>
   );