style: update eval bars

Author: kevinjosethomas

src/components/HorizontalEvaluationBar/HorizontalEvaluationBar.tsx

@@ -15,11 +15,10 @@ export const HorizontalEvaluationBar: React.FC<Props> = ({
   width = Math.max(0, Math.min(100, width))
 
   return (
-    <div className="relative flex h-6 w-[75vh] max-w-[70vw] flex-col justify-center overflow-hidden rounded-sm bg-engine-1">
-      <div className="absolute left-0 top-0 z-0 h-full w-full bg-black bg-opacity-40" />
+    <div className="relative flex h-6 w-[75vh] max-w-[70vw] flex-col justify-center overflow-hidden rounded-sm bg-engine-3/30">
       <p className="z-10 ml-2 whitespace-nowrap text-sm">{label}</p>
       <div
-        className="absolute bottom-0 left-0 z-0 h-full w-full transform rounded-r-sm bg-engine-1 duration-300"
+        className="absolute bottom-0 left-0 z-0 h-full w-full transform rounded-r-sm bg-engine-3 duration-300"
         style={{ width: `${width}%` }}
       />
     </div>

src/components/VerticalEvaluationBar/VerticalEvaluationBar.tsx

@@ -14,8 +14,7 @@ export const VerticalEvaluationBar: React.FC<Props> = ({
   const height = ((value ?? min - min) / (max - min)) * 100
 
   return (
-    <div className="relative flex h-[75vh] max-h-[70vw] w-6 flex-col justify-end overflow-hidden rounded-sm bg-human-4">
-      <div className="absolute left-0 top-0 z-0 h-full w-full bg-black bg-opacity-40" />
+    <div className="relative flex h-[75vh] max-h-[70vw] w-6 flex-col justify-end overflow-hidden rounded-sm bg-human-3/30">
       <p className="z-10 mb-2 -rotate-90 whitespace-nowrap text-sm">{label}</p>
       <div
         className="absolute bottom-0 left-0 z-0 h-full w-full transform rounded-t-sm bg-human-3 duration-300"