feat: improve navbar dropdowns + leaderboard tooltips

kevinjosethomas · kevinjosethomas · commit 3c08b996e5e2 · 2025-08-27T23:36:58.000-07:00
diff --git a/src/components/Common/Header.tsx b/src/components/Common/Header.tsx
@@ -75,7 +75,7 @@ export const Header: React.FC = () => {
 
   const userInfo = user?.lichessId ? (
     <div
-      className="relative flex items-center gap-2 rounded-full bg-background-1/50 px-3 py-1.5 transition-all duration-200 hover:bg-background-1"
+      className="relative flex items-center gap-2 rounded-full border border-white/10 bg-[#171214] px-3 py-1.5 transition-all duration-200 hover:border-white/20"
       onMouseEnter={() => setShowProfileDropdown(true)}
       onMouseLeave={() => setShowProfileDropdown(false)}
     >
@@ -99,26 +99,28 @@ export const Header: React.FC = () => {
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -10 }}
             transition={{ duration: 0.2 }}
-            className="absolute bottom-[100%] left-0 z-50 w-full overflow-hidden rounded border border-white/10 bg-background-1 shadow-lg md:bottom-auto md:top-[100%]"
+            className="absolute bottom-[100%] left-0 z-50 w-full overflow-hidden rounded-md border border-white/10 bg-[#171214] md:bottom-auto md:top-[100%]"
           >
-            <Link
-              href="/profile"
-              className="flex w-full items-center justify-start px-3 py-2 text-sm hover:bg-background-2/60"
-            >
-              Profile
-            </Link>
-            <Link
-              href="/settings"
-              className="flex w-full items-center justify-start px-3 py-2 text-sm hover:bg-background-2/60"
-            >
-              Settings
-            </Link>
-            <button
-              onClick={logout}
-              className="flex w-full items-center justify-start px-3 py-2 text-sm hover:bg-background-2/60"
-            >
-              Logout
-            </button>
+            <div className="divide-y divide-white/5">
+              <Link
+                href="/profile"
+                className="flex w-full items-center justify-start px-3 py-2 text-sm text-white/90 transition-colors hover:bg-[rgba(255,255,255,0.04)]"
+              >
+                Profile
+              </Link>
+              <Link
+                href="/settings"
+                className="flex w-full items-center justify-start px-3 py-2 text-sm text-white/90 transition-colors hover:bg-[rgba(255,255,255,0.04)]"
+              >
+                Settings
+              </Link>
+              <button
+                onClick={logout}
+                className="flex w-full items-center justify-start px-3 py-2 text-sm text-white/90 transition-colors hover:bg-[rgba(255,255,255,0.04)]"
+              >
+                Logout
+              </button>
+            </div>
           </motion.div>
         )}
       </AnimatePresence>
@@ -164,28 +166,30 @@ export const Header: React.FC = () => {
                   animate={{ opacity: 1, y: 0 }}
                   exit={{ opacity: 0, y: -10 }}
                   transition={{ duration: 0.2 }}
-                  className="absolute left-0 top-[100%] z-30 w-48 overflow-hidden rounded border border-white/10 bg-background-1 shadow-lg"
+                  className="absolute left-0 top-[100%] z-30 w-48 overflow-hidden rounded-md border border-white/10 bg-[#171214]"
                 >
-                  <button
-                    onClick={() => startGame('againstMaia')}
-                    className="flex w-full items-center justify-start px-3 py-2 text-sm hover:bg-background-2/60"
-                  >
-                    Play Maia
-                  </button>
-                  <button
-                    onClick={() => startGame('handAndBrain')}
-                    className="flex w-full items-center justify-start px-3 py-2 text-sm hover:bg-background-2/60"
-                  >
-                    Play Hand and Brain
-                  </button>
-                  <a
-                    className="flex w-full items-center justify-start px-3 py-2 text-sm hover:bg-background-2/60"
-                    href="https://lichess.org/@/maia1"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Play Maia on Lichess
-                  </a>
+                  <div className="divide-y divide-white/5">
+                    <button
+                      onClick={() => startGame('againstMaia')}
+                      className="flex w-full items-center justify-start px-3 py-2 text-sm text-white/90 transition-colors hover:bg-[rgba(255,255,255,0.04)]"
+                    >
+                      Play Maia
+                    </button>
+                    <button
+                      onClick={() => startGame('handAndBrain')}
+                      className="flex w-full items-center justify-start px-3 py-2 text-sm text-white/90 transition-colors hover:bg-[rgba(255,255,255,0.04)]"
+                    >
+                      Play Hand and Brain
+                    </button>
+                    <a
+                      className="flex w-full items-center justify-start px-3 py-2 text-sm text-white/90 transition-colors hover:bg-[rgba(255,255,255,0.04)]"
+                      href="https://lichess.org/@/maia1"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Play Maia on Lichess
+                    </a>
+                  </div>
                 </motion.div>
               )}
             </AnimatePresence>
@@ -248,30 +252,32 @@ export const Header: React.FC = () => {
                   animate={{ opacity: 1, y: 0 }}
                   exit={{ opacity: 0, y: -10 }}
                   transition={{ duration: 0.2 }}
-                  className="absolute left-0 top-[100%] z-30 w-32 overflow-hidden rounded border border-white/10 bg-background-1 shadow-lg"
+                  className="absolute left-0 top-[100%] z-30 w-32 overflow-hidden rounded-md border border-white/10 bg-[#171214]"
                 >
-                  <Link
-                    href="/blog"
-                    className="flex w-full items-center justify-start px-3 py-2 text-sm hover:bg-background-2/60"
-                  >
-                    Blog
-                  </Link>
-                  <a
-                    target="_blank"
-                    rel="noreferrer"
-                    href="https://twitch.tv/maiachess"
-                    className="flex w-full items-center justify-start px-3 py-2 text-sm hover:bg-background-2/60"
-                  >
-                    Watch
-                  </a>
-                  <a
-                    target="_blank"
-                    rel="noreferrer"
-                    href="https://forms.gle/XYeoTJF4YgUu4Vq28"
-                    className="flex w-full items-center justify-start px-3 py-2 text-sm hover:bg-background-2/60"
-                  >
-                    Feedback
-                  </a>
+                  <div className="divide-y divide-white/5">
+                    <Link
+                      href="/blog"
+                      className="flex w-full items-center justify-start px-3 py-2 text-sm text-white/90 transition-colors hover:bg-[rgba(255,255,255,0.04)]"
+                    >
+                      Blog
+                    </Link>
+                    <a
+                      target="_blank"
+                      rel="noreferrer"
+                      href="https://twitch.tv/maiachess"
+                      className="flex w-full items-center justify-start px-3 py-2 text-sm text-white/90 transition-colors hover:bg-[rgba(255,255,255,0.04)]"
+                    >
+                      Watch
+                    </a>
+                    <a
+                      target="_blank"
+                      rel="noreferrer"
+                      href="https://forms.gle/XYeoTJF4YgUu4Vq28"
+                      className="flex w-full items-center justify-start px-3 py-2 text-sm text-white/90 transition-colors hover:bg-[rgba(255,255,255,0.04)]"
+                    >
+                      Feedback
+                    </a>
+                  </div>
                 </motion.div>
               )}
             </AnimatePresence>
diff --git a/src/components/Leaderboard/LeaderboardEntry.tsx b/src/components/Leaderboard/LeaderboardEntry.tsx
@@ -29,7 +29,8 @@ export const LeaderboardEntry = ({
 
   const entryKey = `${typeId}-${display_name}-${index}`
   const isPopupVisible = activePopup === entryKey
-  const isCurrentUser = user?.lichessId?.toLowerCase() === display_name.toLowerCase()
+  const isCurrentUser =
+    user?.lichessId?.toLowerCase() === display_name.toLowerCase()
 
   let ratingKey:
     | 'regularRating'
@@ -133,12 +134,8 @@ export const LeaderboardEntry = ({
 
   return (
     <div
-      className={`group relative flex w-full items-center justify-between px-3 py-1 text-sm transition-colors duration-200 ${
-        isCurrentUser 
-          ? 'bg-yellow-500/10 hover:bg-yellow-500/15' 
-          : index % 2 === 0 
-            ? 'bg-transparent hover:bg-white/3' 
-            : 'bg-white/3 hover:bg-white/5'
+      className={`group relative flex w-full items-center justify-between px-3 py-1 text-sm transition-colors duration-200 hover:bg-white/[3%] ${
+        isCurrentUser ? 'bg-yellow-500/10 hover:bg-yellow-500/15' : ''
       }`}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
@@ -156,8 +153,8 @@ export const LeaderboardEntry = ({
       </div>
       <p className="text-sm font-medium text-white/95">{elo}</p>
       {isPopupVisible && stats && (
-        <div className="absolute left-0 top-[100%] z-50 flex w-full max-w-[24rem] flex-col overflow-hidden rounded border border-white/20 bg-black backdrop-blur-sm">
-          <div className="flex w-full justify-between border-b border-white/10 bg-black/40 px-3 py-2">
+        <div className="absolute left-0 top-[100%] z-50 flex w-full max-w-[24rem] flex-col overflow-hidden rounded border border-white/20 bg-[#171214]">
+          <div className="flex w-full justify-between border-b border-white/10 bg-[#171214] px-3 py-2">
             <p className="text-sm text-white/95">
               <span className="font-bold">{display_name}</span>&apos;s {type}{' '}
               Statistics
diff --git a/src/components/Settings/ChessboardSettings.tsx b/src/components/Settings/ChessboardSettings.tsx
@@ -76,22 +76,25 @@ export const ChessboardSettings: React.FC = () => {
   return (
     <div className="from-white/8 to-white/4 flex flex-col gap-4 rounded-lg border border-white/10 bg-gradient-to-br px-5 pb-0 pt-5 backdrop-blur-md transition-all duration-300">
       <div className="flex flex-col items-start justify-between">
-        <h3 className="text-lg font-semibold text-white/95">Chessboard Theme</h3>
+        <h3 className="text-lg font-semibold text-white/95">
+          Chessboard Theme
+        </h3>
         <p className="text-sm text-white/70">
-          Choose your preferred chessboard style. Changes will apply to all chess boards across the platform.
+          Choose your preferred chessboard style. Changes will apply to all
+          chess boards across the platform.
         </p>
       </div>
 
       <div className="flex flex-col gap-4">
         {/* Theme Grid */}
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
+        <div className="flex flex-row flex-wrap justify-around gap-3">
           {ALL_THEMES.map((theme) => (
             <label
               key={theme}
               className={`group relative flex cursor-pointer select-none items-center justify-center overflow-hidden rounded-md border p-2 text-white/90 backdrop-blur-md transition-all duration-300 ${
                 settings.chessboardTheme === theme
                   ? 'border-red-500/40 bg-gradient-to-br from-red-500/15 to-red-500/5 shadow-white/5'
-                  : 'border-white/10 bg-gradient-to-br from-white/8 to-white/4 hover:border-white/20 hover:from-white/12 hover:to-white/6 hover:shadow-md hover:shadow-white/5 hover:-translate-y-0.5'
+                  : 'from-white/8 to-white/4 hover:from-white/12 hover:to-white/6 border-white/10 bg-gradient-to-br hover:-translate-y-0.5 hover:border-white/20 hover:shadow-md hover:shadow-white/5'
               }`}
             >
               <input
@@ -103,7 +106,7 @@ export const ChessboardSettings: React.FC = () => {
                 className="sr-only"
               />
               <div
-                className={`theme-preview-${theme} aspect-square h-16 w-16 overflow-hidden rounded`}
+                className={`theme-preview-${theme} aspect-square h-16 min-h-16 w-16 min-w-16 overflow-hidden rounded`}
               >
                 <Chessground
                   contained
@@ -120,9 +123,13 @@ export const ChessboardSettings: React.FC = () => {
 
         <div className="-mx-5 mt-1 border-t border-white/10 px-5 py-4 text-white/80">
           <div className="flex items-start gap-2">
-            <span className="material-symbols-outlined inline !text-base text-white/70">info</span>
+            <span className="material-symbols-outlined inline !text-base text-white/70">
+              info
+            </span>
             <p className="text-sm">
-              Theme changes take effect immediately and will be remembered across browser sessions. Preview shows how the board will appear in games.
+              Theme changes take effect immediately and will be remembered
+              across browser sessions. Preview shows how the board will appear
+              in games.
             </p>
           </div>
         </div>
diff --git a/src/components/Settings/SettingsPage.tsx b/src/components/Settings/SettingsPage.tsx
@@ -54,11 +54,14 @@ export const SettingsPage: React.FC = () => {
       {/* Header */}
       <motion.div variants={itemVariants} className="flex flex-col gap-2">
         <div className="flex items-center gap-3">
-          <span className="material-symbols-outlined text-4xl text-white/90">settings</span>
+          <span className="material-symbols-outlined text-4xl text-white/90">
+            settings
+          </span>
           <h1 className="text-3xl font-bold text-white">Settings</h1>
         </div>
         <p className="text-white/70">
-          Customize your Maia Chess experience. Settings are saved locally in your browser.
+          Customize your Maia Chess experience. Settings are saved locally in
+          your browser.
         </p>
       </motion.div>
 
