chrisp/brackt
1
1
Fork 0
Code Issues 42 Pull requests Projects Releases Packages Wiki Activity Actions

Fix text color visibility in form inputs and selects (#27)

Browse source 
* 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>
This commit is contained in:
Chris Parsons 2026-02-22 18:00:21 -08:00 • committed by GitHub
parent 34da0594d1
commit a3d5d5ea55
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/components/draft/AvailableParticipantsSection.tsx
View file

@ -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) => (

12
app/routes/leagues/$leagueId.draft.$seasonId.tsx
View file

@ -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>