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

style: redesign org delete modal to match delete account style

Browse Source 
Red border, frosted overlay, destruction items as prominent
red-bordered cards with warning icons instead of small bullet
points. Button text changed to "Delete Forever".
This commit is contained in:
Usman Baig
2026-03-13 19:44:03 +01:00
parent e86021caf8
commit 86077557a8
1 changed files with 42 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
components/settings/OrganizationSettings.tsx
View File

@@ -1335,22 +1335,17 @@ export default function OrganizationSettings() {
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4" className="fixed inset-0 z-50 flex items-center justify-center bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm p-4 pointer-events-none"
> >
<motion.div <motion.div
initial={{ scale: 0.95, opacity: 0 }} initial={{ scale: 0.95, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }} animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.95, opacity: 0 }} exit={{ scale: 0.95, opacity: 0 }}
className="bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-md w-full p-6 border border-neutral-200 dark:border-neutral-800" className="w-full max-w-sm bg-white dark:bg-neutral-900 p-6 rounded-2xl border border-red-200 dark:border-red-900 shadow-xl pointer-events-auto"
> >
<div className="flex justify-between items-center mb-4"> <div className="flex justify-between items-center mb-4">
<div className="flex items-center gap-3 text-red-600"> <h3 className="text-lg font-semibold text-red-600 dark:text-red-500">Delete Organization?</h3>
<div className="h-10 w-10 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center shrink-0"> <button
<AlertTriangleIcon className="h-5 w-5" />
</div>
<h3 className="text-lg font-semibold">Delete Organization?</h3>
</div>
<button
onClick={() => { onClick={() => {
setShowDeletePrompt(false) setShowDeletePrompt(false)
setDeleteConfirm('') setDeleteConfirm('')
@@ -1360,57 +1355,67 @@ export default function OrganizationSettings() {
<XIcon className="w-5 h-5" /> <XIcon className="w-5 h-5" />
</button> </button>
</div> </div>
<p className="text-neutral-600 dark:text-neutral-300 mb-4"> <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
This action cannot be undone. The following will be permanently deleted: This action is <span className="font-bold">irreversible</span>. The following will be permanently deleted:
</p> </p>
<ul className="text-sm text-neutral-600 dark:text-neutral-300 mb-6 space-y-1.5 list-none"> <div className="mb-5 space-y-2">
{typeof subscription?.sites_count === 'number' && subscription.sites_count > 0 && ( {typeof subscription?.sites_count === 'number' && subscription.sites_count > 0 && (
<li className="flex items-center gap-2"> <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-lg">
<span className="h-1.5 w-1.5 rounded-full bg-red-500 shrink-0" /> <AlertTriangleIcon className="h-4 w-4 text-red-500 shrink-0" />
{subscription.sites_count} {subscription.sites_count === 1 ? 'site' : 'sites'} and all analytics data <span className="text-sm font-medium text-red-700 dark:text-red-300">
</li> {subscription.sites_count} {subscription.sites_count === 1 ? 'site' : 'sites'} and all analytics data
</span>
</div>
)} )}
{members.length > 1 && ( {members.length > 1 && (
<li className="flex items-center gap-2"> <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-lg">
<span className="h-1.5 w-1.5 rounded-full bg-red-500 shrink-0" /> <AlertTriangleIcon className="h-4 w-4 text-red-500 shrink-0" />
{members.length - 1} {members.length - 1 === 1 ? 'member' : 'members'} will be removed <span className="text-sm font-medium text-red-700 dark:text-red-300">
</li> {members.length - 1} {members.length - 1 === 1 ? 'member' : 'members'} will be removed
</span>
</div>
)} )}
{subscription?.subscription_status === 'active' && subscription?.plan_id !== 'free' && ( {subscription?.subscription_status === 'active' && subscription?.plan_id !== 'free' && (
<li className="flex items-center gap-2"> <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-lg">
<span className="h-1.5 w-1.5 rounded-full bg-red-500 shrink-0" /> <AlertTriangleIcon className="h-4 w-4 text-red-500 shrink-0" />
Active subscription will be cancelled <span className="text-sm font-medium text-red-700 dark:text-red-300">
</li> Active subscription will be cancelled
</span>
</div>
)} )}
<li className="flex items-center gap-2"> <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-lg">
<span className="h-1.5 w-1.5 rounded-full bg-red-500 shrink-0" /> <AlertTriangleIcon className="h-4 w-4 text-red-500 shrink-0" />
All notifications and settings <span className="text-sm font-medium text-red-700 dark:text-red-300">
</li> All notifications and settings
</ul> </span>
</div>
</div>
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="block text-xs font-medium text-neutral-500 uppercase mb-1"> <label className="block text-xs font-medium text-neutral-700 dark:text-neutral-300 mb-1">
Type <span className="font-bold text-neutral-900 dark:text-white">DELETE</span> to confirm Type <span className="font-mono font-bold text-red-600 dark:text-red-400">DELETE</span> to confirm
</label> </label>
<input <input
type="text" type="text"
value={deleteConfirm} value={deleteConfirm}
onChange={(e) => setDeleteConfirm(e.target.value)} onChange={(e) => setDeleteConfirm(e.target.value)}
className="w-full px-3 py-2 bg-neutral-100 dark:bg-neutral-800 border-none rounded-lg focus:ring-2 focus:ring-red-500 outline-none text-neutral-900 dark:text-white font-mono" autoComplete="off"
className="w-full px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
placeholder="DELETE" placeholder="DELETE"
/> />
</div> </div>
<div className="flex gap-3 pt-2"> <div className="flex gap-3">
<button <button
type="button"
onClick={() => { onClick={() => {
setShowDeletePrompt(false) setShowDeletePrompt(false)
setDeleteConfirm('') setDeleteConfirm('')
}} }}
className="flex-1 px-4 py-2 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors font-medium" className="flex-1 px-4 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-xl transition-colors"
disabled={isDeleting} disabled={isDeleting}
> >
Cancel Cancel
@@ -1418,9 +1423,9 @@ export default function OrganizationSettings() {
<button <button
onClick={handleDelete} onClick={handleDelete}
disabled={deleteConfirm !== 'DELETE' || isDeleting} disabled={deleteConfirm !== 'DELETE' || isDeleting}
className="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2" className="flex-1 px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700 rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
> >
{isDeleting ? 'Deleting...' : 'Delete Organization'} {isDeleting ? 'Deleting...' : 'Delete Forever'}
</button> </button>
</div> </div>
</div> </div>