dropdown icon fix

main
btahir89 12 months ago
parent a6a7dedec4
commit 130cd862a4

@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import { X, RotateCcw } from 'lucide-react' import { X, RotateCcw, ChevronDown } from 'lucide-react'
import { themes } from '@/lib/lofi-themes' import { themes } from '@/lib/lofi-themes'
interface SettingsModalProps { interface SettingsModalProps {
@ -60,18 +60,26 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
> >
Theme Theme
</label> </label>
<select <div className="relative">
id="theme-select" <select
value={currentTheme} id="theme-select"
onChange={(e) => setCurrentTheme(e.target.value)} value={currentTheme}
className="w-full rounded-[var(--lofi-button-radius)] border border-[var(--lofi-border)] bg-[var(--lofi-card-hover)] px-3 py-2 text-[var(--lofi-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--lofi-accent)]" onChange={(e) => setCurrentTheme(e.target.value)}
> className="w-full appearance-none rounded-[var(--lofi-button-radius)] border border-[var(--lofi-border)] bg-[var(--lofi-card-hover)] px-3 py-2 text-[var(--lofi-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--lofi-accent)]"
{Object.values(themes).map((theme) => ( >
<option key={theme.id} value={theme.id}> {Object.values(themes).map((theme) => (
{theme.name} <option key={theme.id} value={theme.id}>
</option> {theme.name}
))} </option>
</select> ))}
</select>
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronDown
size={16}
className="text-[var(--lofi-text-primary)]"
/>
</div>
</div>
</div> </div>
<div className="pt-4"> <div className="pt-4">

Loading…
Cancel
Save