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

Settings: fix sub-channel dropdown and Add button styling

Browse source 
- 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>
This commit is contained in:
Vadym Samoilenko 2026-03-03 16:10:10 +00:00
parent f22b24eb8a
commit 1f2a2e5016
1 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/components/Settings.tsx
View file

@ -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>