style: improve dropdowns+tooltips

Author: kevinjosethomas

src/components/Analysis/MoveTooltip.tsx

@@ -39,12 +39,14 @@ export const MoveTooltip: React.FC<MoveTooltipProps> = ({
 
   const tooltipContent = (
     <div
-      className={`fixed z-50 flex w-auto min-w-[12rem] flex-col overflow-hidden rounded-md border border-glassBorder bg-glass text-primary backdrop-blur-md ${onClickMove ? 'pointer-events-auto cursor-pointer' : 'pointer-events-none'}`}
+      className={`fixed z-50 flex w-auto min-w-[12rem] flex-col overflow-hidden rounded-md border border-white/10 text-white/90 ${onClickMove ? 'pointer-events-auto cursor-pointer' : 'pointer-events-none'}`}
       style={{
         left: position.x + 15,
         top: position.y - 10,
         transform:
           position.x > window.innerWidth - 250 ? 'translateX(-100%)' : 'none',
+        background:
+          'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), #171214',
       }}
       onClick={onClickMove ? () => onClickMove(move) : undefined}
       onKeyDown={onClickMove ? handleKeyDown : undefined}
@@ -53,7 +55,7 @@ export const MoveTooltip: React.FC<MoveTooltipProps> = ({
       aria-label={onClickMove ? `Make move ${san}` : undefined}
     >
       {/* Header */}
-      <div className="flex w-full justify-between border-b border-glassBorder bg-glass px-3 py-1.5">
+      <div className="flex w-full justify-between border-b border-white/10 bg-transparent px-3 py-1.5">
         <span style={{ color }} className="font-medium">
           {san}
         </span>

src/components/Analysis/MovesByRating.tsx

@@ -242,7 +242,13 @@ export const MovesByRating: React.FC<Props> = ({
           <Tooltip
             content={({ payload }) => {
               return (
-                <div className="flex w-32 flex-col rounded-md border border-glassBorder bg-glass pb-2 backdrop-blur-md">
+                <div
+                  className="flex w-32 flex-col rounded-md border border-white/10 pb-2 text-white/90"
+                  style={{
+                    background:
+                      'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), #171214',
+                  }}
+                >
                   <div className="flex px-3 py-2">
                     {payload ? (
                       <p className="text-sm">{payload[0]?.payload.rating}</p>

src/components/Leaderboard/LeaderboardNavBadge.tsx

@@ -49,10 +49,14 @@ export const LeaderboardNavBadge: React.FC<LeaderboardNavBadgeProps> = ({
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -10 }}
             transition={{ duration: 0.2 }}
-            className="absolute right-0 top-full z-50 w-64 overflow-hidden rounded border border-white/10 bg-background-1 shadow-lg"
+            className="absolute right-0 top-full z-50 w-64 overflow-hidden rounded-md border border-white/10 text-white/90 shadow-lg"
+            style={{
+              background:
+                'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), #171214',
+            }}
           >
-            <div className="border-b border-background-3 px-3 py-2">
-              <h3 className="text-sm font-medium text-primary">
+            <div className="border-b border-white/10 px-3 py-2">
+              <h3 className="text-sm font-medium text-white/90">
                 You&apos;re on the leaderboard!
               </h3>
             </div>
@@ -61,10 +65,10 @@ export const LeaderboardNavBadge: React.FC<LeaderboardNavBadgeProps> = ({
                 <Link
                   key={position.gameType}
                   href="/leaderboard"
-                  className="flex items-center justify-between px-3 py-2 hover:bg-background-2/60"
+                  className="flex items-center justify-between px-3 py-2 text-white/90 transition-colors hover:bg-[rgba(255,255,255,0.04)]"
                 >
                   <div className="flex flex-col">
-                    <span className="text-sm font-medium">
+                    <span className="text-sm font-medium text-white/90">
                       {position.gameName}
                     </span>
                     <span className="text-xs text-secondary">
@@ -84,7 +88,7 @@ export const LeaderboardNavBadge: React.FC<LeaderboardNavBadgeProps> = ({
                 </Link>
               ))}
             </div>
-            <div className="border-t border-background-3 px-3 py-2">
+            <div className="border-t border-white/10 px-3 py-2">
               <Link
                 href="/leaderboard"
                 className="text-xs text-secondary hover:text-primary"