chore: migrated eval bars to tailwindcss

src/components/HorizontalEvaluationBar/HorizontalEvaluationBar.tsx

@@ -17,9 +17,13 @@ export const HorizontalEvaluationBar: React.FC<Props> = ({
   width = Math.max(0, Math.min(100, width))
 
   return (
-    <div className={styles.container}>
-      <p className={styles.label}>{label}</p>
-      <div className={styles.content} style={{ width: `${width}%` }} />
+    <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" />
+      <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"
+        style={{ width: `${width}%` }}
+      />
     </div>
   )
 }

src/components/VerticalEvaluationBar/VerticalEvaluationBar.tsx

@@ -16,9 +16,13 @@ export const VerticalEvaluationBar: React.FC<Props> = ({
   const height = ((value ?? min - min) / (max - min)) * 100
 
   return (
-    <div className={styles.container}>
-      <p className={styles.label}>{label}</p>
-      <div className={styles.content} style={{ height: `${height}%` }} />
+    <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" />
+      <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"
+        style={{ height: `${height}%` }}
+      />
     </div>
   )
 }

src/pages/analysis/[...id].tsx

@@ -312,7 +312,7 @@ const Analysis: React.FC<Props> = ({
           <div>
             <VerticalEvaluationBar
               value={moveEvaluation?.maiaWr}
-              label="Maia Probability"
+              label="Maia White Win %"
             />
           </div>
           <div

src/pages/train.tsx

@@ -348,7 +348,7 @@ const Train: React.FC<Props> = ({
           <div>
             <VerticalEvaluationBar
               value={moveEvaluation?.maia}
-              label="Maia Probability"
+              label="Maia White Win %"
             />
           </div>
           <div