Implement Fluid Emerald app redesign

resources/js/pages/projects/Backlog.vue

@@ -15,7 +15,10 @@ import AppLayout from '@/layouts/AppLayout.vue';
 import { index as boardIndex } from '@/routes/projects/board';
 import { index as backlogIndex } from '@/routes/projects/backlog';
 import { index, show } from '@/routes/projects/index';
-import { create as createTicket, show as showTicket } from '@/routes/projects/tickets';
+import {
+    create as createTicket,
+    show as showTicket,
+} from '@/routes/projects/tickets';
 import type { BreadcrumbItem, ProjectBacklogPageProps } from '@/types';
 import type { TicketModel } from '@/types/models/ticket-model';
 import type { TicketStatusModel } from '@/types/models/ticket-status-model';
@@ -64,10 +67,10 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <Head :title="`${project.name} backlog`" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page">
             <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
@@ -105,15 +108,14 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
                 </div>
             </div>
 
-            <div
-                v-if="status"
-                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-            >
+            <div v-if="status" class="status-success">
                 {{ status }}
             </div>
 
-            <Card class="gap-0 overflow-hidden">
-                <CardHeader class="border-b">
+            <Card class="gap-0 overflow-hidden py-0">
+                <CardHeader
+                    class="border-outline-variant bg-surface-container-low border-b px-5 py-4"
+                >
                     <CardTitle>Backlog tickets</CardTitle>
                     <CardDescription>
                         Tickets remain here while their status belongs to
@@ -122,10 +124,7 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
                 </CardHeader>
 
                 <CardContent class="p-0">
-                    <div
-                        v-if="tickets.length === 0"
-                        class="text-muted-foreground p-6 text-sm"
-                    >
+                    <div v-if="tickets.length === 0" class="empty-state m-4">
                         No backlog tickets exist yet.
                     </div>
 
@@ -158,7 +157,7 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
                                 <tr
                                     v-for="ticket in tickets"
                                     :key="ticket.id"
-                                    class="bg-background"
+                                    class="bg-surface-container-lowest"
                                 >
                                     <td class="px-4 py-4">
                                         <Link