From 9f0822d1bac570d77a857dbb85a768637b51aa34 Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Mon, 8 Jun 2026 22:40:41 +0000
Subject: [PATCH] Unify primary buttons with gradient pill design across the
 app.

Add shared btn-primary components and plus icons on create/new actions; limit overview recent transfers to three.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../Transfer/OverviewController.php           |  2 +-
 resources/css/app.css                         | 54 +++++++++++++++++++
 .../views/components/btn/create.blade.php     | 17 ++++++
 .../views/components/btn/primary.blade.php    | 16 ++++++
 .../user/service-topup-modal.blade.php        |  2 +-
 .../views/email/account/developers.blade.php  |  2 +-
 .../views/email/account/settings.blade.php    |  4 +-
 resources/views/email/account/team.blade.php  |  2 +-
 resources/views/email/dashboard.blade.php     |  2 +-
 resources/views/email/domains/index.blade.php |  2 +-
 resources/views/email/domains/show.blade.php  |  2 +-
 .../views/email/mailboxes/create.blade.php    |  6 ++-
 .../views/email/mailboxes/index.blade.php     |  4 +-
 .../views/email/mailboxes/show.blade.php      |  4 +-
 .../views/email/mailboxes/upgrade.blade.php   |  2 +-
 resources/views/partials/afia.blade.php       |  2 +-
 .../partials/mobile-bottom-nav.blade.php      |  2 +-
 resources/views/public/qr/landing.blade.php   |  2 +-
 .../views/public/transfer/password.blade.php  |  2 +-
 resources/views/qr-codes/attendees.blade.php  |  4 +-
 resources/views/qr-codes/create.blade.php     |  8 +--
 resources/views/qr-codes/index.blade.php      |  4 +-
 resources/views/qr/account/billing.blade.php  |  2 +-
 .../views/qr/account/developers.blade.php     |  2 +-
 resources/views/qr/account/settings.blade.php |  2 +-
 resources/views/qr/account/team.blade.php     |  2 +-
 .../views/transfer/files/index.blade.php      | 10 ++--
 resources/views/transfer/settings.blade.php   |  2 +-
 .../views/transfer/transfers/create.blade.php |  4 +-
 .../views/transfer/transfers/index.blade.php  |  2 +-
 .../views/transfer/transfers/show.blade.php   |  2 +-
 31 files changed, 131 insertions(+), 42 deletions(-)
 create mode 100644 resources/views/components/btn/create.blade.php
 create mode 100644 resources/views/components/btn/primary.blade.php

diff --git a/app/Http/Controllers/Transfer/OverviewController.php b/app/Http/Controllers/Transfer/OverviewController.php
index 05aa3bf..73179c1 100644
--- a/app/Http/Controllers/Transfer/OverviewController.php
+++ b/app/Http/Controllers/Transfer/OverviewController.php
@@ -48,7 +48,7 @@ class OverviewController extends Controller
             ->accessible()
             ->with('qrCode')
             ->latest()
-            ->limit(6)
+            ->limit(3)
             ->get();
 
         $balanceMinor = 0;
diff --git a/resources/css/app.css b/resources/css/app.css
index 2b1b6ec..9ae8c75 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -144,3 +144,57 @@ html.qr-mobile-page body {
         width: auto;
     }
 }
+
+@layer components {
+    .btn-primary {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        border-radius: 9999px;
+        background-image: linear-gradient(to right, rgb(79 70 229), rgb(124 58 237));
+        padding: 0.5rem 1rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 600;
+        color: #fff;
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        transition: filter 0.15s ease;
+    }
+
+    .btn-primary:hover {
+        filter: brightness(0.92);
+    }
+
+    .btn-primary:disabled {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+
+    .btn-primary-sm {
+        padding: 0.375rem 0.75rem;
+        font-size: 0.75rem;
+        line-height: 1rem;
+    }
+
+    .btn-primary-lg {
+        padding: 0.625rem 1.25rem;
+    }
+
+    .btn-fab {
+        display: inline-flex;
+        height: 2.75rem;
+        width: 2.75rem;
+        align-items: center;
+        justify-content: center;
+        border-radius: 9999px;
+        background-image: linear-gradient(to right, rgb(79 70 229), rgb(124 58 237));
+        color: #fff;
+        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+        transition: filter 0.15s ease;
+    }
+
+    .btn-fab:hover {
+        filter: brightness(0.92);
+    }
+}
diff --git a/resources/views/components/btn/create.blade.php b/resources/views/components/btn/create.blade.php
new file mode 100644
index 0000000..caa7d06
--- /dev/null
+++ b/resources/views/components/btn/create.blade.php
@@ -0,0 +1,17 @@
+@props([
+    'href' => null,
+    'type' => 'button',
+])
+
+@php
+    $tag = $href ? 'a' : 'button';
+@endphp
+
+<{{ $tag }}
+    @if ($href) href="{{ $href }}" @endif
+    @if ($tag === 'button') type="{{ $type }}" @endif
+    {{ $attributes->class(['btn-primary']) }}
+>
+    <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
+    {{ $slot }}
+</{{ $tag }}>
diff --git a/resources/views/components/btn/primary.blade.php b/resources/views/components/btn/primary.blade.php
new file mode 100644
index 0000000..b9cb905
--- /dev/null
+++ b/resources/views/components/btn/primary.blade.php
@@ -0,0 +1,16 @@
+@props([
+    'href' => null,
+    'type' => 'button',
+])
+
+@php
+    $tag = $href ? 'a' : 'button';
+@endphp
+
+<{{ $tag }}
+    @if ($href) href="{{ $href }}" @endif
+    @if ($tag === 'button') type="{{ $type }}" @endif
+    {{ $attributes->class(['btn-primary']) }}
+>
+    {{ $slot }}
+</{{ $tag }}>
diff --git a/resources/views/components/user/service-topup-modal.blade.php b/resources/views/components/user/service-topup-modal.blade.php
index 8a80cd0..f9a5675 100644
--- a/resources/views/components/user/service-topup-modal.blade.php
+++ b/resources/views/components/user/service-topup-modal.blade.php
@@ -113,7 +113,7 @@
                     Cancel
                 </button>
                 <button type="submit" :disabled="loading"
-                        class="w-full rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-indigo-700 disabled:opacity-60 sm:w-auto">
+                        class="btn-primary w-full sm:w-auto">
                     <span x-text="loading ? 'Processing…' : 'Add credits'">Add credits</span>
                 </button>
             </div>
diff --git a/resources/views/email/account/developers.blade.php b/resources/views/email/account/developers.blade.php
index ea2649a..d7fa0cd 100644
--- a/resources/views/email/account/developers.blade.php
+++ b/resources/views/email/account/developers.blade.php
@@ -30,7 +30,7 @@
                        class="mt-1 w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:border-indigo-300 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-100">
                 @error('name')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
             </div>
-            <button class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Generate token</button>
+            <button class="btn-primary">Generate token</button>
         </form>
     </div>
 
diff --git a/resources/views/email/account/settings.blade.php b/resources/views/email/account/settings.blade.php
index 54b854a..8d4e4b1 100644
--- a/resources/views/email/account/settings.blade.php
+++ b/resources/views/email/account/settings.blade.php
@@ -63,7 +63,7 @@
                                 </select>
                                 @error('mailbox_address')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                             </div>
-                            <button class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-700">Link mailbox</button>
+                            <button class="btn-primary">Link mailbox</button>
                         </form>
                     @endif
                 </div>
@@ -104,7 +104,7 @@
             </label>
         </div>
 
-        <button class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-700">Save settings</button>
+        <button class="btn-primary">Save settings</button>
     </form>
 </div>
 @endsection
diff --git a/resources/views/email/account/team.blade.php b/resources/views/email/account/team.blade.php
index 70c9fef..c1baeaa 100644
--- a/resources/views/email/account/team.blade.php
+++ b/resources/views/email/account/team.blade.php
@@ -23,7 +23,7 @@
                         <option value="admin">Admin</option>
                     </select>
                 </div>
-                <button class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Send invite</button>
+                <button class="btn-primary">Send invite</button>
             </form>
             <p class="mt-2 text-[11px] text-slate-400">Admins can manage mailboxes and the team. Members can manage mailboxes. Invitees join by signing in with that email.</p>
         </div>
diff --git a/resources/views/email/dashboard.blade.php b/resources/views/email/dashboard.blade.php
index d48d16b..34d9b43 100644
--- a/resources/views/email/dashboard.blade.php
+++ b/resources/views/email/dashboard.blade.php
@@ -7,7 +7,7 @@
             <h1 class="text-xl font-semibold tracking-tight text-slate-900">Overview</h1>
             <p class="mt-0.5 text-sm text-slate-500">Your mailboxes at a glance.</p>
         </div>
-        <a href="{{ route('email.mailboxes.create') }}" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-indigo-700">New mailbox</a>
+        <x-btn.create :href="route('email.mailboxes.create')">New mailbox</x-btn.create>
     </div>
 
     @if($error)<div class="mt-4 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">{{ $error }}</div>@endif
diff --git a/resources/views/email/domains/index.blade.php b/resources/views/email/domains/index.blade.php
index 6ae7e6c..7ff52db 100644
--- a/resources/views/email/domains/index.blade.php
+++ b/resources/views/email/domains/index.blade.php
@@ -9,7 +9,7 @@
     <form method="POST" action="{{ route('email.domains.store') }}" class="mt-5 flex gap-2 rounded-2xl border border-slate-200 bg-white p-2">
         @csrf
         <input name="domain" required placeholder="yourdomain.com" class="flex-1 rounded-xl border-0 bg-transparent px-3 py-2 text-sm focus:outline-none focus:ring-0">
-        <button class="rounded-xl bg-indigo-600 px-5 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Add domain</button>
+        <x-btn.create type="submit">Add domain</x-btn.create>
     </form>
 
     @if(!empty($domains))
diff --git a/resources/views/email/domains/show.blade.php b/resources/views/email/domains/show.blade.php
index 0d4c453..f1c75b5 100644
--- a/resources/views/email/domains/show.blade.php
+++ b/resources/views/email/domains/show.blade.php
@@ -40,7 +40,7 @@
         </div>
         <form method="POST" action="{{ route('email.domains.verify', $domain['id']) }}" class="mt-4">
             @csrf
-            <button class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-700">Verify domain</button>
+            <button class="btn-primary">Verify domain</button>
             <span class="ml-2 text-xs text-slate-400">DNS changes can take time to propagate.</span>
         </form>
     @else
diff --git a/resources/views/email/mailboxes/create.blade.php b/resources/views/email/mailboxes/create.blade.php
index ec3f8ba..e53c52c 100644
--- a/resources/views/email/mailboxes/create.blade.php
+++ b/resources/views/email/mailboxes/create.blade.php
@@ -86,8 +86,10 @@
                 </div>
                 @error('password')<p class="text-xs text-rose-600">{{ $message }}</p>@enderror
 
-                <button class="w-full rounded-xl bg-indigo-600 px-4 py-3 text-sm font-semibold text-white hover:bg-indigo-700"
-                        x-text="free ? 'Create free mailbox' : ('Create mailbox — ' + fmt(price) + '/mo')">Create mailbox</button>
+                <button class="btn-primary w-full btn-primary-lg">
+                    <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
+                    <span x-text="free ? 'Create free mailbox' : ('Create mailbox — ' + fmt(price) + '/mo')">Create mailbox</span>
+                </button>
             </form>
         </div>
     @endif
diff --git a/resources/views/email/mailboxes/index.blade.php b/resources/views/email/mailboxes/index.blade.php
index 284eeac..f3a9f24 100644
--- a/resources/views/email/mailboxes/index.blade.php
+++ b/resources/views/email/mailboxes/index.blade.php
@@ -4,7 +4,7 @@
 <div class="mx-auto max-w-4xl">
     <div class="flex items-center justify-between">
         <h1 class="text-xl font-semibold tracking-tight text-slate-900">Mailboxes</h1>
-        <a href="{{ route('email.mailboxes.create') }}" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">New mailbox</a>
+        <x-btn.create :href="route('email.mailboxes.create')">New mailbox</x-btn.create>
     </div>
     @if($error)<div class="mt-4 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">{{ $error }}</div>@endif
 
@@ -12,7 +12,7 @@
         <div class="mt-6 rounded-2xl border border-dashed border-slate-300 bg-white p-12 text-center">
             <p class="text-sm font-semibold text-slate-700">No mailboxes yet</p>
             <p class="mx-auto mt-1 max-w-sm text-xs text-slate-400">Verify a domain, then create a mailbox like you@yourdomain.com.</p>
-            <a href="{{ route('email.mailboxes.create') }}" class="mt-4 inline-block rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Create mailbox</a>
+            <x-btn.create :href="route('email.mailboxes.create')" class="mt-4">Create mailbox</x-btn.create>
         </div>
     @else
         <div class="mt-6 divide-y divide-slate-100 overflow-hidden rounded-2xl border border-slate-200 bg-white">
diff --git a/resources/views/email/mailboxes/show.blade.php b/resources/views/email/mailboxes/show.blade.php
index e5ee875..256156a 100644
--- a/resources/views/email/mailboxes/show.blade.php
+++ b/resources/views/email/mailboxes/show.blade.php
@@ -20,7 +20,7 @@
             <div class="flex justify-between"><dt class="text-slate-500">IMAP</dt><dd class="font-mono text-slate-800">{{ $host }}:993 (SSL)</dd></div>
             <div class="flex justify-between"><dt class="text-slate-500">SMTP</dt><dd class="font-mono text-slate-800">{{ $host }}:587 (STARTTLS)</dd></div>
         </dl>
-        <a href="https://{{ $host }}" class="mt-4 inline-block rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Open Webmail ↗</a>
+        <a href="https://{{ $host }}" class="btn-primary mt-4">Open Webmail ↗</a>
     </div>
 
     @php
@@ -46,7 +46,7 @@
                 </p>
             </div>
             @if($quotaMb < $maxMb)
-                <a href="{{ route('email.mailboxes.upgrade', $mailbox['id']) }}" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Upgrade</a>
+                <a href="{{ route('email.mailboxes.upgrade', $mailbox['id']) }}" class="btn-primary">Upgrade</a>
             @else
                 <span class="rounded-lg bg-slate-100 px-3 py-2 text-xs font-medium text-slate-500">Top plan</span>
             @endif
diff --git a/resources/views/email/mailboxes/upgrade.blade.php b/resources/views/email/mailboxes/upgrade.blade.php
index e6c6a4d..ef6211d 100644
--- a/resources/views/email/mailboxes/upgrade.blade.php
+++ b/resources/views/email/mailboxes/upgrade.blade.php
@@ -44,7 +44,7 @@
                 </div>
                 @error('quota_mb')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
             </div>
-            <button class="w-full rounded-xl bg-indigo-600 px-4 py-3 text-sm font-semibold text-white hover:bg-indigo-700"
+            <button class="btn-primary w-full btn-primary-lg"
                     x-text="'Upgrade — ' + fmt(price) + '/mo'">Upgrade</button>
         </form>
     </div>
diff --git a/resources/views/partials/afia.blade.php b/resources/views/partials/afia.blade.php
index cd19ecf..79ad59b 100644
--- a/resources/views/partials/afia.blade.php
+++ b/resources/views/partials/afia.blade.php
@@ -96,7 +96,7 @@
                 <input type="text" x-ref="input" x-model="input" :disabled="loading" placeholder="Message Afia…"
                        class="flex-1 rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm text-slate-700 placeholder-slate-400 focus:border-indigo-300 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-100">
                 <button type="submit" :disabled="loading || !input.trim()"
-                        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-600 text-white transition hover:bg-indigo-700 disabled:opacity-40">
+                        class="btn-fab shrink-0 disabled:opacity-40">
                     <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"/></svg>
                 </button>
             </form>
diff --git a/resources/views/partials/mobile-bottom-nav.blade.php b/resources/views/partials/mobile-bottom-nav.blade.php
index 69cda93..c0088ca 100644
--- a/resources/views/partials/mobile-bottom-nav.blade.php
+++ b/resources/views/partials/mobile-bottom-nav.blade.php
@@ -34,7 +34,7 @@
                 <div class="flex items-center justify-center">
                     <button type="button"
                             @click="$dispatch('compose-open')"
-                            class="flex h-11 w-11 -translate-y-1 items-center justify-center rounded-full bg-indigo-600 text-white shadow-md ring-4 ring-white transition hover:bg-indigo-700"
+                            class="btn-fab -translate-y-1 ring-4 ring-white shadow-md"
                             aria-label="Compose">
                         <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z"/></svg>
                     </button>
diff --git a/resources/views/public/qr/landing.blade.php b/resources/views/public/qr/landing.blade.php
index f4a6755..a7a9d74 100644
--- a/resources/views/public/qr/landing.blade.php
+++ b/resources/views/public/qr/landing.blade.php
@@ -160,7 +160,7 @@
             {{-- Save contact button --}}
             <div class="px-6 pb-6 pt-2">
                 <a href="{{ route('qr.public.vcard', $qrCode->short_code) }}"
-                   class="flex w-full items-center justify-center gap-2 rounded-2xl bg-indigo-600 py-3.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
+                   class="btn-primary w-full">
                     <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/></svg>
                     Save Contact
                 </a>
diff --git a/resources/views/public/transfer/password.blade.php b/resources/views/public/transfer/password.blade.php
index f05d9e1..0dc5a8e 100644
--- a/resources/views/public/transfer/password.blade.php
+++ b/resources/views/public/transfer/password.blade.php
@@ -24,7 +24,7 @@
                 <input type="password" name="password" id="password" required autofocus
                        class="mt-1 block w-full rounded-xl border-slate-200 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
             </div>
-            <button type="submit" class="w-full rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-700">Unlock</button>
+            <button type="submit" class="btn-primary w-full">Unlock</button>
         </form>
     </div>
 </body>
diff --git a/resources/views/qr-codes/attendees.blade.php b/resources/views/qr-codes/attendees.blade.php
index 0a21b68..0cb596f 100644
--- a/resources/views/qr-codes/attendees.blade.php
+++ b/resources/views/qr-codes/attendees.blade.php
@@ -56,7 +56,7 @@
                   class="shrink-0">
                 @csrf
                 <button type="submit" :disabled="busy"
-                        class="w-full rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-700 disabled:opacity-60 sm:w-auto">
+                        class="btn-primary w-full sm:w-auto">
                     <span x-text="busy ? 'Sending…' : 'Share with attendees'">Share with attendees</span>
                 </button>
             </form>
@@ -96,7 +96,7 @@
             <div class="flex flex-wrap items-center gap-2">
                 <span x-show="selected.length" x-cloak class="text-xs font-medium text-slate-500"><span x-text="selected.length"></span> selected</span>
                 <button type="button" x-show="selected.length" x-cloak @click="printSelected()"
-                        class="rounded-xl bg-indigo-600 px-3.5 py-2 text-xs font-semibold text-white hover:bg-indigo-700 transition">Print selected</button>
+                        class="btn-primary btn-primary-sm">Print selected</button>
                 <button type="button" x-show="selected.length" x-cloak @click="zplSelected()"
                         class="rounded-xl border border-slate-200 px-3.5 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-50 transition">ZPL selected</button>
                 <a href="{{ route('events.badges', $qrCode) }}?auto=1" target="_blank"
diff --git a/resources/views/qr-codes/create.blade.php b/resources/views/qr-codes/create.blade.php
index 431a3d6..7214105 100644
--- a/resources/views/qr-codes/create.blade.php
+++ b/resources/views/qr-codes/create.blade.php
@@ -212,11 +212,11 @@
                         Back
                     </button>
                     <button type="button" x-show="wizard && step < 3" x-cloak @click="nextStep()"
-                            class="flex-1 rounded-xl bg-indigo-600 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
+                            class="btn-primary flex-1">
                         Continue
                     </button>
                     <button type="button" x-show="!wizard || step === 3" @click="wizardSubmit($event)"
-                            class="flex-1 rounded-xl bg-indigo-600 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
+                            class="btn-primary flex-1">
                         {{ $isProgramme ? 'Create programme' : 'Create event' }}
                     </button>
                 </div>
@@ -240,11 +240,11 @@
                     Preview
                 </button>
                 <button type="button" x-show="wizard && step < 3" x-cloak @click="nextStep()"
-                        class="flex flex-1 items-center justify-center gap-2 rounded-xl bg-indigo-600 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
+                        class="btn-primary flex-1">
                     Continue
                 </button>
                 <button type="button" x-show="!wizard || step === 3" @click="wizardSubmit($event)"
-                        class="flex flex-1 items-center justify-center gap-2 rounded-xl bg-indigo-600 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
+                        class="btn-primary flex-1">
                     Create
                 </button>
             </div>
diff --git a/resources/views/qr-codes/index.blade.php b/resources/views/qr-codes/index.blade.php
index 3ffff64..34feb37 100644
--- a/resources/views/qr-codes/index.blade.php
+++ b/resources/views/qr-codes/index.blade.php
@@ -31,8 +31,8 @@
                         <div class="mt-6">
                             <button type="button"
                                     @click="goOrTopup($event)"
-                                    class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 transition">
-                                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
+                                    class="btn-primary">
+                                <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                                 Create event
                             </button>
                         </div>
diff --git a/resources/views/qr/account/billing.blade.php b/resources/views/qr/account/billing.blade.php
index 78b1551..ec0aaaa 100644
--- a/resources/views/qr/account/billing.blade.php
+++ b/resources/views/qr/account/billing.blade.php
@@ -76,7 +76,7 @@
             </div>
             <div class="flex flex-wrap gap-2">
                 <a href="{{ $walletUrl }}" class="inline-flex rounded-lg border border-indigo-200 bg-white px-4 py-2 text-sm font-semibold text-indigo-700 hover:bg-indigo-50">View wallet</a>
-                <a href="{{ $topupUrl }}" class="inline-flex rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Top up</a>
+                <a href="{{ $topupUrl }}" class="btn-primary">Top up</a>
             </div>
         </div>
 
diff --git a/resources/views/qr/account/developers.blade.php b/resources/views/qr/account/developers.blade.php
index 5185811..d506b9a 100644
--- a/resources/views/qr/account/developers.blade.php
+++ b/resources/views/qr/account/developers.blade.php
@@ -28,7 +28,7 @@
                            class="mt-1 w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:border-indigo-300 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-100">
                     @error('name')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                 </div>
-                <button class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Generate token</button>
+                <button class="btn-primary">Generate token</button>
             </form>
         </div>
 
diff --git a/resources/views/qr/account/settings.blade.php b/resources/views/qr/account/settings.blade.php
index 2a24f93..ace0e9f 100644
--- a/resources/views/qr/account/settings.blade.php
+++ b/resources/views/qr/account/settings.blade.php
@@ -247,7 +247,7 @@
                 </div>
             </details>
 
-            <button type="submit" class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-700">
+            <button type="submit" class="btn-primary">
                 Save settings
             </button>
         </form>
diff --git a/resources/views/qr/account/team.blade.php b/resources/views/qr/account/team.blade.php
index b19b907..cd3ec45 100644
--- a/resources/views/qr/account/team.blade.php
+++ b/resources/views/qr/account/team.blade.php
@@ -22,7 +22,7 @@
                             <option value="admin">Admin</option>
                         </select>
                     </div>
-                    <button class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Send invite</button>
+                    <button class="btn-primary">Send invite</button>
                 </form>
                 <p class="mt-2 text-[11px] text-slate-400">Admins can manage QR codes and the team. Members can manage QR codes. Invitees join by signing in with that email.</p>
             </div>
diff --git a/resources/views/transfer/files/index.blade.php b/resources/views/transfer/files/index.blade.php
index a2d1e46..42794ae 100644
--- a/resources/views/transfer/files/index.blade.php
+++ b/resources/views/transfer/files/index.blade.php
@@ -65,7 +65,7 @@
             <div class="relative" @click.outside="createMenuOpen = false">
                 <button type="button"
                         @click="createMenuOpen = !createMenuOpen"
-                        class="inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-indigo-600 to-violet-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:from-indigo-700 hover:to-violet-700">
+                        class="btn-primary">
                     <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                     Create or upload
                     <svg class="h-4 w-4 opacity-80" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
@@ -124,7 +124,7 @@
                         <button type="button" @click="copyLinks()" class="rounded-lg px-3 py-1.5 font-medium text-slate-700 hover:bg-slate-100">Copy link</button>
                         <button type="button" @click="deleteSelected()" class="rounded-lg px-3 py-1.5 font-medium text-red-700 hover:bg-red-50">Delete</button>
                         <button type="button" @click="moveModalOpen = true" class="rounded-lg px-3 py-1.5 font-medium text-slate-700 hover:bg-slate-100">Move to</button>
-                        <button type="button" @click="openInEmail()" class="rounded-lg bg-indigo-600 px-3 py-1.5 font-medium text-white hover:bg-indigo-700">Open in email</button>
+                        <button type="button" @click="openInEmail()" class="btn-primary btn-primary-sm">Open in email</button>
                         <span class="ml-2 text-xs text-slate-500" x-text="`${selectedCount} selected`"></span>
                         <button type="button" @click="clearSelection()" class="text-xs text-slate-400 hover:text-slate-600">Clear</button>
                     </div>
@@ -266,7 +266,7 @@
                            class="w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-100">
                     <div class="flex justify-end gap-2">
                         <button type="button" @click="folderModalOpen = false" class="rounded-xl px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100">Cancel</button>
-                        <button type="submit" class="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Create</button>
+                        <x-btn.create type="submit">Create</x-btn.create>
                     </div>
                 </form>
             </div>
@@ -325,7 +325,7 @@
                     <button
                         type="button"
                         @click="confirmUpload()"
-                        class="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700"
+                        class="btn-primary"
                     >
                         Upload
                     </button>
@@ -366,7 +366,7 @@
                     </select>
                     <div class="flex justify-end gap-2">
                         <button type="button" @click="moveModalOpen = false" class="rounded-xl px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100">Cancel</button>
-                        <button type="submit" class="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Move</button>
+                        <button type="submit" class="btn-primary">Move</button>
                     </div>
                 </form>
             </div>
diff --git a/resources/views/transfer/settings.blade.php b/resources/views/transfer/settings.blade.php
index 49d36f9..3e2ed7c 100644
--- a/resources/views/transfer/settings.blade.php
+++ b/resources/views/transfer/settings.blade.php
@@ -27,7 +27,7 @@
                 </span>
             </label>
             <div class="flex justify-end">
-                <button type="submit" class="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Save settings</button>
+                <button type="submit" class="btn-primary">Save settings</button>
             </div>
         </form>
     </div>
diff --git a/resources/views/transfer/transfers/create.blade.php b/resources/views/transfer/transfers/create.blade.php
index f741905..49cadb8 100644
--- a/resources/views/transfer/transfers/create.blade.php
+++ b/resources/views/transfer/transfers/create.blade.php
@@ -119,8 +119,8 @@
 
             <div class="flex justify-end gap-3 pt-2">
                 <a href="{{ route('transfer.transfers.index') }}" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</a>
-                <button type="submit" class="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700 disabled:opacity-60"
-                        :disabled="uploading || submitting">
+                <button type="submit" class="btn-primary" :disabled="uploading || submitting">
+                    <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                     <span x-show="!uploading && !submitting">Create transfer</span>
                     <span x-show="uploading || submitting" x-cloak>Uploading…</span>
                 </button>
diff --git a/resources/views/transfer/transfers/index.blade.php b/resources/views/transfer/transfers/index.blade.php
index a4445c6..18b47d8 100644
--- a/resources/views/transfer/transfers/index.blade.php
+++ b/resources/views/transfer/transfers/index.blade.php
@@ -6,7 +6,7 @@
                 <h1 class="text-xl font-semibold text-slate-900">Transfers</h1>
                 <p class="mt-1 text-sm text-slate-500">All your file shares — active, grace, and expired.</p>
             </div>
-            <a href="{{ route('transfer.transfers.create') }}" class="inline-flex rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">New transfer</a>
+            <x-btn.create :href="route('transfer.transfers.create')">New transfer</x-btn.create>
         </div>
 
         <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
diff --git a/resources/views/transfer/transfers/show.blade.php b/resources/views/transfer/transfers/show.blade.php
index 65b1a1c..c4bffc0 100644
--- a/resources/views/transfer/transfers/show.blade.php
+++ b/resources/views/transfer/transfers/show.blade.php
@@ -54,7 +54,7 @@
                                class="flex-1 rounded-xl border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700"
                                onclick="this.select()">
                         <button type="button" onclick="navigator.clipboard.writeText('{{ $publicUrl }}')"
-                                class="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Copy</button>
+                                class="btn-primary">Copy</button>
                     </div>
                 @endif
                 @if($transfer->isPasswordProtected())