From 1a4392327d50ab416fc8491bfd82259dc5bd5e8f Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Sat, 23 Nov 2024 14:20:45 -0800
Subject: [PATCH] style: improve UI elements for new analysis dropdowns (#4)

---
 src/api/analysis/analysis.ts                 | 10 ++++++
 src/components/Analysis/AnalysisGameList.tsx | 32 +++++++++++++++-----
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/api/analysis/analysis.ts b/src/api/analysis/analysis.ts
index 61da8cf..4e89899 100644
--- a/src/api/analysis/analysis.ts
+++ b/src/api/analysis/analysis.ts
@@ -309,6 +309,16 @@ export const getAnalyzedUserGame = async (
   const blackPlayer = data['black_player']
   const whitePlayer = data['white_player']
 
+  const maiaPattern = /maia_kdd_1\d00/
+
+  if (maiaPattern.test(blackPlayer.name)) {
+    blackPlayer.name = blackPlayer.name.replace('maia_kdd_', 'Maia ')
+  }
+
+  if (maiaPattern.test(whitePlayer.name)) {
+    whitePlayer.name = whitePlayer.name.replace('maia_kdd_', 'Maia ')
+  }
+
   const maiaEvaluations: { [model: string]: MoveMap[] } = {}
   const positionEvaluations: { [model: string]: PositionEvaluation[] } = {}
   const availableMoves: AvailableMoves[] = []
diff --git a/src/components/Analysis/AnalysisGameList.tsx b/src/components/Analysis/AnalysisGameList.tsx
index 63e6d25..2a0cc26 100644
--- a/src/components/Analysis/AnalysisGameList.tsx
+++ b/src/components/Analysis/AnalysisGameList.tsx
@@ -101,25 +101,43 @@ const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
       <div className="flex min-h-12 w-full items-center justify-center overflow-hidden bg-background-2">
         <button
           onClick={() => setSelected('pgn')}
-          className={`relative z-10 flex h-full w-full items-center justify-center py-2 pb-3 transition duration-300 hover:bg-background-3 ${['pgn', 'hand', 'brain', 'play'].includes(selected) && 'bg-background-5'}`}
+          className={`relative z-10 flex h-full w-full items-center justify-center gap-1 py-2 pb-3 transition duration-300 ${selected !== 'tournament' ? 'bg-human-4/40' : 'hover:bg-background-3'}`}
         >
-          <p className="z-10 font-medium text-primary">Your Games</p>
-          {['pgn', 'hand', 'brain', 'play'].includes(selected) && (
+          <p
+            className={`z-10 font-medium transition duration-200 ${selected !== 'tournament' ? 'text-human-1' : 'text-primary'}`}
+          >
+            Your Games
+          </p>
+          <i
+            className={`material-symbols-outlined text-lg transition duration-200 ${selected !== 'tournament' ? 'text-human-1' : 'text-primary/80'}`}
+          >
+            keyboard_arrow_down
+          </i>
+          {selected !== 'tournament' && (
             <motion.div
               layoutId="selected-highlight"
-              className="absolute bottom-0 left-0 h-1 w-full rounded bg-primary"
+              className="absolute bottom-0 left-0 h-1 w-full rounded bg-human-2/80"
             />
           )}
         </button>
         <button
           onClick={() => setSelected('tournament')}
-          className={`relative z-10 flex h-full w-full items-center justify-center py-2 pb-3 transition duration-300 hover:bg-background-3 ${selected === 'tournament' && 'bg-background-5'}`}
+          className={`relative z-10 flex h-full w-full items-center justify-center gap-1 py-2 pb-3 transition duration-300 ${selected === 'tournament' ? 'bg-human-4/40' : 'hover:bg-background-3'}`}
         >
-          <p className="z-10 font-medium text-primary">WC Matches</p>
+          <p
+            className={`z-10 font-medium transition duration-200 ${selected === 'tournament' ? 'text-human-1' : 'text-primary'}`}
+          >
+            WC Matches
+          </p>
+          <i
+            className={`material-symbols-outlined text-lg transition duration-200 ${selected === 'tournament' ? 'text-human-1' : 'text-primary/80'}`}
+          >
+            keyboard_arrow_down
+          </i>
           {selected === 'tournament' && (
             <motion.div
               layoutId="selected-highlight"
-              className="absolute bottom-0 left-0 h-1 w-full rounded bg-primary"
+              className="absolute bottom-0 left-0 h-1 w-full rounded bg-human-2/80"
             />
           )}
         </button>