From ebb18c46fbacdacfe8732fd32f7f7bdc51f223ee Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Fri, 1 Nov 2024 17:42:08 -0700
Subject: [PATCH] chore: migrated eval bars to tailwindcss

---
 .../HorizontalEvaluationBar.tsx                        | 10 +++++++---
 .../VerticalEvaluationBar/VerticalEvaluationBar.tsx    | 10 +++++++---
 src/pages/analysis/[...id].tsx                         |  2 +-
 src/pages/train.tsx                                    |  2 +-
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/HorizontalEvaluationBar/HorizontalEvaluationBar.tsx b/src/components/HorizontalEvaluationBar/HorizontalEvaluationBar.tsx
index 3886488..0b1d17c 100644
--- a/src/components/HorizontalEvaluationBar/HorizontalEvaluationBar.tsx
+++ b/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>
   )
 }
diff --git a/src/components/VerticalEvaluationBar/VerticalEvaluationBar.tsx b/src/components/VerticalEvaluationBar/VerticalEvaluationBar.tsx
index 015827a..c04019e 100644
--- a/src/components/VerticalEvaluationBar/VerticalEvaluationBar.tsx
+++ b/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>
   )
 }
diff --git a/src/pages/analysis/[...id].tsx b/src/pages/analysis/[...id].tsx
index 9ce90da..3a2a2ae 100644
--- a/src/pages/analysis/[...id].tsx
+++ b/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
diff --git a/src/pages/train.tsx b/src/pages/train.tsx
index 5e0c51b..2735475 100644
--- a/src/pages/train.tsx
+++ b/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