Unify primary buttons with gradient pill design across the app.
Deploy Ladill Servers / deploy (push) Successful in 29s

Add shared btn-primary components and plus icons on create/new actions for a consistent Ladill UI.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-06-08 22:49:50 +00:00
co-authored by Cursor
parent 18057106c1
commit 817afb0c2b
30 changed files with 131 additions and 44 deletions
@@ -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>
@@ -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
+1 -1
View File
@@ -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>
+1 -1
View File
@@ -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
@@ -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>
<button class="btn-primary">Add domain</button>
</form>
@if(!empty($domains))
+1 -1
View File
@@ -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
@@ -86,7 +86,7 @@
</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"
<button class="btn-primary w-full btn-primary-lg"
x-text="free ? 'Create free mailbox' : ('Create mailbox — ' + fmt(price) + '/mo')">Create mailbox</button>
</form>
</div>
@@ -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">
@@ -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="mt-4 inline-block btn-primary">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
@@ -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>