From d4afbc19301f6adca8f8011c2ce5d6a8e31394bc Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 22 Jan 2026 20:40:17 +0100
Subject: [PATCH] refactor(ui): update button and input components to use
 brand-orange styles, enhancing UI consistency across the application

---
 app/layout.tsx                               |  2 +-
 app/onboarding/page.tsx                      |  2 +-
 app/sites/[id]/settings/page.tsx             |  2 +-
 app/sites/new/page.tsx                       | 24 +++++++++-----------
 components/WorkspaceSwitcher.tsx             |  6 ++---
 components/settings/OrganizationSettings.tsx |  4 ++--
 components/ui/Button.tsx                     |  2 +-
 components/ui/Input.tsx                      |  2 +-
 8 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 7c1fb24..46246fb 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -63,7 +63,7 @@ export default function RootLayout({
                   success: 'group-[.toast]:!text-green-600 group-[.toast]:dark:!text-green-400',
                   error: 'group-[.toast]:!text-red-600 group-[.toast]:dark:!text-red-400',
                   warning: 'group-[.toast]:!text-amber-600 group-[.toast]:dark:!text-amber-400',
-                  info: 'group-[.toast]:!text-blue-600 group-[.toast]:dark:!text-blue-400',
+                  info: 'group-[.toast]:!text-brand-orange group-[.toast]:dark:!text-brand-orange',
                 },
               }}
             />
diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
index 8aebe89..f4d24d6 100644
--- a/app/onboarding/page.tsx
+++ b/app/onboarding/page.tsx
@@ -95,7 +95,7 @@ export default function OnboardingPage() {
           <div>
             <Button
               type="submit"
-              className="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              className="w-full"
             >
               Create Organization
             </Button>
diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index 59e3274..e55fdd3 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -307,7 +307,7 @@ export default function SiteSettingsPage() {
         {/* Content Area */}
         <div className="flex-1 relative">
           {!canEdit && (
-            <div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200 rounded-xl border border-blue-200 dark:border-blue-800 flex items-center gap-3">
+            <div className="mb-6 p-4 bg-amber-50 dark:bg-amber-900/10 text-amber-800 dark:text-amber-200 rounded-xl border border-amber-200 dark:border-amber-800 flex items-center gap-3">
               <ExclamationTriangleIcon className="w-5 h-5" />
               <p className="text-sm font-medium">You have read-only access to this site. Contact an admin to make changes.</p>
             </div>
diff --git a/app/sites/new/page.tsx b/app/sites/new/page.tsx
index 6ad79d0..441f21c 100644
--- a/app/sites/new/page.tsx
+++ b/app/sites/new/page.tsx
@@ -4,6 +4,8 @@ import { useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { createSite } from '@/lib/api/sites'
 import { toast } from 'sonner'
+import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
 
 export default function NewSitePage() {
   const router = useRouter()
@@ -39,13 +41,11 @@ export default function NewSitePage() {
           <label htmlFor="name" className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
             Site Name
           </label>
-          <input
-            type="text"
+          <Input
             id="name"
             required
             value={formData.name}
             onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            className="w-full px-4 py-2 border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange focus:border-transparent"
             placeholder="My Website"
           />
         </div>
@@ -54,13 +54,11 @@ export default function NewSitePage() {
           <label htmlFor="domain" className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
             Domain
           </label>
-          <input
-            type="text"
+          <Input
             id="domain"
             required
             value={formData.domain}
             onChange={(e) => setFormData({ ...formData, domain: e.target.value.toLowerCase().trim() })}
-            className="w-full px-4 py-2 border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange focus:border-transparent"
             placeholder="example.com"
           />
           <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
@@ -69,20 +67,20 @@ export default function NewSitePage() {
         </div>
 
         <div className="flex gap-4">
-          <button
+          <Button
             type="submit"
             disabled={loading}
-            className="btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
+            isLoading={loading}
           >
-            {loading ? 'Creating...' : 'Create Site'}
-          </button>
-          <button
+            Create Site
+          </Button>
+          <Button
             type="button"
+            variant="secondary"
             onClick={() => router.back()}
-            className="btn-secondary"
           >
             Cancel
-          </button>
+          </Button>
         </div>
       </form>
     </div>
diff --git a/components/WorkspaceSwitcher.tsx b/components/WorkspaceSwitcher.tsx
index 29c2466..93fe0aa 100644
--- a/components/WorkspaceSwitcher.tsx
+++ b/components/WorkspaceSwitcher.tsx
@@ -80,8 +80,8 @@ export default function WorkspaceSwitcher({ orgs, activeOrgId }: { orgs: Organiz
           }`}
         >
           <div className="flex items-center gap-2">
-            <div className="h-5 w-5 rounded bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
-              <CubeIcon className="h-3 w-3 text-blue-600 dark:text-blue-400" />
+            <div className="h-5 w-5 rounded bg-brand-orange/10 flex items-center justify-center">
+              <CubeIcon className="h-3 w-3 text-brand-orange" />
             </div>
             <span className="text-neutral-700 dark:text-neutral-300 truncate max-w-[140px]">
               {org.organization_name}
@@ -97,7 +97,7 @@ export default function WorkspaceSwitcher({ orgs, activeOrgId }: { orgs: Organiz
       {/* Create New */}
       <Link
         href="/onboarding"
-        className="w-full flex items-center gap-2 px-3 py-2 text-sm text-neutral-500 hover:text-blue-600 dark:text-neutral-400 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/10 rounded-md transition-colors mt-1"
+        className="w-full flex items-center gap-2 px-3 py-2 text-sm text-neutral-500 hover:text-brand-orange dark:text-neutral-400 dark:hover:text-brand-orange hover:bg-brand-orange/10 rounded-md transition-colors mt-1"
       >
         <div className="h-5 w-5 rounded border border-dashed border-neutral-300 dark:border-neutral-600 flex items-center justify-center">
           <PlusIcon className="h-3 w-3" />
diff --git a/components/settings/OrganizationSettings.tsx b/components/settings/OrganizationSettings.tsx
index a0023b8..da2c998 100644
--- a/components/settings/OrganizationSettings.tsx
+++ b/components/settings/OrganizationSettings.tsx
@@ -345,7 +345,7 @@ export default function OrganizationSettings() {
                       </div>
                       <div className="w-32">
                         <select 
-                          className="w-full h-10 px-3 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm outline-none focus:ring-2 focus:ring-blue-500 dark:text-white"
+                          className="w-full h-10 px-3 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm outline-none focus:ring-2 focus:ring-brand-orange dark:text-white"
                           value={inviteRole}
                           onChange={(e) => setInviteRole(e.target.value)}
                         >
@@ -394,7 +394,7 @@ export default function OrganizationSettings() {
                               member.role === 'owner' 
                                 ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300'
                                 : member.role === 'admin'
-                                ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
+                                ? 'bg-brand-orange/10 text-brand-orange'
                                 : 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300'
                             }`}>
                               {member.role}
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index 1f591d9..c6d2c3c 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -10,7 +10,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const baseStyles = 'inline-flex items-center justify-center rounded-xl text-sm font-medium px-5 py-2.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
     
     const variants = {
-      primary: 'bg-blue-600 text-white shadow-sm hover:bg-blue-700 focus:ring-blue-500',
+      primary: 'bg-brand-orange text-white shadow-sm hover:bg-brand-orange-hover focus:ring-brand-orange',
       secondary: 'bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-white hover:bg-neutral-50 dark:hover:bg-neutral-800 shadow-sm focus:ring-neutral-200',
       ghost: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 focus:ring-neutral-200',
     };
diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx
index 1db4034..37d2535 100644
--- a/components/ui/Input.tsx
+++ b/components/ui/Input.tsx
@@ -16,7 +16,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             ${icon ? 'pl-11 pr-4' : 'px-4'}
             ${error
               ? 'border-red-300 dark:border-red-800 focus:border-red-500 focus:ring-4 focus:ring-red-500/10'
-              : 'border-neutral-200 dark:border-neutral-800 hover:border-blue-500/50 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10'}
+              : 'border-neutral-200 dark:border-neutral-800 hover:border-brand-orange/50 focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10'}
             ${className}
           `}
           {...props}