Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Re-style ACTION Modals #2137

Merged
merged 1 commit into from
Feb 25, 2025
Merged

Re-style ACTION Modals #2137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 0 additions & 8 deletions client/src/components/Button/Button.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
12 changes: 0 additions & 12 deletions client/src/components/Layout/NavBarLogin.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
116 changes: 11 additions & 105 deletions client/src/components/Modals/ActionProjectAdminNotes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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 = ({
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -463,8 +371,6 @@ const AdminNotesModal = ({
return modalContent;
};

/* eslint-enable no-unused-vars */

AdminNotesModal.propTypes = {
mounted: PropTypes.bool,
onClose: PropTypes.func,
Expand Down
75 changes: 44 additions & 31 deletions client/src/components/Modals/ActionProjectCopy.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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>
);
Expand Down
Loading