[TM-1468] clear style monitored (#741)

* [TM-1468] change style in table and pieChart * [TM-1468] change style in modal and content graphic
wri · Dec 13, 2024 · 1a97ce7 · 1a97ce7
1 parent 94577ad
commit 1a97ce7
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 15 deletions.
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
@@ -171,8 +171,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%" } }
@@ -213,8 +216,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%" } }
@@ -255,8 +261,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%" } }
@@ -549,8 +558,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" } }
@@ -645,7 +657,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/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
             }}
           />

diff --git a/src/components/extensive/Modal/ModalRunAnalysis.tsx b/src/components/extensive/Modal/ModalRunAnalysis.tsx
@@ -121,6 +121,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}>
-Original file line number
+Diff line change
@@ Expand Up / @@ -121,6 +121,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}>
@@ Expand Down @@