From f7bd61187aa28ffaa920675755b0a8b182289842 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 13 Mar 2026 16:46:51 +0100
Subject: [PATCH] style: make verified state match button shape of unverified
 state

---
 app/sites/[id]/settings/page.tsx | 45 +++++++++++---------------------
 1 file changed, 15 insertions(+), 30 deletions(-)

diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index b8a3bbc..8d0d1eb 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -710,36 +710,21 @@ export default function SiteSettingsPage() {
                     />
 
                     <div className="flex items-center gap-4 mt-4">
-                      {site.is_verified ? (
-                        <>
-                          <div className="flex items-center gap-2 text-sm text-green-600 dark:text-green-500">
-                            <CheckIcon className="w-4 h-4" />
-                            <span>Verified</span>
-                          </div>
-                          <span className="text-neutral-300 dark:text-neutral-700">·</span>
-                          <button
-                            type="button"
-                            onClick={() => setShowVerificationModal(true)}
-                            className="text-xs text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors"
-                          >
-                            Re-verify
-                          </button>
-                        </>
-                      ) : (
-                        <>
-                          <button
-                            type="button"
-                            onClick={() => setShowVerificationModal(true)}
-                            className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-xl hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
-                          >
-                            <ZapIcon className="w-4 h-4" />
-                            Verify Installation
-                          </button>
-                          <p className="text-xs text-neutral-500 dark:text-neutral-400">
-                            Check if your site is sending data correctly.
-                          </p>
-                        </>
-                      )}
+                      <button
+                        type="button"
+                        onClick={() => setShowVerificationModal(true)}
+                        className={`flex items-center gap-2 px-4 py-2 border rounded-xl transition-all text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ${
+                          site.is_verified
+                            ? 'bg-green-50 dark:bg-green-900/10 border-green-200 dark:border-green-900/30 text-green-700 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/20 focus-visible:ring-green-500'
+                            : 'bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700 focus-visible:ring-brand-orange'
+                        }`}
+                      >
+                        {site.is_verified ? <CheckIcon className="w-4 h-4" /> : <ZapIcon className="w-4 h-4" />}
+                        {site.is_verified ? 'Verified' : 'Verify Installation'}
+                      </button>
+                      <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                        {site.is_verified ? 'Your site is sending data correctly.' : 'Check if your site is sending data correctly.'}
+                      </p>
                     </div>
                   </div>