Oliver/modcomms
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix Settings dropdown disabled state and chevron colours

Browse source 
- Disabled sub-channel dropdown: was showing grey bg + grey border;
  now shows azure outline (opacity-50) consistent with unselected state
- Chevrons: now white when dropdown is azure-filled (selected),
  azure when unselected — previously always azure which was invisible
  against the azure background

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-03-03 16:06:19 +00:00
parent 2553d1f952
commit f22b24eb8a
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/components/Settings.tsx
View file

@ -403,7 +403,7 @@ export const Settings: React.FC<SettingsProps> = ({
<option value="" disabled>Select Channel</option>
{Object.keys(options.channels).map(c => <option key={c} value={c}>{c}</option>)}
</select>
<ChevronDownIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-oliver-azure pointer-events-none"/>
<ChevronDownIcon className={`absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 pointer-events-none ${selectedChannel ? 'text-white' : 'text-oliver-azure'}`}/>
</div>
</div>
@ -435,7 +435,7 @@ export const Settings: React.FC<SettingsProps> = ({
<option value="" disabled>Select Channel</option>
{Object.keys(options.channels).map(c => <option key={c} value={c}>{c}</option>)}
</select>
<ChevronDownIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-oliver-azure pointer-events-none"/>
<ChevronDownIcon className={`absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 pointer-events-none ${selectedChannel ? 'text-white' : 'text-oliver-azure'}`}/>
</div>
</div>
@ -445,7 +445,7 @@ export const Settings: React.FC<SettingsProps> = ({
<select
value={selectedSubChannel}
onChange={(e) => setSelectedSubChannel(e.target.value)}
className={`w-full p-2 border-2 rounded-[10px] focus:ring-2 focus:ring-oliver-azure appearance-none disabled:bg-oliver-grey disabled:border-grey-300 disabled:text-oliver-black ${selectedSubChannel ? 'bg-oliver-azure text-white border-oliver-azure' : 'border-oliver-azure text-oliver-black'}`}
className={`w-full p-2 border-2 rounded-[10px] focus:ring-2 focus:ring-oliver-azure appearance-none disabled:opacity-50 disabled:cursor-not-allowed ${selectedSubChannel ? 'bg-oliver-azure text-white border-oliver-azure' : 'bg-white border-oliver-azure text-oliver-black'}`}
disabled={!selectedChannel}
>
<option value="" disabled>Select Sub-Channel</option>
@ -453,7 +453,7 @@ export const Settings: React.FC<SettingsProps> = ({
<option key={sc} value={sc}>{sc}</option>
))}
</select>
<ChevronDownIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-oliver-azure pointer-events-none"/>
<ChevronDownIcon className={`absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 pointer-events-none ${selectedSubChannel ? 'text-white' : 'text-oliver-azure'}`}/>
</div>
</div>
</div>