From f22b24eb8a625e064d58137dcea884d81c12431e Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Tue, 3 Mar 2026 16:06:19 +0000
Subject: [PATCH] Fix Settings dropdown disabled state and chevron colours
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 frontend/components/Settings.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/components/Settings.tsx b/frontend/components/Settings.tsx
index a1fb96a..55fa792 100755
--- a/frontend/components/Settings.tsx
+++ b/frontend/components/Settings.tsx
@@ -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>