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

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

View File

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

View File

@@ -130,7 +130,7 @@ export default function SiteGoalsTab({ siteId }: { siteId: string }) {
{/* Goals list */} {/* Goals list */}
{goals.length === 0 && !creating ? ( {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> <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"> <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 <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-sm font-medium text-white">{goal.name}</p>
<p className="text-xs text-neutral-500 font-mono">{goal.event_name}</p> <p className="text-xs text-neutral-500 font-mono">{goal.event_name}</p>
</div> </div>
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity"> <div className="flex items-center gap-1">
<button <button
onClick={() => startEdit(goal)} onClick={() => startEdit(goal)}
className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors" className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors"