From 23ba5f77a98efd31f4bb32f2b239b8bac6c8daf7 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Feb 2026 22:41:43 +0100
Subject: [PATCH] refactor: replace button elements with a unified Button
 component in SiteSettingsPage and VerificationModal for consistency and
 improved styling

---
 app/sites/[id]/settings/page.tsx       | 54 +++++---------------------
 components/sites/VerificationModal.tsx | 32 +++++----------
 2 files changed, 19 insertions(+), 67 deletions(-)

diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index 778ea6b..9270b83 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -495,21 +495,9 @@ export default function SiteSettingsPage() {
 
                     <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
                     {canEdit && (
-                      <button
-                        type="submit"
-                        disabled={saving}
-                        className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium 
-                        hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
-                      >
-                        {saving ? (
-                          <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                        ) : (
-                          <>
-                            <CheckIcon className="w-4 h-4" />
-                            Save Changes
-                          </>
-                        )}
-                      </button>
+                      <Button type="submit" disabled={saving} isLoading={saving}>
+                        Save Changes
+                      </Button>
                     )}
                     </div>
                   </form>
@@ -666,21 +654,9 @@ export default function SiteSettingsPage() {
 
                   <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
                     {canEdit && (
-                      <button
-                        type="submit"
-                        disabled={saving}
-                        className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium 
-                        hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
-                      >
-                        {saving ? (
-                          <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                        ) : (
-                          <>
-                            <CheckIcon className="w-4 h-4" />
-                            Save Changes
-                          </>
-                        )}
-                      </button>
+                      <Button type="submit" disabled={saving} isLoading={saving}>
+                        Save Changes
+                      </Button>
                     )}
                   </div>
                 </form>
@@ -976,21 +952,9 @@ export default function SiteSettingsPage() {
 
                   <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
                     {canEdit && (
-                      <button
-                        type="submit"
-                        disabled={saving}
-                        className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
-                        hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
-                      >
-                        {saving ? (
-                          <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                        ) : (
-                          <>
-                            <CheckIcon className="w-4 h-4" />
-                            Save Changes
-                          </>
-                        )}
-                      </button>
+                      <Button type="submit" disabled={saving} isLoading={saving}>
+                        Save Changes
+                      </Button>
                     )}
                   </div>
                 </form>
diff --git a/components/sites/VerificationModal.tsx b/components/sites/VerificationModal.tsx
index 1ba4564..1b360f1 100644
--- a/components/sites/VerificationModal.tsx
+++ b/components/sites/VerificationModal.tsx
@@ -11,7 +11,7 @@ import {
 } from '@ciphera-net/ui'
 import { Site } from '@/lib/api/sites'
 import { getRealtime } from '@/lib/api/stats'
-import { toast } from '@ciphera-net/ui'
+import { toast, Button } from '@ciphera-net/ui'
 
 interface VerificationModalProps {
   isOpen: boolean
@@ -130,15 +130,12 @@ export default function VerificationModal({ isOpen, onClose, site }: Verificatio
                       </div>
                     </div>
 
-                    <button
-                      onClick={handleStartVerification}
-                      className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium hover:opacity-90 transition-opacity"
-                    >
+                    <Button onClick={handleStartVerification} className="w-full justify-center">
                       Open Website & Verify
-                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <svg className="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                       </svg>
-                    </button>
+                    </Button>
                   </div>
                 )}
 
@@ -172,12 +169,9 @@ export default function VerificationModal({ isOpen, onClose, site }: Verificatio
                         We are successfully receiving data from your website.
                       </p>
                     </div>
-                    <button
-                      onClick={onClose}
-                      className="w-full px-4 py-3 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium hover:opacity-90 transition-opacity"
-                    >
+                    <Button onClick={onClose} className="w-full justify-center">
                       Done
-                    </button>
+                    </Button>
                   </div>
                 )}
 
@@ -205,18 +199,12 @@ export default function VerificationModal({ isOpen, onClose, site }: Verificatio
                     </div>
 
                     <div className="flex gap-3">
-                      <button
-                        onClick={onClose}
-                        className="flex-1 px-4 py-2.5 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-xl font-medium hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors"
-                      >
+                      <Button variant="secondary" onClick={onClose} className="flex-1 justify-center">
                         Close
-                      </button>
-                      <button
-                        onClick={handleStartVerification}
-                        className="flex-1 px-4 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium hover:opacity-90 transition-opacity"
-                      >
+                      </Button>
+                      <Button onClick={handleStartVerification} className="flex-1 justify-center">
                         Try Again
-                      </button>
+                      </Button>
                     </div>
                   </div>
                 )}