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..."
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) => (

10
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