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

refactor: replace Checkbox with button for toggling notification settings in OrganizationSettings, enhancing accessibility and visual feedback

Browse Source
This commit is contained in:
Usman Baig
2026-02-14 12:22:10 +01:00
parent a83f3727b1
commit 4b61f1a397
1 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/settings/OrganizationSettings.tsx
View File

@@ -35,7 +35,6 @@ import {
DownloadIcon, DownloadIcon,
ExternalLinkIcon, ExternalLinkIcon,
LayoutDashboardIcon, LayoutDashboardIcon,
Checkbox
} from '@ciphera-net/ui' } from '@ciphera-net/ui'
// * Bell icon for notifications tab // * Bell icon for notifications tab
@@ -997,11 +996,14 @@ export default function OrganizationSettings() {
<p className="text-sm 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 shrink-0"> <div className="flex items-center shrink-0">
<Checkbox <button
checked={notificationSettings[cat.id] !== false} type="button"
onCheckedChange={(checked) => { role="switch"
const next = { ...notificationSettings, [cat.id]: checked === true } aria-checked={notificationSettings[cat.id] !== false}
aria-label={`${notificationSettings[cat.id] !== false ? 'Disable' : 'Enable'} ${cat.label} notifications`}
onClick={() => {
const next = { ...notificationSettings, [cat.id]: notificationSettings[cat.id] === false }
setNotificationSettings(next) setNotificationSettings(next)
setIsSavingNotificationSettings(true) setIsSavingNotificationSettings(true)
updateNotificationSettings(next) updateNotificationSettings(next)
@@ -1013,12 +1015,18 @@ export default function OrganizationSettings() {
setNotificationSettings(notificationSettings) setNotificationSettings(notificationSettings)
}) })
.finally(() => setIsSavingNotificationSettings(false)) .finally(() => setIsSavingNotificationSettings(false))
}} }}
disabled={isSavingNotificationSettings} disabled={isSavingNotificationSettings}
/> className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${
<span className="text-sm text-neutral-500 whitespace-nowrap"> notificationSettings[cat.id] !== false ? 'bg-brand-orange' : 'bg-neutral-200 dark:bg-neutral-700'
{notificationSettings[cat.id] !== false ? 'On' : 'Off'} }`}
</span> >
<span
className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
notificationSettings[cat.id] !== false ? 'translate-x-5' : 'translate-x-0'
}`}
/>
</button>
</div> </div>
</div> </div>
))} ))}