fix: scorecard cells background color

Vizzuality · Jan 28, 2025 · d59e930 · d59e930
1 parent 3fed571
commit d59e930
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/client/src/components/ui/score-card.tsx b/client/src/components/ui/score-card.tsx
@@ -13,12 +13,16 @@ const DEFAULT_BG_CLASSES: Record<PROJECT_SCORE, string> = {
   [PROJECT_SCORE.LOW]: "bg-ramps-red",
 };
 
+export const getScoreIndicatorBgClass = (value: PROJECT_SCORE | null) => {
+  return value ? DEFAULT_BG_CLASSES[value] : "bg-gray-300";
+};
+
 export const ScoreIndicator = ({ value, className }: ScoreIndicatorProps) => {
   return (
     <div
       className={cn(
         "flex h-10 items-center justify-center text-sm font-normal capitalize text-deep-ocean",
-        value ? DEFAULT_BG_CLASSES[value] : "bg-gray-300",
+        getScoreIndicatorBgClass(value),
         className,
       )}
     >

diff --git a/client/src/containers/overview/table/view/scorecard-prioritization/index.tsx b/client/src/containers/overview/table/view/scorecard-prioritization/index.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 
 import { ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
 import { projectScorecardQuerySchema } from "@shared/contracts/projects.contract";
+import { PROJECT_SCORE } from "@shared/entities/project-score.enum";
 import { ProjectScorecardView } from "@shared/entities/project-scorecard.view";
 import { keepPreviousData } from "@tanstack/react-query";
 import {
@@ -39,6 +40,7 @@ import {
 import { TABLE_COLUMNS } from "@/containers/overview/table/view/scorecard-prioritization/columns";
 import { filtersToQueryParams } from "@/containers/overview/utils";
 
+import { getScoreIndicatorBgClass } from "@/components/ui/score-card";
 import {
   ScrollableTable,
   TableBody,
@@ -167,9 +169,16 @@ export function ScoredCardPrioritizationTable() {
                 {row.getVisibleCells().map((cell) => (
                   <TableCell
                     key={cell.id}
-                    className={cn({
-                      "p-0": cell.column.id !== "projectName",
-                    })}
+                    className={cn(
+                      getScoreIndicatorBgClass(
+                        cell.row.original[
+                          cell.column.id as keyof ProjectScorecardView
+                        ] as PROJECT_SCORE,
+                      ),
+                      {
+                        "p-0": cell.column.id !== "projectName",
+                      },
+                    )}
                   >
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </TableCell>