Styled tooltips for the project badges

itenium-be · Apr 13, 2023 · c5f2381 · c5f2381
1 parent fb29bc6
commit c5f2381
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 32 deletions.
diff --git a/frontend/src/components/project/project-month-list/closed-list/badges/InboundBadge.tsx b/frontend/src/components/project/project-month-list/closed-list/badges/InboundBadge.tsx
@@ -1,45 +1,45 @@
 import React from 'react';
-import { t } from '../../../../utils';
-import { TimesheetBadgeProps } from './TimesheetBadge';
+import {t} from '../../../../utils';
+import {TimesheetBadgeProps} from './TimesheetBadge';
 
 import './InboundBadge.scss';
+import {Tooltip} from "../../../../controls/Tooltip";
 
 const AllInboundPaidBadge = (
   <span className="badge rounded-pill text-white bg-success">
-    <i className="fa fa-inbox fa-1x" />
+    <i className="fa fa-inbox fa-1x"/>
     {t('projectMonth.list.inboundAllPaid')}
   </span>
 );
 
 
 /** ProjectMonth closed month Inbound badge */
-export const InboundBadge = ({ pending, totals }: TimesheetBadgeProps) => {
+export const InboundBadge = ({pending, totals}: TimesheetBadgeProps) => {
   if (!pending) {
     return AllInboundPaidBadge;
   }
 
   return (
     <span className="badge rounded-pill bg-warning inbound-badges">
-      <i
-        className="fa fa-inbox fa-1x"
-        title={totals.inboundNew && `<b>${t('projectMonth.inboundNew')}</b><br>${totals.inboundNew}`}
-      >
-        <span>{totals.inboundNewCount}</span>
-      </i>
+      <Tooltip title={totals.inboundNew && `<b>${t('projectMonth.inboundNew')}</b><br>${totals.inboundNew}`}>
+        <i className="fa fa-inbox fa-1x">
+            <span>{totals.inboundNewCount}</span>
+        </i>
+      </Tooltip>
 
-      <i
-        className="fa fa-check fa-1x"
-        title={totals.inboundValidated && `<b>${t('projectMonth.inboundValidated')}</b><br>${totals.inboundValidated}`}
-      >
-        <span>{totals.inboundValidatedCount}</span>
-      </i>
+      <Tooltip
+        title={totals.inboundValidated && `<b>${t('projectMonth.inboundValidated')}</b><br>${totals.inboundValidated}`}>
+        <i className="fa fa-check fa-1x">
+          <span>{totals.inboundValidatedCount}</span>
+        </i>
+      </Tooltip>
 
-      <i
-        className="fa fa-coins fa-1x"
-        title={totals.inboundPaid && `<b>${t('projectMonth.inboundPaid')}</b><br>${totals.inboundPaid}`}
-      >
+      <Tooltip
+        title={totals.inboundPaid && `<b>${t('projectMonth.inboundPaid')}</b><br>${totals.inboundPaid}`}>
+       <i className="fa fa-coins fa-1x">
         <span>{totals.inboundPaidCount}</span>
-      </i>
+        </i>
+      </Tooltip>
     </span>
   )
 };
diff --git a/frontend/src/components/project/project-month-list/closed-list/badges/OutboundBadge.tsx b/frontend/src/components/project/project-month-list/closed-list/badges/OutboundBadge.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { t } from '../../../../utils';
 import { ProjectMonthBadgeTotals } from "../ProjectMonthBadgeTotals";
+import {Tooltip} from "../../../../controls/Tooltip";
 
 /** ProjectMonth closed month Outbound badge */
 export const OutboundBadge = ({ totals }: { totals: ProjectMonthBadgeTotals; }) => {
   return (
-    <span
-      className="badge rounded-pill bg-warning"
-      title={`<b>${t('projectMonth.outboundPaid')}</b><br>` + totals.unverified}
-    >
-      <i className="fa fa-coins fa-1x" />
-      {t('projectMonth.list.verifiedBadge', {verified: totals.verified, total: totals.total})}
-    </span>
+    <Tooltip title={`<b>${t('projectMonth.outboundPaid')}</b><br>` + totals.unverified}>
+      <span className="badge rounded-pill bg-warning">
+        <i className="fa fa-coins fa-1x" />
+        {t('projectMonth.list.verifiedBadge', {verified: totals.verified, total: totals.total})}
+      </span>
+    </Tooltip>
   );
 };
diff --git a/frontend/src/components/project/project-month-list/closed-list/badges/TimesheetBadge.tsx b/frontend/src/components/project/project-month-list/closed-list/badges/TimesheetBadge.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { t } from '../../../../utils';
 import { ProjectMonthBadgeTotals } from "../ProjectMonthBadgeTotals";
+import {Tooltip} from "../../../../controls/Tooltip";
 
 export type TimesheetBadgeProps = {
   pending: boolean;
@@ -22,9 +23,11 @@ export const TimesheetBadge = ({ pending, totals }: TimesheetBadgeProps) => {
   }
 
   return (
-    <span className="badge rounded-pill bg-warning">
-      <i className="fa fa-clock fa-1x" title={`<b>${t('projectMonth.timesheetValidated')}</b><br>` + totals.timesheetPending} />
-      {t('projectMonth.list.timesheetPending', {timesheetPendingCount: totals.timesheetPendingCount})}
-    </span>
+    <Tooltip title={`<b>${t('projectMonth.timesheetValidated')}</b><br>` + totals.timesheetPending}>
+      <span className="badge rounded-pill bg-warning">
+        <i className="fa fa-clock fa-1x"  />
+            {t('projectMonth.list.timesheetPending', {timesheetPendingCount: totals.timesheetPendingCount})}
+      </span>
+    </Tooltip>
   );
 };