1997 expander tooltip styling

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)"

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 (
+  //     <div
+  //       className={
+  //         description
+  //           ? clsx(classes.labelWrapper)
+  //           : clsx(classes.labelWrapperWithoutDesc)
+  //       }
+  //       onClick={descriptionHandler}
+  //     >
+  //       <label
+  //         htmlFor={code}
+  //         className={
+  //           showDescription
+  //             ? description
+  //               ? clsx(
+  //                   classes.accordionLabelClicked,
+  //                   requiredStyle,
+  //                   disabledStyle
+  //                 )
+  //               : clsx(classes.tooltipLabel, requiredStyle, disabledStyle)
+  //             : description
+  //             ? clsx(classes.accordionLabel, requiredStyle, disabledStyle)
+  //             : clsx(classes.tooltipLabel, requiredStyle, disabledStyle)
+  //         }
+  //       >
+  //         {link ? (
+  //           <a
+  //             href={link}
+  //             target="_blank"
+  //             rel="noopener noreferrer"
+  //             tabIndex="-1"
+  //           >
+  //             {name}
+  //             <MdLink color="black" transform="shrink-5" />
+  //           </a>
+  //         ) : (
+  //           name
+  //         )}
+  //       </label>
+  //       {description ? (
+  //         <span
+  //           className={clsx("fa-layers fa-fw", classes.iconContainer)}
+  //           style={showDescription ? { visibility: "visible" } : {}}
+  //         >
+  //           <MdInfo className={classes.infoIcon} />
+  //         </span>
+  //       ) : null}
+  //     </div>
+  //   );
+  // }
+
+  return (
+    <div
+      className={
+        description
+          ? clsx(classes.labelWrapper)
+          : clsx(classes.labelWrapperWithoutDesc)
+      }
+      onClick={descriptionHandler}
+    >
+      <label
+        htmlFor={code || null}
+        className={
+          showDescription
+            ? description
+              ? clsx(
+                  classes.accordionLabelClicked,
+                  requiredStyle,
+                  disabledStyle
+                )
+              : clsx(classes.tooltipLabel, requiredStyle, disabledStyle)
+            : description
+            ? clsx(classes.accordionLabel, requiredStyle, disabledStyle)
+            : clsx(classes.tooltipLabel, requiredStyle, disabledStyle)
+        }
+      >
+        {link ? (
+          <a
+            href={link}
+            target="_blank"
+            rel="noopener noreferrer"
+            tabIndex="-1"
+          >
+            {name}
+            <MdLink color="black" transform="shrink-5" />
+          </a>
+        ) : (
+          name
+        )}
+      </label>
+      {description ? (
+        <span
+          className={clsx("fa-layers fa-fw", classes.iconContainer)}
+          style={showDescription ? { visibility: "visible" } : {}}
+        >
+          <MdInfo className={classes.infoIcon} />
+        </span>
+      ) : null}
+    </div>
+  );
+};
+
+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;

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 = ({
           <div
             className={clsx(classes.rowContainer, classes.numberFieldWrapper)}
           >
-            <RuleInputLabel
+            <RuleLabel
               id={id}
               description={description}
               code={code}
@@ -232,7 +233,7 @@ const RuleInput = ({
           </div>
         ) : dataType === "boolean" ? (
           <div className={clsx(classes.rowContainer)}>
-            <RuleInputLabel
+            <RuleLabel
               id={id}
               description={description}
               code={code}
@@ -259,7 +260,7 @@ const RuleInput = ({
           <div
             className={clsx(classes.rowContainer, classes.selectFieldWrapper)}
           >
-            <RuleInputLabel
+            <RuleLabel
               id={id}
               description={description}
               code={code}
@@ -292,7 +293,7 @@ const RuleInput = ({
             className={clsx(classes.rowContainer, classes.textFieldWrapper)}
             onBlur={onBlur}
           >
-            <RuleInputLabel
+            <RuleLabel
               id={id}
               description={description}
               code={code}
@@ -361,7 +362,7 @@ const RuleInput = ({
           </div>
         ) : (
           <div className={clsx(classes.rowContainer, classes.miscFieldWrapper)}>
-            <RuleInputLabel
+            <RuleLabel
               id={id}
               description={description}
               code={code}

client/src/components/ProjectWizard/RuleInput/RuleInputLabel.jsx

@@ -3,6 +3,10 @@ import ToolTipLabel from "../../ToolTip/ToolTipLabel";
 import PropTypes from "prop-types";
 import { MdLink } from "react-icons/md";
 
+/* 
+Probably can be removed. Replaced by RuleLabel.jsx
+*/
+
 const RuleInputLabel = ({
   id,
   description,