From 2dc08d378a35a9790680912b035eb3ae096c384b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Tue, 3 Dec 2024 17:08:59 +0100
Subject: [PATCH] minor styling updates

---
 client/src/components/ui/dialog.tsx           |  2 +-
 client/src/constants/tooltip.tsx              | 21 ++++++++++++++++---
 .../overview/table/toolbar/index.tsx          | 20 ++++++++++--------
 3 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/client/src/components/ui/dialog.tsx b/client/src/components/ui/dialog.tsx
index a62d3271..1a8b3919 100644
--- a/client/src/components/ui/dialog.tsx
+++ b/client/src/components/ui/dialog.tsx
@@ -39,7 +39,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-2xl translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className,
       )}
       {...props}
diff --git a/client/src/constants/tooltip.tsx b/client/src/constants/tooltip.tsx
index c36a8746..f4421715 100644
--- a/client/src/constants/tooltip.tsx
+++ b/client/src/constants/tooltip.tsx
@@ -36,9 +36,24 @@ export const KEY_COSTS = {
   IMPLEMENTATION_LABOR:
     "Only applicable to restoration. The costs associated with labor and materials required for rehabilitating the degraded area (hydrology, planting or hybrid)",
   COMMUNITY_BENEFIT_SHARING_FUND:
-    "The creation of a fund to compensate for alternative livelihoods, and opportunity cost. The objective of the fund is to meet the community&apos;s socioeconomic and financial priorities, which can be realized through goods, services, infrastructure, and/or cash (e.g., textbooks, desalination plant).",
-  MONITORING_AND_MAINTENANCE:
-    "&bull; Monitoring: The expenses related to individuals moving throughout the project site to prevent degradation and report necessary actions/changes.\n&bull; Maintenance: Only applicable to restoration. The costs associated with the physical upkeep of the original implementation, such as pest control, removing blockages, and rebuilding small portions.",
+    "The creation of a fund to compensate for alternative livelihoods, and opportunity cost. The objective of the fund is to meet the community's socioeconomic and financial priorities, which can be realized through goods, services, infrastructure, and/or cash (e.g., textbooks, desalination plant).",
+  MONITORING_AND_MAINTENANCE: (
+    <>
+      <ul className="space-y-2">
+        <li>
+          Monitoring: The expenses related to individuals moving throughout the
+          project site to prevent degradation and report necessary
+          actions/changes.
+        </li>
+        <li>
+          Maintenance: Only applicable to restoration. The costs associated with
+          the physical upkeep of the original implementation, such as pest
+          control, removing blockages, and rebuilding small portions.
+        </li>
+        <li></li>
+      </ul>
+    </>
+  ),
   COMMUNITY_REPRESENTATION:
     "Efforts aimed at obtaining community buy-in, including assessing community needs, obtaining free, prior, and informed consent, conducting stakeholder surveys, and providing education about blue carbon.",
   CONSERVATION_PLANNING:
diff --git a/client/src/containers/overview/table/toolbar/index.tsx b/client/src/containers/overview/table/toolbar/index.tsx
index 509afda8..1cfcf14d 100644
--- a/client/src/containers/overview/table/toolbar/index.tsx
+++ b/client/src/containers/overview/table/toolbar/index.tsx
@@ -1,3 +1,5 @@
+import { cn } from "@/lib/utils";
+
 import { SCORECARD_PRIORITIZATION, KEY_COSTS } from "@/constants/tooltip";
 
 import SearchProjectsTable from "@/containers/overview/table/toolbar/search";
@@ -99,42 +101,42 @@ const KEY_COSTS_DATA: KeyCost[] = [
   },
 ];
 
+const TABS_TRIGGER_CLASSES =
+  "border-b-2 border-transparent transition-colors data-[state=active]:!border-sky-blue-300 data-[state=active]:bg-transparent";
+
 export default function ToolbarProjectsTable() {
   return (
     <div className="flex items-center justify-between px-5 py-3">
       <SearchProjectsTable />
       <TabsProjectsTable />
       <div className="flex flex-1 items-center justify-end space-x-2">
-        <InfoButton className="max-w-[fit-content]" title="Table details">
+        <InfoButton title="Table details">
           <div className="relative flex h-[600px] w-[auto] flex-col">
             <Tabs
               defaultValue="general"
               className="flex h-full w-full flex-col"
             >
               <div className="sticky top-0 z-10 bg-background pb-4">
-                <TabsList className="w-full justify-start space-x-6 divide-x-0 divide-sky-blue-300 rounded-none border border-l-0 border-r-0 border-t-0 bg-transparent p-0">
+                <TabsList className="w-full justify-start space-x-6 divide-x-0 divide-transparent rounded-none border border-l-0 border-r-0 border-t-0 bg-transparent p-0">
                   <TabsTrigger
                     value="general"
-                    className="ml-0 px-0 data-[state=active]:border-b-2 data-[state=active]:border-sky-blue-300 data-[state=active]:bg-transparent"
+                    className={cn(TABS_TRIGGER_CLASSES, "ml-0 px-0")}
                   >
                     General
                   </TabsTrigger>
                   <TabsTrigger
                     value="overview"
-                    className="data-[state=active]:border-b-2 data-[state=active]:border-sky-blue-300 data-[state=active]:bg-transparent"
+                    className={TABS_TRIGGER_CLASSES}
                   >
                     Overview table
                   </TabsTrigger>
                   <TabsTrigger
                     value="scorecard"
-                    className="data-[state=active]:border-b-2 data-[state=active]:border-sky-blue-300 data-[state=active]:bg-transparent"
+                    className={TABS_TRIGGER_CLASSES}
                   >
                     Scorecard prioritization table
                   </TabsTrigger>
-                  <TabsTrigger
-                    value="costs"
-                    className="data-[state=active]:border-b-2 data-[state=active]:border-sky-blue-300 data-[state=active]:bg-transparent"
-                  >
+                  <TabsTrigger value="costs" className={TABS_TRIGGER_CLASSES}>
                     Key costs table
                   </TabsTrigger>
                 </TabsList>