Re-style ACTION Modals

hackforla · Feb 25, 2025 · baf365e · baf365e
1 parent fba3fef
commit baf365e
Show file tree

Hide file tree

Showing 13 changed files with 405 additions and 539 deletions.
diff --git a/client/src/components/Button/Button.jsx b/client/src/components/Button/Button.jsx
@@ -110,14 +110,6 @@ const useStyles = createUseStyles(theme => ({
       boxShadow: "rgba(0, 0, 0, 0.1) 2px 4px 6px" // Heavier box shadow on hover
     }
   },
-  // warning: {
-  //   backgroundColor: theme.colors.warning, // Red background color with some transparency
-  //   color: "white",
-  //   "&:hover": {
-  //     backgroundColor: theme.colors.warning, // Solid red background on hover
-  //     boxShadow: "rgba(0, 46, 109, 0.4) 2px 4px 6px" // Heavier box shadow on hover
-  //   }
-  // },
   error: {
     backgroundColor: theme.colorError,
     color: "white",

diff --git a/client/src/components/Layout/NavBarLogin.jsx b/client/src/components/Layout/NavBarLogin.jsx
@@ -102,18 +102,6 @@ const NavBarLogin = ({ classes, handleHamburgerMenuClick }) => {
           {close => {
             return (
               <div style={{ margin: "1rem" }}>
-                {/* <button
-                  style={{
-                    backgroundColor: "transparent",
-                    color: theme.colors.secondary.gray,
-                    border: "none",
-                    position: "absolute",
-                    top: "0",
-                    right: "0",
-                    cursor: "pointer"
-                  }}
-                  onClick={close}
-                > */}
                 <MdClose
                   style={{
                     backgroundColor: "transparent",

diff --git a/client/src/components/Modals/ActionProjectAdminNotes.jsx b/client/src/components/Modals/ActionProjectAdminNotes.jsx
@@ -2,10 +2,8 @@ import React, { useState, useEffect } from "react";
 import { PropTypes } from "prop-types";
 import Button from "../Button/Button";
 import { createUseStyles } from "react-jss";
-// import ModalDialog from "../UI/AriaModal/ModalDialog";
 import { MdOutlineClose } from "react-icons/md";
 import AriaModal from "react-aria-modal";
-import clsx from "clsx";
 
 const useStyles = createUseStyles(theme => ({
   adminNotesModalContainer: {
@@ -40,19 +38,6 @@ const useStyles = createUseStyles(theme => ({
     boxShadow: "0px 5px 10px rgba(0, 46, 109, 0.5)",
     backgroundColor: "rgba(255, 255, 255, 1)"
   },
-  buttonFlexBox1: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    margin: 0
-  },
-  closeButton: {
-    border: "0 solid white",
-    backgroundColor: "transparent",
-    "&:hover": {
-      cursor: "pointer"
-    }
-  },
   contentContainer: {
     display: "flex",
     flexDirection: "column",
@@ -101,73 +86,14 @@ const useStyles = createUseStyles(theme => ({
   blueBorderOnFocus: {
     width: "100%"
   },
-
   buttonWrapper: {
     display: "flex",
     flexDirection: "row",
     justifyContent: "flex-end",
     padding: "14px 10px 14px 10px",
     boxSizing: "border-box"
   },
-  button: {
-    cursor: "pointer",
-    fontFamily: "Calibri",
-    fontWeight: 700,
-    height: "min-content",
-    margin: "0.5em",
-    padding: "0.25em 1em",
-    textAlign: "center",
-    textTransform: "uppercase",
-    //TODO: Move these when we figure out size-related props
-    letterSpacing: "0.05em",
-    fontSize: "20px"
-  },
-  contained: {
-    borderColor: "rgba(0, 0, 0, .05)", //lightest grey
-    boxShadow: "rgba(0, 46, 109, 0.3) 1px 2px 3px",
-    "&[disabled]:hover": {
-      boxShadow: "rgba(0, 46, 109, 0.3) 1px 2px 3px"
-    },
-    "&:hover": {
-      boxShadow: "rgba(0, 46, 109, 0.6) 2px 4px 6px" // Heavier box shadow on hover
-    }
-  },
-  editButton: {
-    width: "10.6rem", //    padding: "10px 20px",
-    height: "3.6rem",
-    fontSize: "16px",
-    backgroundColor: "#A7C539"
-  },
-  cancelButton: {
-    width: "7.3rem", //    padding: "10px 20px",
-    height: "3.6rem",
-    fontSize: "16px"
-  },
-  saveButton: {
-    width: "6.7rem", //    padding: "10px 20px",
-    height: "3.6rem",
-    fontSize: "16px",
-    backgroundColor: "#A7C539"
-  },
-  buttonFlexBox2: {
-    display: "flex",
-    flexDirection: "row",
-    margin: 0,
-    width: "100%"
-  },
-  heading1: theme.typography.heading1,
-  instruction: {
-    fontSize: "20px",
-    lineHeight: "32px",
-    textAlign: "center",
-    color: "#B64E38",
-    "& span": {
-      fontStyle: "italic"
-    }
-  },
-  warningIcon: {
-    margin: "0 10px"
-  }
+  heading1: theme.typography.heading1
 }));
 
 const AdminNotesModal = ({
@@ -277,19 +203,17 @@ const AdminNotesModal = ({
           />
           <div className={classes.buttonWrapper}>
             <Button
+              variant="secondary"
               onClick={onCancel}
               id="cancelButton"
-              className={classes.cancelButton}
               title="Cancel"
             >
               Cancel
             </Button>
             <Button
-              color="colorPrimary"
-              variant="outlined"
+              variant="primary"
               onClick={onSave}
               id="saveButton"
-              className={classes.saveButton}
               disabled={adminNotes.trim() === ""}
               title="Save Note"
             >
@@ -353,20 +277,16 @@ const AdminNotesModal = ({
             }}
           />
           <div className={classes.buttonWrapper}>
-            <button
+            <Button
               onClick={handleEdit}
-              className={clsx(
-                classes.button,
-                classes.contained,
-                classes.editButton
-              )}
+              variant="primary"
               title="Edit Note"
               ref={handleInitialFocusRef}
               id="editButton"
               color="#A7C539"
             >
               EDIT NOTE
-            </button>
+            </Button>
           </div>
         </div>
       </AriaModal>
@@ -432,29 +352,17 @@ const AdminNotesModal = ({
             }}
           />
           <div className={classes.buttonWrapper}>
-            <button
-              onClick={onCancel}
-              className={clsx(
-                classes.button,
-                classes.contained,
-                classes.cancelButton
-              )}
-              title="Cancel"
-            >
+            <Button onClick={onCancel} variant="secondary" title="Cancel">
               Cancel
-            </button>
-            <button
+            </Button>
+            <Button
               onClick={onSave}
-              className={clsx(
-                classes.button,
-                classes.contained,
-                classes.saveButton
-              )}
+              variant="primary"
               disabled={!textUpdated()}
               title="Save"
             >
               Save
-            </button>
+            </Button>
           </div>
         </div>
       </AriaModal>
@@ -463,8 +371,6 @@ const AdminNotesModal = ({
   return modalContent;
 };
 
-/* eslint-enable no-unused-vars */
-
 AdminNotesModal.propTypes = {
   mounted: PropTypes.bool,
   onClose: PropTypes.func,

diff --git a/client/src/components/Modals/ActionProjectCopy.jsx b/client/src/components/Modals/ActionProjectCopy.jsx
@@ -6,13 +6,25 @@ import { MdFileCopy } from "react-icons/md";
 import ModalDialog from "../UI/AriaModal/ModalDialog";
 
 const useStyles = createUseStyles(theme => ({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  },
   buttonFlexBox: {
     display: "flex",
     flexDirection: "row",
     justifyContent: "center",
     margin: 0
   },
-  heading1: theme.typography.heading1
+  heading1: theme.typography.heading1,
+  icon: {
+    height: "40px",
+    width: "40px",
+    color: theme.colorBlack,
+    marginBottom: "0",
+    verticalAlign: "middle"
+  }
 }));
 
 export default function CopyProjectModal({
@@ -36,36 +48,37 @@ export default function CopyProjectModal({
       onClose={onClose}
       initialFocus="#duplicateName"
     >
-      <div className={classes.heading1} style={{ marginBottom: "1.5rem" }}>
-        <MdFileCopy /> Duplicate Project
-      </div>
-      <div style={theme.typography.subHeading}>
-        Type a new name to duplicate the project
-      </div>
-      <div style={theme.typography.heading3}>{`${selectedProjectName}`}.</div>
-      <div style={{ margin: "1.5rem 2.5rem 1.5rem 0.75rem" }}>
-        <input
-          placeholder="Name of Duplicated Project"
-          type="text"
-          id="duplicateName"
-          name="duplicateName"
-          value={duplicateProjectName}
-          onChange={e => setDuplicateProjectName(e.target.value)}
-          // autoFocus
-          // onFocus={e => e.currentTarget.select()}
-        />
-      </div>
-      <div className={classes.buttonFlexBox}>
-        <Button onClick={onClose} variant="outlined">
-          Cancel
-        </Button>
-        <Button
-          onClick={() => onClose("ok", duplicateProjectName)}
-          variant="contained"
-          color={"colorPrimary"}
-        >
-          Create a Copy
-        </Button>
+      <div className={classes.container}>
+        <div className={classes.heading1}>
+          <MdFileCopy className={classes.icon} /> Duplicate Project
+        </div>
+        <div style={theme.typography.subHeading}>
+          Type a new name to duplicate the project
+        </div>
+        <div style={theme.typography.heading3}>{selectedProjectName}</div>
+        <div style={{ margin: "1.5rem 2.5rem 1.5rem 0.75rem" }}>
+          <input
+            placeholder="Name of Duplicated Project"
+            type="text"
+            id="duplicateName"
+            name="duplicateName"
+            value={duplicateProjectName}
+            onChange={e => setDuplicateProjectName(e.target.value)}
+            // autoFocus
+            // onFocus={e => e.currentTarget.select()}
+          />
+        </div>
+        <div className={classes.buttonFlexBox}>
+          <Button onClick={onClose} variant="secondary">
+            Cancel
+          </Button>
+          <Button
+            onClick={() => onClose("ok", duplicateProjectName)}
+            variant="primary"
+          >
+            Create a Copy
+          </Button>
+        </div>
       </div>
     </ModalDialog>
   );