primary color and shadows

Assets/web/src/Components/CenterGrowSlider.js

@@ -1,12 +1,9 @@
 /* eslint-disable react/prop-types */
 import React from "react";
-
 export default function CenterGrowSlider({
   value,
   min = -50,
   max = 50,
-  positiveColor = "#4caf50",
-  negativeColor = "#f44336",
   backgroundColor = "rgba(150,150,150,0.3)",
   height = 8,
 }) {
@@ -39,21 +36,21 @@ export default function CenterGrowSlider({
     >
       {/* Negative (left) bar */}
       <div
+        className="bg-primary shadow-primary/40 shadow-[0_0_16px,inset_0_1px_2px_rgba(255,255,255,0.3)]"
         style={{
           ...baseStyle,
           right: "50%", // anchored to the center
           width: `${negativeWidth}%`,
-          backgroundColor: negativeColor,
         }}
       />
 
       {/* Positive (right) bar */}
       <div
+        className="bg-primary shadow-primary/40 shadow-[0_0_16px,inset_0_1px_2px_rgba(255,255,255,0.3)]"
         style={{
           ...baseStyle,
           left: "50%", // anchored to the center
           width: `${positiveWidth}%`,
-          backgroundColor: positiveColor,
         }}
       />
     </div>