add tooltips

src/components/Tooltip.tsx

@@ -1,12 +1,7 @@
 import type { ReactNode } from "react";
 
-import {
-  Portal,
-  Root,
-  TooltipProvider,
-  Trigger,
-} from "@radix-ui/react-tooltip";
-export { Content, TooltipArrow as Arrow } from "@radix-ui/react-tooltip";
+import { Portal, Provider, Root, Trigger } from "@radix-ui/react-tooltip";
+export { Content, Arrow } from "@radix-ui/react-tooltip";
 
 interface Props {
   /** must be wrapped by Content */
@@ -15,11 +10,11 @@ interface Props {
 }
 export function Tooltip(props: Props) {
   return (
-    <TooltipProvider>
+    <Provider>
       <Root delayDuration={50}>
         <Trigger asChild>{props.trigger}</Trigger>
         <Portal>{props.children}</Portal>
       </Root>
-    </TooltipProvider>
+    </Provider>
   );
 }

src/pages/Admin/Charity/Dashboard/Schedule/AllocationSlider.tsx

@@ -3,6 +3,7 @@ import leaf from "assets/icons/leaf.png";
 import sendMoney from "assets/icons/send-money.png";
 import Icon from "components/Icon";
 import Image from "components/Image";
+import { Arrow, Content, Tooltip } from "components/Tooltip";
 import { humanize } from "helpers";
 import type { ReactNode } from "react";
 import type { Allocation } from "types/aws";
@@ -40,7 +41,7 @@ export function AllocationSlider({
   return (
     <div className="grid">
       {/** percentages */}
-      <div className="grid grid-cols-[auto_auto_1fr_auto] gap-x-4 gap-y-2">
+      <div className="grid grid-cols-[auto_auto_1fr_auto_auto] gap-y-2">
         <Row
           title="Grant"
           icon={<Icon type="ArrowRight" className="text-gray" size={20} />}
@@ -90,16 +91,29 @@ interface IRow {
   pct: number;
   amount: number;
 }
-function num(amount: number, pct: number) {
-  return humanize(amount * (pct / 100));
-}
+
 function Row(props: IRow) {
+  const num = props.amount * (props.pct / 100);
+  const isLessThanMin = num !== 0 && num < 50;
   return (
-    <div className="grid grid-cols-subgrid col-span-full items-center">
+    <div className="grid grid-cols-subgrid col-span-full items-center gap-x-1">
       {props.icon}
-      <p className="text-sm">{props.title}</p>
-      <p className="text-gray text-xs text-right">{props.pct}%</p>
-      <p className="text-sm text-right">$ {num(props.amount, props.pct)}</p>
+      <p className="text-sm ml-2">{props.title}</p>
+      <p className="text-gray text-xs text-right mr-2">{props.pct}%</p>
+      <p className={`text-sm text-right ${isLessThanMin ? "text-amber" : ""}`}>
+        $ {humanize(num)}
+      </p>
+
+      {isLessThanMin ? (
+        <Tooltip
+          trigger={<Icon type="Info" size={14} className="text-amber" />}
+        >
+          <Content className="bg-navy-d4 text-white p-3 isolate z-[60] text-xs w-40 rounded-lg">
+            Less than minimum of $50, would be processed next period.
+            <Arrow />
+          </Content>
+        </Tooltip>
+      ) : null}
     </div>
   );
 }

src/pages/Admin/Charity/Dashboard/Schedule/Schedule.tsx

@@ -5,6 +5,7 @@ import { Arrow, Content, Tooltip } from "components/Tooltip";
 import { useModalContext } from "contexts/ModalContext";
 import { humanize } from "helpers";
 import { useAdminContext } from "pages/Admin/Context";
+import type { ReactNode } from "react";
 import { useEndowmentQuery } from "services/aws/aws";
 import { Edit } from "./Edit";
 
@@ -22,9 +23,6 @@ export function Schedule(props: Props) {
     fields: ["allocation"],
   });
 
-  const val = (pct?: number) =>
-    pct || pct === 0 ? `$ ${humanize((pct / 100) * props.amount)}` : "---";
-
   return (
     <div className="p-4 grid rounded border border-gray-l4 mt-4">
       <div className="flex flex-row items-center justify-between space-y-0">
@@ -52,53 +50,81 @@ export function Schedule(props: Props) {
           in {props.periodRemaining}
         </span>
       </p>
-      <div className="grid grid-cols-[auto_auto_auto_1fr] gap-y-2 gap-x-2">
-        <div className="grid grid-cols-subgrid col-span-full items-center">
-          <Icon type="ArrowRight" className="h-4 w-4 mr-2" />
-
-          <div className="flex items-center">
-            <span>Grants</span>
-            <Tooltip
-              trigger={
-                <Icon type="Question" size={14} className="text-navy-l1 ml-1" />
-              }
-            >
-              <Content className="max-w-xs bg-navy-d4 p-4 text-white text-sm shadow-lg rounded-lg">
-                Donations received through Better Giving that will distributed
-                to your bank account.
-                <Arrow />
-              </Content>
-            </Tooltip>
-          </div>
+      <div className="grid grid-cols-[auto_auto_auto_1fr_auto] gap-y-2 gap-x-2">
+        <Row
+          icon={<Icon type="ArrowRight" className="h-4 w-4 mr-2" />}
+          title={
+            <div className="flex items-center">
+              <span>Grants</span>
+              <Tooltip
+                trigger={
+                  <Icon
+                    type="Question"
+                    size={14}
+                    className="text-navy-l1 ml-1"
+                  />
+                }
+              >
+                <Content className="max-w-xs bg-navy-d4 p-4 text-white text-sm shadow-lg rounded-lg">
+                  Donations received through Better Giving that will distributed
+                  to your bank account.
+                  <Arrow />
+                </Content>
+              </Tooltip>
+            </div>
+          }
+          pct={endow?.allocation?.cash ?? 0}
+          amount={props.amount}
+        />
+        <Row
+          icon={<img src={sendMoney} width={20} className="mr-2" />}
+          title={<span>Savings</span>}
+          pct={endow?.allocation?.liq ?? 50}
+          amount={props.amount}
+        />
 
-          <span className="ml-2 text-navy-l1 text-sm">
-            {endow?.allocation?.cash ?? 0} %
-          </span>
-          <span className="justify-self-end font-bold">
-            {val(endow ? endow.allocation?.cash ?? 0 : undefined)}
-          </span>
-        </div>
-        <div className="grid grid-cols-subgrid col-span-full items-center">
-          <img src={sendMoney} width={20} className="mr-2" />
-          <span>Savings</span>
-          <span className="ml-2 text-navy-l1 text-sm">
-            {endow?.allocation?.liq ?? 50} %
-          </span>
-          <span className="justify-self-end font-bold">
-            {val(endow ? endow.allocation?.liq ?? 50 : undefined)}
-          </span>
-        </div>
-        <div className="grid grid-cols-subgrid col-span-full items-center">
-          <img src={leaf} className="mr-2" />
-          <span>Investments</span>
-          <span className="ml-2 text-navy-l1 text-sm">
-            {endow?.allocation?.lock ?? 50} %
-          </span>
-          <span className="justify-self-end font-bold">
-            {val(endow ? endow.allocation?.lock ?? 50 : undefined)}
-          </span>
-        </div>
+        <Row
+          icon={<img src={leaf} className="mr-2" />}
+          title={<span>Investments</span>}
+          pct={endow?.allocation?.lock ?? 50}
+          amount={props.amount}
+        />
       </div>
     </div>
   );
 }
+
+interface IRow {
+  pct: number;
+  icon: ReactNode;
+  title: ReactNode;
+  amount: number;
+}
+function Row({ pct, icon, title, amount }: IRow) {
+  const num = (pct / 100) * amount;
+  const isLessThanMin = num < 50 && num !== 0;
+  return (
+    <div className="grid grid-cols-subgrid col-span-full items-center">
+      {icon}
+      {title}
+      <span className="ml-2 text-navy-l1 text-sm">{pct ?? 50} %</span>
+      <span
+        className={`justify-self-end font-bold ${
+          isLessThanMin ? "text-amber" : ""
+        }`}
+      >
+        $ {humanize((pct / 100) * amount)}
+      </span>
+      {isLessThanMin && (
+        <Tooltip
+          trigger={<Icon type="Info" size={14} className="text-amber" />}
+        >
+          <Content className="p-3 rounded-lg bg-navy-d4 text-white text-sm">
+            Less than min
+            <Arrow />
+          </Content>
+        </Tooltip>
+      )}
+    </div>
+  );
+}