Skip to content

Commit

Permalink
Re-style warning dialogs (#2134)
Browse files Browse the repository at this point in the history
  • Loading branch information
entrotech authored Feb 20, 2025
1 parent 86b477c commit fba3fef
Show file tree
Hide file tree
Showing 29 changed files with 439 additions and 336 deletions.
76 changes: 66 additions & 10 deletions client/src/components/Button/Button.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,65 @@ const useStyles = createUseStyles(theme => ({
padding: "0.5em 1em",
textAlign: "center",
textTransform: "uppercase",
//TODO: Move these when we figure out size-related props
letterSpacing: "0.05em",
fontSize: "20px"
fontSize: "20px",
// Following Colors are from https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=16061-4518&t=8f3dn1oKCVqu00uc-4
boxShadow: "0 4 4 0" + theme.colorDropShadow,
"&[disabled]:hover": {
boxShadow: "3 4 4 0 " + theme.colorDropShadowDisabled
},
"&:hover": {
boxShadow: "3 3 4 0" + theme.colorDropShadowHover
}
},
primary: {
backgroundColor: theme.colorPrimary,
border: "none",
// Following Colors are from https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=16061-4518&t=8f3dn1oKCVqu00uc-4
boxShadow: "0px 4px 4px 0px" + theme.colorDropShadow,
"&[disabled]:hover": {
boxShadow: "3px 4px 4px 0px " + theme.colorDropShadowDisabled
},
"&:hover": {
boxShadow: "3px 3px 4px 0px" + theme.colorDropShadowHover
}
},
secondary: {
color: theme.colors.primary.black,
backgroundColor: theme.colorDefault,
border: "1px solid " + theme.colors.primary.black,
boxShadow: "0px 4px 4px 0px" + theme.colorDropShadow,
// Following Colors are from https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=16061-4518&t=8f3dn1oKCVqu00uc-4
"&[disabled]:hover": {
boxShadow: "3px 4px 4px 0px " + theme.colorDropShadowDisabled
},
"&:hover": {
boxShadow: "3px 3px 4px 0px" + theme.colorDropShadowHover
}
},
tertiary: {
color: theme.colors.secondary.green,
// Following Colors are from https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=16061-4518&t=8f3dn1oKCVqu00uc-4
boxShadow: "0px 4px 4px 0px" + theme.colorDropShadow,
"&:hover": {
boxShadow: "3px 3px 4px 0px" + theme.colorDropShadowHover
},
"&[disabled]:hover": {
boxShadow: "3px 4px 4px 0px " + theme.colorDropShadowDisabled
}
},
warning: {
color: theme.colorWhite,
backgroundColor: theme.colorCritical,
border: "none",
// Following Colors are from https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=16061-4518&t=8f3dn1oKCVqu00uc-4
boxShadow: "0px 4px 4px 0px " + theme.colorDropShadow,
"&[disabled]:hover": {
boxShadow: "3px 4px 4px 0px " + theme.colorDropShadowDisabled
},
"&:hover": {
boxShadow: "3px 3px 4px 0px" + theme.colorDropShadowHover
}
},
contained: {
backgroundColor: ({ color }) => theme[color],
Expand Down Expand Up @@ -54,14 +110,14 @@ 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
}
},
// 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
34 changes: 34 additions & 0 deletions client/src/components/Button/SecondaryButton.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from "react";
import PropTypes from "prop-types";
import Button from "./Button";

const SecondaryButton = ({
id,
onClick,
isDisabled,
isDisplayed = false,
children
}) => {
return (
<Button
type="input"
onClick={onClick}
id={id}
data-testid={id}
disabled={isDisabled}
isDisplayed={isDisplayed}
>
{children}
</Button>
);
};

SecondaryButton.propTypes = {
children: PropTypes.any,
onClick: PropTypes.func,
id: PropTypes.string,
isDisabled: PropTypes.bool,
isDisplayed: PropTypes.bool
};

export default SecondaryButton;
64 changes: 0 additions & 64 deletions client/src/components/Faq/DeleteFaqModal.jsx

This file was deleted.

6 changes: 3 additions & 3 deletions client/src/components/Faq/FaqView.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import { DragDropContext } from "react-beautiful-dnd";
import * as faqCategoryService from "../../services/faqCategory.service";
import AddNewCategoryButton from "../Button/AddNewCategory";
import { createUseStyles } from "react-jss";
import DeleteFaqModal from "./DeleteFaqModal";
import SaveConfirmationModal from "./SaveConfirmationModal";
import FaqConfirmDialog from "./FaqConfirmDialog";
import DeleteFaqModal from "../Modals/WarningFaqDelete";
import SaveConfirmationModal from "../Modals/WarningFaqSaveEdits";
import FaqConfirmDialog from "../Modals/WarnngFaqLeave";
import { matchPath, unstable_useBlocker as useBlocker } from "react-router-dom";

const useStyles = createUseStyles(theme => ({
Expand Down
62 changes: 0 additions & 62 deletions client/src/components/Faq/SaveConfirmationModal.jsx

This file was deleted.

File renamed without changes.
66 changes: 66 additions & 0 deletions client/src/components/Modals/WarningFaqDelete.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import React from "react";
import PropTypes from "prop-types";
import ModalDialog from "../UI/AriaModal/ModalDialog";
import Button from "../Button/Button";
import { MdWarning } from "react-icons/md";
import { createUseStyles, useTheme } from "react-jss";

const useStyles = createUseStyles(theme => ({
container: {
display: "flex",
flexDirection: "column",
alignItems: "center"
},
warningIcon: {
height: "80px",
width: "80px",
color: theme.colorCritical,
textAlign: "center"
},
buttonFlexBox: {
display: "flex",
flexDirection: "row",
justifyContent: "center",
margin: 0
},
modalHeader: theme.typography.heading1,
modalSubHeader: {
...theme.typography.subHeading,
marginTop: "1rem",
marginBottom: "1rem"
}
}));

const DeleteFaqModal = ({ isModalOpen, closeModal, handleDelete, isFaq }) => {
const theme = useTheme();
const classes = useStyles(theme);
const type = isFaq ? "FAQ" : "Category";
return (
<ModalDialog mounted={isModalOpen} onClose={closeModal} omitCloseBox={true}>
<div className={classes.container}>
<MdWarning alt="Warning" className={classes.warningIcon} />
<div className={classes.modalHeader}>{` Delete ${type}`}</div>
<div className={classes.modalSubHeader}>
{`Are you sure you want to permanently delete the ${type}?`}
</div>
<div className={classes.buttonFlexBox}>
<Button onClick={closeModal} variant="secondary" id="cancelButton">
Cancel
</Button>
<Button onClick={handleDelete} variant="warning">
Delete
</Button>
</div>
</div>
</ModalDialog>
);
};

DeleteFaqModal.propTypes = {
isModalOpen: PropTypes.bool,
closeModal: PropTypes.func,
handleDelete: PropTypes.func,
isFaq: PropTypes.bool
};

export default DeleteFaqModal;
Loading

0 comments on commit fba3fef

Please sign in to comment.