From d28917a84b61eb75f468d8a223b1f6e4512d6149 Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 13 Dec 2024 13:39:50 -0400
Subject: [PATCH 1/2] [TM-1468] change style in table and pieChart

---
 .../MonitoredTab/components/DataCard.tsx      | 28 +++++++++++++------
 .../components/EcoRegionDoughnutChart.tsx     | 11 ++++----
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
index 31eb0016..9d04869a 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
@@ -163,8 +163,11 @@ const TABLE_COLUMNS_HECTARES_STRATEGY: ColumnDef<RowData>[] = [
     header: "",
     enableSorting: false,
     cell: props => (
-      <div className="w-min cursor-pointer rounded p-1 hover:bg-primary-200">
-        <Icon name={IconNames.ELIPSES} className="roudn h-4 w-4 rounded-sm text-grey-720 hover:bg-primary-200" />
+      <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
+        <Icon
+          name={IconNames.IC_ARROW_COLLAPSE}
+          className="h-4 w-4 rotate-90 rounded-sm text-grey-720 hover:text-primary"
+        />
       </div>
     ),
     meta: { style: { width: "5%" } }
@@ -205,8 +208,11 @@ const TABLE_COLUMNS_HECTARES_ECO_REGION: ColumnDef<RowData>[] = [
     header: "",
     enableSorting: false,
     cell: props => (
-      <div className="w-min cursor-pointer rounded p-1 hover:bg-primary-200">
-        <Icon name={IconNames.ELIPSES} className="roudn h-4 w-4 rounded-sm text-grey-720 hover:bg-primary-200" />
+      <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
+        <Icon
+          name={IconNames.IC_ARROW_COLLAPSE}
+          className="h-4 w-4 rotate-90 rounded-sm text-grey-720 hover:text-primary"
+        />
       </div>
     ),
     meta: { style: { width: "5%" } }
@@ -247,8 +253,11 @@ const TABLE_COLUMNS_HECTARES_LAND_USE: ColumnDef<RowData>[] = [
     header: "",
     enableSorting: false,
     cell: props => (
-      <div className="w-min cursor-pointer rounded p-1 hover:bg-primary-200">
-        <Icon name={IconNames.ELIPSES} className="roudn h-4 w-4 rounded-sm text-grey-720 hover:bg-primary-200" />
+      <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
+        <Icon
+          name={IconNames.IC_ARROW_COLLAPSE}
+          className="h-4 w-4 rotate-90 rounded-sm text-grey-720 hover:text-primary"
+        />
       </div>
     ),
     meta: { style: { width: "5%" } }
@@ -546,8 +555,11 @@ const DataCard = ({
           header: "",
           enableSorting: false,
           cell: props => (
-            <div className="w-min cursor-pointer rounded p-1 hover:bg-primary-200">
-              <Icon name={IconNames.ELIPSES} className="roudn h-4 w-4 rounded-sm text-grey-720 hover:bg-primary-200" />
+            <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
+              <Icon
+                name={IconNames.IC_ARROW_COLLAPSE}
+                className="h-4 w-4 rotate-90 rounded-sm text-grey-720 hover:text-primary"
+              />
             </div>
           ),
           meta: { style: { top: `${topHeaderFirstTable}`, borderRadius: "0" } }
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/EcoRegionDoughnutChart.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/EcoRegionDoughnutChart.tsx
index c0a4efc4..fd8c26ab 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/components/EcoRegionDoughnutChart.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/EcoRegionDoughnutChart.tsx
@@ -84,13 +84,13 @@ const EcoRegionDoughnutChart: React.FC<EcoRegionDoughnutChartProps> = ({ data })
   };
 
   return (
-    <div className="relative h-80 w-full">
+    <div className="relative flex h-80 w-full items-center justify-center">
       <ResponsiveContainer width="100%" height="100%">
-        <PieChart margin={{ right: 0, left: 0, top: 0, bottom: 0 }}>
+        <PieChart>
           <Tooltip content={<CustomTooltip />} />
           <Pie
             data={chartData}
-            cx={200}
+            cx="50%"
             cy="50%"
             innerRadius={100}
             outerRadius={140}
@@ -101,7 +101,7 @@ const EcoRegionDoughnutChart: React.FC<EcoRegionDoughnutChartProps> = ({ data })
             activeIndex={activeIndex}
             activeShape={renderActiveShape}
           >
-            <Label position="center" className="text-sm font-bold">
+            <Label position="center" className="text-20-semibold !font-semibold !text-darkCustom">
               ECO-REGION
             </Label>
             {chartData.map((entry, index) => (
@@ -114,8 +114,7 @@ const EcoRegionDoughnutChart: React.FC<EcoRegionDoughnutChartProps> = ({ data })
             align="right"
             verticalAlign="middle"
             wrapperStyle={{
-              right: 0,
-              left: 400,
+              right: "calc(50% - 261px)",
               paddingLeft: 0
             }}
           />

From cf68b3d681eb8e8c83c1f9eb7d61ca65e176f1d0 Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 13 Dec 2024 13:55:25 -0400
Subject: [PATCH 2/2] [TM-1468] change style in modal and content graphic

---
 .../ResourceTabs/MonitoredTab/components/DataCard.tsx        | 2 +-
 src/components/extensive/Modal/ModalRunAnalysis.tsx          | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
index 9d04869a..3c04305f 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
@@ -655,7 +655,7 @@ const DataCard = ({
             </div>
           </When>
           <When condition={tabActive === 1}>
-            <div className="relative z-[10] flex 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-50", {
                   hidden: selected.includes("6")
diff --git a/src/components/extensive/Modal/ModalRunAnalysis.tsx b/src/components/extensive/Modal/ModalRunAnalysis.tsx
index 172bcc5f..c3231103 100644
--- a/src/components/extensive/Modal/ModalRunAnalysis.tsx
+++ b/src/components/extensive/Modal/ModalRunAnalysis.tsx
@@ -117,6 +117,11 @@ const ModalRunAnalysis: FC<ModalRunAnalysisProps> = ({
         <br />
         <br />
         <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
       </div>
       <div className="flex w-full justify-end gap-3 px-8 py-4">
         <When condition={!!secondaryButtonProps}>