refactor tailwind config

Vizzuality · Dec 19, 2024 · 15dec93 · 15dec93
1 parent eccf463
commit 15dec93
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/client/src/containers/overview/table/toolbar/index.tsx b/client/src/containers/overview/table/toolbar/index.tsx
@@ -218,15 +218,15 @@ export default function ToolbarProjectsTable() {
                           Each metric can go from a scale from low to high:
                         </p>
                         <div className="!mt-4 grid grid-cols-3 gap-2 text-center">
-                          <div className="height[fit-content] rounded-md bg-ramps-red p-2 text-sky-blue-950">
+                          <div className="h-fit rounded-md bg-ramps-red p-2 text-sky-blue-950">
                             <div className="font-medium">Low</div>
                             <div className="text-sm">Description of low</div>
                           </div>
-                          <div className="height[fit-content] rounded-md bg-ramps-yellow p-2 text-sky-blue-950">
+                          <div className="h-fit rounded-md bg-ramps-yellow p-2 text-sky-blue-950">
                             <div className="font-medium">Medium</div>
                             <div className="text-sm">Description</div>
                           </div>
-                          <div className="height[fit-content] rounded-md bg-ramps-green p-2 text-sky-blue-950">
+                          <div className="h-fit rounded-md bg-ramps-green p-2 text-sky-blue-950">
                             <div className="font-medium">High</div>
                             <div className="text-sm">Description</div>
                           </div>

diff --git a/client/tailwind.config.ts b/client/tailwind.config.ts
@@ -96,9 +96,11 @@ const config: Config = {
           500: "#EACD3F",
         },
         green: "#90BA36",
-        "ramps-green": "#A4B591",
-        "ramps-yellow": "#F5EBB8",
-        "ramps-red": "#F7BA93",
+        ramps: {
+          green: "#A4B591",
+          yellow: "#F5EBB8",
+          red: "#F7BA93",
+        },
         "deep-ocean": "#132A47",
       },
       borderRadius: {