ZEVA-2444: Update tooltip consistency (#2463)

* update tooltips

* fix margin

README.md

@@ -28,7 +28,7 @@ Unfortunately we do not have a licence to use Docker Desktop at BC Gov. If you a
 The backend and all services are setup to run via docker. To start everything up you can run in the project folder:
 
 ```sh
-docker-compose up --build
+docker compose up --build
 ```
 
 This will start up a [postgres](https://www.postgresql.org/) database, a [Django](https://www.djangoproject.com/) web app, and a [MinIO](https://docs.min.io/docs/minio-quickstart-guide.html) service with a private bucket `zeva`
@@ -40,14 +40,14 @@ Add this entry to your `/etc/hosts` file:
 ```
 
 to view the database use:
-docker-compose exec db psql -U postgres postgres
+docker compose exec db psql -U postgres postgres
 
 #### Django
 
 Django offers many helpful [mangement commands](https://docs.djangoproject.com/en/4.0/ref/django-admin/) out of the box. To be able to use these with docker you can access the python environment with bash:
 
 ```sh
-docker-compose exec api bash
+docker compose exec api bash
 ```
 
 You can view Django Restframework's browseable api here: `http://localhost:8000/api/`

developer-guide.md

@@ -2,7 +2,7 @@
 
 ## Setting up the development environment
 
-There is a docker-compose file in the root directory that will spin up the local development environment for you. If you don't have docker installed then head over to the docker homepage to get that started.
+There is a docker compose file in the root directory that will spin up the local development environment for you. If you don't have docker installed then head over to the docker homepage to get that started.
 
 There are 6 services that make up the ZEVA application:
 
@@ -65,7 +65,7 @@ to add your idir account:
 in a terminal window:
 
 ```
-docker-compose exec db psql -U postgres zeva
+docker compose exec db psql -U postgres zeva
 INSERT into user_profile (username, keycloak_email, is_active, create_user) VALUES ('your username', 'yourIdirEmail@gov.bc.ca', 't', 'your name');
 ```
 
@@ -136,7 +136,7 @@ Here are a few examples of branch names:
 ### Database Postgres
 
 to view the database via docker use:
-docker-compose exec db psql -U postgres zeva
+docker compose exec db psql -U postgres zeva
 
 #### Copy down dev data from local
 

frontend/src/app/components/Tooltip.js

@@ -2,21 +2,55 @@ import React from "react";
 import ReactTooltip from "react-tooltip";
 import PropTypes from "prop-types";
 
-const Tooltip = ({ tooltipId, tooltipText, children, placement = "top" }) => (
+/***
+ * Tooltip component
+ * @param {string} tooltipId - unique id for the tooltip
+ * @param {string} tooltipText - text to display in the tooltip
+ * @param {node} children - children to render if required
+ * @param {string} placement - placement of the tooltip (top, bottom, left, right)
+ * @param {boolean} infoCircle - whether to display an info circle
+ */
+const Tooltip = ({
+  tooltipId,
+  tooltipText,
+  children,
+  placement = "top",
+  infoCircle = false,
+}) => (
   <span data-for={tooltipId} data-tip={tooltipText} className="tooltip-wrapper">
     <ReactTooltip
       id={tooltipId}
       className="tooltip"
       place={placement}
       effect="solid"
     />
+    {/* react-fontawesome does not have the desired icon */}
+    {infoCircle && (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        style={{ marginBottom: "4px", marginRight: "2px" }}
+      >
+        <g transform="scale(0.8) translate(-1.6, -1.6)">
+          <path
+            fill="#2F5496"
+            d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"
+          />
+          <path fill="#2F5496" d="M11 11h2v6h-2zm0-4h2v2h-2z" />
+        </g>
+      </svg>
+    )}
     {children}
   </span>
 );
+
 Tooltip.propTypes = {
   tooltipId: PropTypes.string.isRequired,
   tooltipText: PropTypes.string.isRequired,
   children: PropTypes.node,
+  infoCircle: PropTypes.bool,
   placement: PropTypes.string,
 };
 

frontend/src/compliance/components/ComplianceObligationAmountsTable.js

@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import formatNumeric from "../../app/utilities/formatNumeric";
 import Tooltip from "../../app/components/Tooltip";
 
@@ -46,11 +45,8 @@ const ComplianceObligationAmountsTable = (props) => {
                       tooltipId="supplied-tooltip"
                       tooltipText={tooltip}
                       placement="left"
+                      infoCircle
                     >
-                      <FontAwesomeIcon
-                        icon="info-circle"
-                        className="info-icon"
-                      />
                       {reportYear}{" "}
                       {reportYear < 2024
                         ? "Model Year LDV Sales"
@@ -63,14 +59,11 @@ const ComplianceObligationAmountsTable = (props) => {
                       statuses.assessment.status !== "ASSESSED" && (
                         <Tooltip
                           tooltipId="supplied-tooltip"
+                          infoCircle
                           tooltipText={tooltip}
                           placement="left"
                         >
                           <span id="obligation-sales-input">
-                            <FontAwesomeIcon
-                              icon="info-circle"
-                              className="info-icon"
-                            />
                             <input
                               className="form-control"
                               disabled={disabledInput}