From 7de91fd2038517d1f8164cf36df2d888b410e0a7 Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Mon, 16 Dec 2024 14:46:47 -0400
Subject: [PATCH 1/3] [TM-1425] text style dropdown monitored indicator

---
 .../ResourceTabs/MonitoredTab/components/DataCard.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
index bb523eaee..c04c483fa 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
@@ -603,7 +603,7 @@ const DataCard = ({
                   setSelected(option);
                 }}
                 variant={VARIANT_DROPDOWN_SIMPLE}
-                inputVariant="text-14-semibold"
+                inputVariant="text-18-semibold"
                 className="z-50"
                 defaultValue={[DROPDOWN_OPTIONS.find(item => item.slug === indicatorSlug)?.value!]}
                 optionsClassName="w-max z-50"

From ed25beded532e6872dc3a5eb425aa6c0d1f41edf Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Mon, 16 Dec 2024 16:33:19 -0400
Subject: [PATCH 2/3] [TM-1425] text style dropdown monitored indicator

---
 .../ResourceTabs/MonitoredTab/components/DataCard.tsx           | 2 +-
 src/components/elements/Inputs/Dropdown/DropdownVariant.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
index c04c483fa..b4a6a1d9d 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
@@ -644,7 +644,7 @@ const DataCard = ({
             </div>
           </When>
           <When condition={tabActive === 1}>
-            <div className="relative z-auto flex h-[calc(100vh-320px)] w-full gap-8 px-6 pb-6 pt-2">
+            <div className="relative z-auto flex w-full gap-8 px-6 pb-6 pt-2">
               <Dropdown
                 containerClassName={classNames("absolute left-full -translate-x-full pr-6 z-[1]", {
                   hidden: selected.includes("6")
diff --git a/src/components/elements/Inputs/Dropdown/DropdownVariant.tsx b/src/components/elements/Inputs/Dropdown/DropdownVariant.tsx
index d122b3124..e07ed69d0 100644
--- a/src/components/elements/Inputs/Dropdown/DropdownVariant.tsx
+++ b/src/components/elements/Inputs/Dropdown/DropdownVariant.tsx
@@ -53,7 +53,7 @@ export const VARIANT_DROPDOWN_FILTER: DropdownVariant = {
 };
 
 export const VARIANT_DROPDOWN_SIMPLE: DropdownVariant = {
-  className: "gap-2 text-black border-b-2 border-black py-0 px-1 rounded-none h-fit",
+  className: "gap-2 text-black border-b-2 border-black py-0 px-1 rounded-none h-fit !items-baseline !h-8",
   iconClassName: "w-3 h-[9px] fill-trasparent",
   iconName: IconNames.CHEVRON_DOWN_DASH,
   iconNameClear: IconNames.CLEAR,

From bb466964ff7e3775cbf74d8ded235a8e69929b5b Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Tue, 17 Dec 2024 10:57:21 -0400
Subject: [PATCH 3/3] [TM-1425] text style dropdown monitored indicator and
 text in barChar

---
 .../MonitoredTab/components/DataCard.tsx          | 15 ++++++---------
 .../MonitoredTab/components/MonitoredCharts.tsx   |  3 ++-
 .../MonitoredTab/components/TreesLossBarChart.tsx |  2 +-
 .../elements/Inputs/Dropdown/DropdownVariant.tsx  |  2 +-
 4 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
index b4a6a1d9d..ae906cd2b 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
@@ -167,7 +167,7 @@ const TABLE_COLUMNS_HECTARES_STRATEGY: ColumnDef<RowData>[] = [
     enableSorting: false,
     cell: props => (
       <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
-        <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-grey-720 hover:text-primary" />
+        <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-darkCustom-300 hover:text-primary" />
       </div>
     ),
     meta: { style: { width: "5%" } }
@@ -209,7 +209,7 @@ const TABLE_COLUMNS_HECTARES_ECO_REGION: ColumnDef<RowData>[] = [
     enableSorting: false,
     cell: props => (
       <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
-        <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-grey-720 hover:text-primary" />
+        <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-darkCustom-300 hover:text-primary" />
       </div>
     ),
     meta: { style: { width: "5%" } }
@@ -251,7 +251,7 @@ const TABLE_COLUMNS_HECTARES_LAND_USE: ColumnDef<RowData>[] = [
     enableSorting: false,
     cell: props => (
       <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
-        <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-grey-720 hover:text-primary" />
+        <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-darkCustom-300 hover:text-primary" />
       </div>
     ),
     meta: { style: { width: "5%" } }
@@ -549,7 +549,7 @@ const DataCard = ({
           enableSorting: false,
           cell: props => (
             <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
-              <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-grey-720 hover:text-primary" />
+              <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-darkCustom-300 hover:text-primary" />
             </div>
           ),
           meta: { style: { top: `${topHeaderFirstTable}`, borderRadius: "0" } }
@@ -646,7 +646,7 @@ const DataCard = ({
           <When condition={tabActive === 1}>
             <div className="relative z-auto flex w-full gap-8 px-6 pb-6 pt-2">
               <Dropdown
-                containerClassName={classNames("absolute left-full -translate-x-full pr-6 z-[1]", {
+                containerClassName={classNames("absolute left-full -translate-x-full pr-6 z-[1] !h-8", {
                   hidden: selected.includes("6")
                 })}
                 optionsClassName="!w-max right-0"
@@ -656,10 +656,7 @@ const DataCard = ({
                 onChange={option => setSelectedPolygonUuid(option[0])}
               />
               <div className="sticky top-[77px] flex h-[calc(100vh-320px)] w-1/4 min-w-[25%] flex-col gap-3">
-                <Text
-                  variant={"text-14-semibold"}
-                  className="w-fit border-b-2 border-neutral-450 pb-1.5 text-blueCustom-900"
-                >
+                <Text variant={"text-14-semibold"} className="w-fit text-blueCustom-900">
                   Indicator Description
                 </Text>
                 <div className="flex min-h-0 flex-col gap-3 overflow-auto pr-1">
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx
index 7f315ba4c..0a5a1025d 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx
@@ -56,6 +56,7 @@ const RestorationMetrics = ({
       className="w-full place-content-center pl-8"
       tooltip={TOTAL_HECTARES_UNDER_RESTORATION_TOOLTIP}
       showTreesRestoredGraph={false}
+      classNameBody="!mt-1.5"
     />
     <SimpleBarChart data={strategiesData} />
   </div>
@@ -134,7 +135,7 @@ const MonitoredCharts = ({
       case "5":
         return (
           <ChartContainer isLoading={isLoadingIndicator} hasNoData={!landUseData?.graphicTargetLandUseTypes?.length}>
-            <div className="w-full pt-12">
+            <div className="w-full pt-[38px]">
               <GraphicIconDashboard data={landUseData.graphicTargetLandUseTypes} maxValue={totalHectaresRestoredGoal} />
             </div>
           </ChartContainer>
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/TreesLossBarChart.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/TreesLossBarChart.tsx
index 7ca07f205..772cc6150 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/components/TreesLossBarChart.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/TreesLossBarChart.tsx
@@ -36,7 +36,7 @@ const TreeLossBarChart = ({ data, className = "" }: TreeLossBarChartProps) => {
   };
 
   return (
-    <div className={`h-[500px] w-full p-4 ${className}`}>
+    <div className={`h-[500px] w-full p-4 ${className} pt-2.5`}>
       <h2 className="text-12 mb-1 pl-10">Tree Loss Retrospective (ha)</h2>
       <h3 className="text-14-semibold mb-4 pl-10">2015-2024</h3>
       <ResponsiveContainer width="100%" height="100%">
diff --git a/src/components/elements/Inputs/Dropdown/DropdownVariant.tsx b/src/components/elements/Inputs/Dropdown/DropdownVariant.tsx
index e07ed69d0..2f7c8c071 100644
--- a/src/components/elements/Inputs/Dropdown/DropdownVariant.tsx
+++ b/src/components/elements/Inputs/Dropdown/DropdownVariant.tsx
@@ -53,7 +53,7 @@ export const VARIANT_DROPDOWN_FILTER: DropdownVariant = {
 };
 
 export const VARIANT_DROPDOWN_SIMPLE: DropdownVariant = {
-  className: "gap-2 text-black border-b-2 border-black py-0 px-1 rounded-none h-fit !items-baseline !h-8",
+  className: "gap-2 text-black border-b-2 border-black py-0 px-1 rounded-none h-fit pb-2.5 !h-8",
   iconClassName: "w-3 h-[9px] fill-trasparent",
   iconName: IconNames.CHEVRON_DOWN_DASH,
   iconNameClear: IconNames.CLEAR,