diff --git a/client/src/components/Layout/NavBarLogin.jsx b/client/src/components/Layout/NavBarLogin.jsx index 5f1b771e..c1ef40de 100644 --- a/client/src/components/Layout/NavBarLogin.jsx +++ b/client/src/components/Layout/NavBarLogin.jsx @@ -4,7 +4,6 @@ import { Link } from "react-router-dom"; import { useLocation } from "react-router"; import PropTypes from "prop-types"; import clsx from "clsx"; -// import NavBarToolTip from "./NavBarToolTip"; import { useTheme } from "react-jss"; import Popup from "reactjs-popup"; import { MdClose, MdWarning } from "react-icons/md"; @@ -93,7 +92,7 @@ const NavBarLogin = ({ classes, handleHamburgerMenuClick }) => { contentStyle={{ borderRadius: "5px", border: "1px solid " + theme.colorCritical, - width: "50%", + width: "25rem", backgroundColor: theme.colorTooltipBackground, boxShadow: "0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px 0px rgba(0,0,0,0.3)" diff --git a/client/src/components/Layout/NavBarToolTip.jsx b/client/src/components/Layout/NavBarToolTip.jsx deleted file mode 100644 index 3af5e311..00000000 --- a/client/src/components/Layout/NavBarToolTip.jsx +++ /dev/null @@ -1,82 +0,0 @@ -import React, { useState } from "react"; -import PropTypes from "prop-types"; -import { createUseStyles } from "react-jss"; -import { MdWarning } from "react-icons/md"; - -const useStyles = createUseStyles({ - container: { - color: "#B63920", - fontFamily: "Calibri, Arial, sans-serif", - boxShadow: "0px 0px 5px rgba(0, 0, 0, .2)", - display: "flex", - alignItems: "center", - justifyContent: "space-between", - opacity: "1 !important", - padding: "0 0.5em !important", - backgroundColor: "#F9DFDA", - position: "absolute", - top: "6.7em", - right: "1.2em", - fontSize: "1em", - border: "1px solid #B63920" - }, - containerHidden: { - visibility: "hidden", - position: "absolute" - }, - button: { - border: "none", - color: "gray", - fontSize: "16px", - margin: "0 0 1em 1em", - cursor: "pointer", - backgroundColor: "#F9DFDA" - }, - warningIcon: { - objectFit: "none", - margin: "1em", - opacity: "1 !important" - }, - underLined: { - textDecoration: "underline" - }, - arrowUp: { - top: "-0.7em", - right: "1em", - width: "20px", - height: "20px", - borderLeft: "1px solid #B63920", - borderBottom: "1px solid #B63920", - backgroundColor: "#F9DFDA", - position: "absolute", - transform: `rotate(135deg)`, - webkitTransform: `rotate(135deg)` - } -}); - -const NavBarToolTip = () => { - const [tooltipVisibility, toggleVisibility] = useState("container"); - const classes = useStyles(); - - return ( -
- - Only projects created after logging in can be saved -
- -
- ); -}; - -NavBarToolTip.propTypes = { - account: PropTypes.object -}; - -export default NavBarToolTip; diff --git a/client/src/components/ProjectWizard/Common/RuleLabel.jsx b/client/src/components/ProjectWizard/Common/RuleLabel.jsx new file mode 100644 index 00000000..39674927 --- /dev/null +++ b/client/src/components/ProjectWizard/Common/RuleLabel.jsx @@ -0,0 +1,210 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { MdLink } from "react-icons/md"; +import { createUseStyles, useTheme } from "react-jss"; +import clsx from "clsx"; +import { MdInfo } from "react-icons/md"; + +const useStyles = createUseStyles(theme => ({ + labelWrapper: { + flexGrow: "1", + flexShrink: "1", + flexBasis: "50%", + "&:hover $iconContainer": { + visibility: "visible" + }, + "&:hover": { + cursor: "pointer" + } + }, + labelWrapperWithoutDesc: { + flexGrow: "1", + flexShrink: "1", + flexBasis: "50%" + }, + tooltipLabel: { + flexGrow: "1", + flexShrink: "1", + flexBasis: "50%" + }, + accordionLabel: { + flexGrow: "1", + flexShrink: "1", + flexBasis: "50%", + "&:hover": { + cursor: "pointer" + } + }, + accordionLabelClicked: { + color: theme.colorLADOT, + fontWeight: "bold", + flexGrow: "1", + flexShrink: "1", + flexBasis: "50%", + "&:hover": { + cursor: "pointer" + }, + fontSmoothing: "antialiased" + }, + tooltip: { + backgroundColor: "blue", + color: "rgb(30, 36, 63) !important", + padding: "15px", + minWidth: "200px", + maxWidth: "400px", + fontFamily: "Arial", + fontSize: 12, + lineHeight: "16px", + fontWeight: "bold", + boxShadow: "0px 0px 8px rgba(0, 46, 109, 0.2)", + borderRadius: 2 + }, + requiredInputLabel: { + "&:after": { + content: '" *"', + color: theme.colors.warning + } + }, + infoIcon: { + color: "#002E6D" + }, + iconContainer: { + visibility: "hidden" + } +})); + +const RuleLabel = ({ + description, + code, + display, + required, + link, + name, + setShowDescription, + showDescription +}) => { + const theme = useTheme(); + const classes = useStyles(theme); + const requiredStyle = required && classes.requiredInputLabel; + const disabledStyle = !display; + + const descriptionHandler = e => { + e.preventDefault(); + setShowDescription(prev => !prev); + }; + + // if (code && code.startsWith("UNITS_HABIT")) { + // return ( + //
+ // + // {description ? ( + // + // + // + // ) : null} + //
+ // ); + // } + + return ( +
+ + {description ? ( + + + + ) : null} +
+ ); +}; + +RuleLabel.propTypes = { + id: PropTypes.number.isRequired, + code: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + description: PropTypes.string, + display: PropTypes.bool, + required: PropTypes.bool, + link: PropTypes.string, + setShowDescription: PropTypes.func, + showDescription: PropTypes.bool +}; +export default RuleLabel; diff --git a/client/src/components/ProjectWizard/RuleInput/RuleInput.jsx b/client/src/components/ProjectWizard/RuleInput/RuleInput.jsx index e3ee416d..5924bd4b 100644 --- a/client/src/components/ProjectWizard/RuleInput/RuleInput.jsx +++ b/client/src/components/ProjectWizard/RuleInput/RuleInput.jsx @@ -4,7 +4,8 @@ import { createUseStyles, useTheme } from "react-jss"; import clsx from "clsx"; import MultiInput from "./MultiInput"; import AccordionToolTip from "../../ToolTip/AccordionToolTip"; -import RuleInputLabel from "./RuleInputLabel"; +// import RuleInputLabel from "./RuleInputLabel"; +import RuleLabel from "../Common/RuleLabel"; const useStyles = createUseStyles(theme => ({ rowContainer: { @@ -185,7 +186,7 @@ const RuleInput = ({
- ) : dataType === "boolean" ? (
- - - ) : (
- {dataType === "number" ? (
- ) : dataType === "boolean" ? (
- ) : dataType === "choice" ? (
- ) : dataType === "string" ? (
- ) : (
- { - const theme = useTheme(); - - const useStyles = createUseStyles({ - iconNoFilter: { - color: theme.colorWhite, - "&:hover": { - backgroundColor: theme.colorWhite, - color: theme.colorLADOT, - borderRadius: "12.5%", - cursor: "pointer" - } - }, - iconFilter: { - backgroundColor: "transparent", - color: "theme.colorWhite", - marginLeft: "0.5rem" +const useStyles = createUseStyles(theme => ({ + iconNoFilter: { + color: theme.colorWhite, + "&:hover": { + backgroundColor: theme.colorWhite, + color: theme.colorLADOT, + borderRadius: "12.5%", + cursor: "pointer" } - }); + }, + iconFilter: { + backgroundColor: "transparent", + color: "theme.colorWhite", + marginLeft: "0.5rem" + }, + reactTinyPopoverContainer: { + color: "orange" + }, + popoverContent: { + ...theme.typography.paragraph1, + color: theme.colorBlack, + textAlign: "left", + backgroundColor: theme.colorWhite, + borderWidth: "1px", + borderColor: theme.colors.secondary.gray, + borderRadius: "5px", + padding: "20px", + boxShadow: + "0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px 0px rgba(0,0,0,0.3)" + } +})); - const classes = useStyles(); +const ColumnHeader = React.forwardRef((props, ref) => { + const theme = useTheme(); + const classes = useStyles(theme); return (
{ const theme = useTheme(); + const classes = useStyles(theme); const [isPopoverOpen, setIsPopoverOpen] = useState(false); // Filter is considered Applied if it is not set @@ -140,11 +155,15 @@ const ProjectTableColumnHeader = ({ onClickOutside={() => handlePopoverToggle(false)} content={
{!header.popupType ? null : header.popupType === "datetime" ? ( ({ container: { display: "flex", flexDirection: "row", @@ -40,9 +40,9 @@ const useStyles = createUseStyles({ background: "none" }, multiStatus: { - color: "#002E6D" + color: theme.colors.primary.navy } -}); +})); const MultiProjectToolbarMenu = ({ handleHideBoxes, @@ -54,7 +54,8 @@ const MultiProjectToolbarMenu = ({ pdfProjectData }) => { const printRef = useRef(null); - const classes = useStyles(); + const theme = useTheme(); + const classes = useStyles(theme); const userContext = useContext(UserContext); const account = userContext.account; let project = null; @@ -155,14 +156,17 @@ const MultiProjectToolbarMenu = ({ {checkedProjectIds.length !== 1 ? ( @@ -193,12 +197,17 @@ const MultiProjectToolbarMenu = ({ )} )} ({ list: { display: "flex", flexDirection: "column", @@ -37,10 +37,10 @@ const useStyles = createUseStyles({ display: "flex", flexDirection: "row", padding: "0.5rem", - color: "gray" + color: theme.colors.secondary.mediumGray }, listItemIcon: { marginRight: "0.3rem" } -}); +})); const ProjectContextMenu = ({ project, @@ -54,9 +54,10 @@ const ProjectContextMenu = ({ handlePrintPdf, handleHide }) => { + const theme = useTheme(); + const classes = useStyles(theme); const userContext = useContext(UserContext); const account = userContext.account; - const classes = useStyles(); const handleClick = callback => { callback(project); @@ -175,21 +176,22 @@ const ProjectContextMenu = ({ style={{ borderTop: "1px solid black" }} > {project.dateTrashed ? ( - + <> Restore from Trash - + ) : ( - + <> Delete - + )} )} diff --git a/client/src/components/Projects/ProjectTableRow.jsx b/client/src/components/Projects/ProjectTableRow.jsx index 4692551d..c80e62e0 100644 --- a/client/src/components/Projects/ProjectTableRow.jsx +++ b/client/src/components/Projects/ProjectTableRow.jsx @@ -1,6 +1,6 @@ import React from "react"; import { Link } from "react-router-dom"; -import { createUseStyles } from "react-jss"; +import { createUseStyles, useTheme } from "react-jss"; import { useState, useRef, useEffect } from "react"; import PropTypes from "prop-types"; import Popup from "reactjs-popup"; @@ -23,7 +23,7 @@ import { ENABLE_UPDATE_TOTALS } from "../../helpers/Constants"; import AdminNotesModal from "./AdminNotesModal"; import WarningModal from "../UI/AriaModal/WarningModal"; -const useStyles = createUseStyles({ +const useStyles = createUseStyles(theme => ({ td: { padding: "0.2em", textAlign: "left" @@ -75,13 +75,22 @@ const useStyles = createUseStyles({ }, cancelButton: { padding: "0.3em 0.6em", - backgroundColor: "#f44336", + backgroundColor: theme.colorWhite, color: "white", border: "none", borderRadius: "4px", cursor: "pointer" + }, + popover: { + display: "flex", + flexDirection: "column", + listStyleType: "none", + margin: 0, + padding: 0, + boxShadow: + "10px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px 0px rgba(0,0,0,0.3)" } -}); +})); function useAdminNotesModal(project, onAdminNoteUpdate) { const [showWarningModal, setShowWarningModal] = useState(false); @@ -188,8 +197,8 @@ const ProjectTableRow = ({ handleDoNotDiscard, textUpdated } = useAdminNotesModal(project, onAdminNoteUpdate); - - const classes = useStyles(); + const theme = useTheme(); + const classes = useStyles(theme); const formInputs = JSON.parse(project.formInputs); const printRef = useRef(); const [projectRules, setProjectRules] = useState(null); @@ -370,6 +379,7 @@ const ProjectTableRow = ({ {projectRules && (
diff --git a/client/src/components/ToolTip/AccordionToolTip.jsx b/client/src/components/ToolTip/AccordionToolTip.jsx index 5422a4f9..16c5c8bb 100644 --- a/client/src/components/ToolTip/AccordionToolTip.jsx +++ b/client/src/components/ToolTip/AccordionToolTip.jsx @@ -1,24 +1,29 @@ import React from "react"; import PropTypes from "prop-types"; -import { createUseStyles } from "react-jss"; +import { createUseStyles, useTheme } from "react-jss"; import clsx from "clsx"; import { Interweave } from "interweave"; -import { MdLaunch } from "react-icons/md"; +import { MdLaunch, MdClose } from "react-icons/md"; -const useStyles = createUseStyles({ +const useStyles = createUseStyles(theme => ({ accordionTooltipLabel: { - border: "1px solid black", + ...theme.typography.paragraph1, + color: theme.colorText, + textAlign: "left", + border: "1px solid " + theme.colorBlack, padding: "1em", borderRadius: "5px", width: "min-content", minWidth: "97%", - boxShadow: "0px 0px 8px rgba(0, 46, 109, 0.2)", + boxShadow: + "0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px 0px rgba(0,0,0,0.3)", marginBottom: "10px" }, closeButton: { + color: theme.colors.secondary.gray, float: "right", - padding: "4px 10px", - fontSize: "16px", + padding: "0.5rem", + fontSize: "20px", "&:hover": { cursor: "pointer" } @@ -29,7 +34,7 @@ const useStyles = createUseStyles({ left: "20px", width: "0", height: "0", - borderBottom: "6px solid black", + borderBottom: "6px solid " + theme.colors.secondary.gray, borderLeft: "6px solid transparent", borderRight: "6px solid transparent" }, @@ -46,14 +51,15 @@ const useStyles = createUseStyles({ disabledDescription: { color: "rgba(15, 41, 64, 0.6)" } -}); +})); const AccordionToolTip = ({ description, setShowDescription, disabledStyle }) => { - const classes = useStyles(); + const theme = useTheme(); + const classes = useStyles(theme); return ( <>
@@ -63,7 +69,7 @@ const AccordionToolTip = ({ className={clsx(classes.closeButton)} onClick={() => setShowDescription(prev => !prev)} > - x +
{disabledStyle ? (