Replace ghost Meet action links with shared btn components.

Webhooks, invitations, registrations, recordings, and room cancel actions match the Ladill pill-button UI. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-09 06:38:14 +00:00
parent c490922f71
commit 3be1215d08
8 changed files with 164 additions and 19 deletions
@@ -812,6 +812,119 @@ html.qr-mobile-page body {
        pointer-events: none;
    }

+    .btn-warning {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        border-radius: 9999px;
+        border: 1px solid rgb(252 211 77);
+        background-color: #fff;
+        padding: 0.5rem 1rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 600;
+        color: rgb(180 83 9);
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    .btn-warning:hover {
+        background-color: rgb(255 251 235);
+        border-color: rgb(245 158 11);
+    }
+
+    .btn-warning:disabled {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+
+    .btn-danger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        border-radius: 9999px;
+        border: 1px solid rgb(254 202 202);
+        background-color: #fff;
+        padding: 0.5rem 1rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 600;
+        color: rgb(185 28 28);
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    .btn-danger:hover {
+        background-color: rgb(254 242 242);
+        border-color: rgb(252 165 165);
+    }
+
+    .btn-danger:disabled {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+
+    .btn-danger-plain {
+        padding: 0;
+        border: none;
+        background: transparent;
+        border-radius: 0;
+        box-shadow: none;
+        font-weight: 500;
+    }
+
+    .btn-danger-plain:hover {
+        background: transparent;
+        text-decoration: underline;
+    }
+
+    .btn-link {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.375rem;
+        border-radius: 9999px;
+        border: 1px solid transparent;
+        background-color: transparent;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 600;
+        color: rgb(67 56 202);
+        transition: background-color 0.15s ease, color 0.15s ease;
+    }
+
+    .btn-link:hover {
+        background-color: rgb(238 242 255);
+        color: rgb(55 48 163);
+    }
+
+    .btn-link:disabled {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+
+    .btn-link-plain {
+        padding: 0;
+        border: none;
+        background: transparent;
+        border-radius: 0;
+        font-weight: 500;
+    }
+
+    .btn-link-plain:hover {
+        background: transparent;
+        text-decoration: underline;
+    }
+
+    .btn-sm {
+        padding: 0.25rem 0.625rem;
+        font-size: 0.75rem;
+        line-height: 1rem;
+    }
+
    .btn-secondary-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
@@ -0,0 +1,34 @@
+@props([
+    'variant' => 'primary',
+    'href' => null,
+    'type' => 'button',
+    'size' => null,
+    'plain' => false,
+])
+
+@php
+    $tag = $href ? 'a' : 'button';
+
+    $variantClass = match ($variant) {
+        'secondary' => 'btn-secondary',
+        'warning' => 'btn-warning',
+        'danger' => 'btn-danger',
+        'link' => 'btn-link',
+        default => 'btn-primary',
+    };
+
+    $classes = collect([
+        $variantClass,
+        $size === 'sm' ? 'btn-sm' : null,
+        ($plain && $variant === 'link') ? 'btn-link-plain' : null,
+        ($plain && $variant === 'danger') ? 'btn-danger-plain' : null,
+    ])->filter()->implode(' ');
+@endphp
+
+<{{ $tag }}
+    @if ($href) href="{{ $href }}" @endif
+    @if ($tag === 'button') type="{{ $type }}" @endif
+    {{ $attributes->class([$classes]) }}
+>
+    {{ $slot }}
+</{{ $tag }}>
@@ -18,7 +18,7 @@
                default => 'meeting',
            };
        @endphp
-        <a href="{{ $backRoute }}" class="text-sm text-indigo-600 hover:underline">← Back to {{ $backLabel }}</a>
+        <x-btn :href="$backRoute" variant="link" size="sm" plain>← Back to {{ $backLabel }}</x-btn>
    </div>

    <div class="mt-6 grid gap-6 lg:grid-cols-2">
@@ -60,9 +60,9 @@
                        <p class="font-medium text-slate-900">{{ $invitation->display_name ?? $invitation->email }}</p>
                        <p class="text-slate-500">{{ $invitation->email }} · {{ ucfirst($invitation->status) }}</p>
                    </div>
-                    <div class="flex gap-3">
-                        <form method="POST" action="{{ route('meet.invitations.resend', $invitation) }}">@csrf<button class="text-indigo-600 hover:underline">Resend</button></form>
-                        <form method="POST" action="{{ route('meet.invitations.destroy', $invitation) }}">@csrf @method('DELETE')<button class="text-red-600 hover:underline">Remove</button></form>
+                    <div class="btn-group">
+                        <form method="POST" action="{{ route('meet.invitations.resend', $invitation) }}">@csrf<x-btn type="submit" variant="link" size="sm">Resend</x-btn></form>
+                        <form method="POST" action="{{ route('meet.invitations.destroy', $invitation) }}">@csrf @method('DELETE')<x-btn type="submit" variant="danger" size="sm">Remove</x-btn></form>
                    </div>
                </li>
            @empty
@@ -13,10 +13,10 @@
                        · {{ $recording->created_at->format('M j, Y g:i A') }}
                    </p>
                </div>
-                <div class="flex gap-2">
-                    <a href="{{ route('meet.recordings.show', $recording) }}" class="text-sm text-indigo-600 hover:underline">View</a>
+                <div class="btn-group">
+                    <x-btn :href="route('meet.recordings.show', $recording)" variant="link" size="sm" plain>View</x-btn>
                    @if ($recording->hasPlayableFile())
-                        <a href="{{ route('meet.recordings.download', $recording) }}" class="text-sm text-slate-600 hover:underline">Download</a>
+                        <x-btn :href="route('meet.recordings.download', $recording)" variant="secondary" size="sm">Download</x-btn>
                    @endif
                </div>
            </div>
@@ -127,7 +127,7 @@
        @if ($room->status === 'scheduled')
            <form method="POST" action="{{ route('meet.rooms.cancel', $room) }}" class="mt-6" onsubmit="return confirm('Cancel this meeting?')">
                @csrf
-                <button type="submit" class="text-sm text-red-600 hover:underline">Cancel meeting</button>
+                <x-btn type="submit" variant="danger">Cancel meeting</x-btn>
            </form>
        @endif
    </div>
@@ -29,7 +29,7 @@
                            <p class="font-mono text-slate-900">{{ $endpoint->url }}</p>
                            <p class="text-slate-500">{{ implode(', ', $endpoint->events ?? []) }}</p>
                        </div>
-                        <form method="POST" action="{{ route('meet.settings.webhooks.destroy', $endpoint) }}">@csrf @method('DELETE')<button type="submit" class="shrink-0 text-red-600 hover:underline">Remove</button></form>
+                        <form method="POST" action="{{ route('meet.settings.webhooks.destroy', $endpoint) }}">@csrf @method('DELETE')<x-btn type="submit" variant="danger" size="sm" class="shrink-0">Remove</x-btn></form>
                    </li>
                @empty
                    <li class="px-6 py-8 text-center text-slate-500">No webhook endpoints configured.</li>
@@ -70,7 +70,7 @@
                    <h2 class="text-sm font-medium text-slate-900">Listener invitations</h2>
                    <p class="mt-1 text-sm text-slate-500">Email join links to listeners. Invited people can enter private rooms.</p>
                </div>
-                <a href="{{ route('meet.invitations.index', $room) }}" class="shrink-0 text-sm text-indigo-600 hover:underline">Bulk import</a>
+                <x-btn :href="route('meet.invitations.index', $room)" variant="link" size="sm" plain class="shrink-0">Bulk import</x-btn>
            </div>

            <form method="POST" action="{{ route('meet.invitations.store', $room) }}" class="mt-4 space-y-3">
@@ -95,15 +95,13 @@
                            </div>
                            <form method="POST" action="{{ route('meet.invitations.resend', $invitation) }}">
                                @csrf
-                                <button type="submit" class="text-xs text-indigo-600 hover:underline">Resend</button>
+                                <x-btn type="submit" variant="link" size="sm">Resend</x-btn>
                            </form>
                        </li>
                    @endforeach
                </ul>
                @if ($room->invitations->count() > 8)
-                    <a href="{{ route('meet.invitations.index', $room) }}" class="mt-2 inline-block text-sm text-indigo-600 hover:underline">
-                        View all {{ $room->invitations->count() }} invitations
-                    </a>
+                    <x-btn :href="route('meet.invitations.index', $room)" variant="link" size="sm" plain class="mt-2">View all {{ $room->invitations->count() }} invitations</x-btn>
                @endif
            @else
                <p class="mt-4 text-sm text-slate-500">No listener invitations sent yet.</p>
@@ -4,9 +4,9 @@
            <div>
                <h1 class="text-xl font-semibold text-slate-900">Registrations</h1>
                <p class="text-sm text-slate-500">{{ $room->title }}</p>
-                <a href="{{ route('meet.webinars.show', $room) }}" class="mt-1 inline-block text-sm text-indigo-600 hover:underline">← Back to webinar</a>
+                <x-btn :href="route('meet.webinars.show', $room)" variant="link" size="sm" plain class="mt-1">← Back to webinar</x-btn>
            </div>
-            <a href="{{ route('meet.webinar.register', $room) }}" target="_blank" class="text-sm text-indigo-600 hover:underline">Public registration page</a>
+            <x-btn :href="route('meet.webinar.register', $room)" target="_blank" variant="link" size="sm" plain>Public registration page</x-btn>
        </div>

        <ul class="mt-6 divide-y divide-slate-100 rounded-2xl border border-slate-200 bg-white">
@@ -17,9 +17,9 @@
                        <p class="text-slate-500">{{ $registration->email }} · {{ ucfirst($registration->status) }}</p>
                    </div>
                    @if ($registration->status === 'pending')
-                        <div class="flex gap-2">
-                            <form method="POST" action="{{ route('meet.webinar.registrations.approve', [$room, $registration]) }}">@csrf<button class="text-emerald-600 hover:underline">Approve</button></form>
-                            <form method="POST" action="{{ route('meet.webinar.registrations.reject', [$room, $registration]) }}">@csrf<button class="text-red-600 hover:underline">Reject</button></form>
+                        <div class="btn-group">
+                            <form method="POST" action="{{ route('meet.webinar.registrations.approve', [$room, $registration]) }}">@csrf<x-btn type="submit" variant="link" size="sm">Approve</x-btn></form>
+                            <form method="POST" action="{{ route('meet.webinar.registrations.reject', [$room, $registration]) }}">@csrf<x-btn type="submit" variant="danger" size="sm">Reject</x-btn></form>
                        </div>
                    @endif
                </li>