diff --git a/client/src/components/Layout/NavBarLogin.jsx b/client/src/components/Layout/NavBarLogin.jsx index 378b97d9..5f1b771e 100644 --- a/client/src/components/Layout/NavBarLogin.jsx +++ b/client/src/components/Layout/NavBarLogin.jsx @@ -4,13 +4,19 @@ 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 NavBarToolTip from "./NavBarToolTip"; +import { useTheme } from "react-jss"; +import Popup from "reactjs-popup"; +import { MdClose, MdWarning } from "react-icons/md"; const NavBarLogin = ({ classes, handleHamburgerMenuClick }) => { + const theme = useTheme(); const userContext = useContext(UserContext); const account = userContext.account; const [isCalculation, setIsCalculation] = useState(false); + const [tooltipOpen, setTooltipOpen] = useState(true); + const closeModal = () => setTooltipOpen(false); const location = useLocation(); const pathname = location.pathname; @@ -24,16 +30,14 @@ const NavBarLogin = ({ classes, handleHamburgerMenuClick }) => { }, [pathname]); const loginLink = ( -
  • - - Login - -
    • + + Login + ); const getUserGreeting = account => ( @@ -70,12 +74,67 @@ const NavBarLogin = ({ classes, handleHamburgerMenuClick }) => { return !account || !account.email ? ( !isCalculation ? ( - <>{loginLink} - ) : ( - <> - +
  • {loginLink} - +
    • + ) : ( +
  • setTooltipOpen(true)} + > + {loginLink}} + position="bottom right" + arrow={true} + contentStyle={{ + borderRadius: "5px", + border: "1px solid " + theme.colorCritical, + width: "50%", + backgroundColor: theme.colorTooltipBackground, + boxShadow: + "0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px 0px rgba(0,0,0,0.3)" + }} + > + {close => { + return ( +
    + +
    + +
    + Only projects created after logging in can be saved +
    +
    +
    + ); + }} +     + {/* */} +
    • ) ) : ( <> diff --git a/client/src/components/ProjectWizard/RuleCalculation/RuleCalculation.jsx b/client/src/components/ProjectWizard/RuleCalculation/RuleCalculation.jsx index 35ec2fdb..22daee8b 100644 --- a/client/src/components/ProjectWizard/RuleCalculation/RuleCalculation.jsx +++ b/client/src/components/ProjectWizard/RuleCalculation/RuleCalculation.jsx @@ -1,9 +1,11 @@ import React, { useState } from "react"; import PropTypes from "prop-types"; -import { createUseStyles } from "react-jss"; +import { createUseStyles, useTheme } from "react-jss"; import ToolTipIcon from "../../ToolTip/ToolTipIcon"; -import ToolTip from "../../ToolTip/ToolTip"; +// import ToolTip from "../../ToolTip/ToolTip"; import clsx from "clsx"; +import Popup from "reactjs-popup"; +import { MdClose } from "react-icons/md"; const useStyles = createUseStyles(theme => ({ field: { @@ -187,6 +189,7 @@ const RuleCalculation = ({ }, onPropInputChange }) => { + const theme = useTheme(); const classes = useStyles(); // The validationErrors property of the rule indicates whether the @@ -342,16 +345,45 @@ const RuleCalculation = ({ {name}
    {description ? ( - + + + + } + position="left center" + arrow={true} + contentStyle={{ width: "30%" }} + > + {close => { + return ( +
    + +
    +
    + ); + }} + ) : ( )}
    -
    {units}
    diff --git a/client/src/components/ProjectWizard/WizardSidebar/EarnedPointsProgress.jsx b/client/src/components/ProjectWizard/WizardSidebar/EarnedPointsProgress.jsx index acab8827..ec911b39 100644 --- a/client/src/components/ProjectWizard/WizardSidebar/EarnedPointsProgress.jsx +++ b/client/src/components/ProjectWizard/WizardSidebar/EarnedPointsProgress.jsx @@ -3,6 +3,8 @@ import PropTypes from "prop-types"; import { createUseStyles, useTheme } from "react-jss"; import ToolTipIcon from "../../ToolTip/ToolTipIcon"; import clsx from "clsx"; +import Popup from "reactjs-popup"; +import { MdClose } from "react-icons/md"; /* See https://css-tricks.com/building-progress-ring-quickly/ @@ -107,11 +109,10 @@ const useStyles = createUseStyles({ } }); -const EarnedPointsProgress = props => { +const EarnedPointsProgress = ({ rulesConfig }) => { const theme = useTheme(); const classes = useStyles({ theme }); - const { rulesConfig } = props; const radius = DIAL_RADIUS; const stroke = STROKE_WIDTH; @@ -124,6 +125,8 @@ const EarnedPointsProgress = props => { 0, target ? circumference - (earned / target) * 0.875 * circumference : 0 ); + const tipText = `

    Earned Points: ${rulesConfig.earnedPointsRule.description}

    +

    Target Points: ${rulesConfig.targetPointsRule.description}

    `; return (
    {
    TARGET
    Earned Points: " + - rulesConfig.earnedPointsRule.description + - "

    Target Points: " + - rulesConfig.targetPointsRule.description + - "

    " - } - data-iscapture="true" - data-html="true" - data-class={ - target > 0 - ? classes.tooltip - : clsx(classes.tooltip, classes.noDisplay) - } - className={classes.tooltipIcon} + className={clsx( + classes.tooltipIcon, + target > 0 ? "" : classes.noDisplay + )} > - + + + + } + position="right center" + arrow={true} + contentStyle={{ width: "30%" }} + > + {close => { + return ( +
    + +
    +
    + ); + }} +
    { ); }; +// EarnedPointsProgress.propTypes = { +// rulesConfig: PropTypes.object +// }; EarnedPointsProgress.propTypes = { - rulesConfig: PropTypes.object + rulesConfig: PropTypes.shape({ + targetPointsRule: PropTypes.shape({ + value: PropTypes.number, + code: PropTypes.string, + description: PropTypes.string + }).isRequired, + earnedPointsRule: PropTypes.shape({ + value: PropTypes.number, + code: PropTypes.string, + description: PropTypes.string + }).isRequired + }).isRequired }; export default EarnedPointsProgress; diff --git a/client/src/components/ProjectWizard/WizardSidebar/SidebarProjectLevel.jsx b/client/src/components/ProjectWizard/WizardSidebar/SidebarProjectLevel.jsx index 5cde8570..21067fab 100644 --- a/client/src/components/ProjectWizard/WizardSidebar/SidebarProjectLevel.jsx +++ b/client/src/components/ProjectWizard/WizardSidebar/SidebarProjectLevel.jsx @@ -1,8 +1,10 @@ import React from "react"; import PropTypes from "prop-types"; -import { createUseStyles } from "react-jss"; +import { createUseStyles, useTheme } from "react-jss"; import ToolTipIcon from "../../ToolTip/ToolTipIcon"; import clsx from "clsx"; +import Popup from "reactjs-popup"; +import { MdClose } from "react-icons/md"; const useStyles = createUseStyles({ projectLevelHeader: { @@ -27,58 +29,72 @@ const useStyles = createUseStyles({ }, lowOpacity: { opacity: 0.4 - }, - noDisplay: { - display: "none !important" - }, - tooltip: { - 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, - "&.show": { - visibility: "visible !important", - opacity: "1 !important" - } } }); const SidebarProjectLevel = ({ level, rules }) => { + const theme = useTheme(); const classes = useStyles(); - const tipText = rules[0].description; - const opacityTest = level === 0 ? classes.lowOpacity : ""; - const noToolTip = level === 0 ? classes.noDisplay : ""; + const tipText = `

    ${rules[0]?.description}

    `; return ( -
    +

    {level}

    PROJECT LEVEL - - - + {level > 0 && ( + + + + } + position="right center" + arrow={true} + contentStyle={{ width: "30%" }} + > + {close => { + return ( +
    + +
    +
    + ); + }} + + )}

    ); }; SidebarProjectLevel.propTypes = { - level: PropTypes.number, - rules: PropTypes.array + level: PropTypes.number.isRequired, + rules: PropTypes.arrayOf( + PropTypes.shape({ + description: PropTypes.string.isRequired + }) + ).isRequired }; export default SidebarProjectLevel; diff --git a/client/src/components/ToolTip/ToolTip.jsx b/client/src/components/ToolTip/ToolTip.jsx index 587bb5e8..d54ddb1a 100644 --- a/client/src/components/ToolTip/ToolTip.jsx +++ b/client/src/components/ToolTip/ToolTip.jsx @@ -8,9 +8,9 @@ const ToolTip = ({ id }) => { ({ labelWrapper: { @@ -55,11 +56,7 @@ const useStyles = createUseStyles(theme => ({ lineHeight: "16px", fontWeight: "bold", boxShadow: "0px 0px 8px rgba(0, 46, 109, 0.2)", - borderRadius: 2, - "&.show": { - visibility: "visible !important", - opacity: "1 !important" - } + borderRadius: 2 }, requiredInputLabel: { "&:after": { @@ -121,20 +118,17 @@ const ToolTipLabel = ({ ? clsx(classes.accordionLabel, requiredStyle, disabledStyle) : clsx(classes.tooltipLabel, requiredStyle, disabledStyle) } - data-class={classes.tooltip} - data-for={id} - data-tip={tooltipContent} - data-iscapture="true" - data-html="true" + data-tooltip-id={id} // Correctly associate tooltip with ID + data-tooltip-content={tooltipContent} // Tooltip content > {children} + {description ? ( - {/* */} ) : null} @@ -152,7 +146,7 @@ const ToolTipLabel = ({ onClick={descriptionHandler} > + {description ? ( +

    "Parking Provided / Baseline" displays a percentage derived + by dividing your project's parking supply by the number of spaces indicated in + the "Citywide Parking Baseline" row. + A reduction of at least 10% (when "Parking Provided / Baseline" is 90% or less) results + in points earned through the "Reduced Parking Supply" strategy. Providing 110% + or more of the Baseline results in increased Target Points for the project. + +

    +
      +
    • 2 pts - spaces reduced by 10%-24%
      • +
    • 4 pts - spaces reduced by 25%-49%
      • +
    • 8 pts - spaces reduced by 50%-89%
      • +
    • 12 pts - spaces reduced by 90%-100%
      • +
    +
    +
    ' +WHERE calculationId = 1 and code = 'PARK_RATIO' \ No newline at end of file