From f624e9d425b4f5debcb2e92b3ee90698288b0618 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 23 Feb 2026 01:51:40 +0000
Subject: [PATCH] Fix dropdown and input dark mode theming in draft page

Add bg-background and text-foreground classes to native select and
input elements so they use theme CSS variables instead of browser
defaults, which rendered as white in dark mode.

https://claude.ai/code/session_01FZz7kndEqWqFScyq4R6Wxn
---
 app/components/draft/AvailableParticipantsSection.tsx |  4 ++--
 app/routes/leagues/$leagueId.draft.$seasonId.tsx      | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/draft/AvailableParticipantsSection.tsx b/app/components/draft/AvailableParticipantsSection.tsx
index 65ef28e..0f47df9 100644
--- a/app/components/draft/AvailableParticipantsSection.tsx
+++ b/app/components/draft/AvailableParticipantsSection.tsx
@@ -63,7 +63,7 @@ export function AvailableParticipantsSection({
             placeholder="Search participants..."
             value={searchQuery}
             onChange={(e) => onSearchChange(e.target.value)}
-            className="w-full px-3 py-2 border rounded-md text-sm"
+            className="w-full px-3 py-2 border rounded-md text-sm bg-background text-foreground"
           />
 
           <div className="flex gap-3">
@@ -71,7 +71,7 @@ export function AvailableParticipantsSection({
             <select
               value={sportFilter}
               onChange={(e) => onSportFilterChange(e.target.value)}
-              className="flex-1 px-3 py-2 border rounded-md text-sm"
+              className="flex-1 px-3 py-2 border rounded-md text-sm bg-background text-foreground"
             >
               <option value="all">All Sports</option>
               {uniqueSports.map((sport) => (
diff --git a/app/routes/leagues/$leagueId.draft.$seasonId.tsx b/app/routes/leagues/$leagueId.draft.$seasonId.tsx
index db207e2..4a6ad79 100644
--- a/app/routes/leagues/$leagueId.draft.$seasonId.tsx
+++ b/app/routes/leagues/$leagueId.draft.$seasonId.tsx
@@ -1280,12 +1280,12 @@ export default function DraftRoom() {
               <input
                 type="text"
                 placeholder="Search participants..."
-                className="flex-1 px-3 py-2 border rounded-md bg-background"
+                className="flex-1 px-3 py-2 border rounded-md bg-background text-foreground"
                 value={dialogSearchQuery}
                 onChange={(e) => setDialogSearchQuery(e.target.value)}
               />
               <select
-                className="px-3 py-2 border rounded-md bg-background"
+                className="px-3 py-2 border rounded-md bg-background text-foreground"
                 value={dialogSportFilter}
                 onChange={(e) => setDialogSportFilter(e.target.value)}
               >
@@ -1389,12 +1389,12 @@ export default function DraftRoom() {
               <input
                 type="text"
                 placeholder="Search participants..."
-                className="flex-1 px-3 py-2 border rounded-md bg-background"
+                className="flex-1 px-3 py-2 border rounded-md bg-background text-foreground"
                 value={dialogSearchQuery}
                 onChange={(e) => setDialogSearchQuery(e.target.value)}
               />
               <select
-                className="px-3 py-2 border rounded-md bg-background"
+                className="px-3 py-2 border rounded-md bg-background text-foreground"
                 value={dialogSportFilter}
                 onChange={(e) => setDialogSportFilter(e.target.value)}
               >
@@ -1562,7 +1562,7 @@ export default function DraftRoom() {
                 step="any"
                 value={timeBankAmount}
                 onChange={(e) => setTimeBankAmount(e.target.value)}
-                className="flex-1 px-3 py-2 border rounded-md bg-background text-sm"
+                className="flex-1 px-3 py-2 border rounded-md bg-background text-foreground text-sm"
                 placeholder="Amount"
               />
               <select