minor styling updates

Vizzuality · Dec 3, 2024 · 2dc08d3 · 2dc08d3
1 parent 10d4513
commit 2dc08d3
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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>