Add custom color for space allocation component

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>

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;