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

Fix dropdown and input dark mode theming in draft page

Browse source 
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
This commit is contained in:
Claude 2026-02-23 01:51:40 +00:00
parent 34da0594d1
commit f624e9d425
No known key found for this signature in database
2 changed files with 7 additions and 7 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..." placeholder="Search participants..."
value={searchQuery} value={searchQuery}
onChange={(e) => onSearchChange(e.target.value)} 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"> <div className="flex gap-3">
@ -71,7 +71,7 @@ export function AvailableParticipantsSection({
<select <select
value={sportFilter} value={sportFilter}
onChange={(e) => onSportFilterChange(e.target.value)} 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> <option value="all">All Sports</option>
{uniqueSports.map((sport) => ( {uniqueSports.map((sport) => (

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

@ -1280,12 +1280,12 @@ export default function DraftRoom() {
<input <input
type="text" type="text"
placeholder="Search participants..." 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} value={dialogSearchQuery}
onChange={(e) => setDialogSearchQuery(e.target.value)} onChange={(e) => setDialogSearchQuery(e.target.value)}
/> />
<select <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} value={dialogSportFilter}
onChange={(e) => setDialogSportFilter(e.target.value)} onChange={(e) => setDialogSportFilter(e.target.value)}
> >
@ -1389,12 +1389,12 @@ export default function DraftRoom() {
<input <input
type="text" type="text"
placeholder="Search participants..." 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} value={dialogSearchQuery}
onChange={(e) => setDialogSearchQuery(e.target.value)} onChange={(e) => setDialogSearchQuery(e.target.value)}
/> />
<select <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} value={dialogSportFilter}
onChange={(e) => setDialogSportFilter(e.target.value)} onChange={(e) => setDialogSportFilter(e.target.value)}
> >
@ -1562,7 +1562,7 @@ export default function DraftRoom() {
step="any" step="any"
value={timeBankAmount} value={timeBankAmount}
onChange={(e) => setTimeBankAmount(e.target.value)} 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" placeholder="Amount"
/> />
<select <select