From 9e5d284fb8aa2b246887e2e9b07834d8f28eda90 Mon Sep 17 00:00:00 2001
From: Arnaud <arnaud@status.im>
Date: Fri, 4 Oct 2024 18:40:32 +0200
Subject: [PATCH] Add custom color for space allocation component

---
 .../SpaceAllocation/SpaceAllocation.tsx       | 36 +++++++++++++------
 .../SpaceAllocation/spaceAllocation.css       | 32 -----------------
 2 files changed, 26 insertions(+), 42 deletions(-)

diff --git a/src/components/SpaceAllocation/SpaceAllocation.tsx b/src/components/SpaceAllocation/SpaceAllocation.tsx
index 684f60f..3471538 100644
--- a/src/components/SpaceAllocation/SpaceAllocation.tsx
+++ b/src/components/SpaceAllocation/SpaceAllocation.tsx
@@ -2,11 +2,23 @@ import { SimpleText } from "../SimpleText/SimpleText";
 import { PrettyBytes } from "../utils/bytes";
 import "./spaceAllocation.css";
 
+export type SpaceAllocationItem = {
+  // The title displayed
+  title: string;
+
+  // The dataset size
+  size: number;
+
+  // The custom classname
+  className?: string;
+
+  // The color can be any html color value valid,
+  // rgb, hexa...
+  color: string;
+};
+
 type Props = {
-  data: {
-    title: string;
-    size: number;
-  }[];
+  data: SpaceAllocationItem[];
 };
 
 export function SpaceAllocation({ data }: Props) {
@@ -15,20 +27,24 @@ export function SpaceAllocation({ data }: Props) {
   return (
     <>
       <div className="nodeSpaceAllocation-bar">
-        {data.map((d, index) => (
+        {data.map((d) => (
           <span
             key={d.title}
-            className={`nodeSpaceAllocation-barItem nodeSpaceAllocation-barQuota nodeSpaceAllocation-quota-${index}`}
-            style={{ width: (d.size / total) * 100 + "%" }}
+            className={`nodeSpaceAllocation-barItem nodeSpaceAllocation-barQuota ${d.className || ""}`}
+            style={{
+              width: (d.size / total) * 100 + "%",
+              backgroundColor: d.color,
+            }}
           ></span>
         ))}
       </div>
 
       <div className="nodeSpaceAllocation-legend">
-        {data.map((d, index) => (
-          <div key={d.title} className="nodeSpaceAllocation-legendRow">
+        {data.map((d) => (
+          <div key={d.title} className={"nodeSpaceAllocation-legendRow"}>
             <div
-              className={`nodeSpaceAllocation-legendItem nodeSpaceAllocation-quota nodeSpaceAllocation-quota-${index}`}
+              className={`nodeSpaceAllocation-legendItem nodeSpaceAllocation-quota`}
+              style={{ backgroundColor: d.color }}
             ></div>
             <div className="nodeSpaceAllocation-legendItem-text">
               <small>{d.title}</small>
diff --git a/src/components/SpaceAllocation/spaceAllocation.css b/src/components/SpaceAllocation/spaceAllocation.css
index 88d6ba1..06a1098 100644
--- a/src/components/SpaceAllocation/spaceAllocation.css
+++ b/src/components/SpaceAllocation/spaceAllocation.css
@@ -21,38 +21,6 @@
   border-radius: var(--codex-border-radius);
 }
 
-.nodeSpaceAllocation-quota-0 {
-  background-color: var(--codex-color-primary);
-}
-
-.nodeSpaceAllocation-quota-1 {
-  background-color: #f9fa93;
-}
-
-.nodeSpaceAllocation-quota-2 {
-  background-color: var(--codex-color);
-}
-
-.nodeSpaceAllocation-quota-3 {
-  background-color: #cd853f;
-}
-
-.nodeSpaceAllocation-quota-4 {
-  background-color: #d2b48c;
-}
-
-.nodeSpaceAllocation-quota-5 {
-  background-color: #ffdab9;
-}
-
-.nodeSpaceAllocation-quota-6 {
-  background-color: #ffb74d;
-}
-
-.nodeSpaceAllocation-quota-7 {
-  background-color: #9c27b0;
-}
-
 .nodeSpaceAllocation-legend {
   display: flex;
   gap: 0.75rem;