[TM-1425] edit style text monitored sec barChart (#753)

* [TM-1425] text style dropdown monitored indicator * [TM-1425] text style dropdown monitored indicator * [TM-1425] text style dropdown monitored indicator and text in barChar
wri · Dec 17, 2024 · 7294de1 · 7294de1
1 parent 0a7af7f
commit 7294de1
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 12 deletions.
diff --git 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
@@ -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} total={record.total_hectares_restored_sum} />
   </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
@@ -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
@@ -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,