fix(settings): normalize Account tabs to design standards

components/settings/unified/tabs/AccountProfileTab.tsx

@@ -1,11 +1,12 @@
 'use client'
 
 import { useState, useEffect, useRef, useCallback } from 'react'
-import { Input, Button, toast, Spinner } from '@ciphera-net/ui'
+import { Input, toast, Spinner } from '@ciphera-net/ui'
 import { useAuth } from '@/lib/auth/context'
 import { updateDisplayName } from '@/lib/api/user'
 import { deleteAccount } from '@/lib/api/user'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
+import { DangerZone } from '@/components/settings/unified/DangerZone'
 
 export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { onDirtyChange?: (dirty: boolean) => void; onRegisterSave?: (fn: () => Promise<void>) => void }) {
   const { user, refresh, logout } = useAuth()
@@ -61,7 +62,7 @@ export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { o
   if (!user) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-6">
       <div>
         <h3 className="text-base font-semibold text-white mb-1">Profile</h3>
         <p className="text-sm text-neutral-400">Manage your personal account settings.</p>
@@ -87,66 +88,58 @@ export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { o
       </div>
 
       {/* Danger Zone */}
-      <div className="space-y-3 pt-4 border-t border-neutral-800">
+      <DangerZone
-        <h3 className="text-base font-semibold text-red-500">Danger Zone</h3>
+        items={[
-        <div className="rounded-xl border border-red-900/30 bg-red-900/10 p-4">
+          {
-          <div className="flex items-center justify-between">
+            title: 'Delete Account',
-            <div>
+            description: 'Permanently delete your account and all associated data.',
-              <p className="text-sm font-medium text-white">Delete Account</p>
+            buttonLabel: 'Delete',
-              <p className="text-xs text-neutral-400">Permanently delete your account and all associated data.</p>
+            variant: 'solid',
-            </div>
+            onClick: () => setShowDeleteConfirm(prev => !prev),
-            <Button
+          },
-              variant="secondary"
+        ]}
-              className="text-red-400 border-red-900 hover:bg-red-900/20 text-sm"
+      />
-              onClick={() => setShowDeleteConfirm(prev => !prev)}
+
-            >
+      {showDeleteConfirm && (
-              Delete
+        <div className="p-4 border border-red-900/50 bg-red-900/10 rounded-xl space-y-3">
-            </Button>
+          <p className="text-sm text-red-300">This will permanently delete:</p>
+          <ul className="text-xs text-neutral-400 list-disc list-inside space-y-1">
+            <li>Your account and all personal data</li>
+            <li>All sessions and trusted devices</li>
+            <li>You will be removed from all organizations</li>
+          </ul>
+          <div>
+            <label className="block text-xs text-neutral-400 mb-1">Your password</label>
+            <Input
+              type="password"
+              value={deletePassword}
+              onChange={e => setDeletePassword(e.target.value)}
+              placeholder="Enter your password"
+            />
+          </div>
+          <div>
+            <label className="block text-xs text-neutral-400 mb-1">Type DELETE to confirm</label>
+            <Input
+              type="text"
+              value={deleteText}
+              onChange={e => setDeleteText(e.target.value)}
+              placeholder="DELETE"
+            />
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={handleDelete}
+              disabled={deleteText !== 'DELETE' || !deletePassword || deleting}
+              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium disabled:opacity-50"
+            >
+              {deleting ? 'Deleting...' : 'Delete Account'}
+            </button>
+            <button onClick={() => { setShowDeleteConfirm(false); setDeleteText(''); setDeletePassword('') }} className="px-4 py-2 text-neutral-400 hover:text-white text-sm">
+              Cancel
+            </button>
           </div>
-          {showDeleteConfirm && (
-            <div className="mt-4 p-4 border border-red-900/50 bg-red-900/10 rounded-xl space-y-3">
-              <p className="text-sm text-red-300">This will permanently delete:</p>
-              <ul className="text-xs text-neutral-400 list-disc list-inside space-y-1">
-                <li>Your account and all personal data</li>
-                <li>All sessions and trusted devices</li>
-                <li>You will be removed from all organizations</li>
-              </ul>
-              <div>
-                <label className="block text-xs text-neutral-400 mb-1">Your password</label>
-                <input
-                  type="password"
-                  value={deletePassword}
-                  onChange={e => setDeletePassword(e.target.value)}
-                  className="w-full px-3 py-2 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm"
-                  placeholder="Enter your password"
-                />
-              </div>
-              <div>
-                <label className="block text-xs text-neutral-400 mb-1">Type DELETE to confirm</label>
-                <input
-                  type="text"
-                  value={deleteText}
-                  onChange={e => setDeleteText(e.target.value)}
-                  className="w-full px-3 py-2 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm"
-                  placeholder="DELETE"
-                />
-              </div>
-              <div className="flex gap-2">
-                <button
-                  onClick={handleDelete}
-                  disabled={deleteText !== 'DELETE' || !deletePassword || deleting}
-                  className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium disabled:opacity-50"
-                >
-                  {deleting ? 'Deleting...' : 'Delete Account'}
-                </button>
-                <button onClick={() => { setShowDeleteConfirm(false); setDeleteText(''); setDeletePassword('') }} className="px-4 py-2 text-neutral-400 hover:text-white text-sm">
-                  Cancel
-                </button>
-              </div>
-            </div>
-          )}
         </div>
-      </div>
+      )}
     </div>
   )
 }