Change matching rate to skills match. Add tooltip icon next to 'Add Start Month' in team description popup

Author: mbaghel

src/assets/images/icon-information-circle.svg

@@ -0,0 +1,87 @@
+/**
+ * Information Tooltip
+ * Icon which reveals a tooltip on mouse hover
+ */
+import React, { useCallback, useState } from "react";
+import PT from "prop-types";
+import { usePopper } from "react-popper";
+import IconInformationCircle from "../../assets/images/icon-information-circle.svg";
+import "./styles.module.scss";
+
+function InformationTooltip({ text, iconSize = "16px" }) {
+  const [isTooltipShown, setIsTooltipShown] = useState(false);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "top",
+    modifiers: [
+      {
+        name: "flip",
+        options: {
+          fallbackPlacements: ["top"],
+        },
+      },
+      {
+        name: "offset",
+        options: {
+          // use offset to move the tooltip slightly up
+          offset: [0, 10],
+        },
+      },
+      {
+        name: "arrow",
+        // padding should be equal to border-radius of the tooltip
+        options: { element: arrowElement, padding: 8 },
+      },
+    ],
+  });
+
+  const showTooltip = useCallback(() => {
+    setIsTooltipShown(true);
+  }, [setIsTooltipShown]);
+
+  const hideTooltip = useCallback(() => {
+    setIsTooltipShown(false);
+  }, [setIsTooltipShown]);
+
+  const iconStyle = {
+    width: iconSize,
+    height: iconSize,
+  };
+
+  return (
+    <div>
+      <div
+        style={iconStyle}
+        ref={setReferenceElement}
+        onMouseEnter={showTooltip}
+        onMouseLeave={hideTooltip}
+      >
+        <IconInformationCircle styleName="circle" />
+      </div>
+      {isTooltipShown && (
+        <div
+          styleName="tooltip"
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div styleName="tooltip-content">{text}</div>
+          <div
+            styleName="tooltip-arrow"
+            ref={setArrowElement}
+            style={styles.arrow}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+InformationTooltip.propTypes = {
+  iconSize: PT.string,
+  text: PT.string,
+};
+
+export default InformationTooltip;

src/components/InformationTooltip/index.jsx

@@ -0,0 +1,34 @@
+@import "styles/include";
+
+.circle {
+  * {
+    fill: #aaa;
+  }
+}
+
+.tooltip {
+  border-radius: 5px;
+  box-shadow: 0px 5px 25px #c6c6c6;
+  width: 165px;
+  z-index: 1000;
+}
+
+.tooltip-arrow {
+  bottom: -9px;
+  border-style: solid;
+  border-width: 10px 8px 0 8px;
+  border-color: #2a2a2a transparent transparent transparent;
+  height: 0;
+  width: 0;
+}
+
+.tooltip-content {
+  border-radius: 5px;
+  @include font-roboto;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  color: #fff;
+  background-color: #2a2a2a;
+  padding: 10px;
+}

src/components/InformationTooltip/styles.module.scss

@@ -15,7 +15,6 @@ import IconTeamMeetingChat from "../../../../assets/images/icon-team-meeting-cha
 import Curve from "../../../../assets/images/curve.svg";
 import CircularProgressBar from "../CircularProgressBar";
 import Button from "components/Button";
-import { MATCHING_RATE } from "constants";
 import { formatMoney } from "utils/format";
 
 function formatRate(value) {
@@ -31,7 +30,7 @@ function ResultCard({ role }) {
   const {
     numberOfMembersAvailable,
     isExternalMember,
-    matchingRate,
+    skillsMatch,
     rates: [rates],
   } = role;
   const [userHandle, setUserHandle] = useState(null);
@@ -49,8 +48,8 @@ function ResultCard({ role }) {
         <IconEarthCheck />
         <h3>We have matching profiles</h3>
         <p>
-          We have qualified candidates who match {formatPercent(matchingRate)}
-          {matchingRate < 1 ? " or more " : " "} of your job requirements.
+          We have qualified candidates who match {formatPercent(skillsMatch)}
+          {skillsMatch < 1 ? " or more " : " "} of your job requirements.
         </p>
         <Curve styleName="curve" />
         <IconEarthCheck styleName="transparent-icon" />
@@ -222,12 +221,12 @@ function ResultCard({ role }) {
             <div>
               <CircularProgressBar
                 size="160"
-                progress={matchingRate}
+                progress={skillsMatch}
                 strokeWidth="6"
                 children={
                   <div styleName="progressbar-child">
-                    <h4>{formatPercent(matchingRate)}</h4>
-                    <p>Matching rate</p>
+                    <h4>{formatPercent(skillsMatch)}</h4>
+                    <p>Skills Match</p>
                   </div>
                 }
               />

src/routes/CreateNewTeam/components/ResultCard/index.jsx

@@ -13,6 +13,7 @@ import { formatPlural } from "utils/format";
 import Button from "components/Button";
 import "./styles.module.scss";
 import DatePicker from "react-datepicker";
+import InformationTooltip from "components/InformationTooltip";
 
 const Error = ({ name }) => {
   const {
@@ -192,7 +193,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                       />
                       <Error name={`${id}.durationWeeks`} />
                     </td>
-                    <td>
+                    <td styleName="start-month">
                       {startMonthVisible[id] ? (
                         <>
                           <Field
@@ -214,17 +215,23 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                           <Error name={`${id}.startMonth`} />
                         </>
                       ) : (
-                        <button
-                          styleName="toggle-button"
-                          onClick={() =>
-                            setStartMonthVisible((prevState) => ({
-                              ...prevState,
-                              [id]: true,
-                            }))
-                          }
-                        >
-                          Add Start Month
-                        </button>
+                        <div styleName="flex-container">
+                          <button
+                            styleName="toggle-button"
+                            onClick={() =>
+                              setStartMonthVisible((prevState) => ({
+                                ...prevState,
+                                [id]: true,
+                              }))
+                            }
+                          >
+                            Add Start Month
+                          </button>
+                          <InformationTooltip
+                            iconSize="14px"
+                            text="Requested start month for this position."
+                          />
+                        </div>
                       )}
                     </td>
                   </tr>

src/routes/CreateNewTeam/components/TeamDetailsModal/index.jsx

@@ -42,6 +42,10 @@
       color: #2a2a2a;
       border-bottom: 1px solid #e9e9e9;
 
+      &.start-month {
+        padding-right: 0;
+      }
+
       input {
         @include font-roboto;
         font-size: 14px;
@@ -56,6 +60,13 @@
   }
 }
 
+.flex-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+
 .error {
   font-size: 14px;
   font-weight: 400;