From 1f2a2e5016fb3bfbe91966e9710ed19e2d136883 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Tue, 3 Mar 2026 16:10:10 +0000
Subject: [PATCH] Settings: fix sub-channel dropdown and Add button styling

- Sub-Channel dropdown: always white bg + azure border (never azure fill),
  even when a value is selected; channel dropdown retains azure fill
- Add button: joined to input field as a single group (no gap, shared
  border, matching corner radius); button colour is azure

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/components/Settings.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/components/Settings.tsx b/frontend/components/Settings.tsx
index 55fa792..3196a61 100755
--- a/frontend/components/Settings.tsx
+++ b/frontend/components/Settings.tsx
@@ -31,18 +31,18 @@ const ManagementCard: React.FC<ManagementCardProps> = ({ title, items, onAdd, on
         <div className="p-6 flex flex-col h-full">
             <h2 className="text-xl font-semibold text-oliver-black mb-4">{title}</h2>
 
-            <form onSubmit={handleSubmit} className="flex gap-2 mb-4">
+            <form onSubmit={handleSubmit} className="flex mb-4">
                 <input
                     type="text"
                     value={newItem}
                     onChange={(e) => setNewItem(e.target.value)}
                     placeholder={placeholder || `New ${title.slice(0, -1)}...`}
-                    className="flex-grow p-2 border-2 border-oliver-azure rounded-[10px] focus:ring-2 focus:ring-oliver-azure focus:border-oliver-azure transition disabled:bg-oliver-grey disabled:cursor-not-allowed text-oliver-black"
+                    className="flex-grow p-2 border-2 border-oliver-azure rounded-l-[10px] rounded-r-none border-r-0 focus:ring-0 focus:outline-none transition disabled:bg-oliver-grey disabled:cursor-not-allowed text-oliver-black"
                     disabled={disabled}
                 />
                 <button
                     type="submit"
-                    className="bg-oliver-azure text-white font-semibold py-2 px-6 rounded-full hover:bg-oliver-azure/90 transition-colors duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed"
+                    className="bg-oliver-azure text-white font-semibold py-2 px-6 rounded-r-[10px] rounded-l-none hover:bg-oliver-azure/90 transition-colors duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed flex-shrink-0"
                     disabled={!newItem.trim() || disabled}
                 >
                     Add
@@ -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:opacity-50 disabled:cursor-not-allowed ${selectedSubChannel ? 'bg-oliver-azure text-white border-oliver-azure' : 'bg-white border-oliver-azure text-oliver-black'}`}
+                                            className="w-full p-2 border-2 border-oliver-azure rounded-[10px] focus:ring-2 focus:ring-oliver-azure appearance-none bg-white text-oliver-black disabled:opacity-50 disabled:cursor-not-allowed"
                                             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 pointer-events-none ${selectedSubChannel ? 'text-white' : 'text-oliver-azure'}`}/>
+                                        <ChevronDownIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 pointer-events-none text-oliver-azure"/>
                                     </div>
                                 </div>
                             </div>