refactor: update notification frequency selection button styling and layout in settings.
This commit is contained in:
@@ -270,24 +270,24 @@ export function NotificationsForm({ onSave }: NotificationsFormProps) {
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
{/* Frequency Tabs */}
|
{/* Frequency Tabs */}
|
||||||
<div className="inline-flex border border-[#00293D]/10 rounded-[7px] overflow-hidden">
|
<div className="inline-flex items-center border border-[#00293D]/10 rounded-[7px] h-[49px] px-2">
|
||||||
{frequencyOptions.map((option, index) => (
|
{frequencyOptions.map((option, index) => (
|
||||||
|
<div key={option.value} className="flex items-center h-full">
|
||||||
<button
|
<button
|
||||||
key={option.value}
|
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setDigestFrequency(option.value)}
|
onClick={() => setDigestFrequency(option.value)}
|
||||||
className={`px-5 py-2 text-[14px] font-fractul transition-colors ${
|
className={`px-5 py-1.5 text-[14px] font-fractul transition-colors rounded-[15px] ${
|
||||||
digestFrequency === option.value
|
digestFrequency === option.value
|
||||||
? 'bg-[#e58625] text-[#00293D] font-medium'
|
? 'bg-[#e58625] text-[#00293D]'
|
||||||
: 'bg-white text-[#00293D] hover:bg-[#00293D]/5'
|
: 'text-[#00293D] hover:bg-[#00293D]/5'
|
||||||
} ${
|
|
||||||
index < frequencyOptions.length - 1
|
|
||||||
? 'border-r border-[#00293D]/10'
|
|
||||||
: ''
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{option.label}
|
{option.label}
|
||||||
</button>
|
</button>
|
||||||
|
{index < frequencyOptions.length - 1 && (
|
||||||
|
<div className="w-px h-full bg-[#00293D]/10 mx-1" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user