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

fix(settings): normalize SiteGeneralTab + SiteGoalsTab to design standards

Browse Source
This commit is contained in:
Usman Baig
2026-03-25 22:20:42 +01:00
parent db12ad04cf
commit 1cbc8064e2
2 changed files with 22 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
components/settings/unified/tabs/SiteGeneralTab.tsx
View File

@@ -7,6 +7,7 @@ import { useSite } from '@/lib/swr/dashboard'
import { updateSite, resetSiteData } from '@/lib/api/sites'
import { useAuth } from '@/lib/auth/context'
import { useUnifiedSettings } from '@/lib/unified-settings-context'
import { DangerZone } from '@/components/settings/unified/DangerZone'
import DeleteSiteModal from '@/components/sites/DeleteSiteModal'
import ScriptSetupBlock from '@/components/sites/ScriptSetupBlock'
import VerificationModal from '@/components/sites/VerificationModal'
@@ -95,7 +96,7 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }
}
return (
<div className="space-y-8">
<div className="space-y-6">
{/* Site details */}
<div className="space-y-4">
<div>
@@ -170,44 +171,24 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }
{/* Danger Zone */}
{canEdit && (
<div className="space-y-4 pt-4 border-t border-neutral-800">
<div>
<h3 className="text-lg font-semibold text-red-600 dark:text-red-500 mb-1">Danger Zone</h3>
<p className="text-sm text-neutral-400">Irreversible actions for your site.</p>
</div>
<div className="p-4 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 rounded-2xl">
<div className="flex items-center justify-between">
<div>
<p className="font-medium text-red-900 dark:text-red-300">Reset Data</p>
<p className="text-sm text-neutral-500 dark:text-neutral-400">Delete all stats and events. This cannot be undone.</p>
</div>
<button
type="button"
onClick={handleResetData}
className="px-4 py-2 bg-white dark:bg-neutral-900 border border-red-200 dark:border-red-900 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-sm font-medium"
>
Reset Data
</button>
</div>
</div>
<div className="p-4 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 rounded-2xl">
<div className="flex items-center justify-between">
<div>
<p className="font-medium text-red-900 dark:text-red-300">Delete Site</p>
<p className="text-sm text-neutral-500 dark:text-neutral-400">Schedule this site for deletion with a 7-day grace period.</p>
</div>
<button
type="button"
onClick={() => setShowDeleteModal(true)}
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium"
>
Delete Site...
</button>
</div>
</div>
</div>
<DangerZone
items={[
{
title: 'Reset Data',
description: 'Delete all stats and events. This cannot be undone.',
buttonLabel: 'Reset Data',
variant: 'outline',
onClick: handleResetData,
},
{
title: 'Delete Site',
description: 'Schedule this site for deletion with a 7-day grace period.',
buttonLabel: 'Delete Site...',
variant: 'solid',
onClick: () => setShowDeleteModal(true),
},
]}
/>
)}
<DeleteSiteModal

4
components/settings/unified/tabs/SiteGoalsTab.tsx
View File

@@ -130,7 +130,7 @@ export default function SiteGoalsTab({ siteId }: { siteId: string }) {
{/* Goals list */}
{goals.length === 0 && !creating ? (
<div className="text-center py-10">
<div className="text-center py-8">
<p className="text-sm text-neutral-500 mb-3">No goals yet. Add a goal to track custom events.</p>
<Button onClick={startCreate} variant="primary" className="text-sm gap-1.5">
<Plus weight="bold" className="w-3.5 h-3.5" /> Add your first goal
@@ -147,7 +147,7 @@ export default function SiteGoalsTab({ siteId }: { siteId: string }) {
<p className="text-sm font-medium text-white">{goal.name}</p>
<p className="text-xs text-neutral-500 font-mono">{goal.event_name}</p>
</div>
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="flex items-center gap-1">
<button
onClick={() => startEdit(goal)}
className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors"