From a3d5d5ea552e2ebae141d40688baab0c132c9147 Mon Sep 17 00:00:00 2001
From: Chris Parsons <438676+chrisparsons83@users.noreply.github.com>
Date: Sun, 22 Feb 2026 18:00:21 -0800
Subject: [PATCH] Fix text color visibility in form inputs and selects (#27)

* 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

* Fix missing text-foreground on time bank unit select

The seconds/minutes/hours select in the time bank dialog had
bg-background but was missing text-foreground, causing text
color to fall back to browser default in dark mode.

https://claude.ai/code/session_01FZz7kndEqWqFScyq4R6Wxn

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 .../draft/AvailableParticipantsSection.tsx           |  4 ++--
 app/routes/leagues/$leagueId.draft.$seasonId.tsx     | 12 ++++++------
 2 files changed, 8 insertions(+), 8 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..936013d 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
@@ -1570,7 +1570,7 @@ export default function DraftRoom() {
                 onChange={(e) =>
                   setTimeBankUnit(e.target.value as "seconds" | "minutes" | "hours")
                 }
-                className="px-3 py-2 border rounded-md bg-background text-sm"
+                className="px-3 py-2 border rounded-md bg-background text-foreground text-sm"
               >
                 <option value="seconds">Seconds</option>
                 <option value="minutes">Minutes</option>