fix(settings): normalize SiteGeneralTab + SiteGoalsTab to design standards
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user