ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

refactor: enhance notification settings layout in OrganizationSettings for better usability and visual clarity

Browse Source
This commit is contained in:
Usman Baig
2026-02-13 15:14:14 +01:00
parent be27dbf992
commit a83f3727b1
1 changed files with 35 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/settings/OrganizationSettings.tsx
View File

@@ -975,7 +975,7 @@ export default function OrganizationSettings() {
<div className="space-y-8"> <div className="space-y-8">
<div> <div>
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Notification Settings</h2> <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Notification Settings</h2>
<p className="text-sm text-neutral-500 dark:text-neutral-400"> <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-6">
Choose which notification types you want to receive. These apply to the notification center for owners and admins. Choose which notification types you want to receive. These apply to the notification center for owners and admins.
</p> </p>
</div> </div>
@@ -985,17 +985,19 @@ export default function OrganizationSettings() {
<div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" /> <div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
</div> </div>
) : ( ) : (
<div className="space-y-6"> <div className="space-y-4">
<h3 className="text-sm font-medium text-neutral-500 uppercase tracking-wider">Notification categories</h3>
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
{notificationCategories.map((cat) => ( {notificationCategories.map((cat) => (
<div <div
key={cat.id} key={cat.id}
className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-4 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50" className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors"
> >
<div className="flex-1"> <div className="flex-1">
<p className="font-medium text-neutral-900 dark:text-white">{cat.label}</p> <p className="text-sm font-medium text-neutral-900 dark:text-white">{cat.label}</p>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">{cat.description}</p> <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">{cat.description}</p>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 shrink-0">
<Checkbox <Checkbox
checked={notificationSettings[cat.id] !== false} checked={notificationSettings[cat.id] !== false}
onCheckedChange={(checked) => { onCheckedChange={(checked) => {
@@ -1014,13 +1016,14 @@ export default function OrganizationSettings() {
}} }}
disabled={isSavingNotificationSettings} disabled={isSavingNotificationSettings}
/> />
<span className="text-sm text-neutral-500"> <span className="text-sm text-neutral-500 whitespace-nowrap">
{notificationSettings[cat.id] !== false ? 'On' : 'Off'} {notificationSettings[cat.id] !== false ? 'On' : 'Off'}
</span> </span>
</div> </div>
</div> </div>
))} ))}
</div> </div>
</div>
)} )}
</div> </div>
)} )}