Implement Fluid Emerald app redesign

resources/js/pages/projects/settings/Board.vue

@@ -79,10 +79,10 @@ const statusAllowsTarget = (
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <Head :title="`${project.name} board settings`" />
 
-        <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"
             >
@@ -131,10 +131,7 @@ const statusAllowsTarget = (
                 </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>
 
@@ -144,7 +141,9 @@ const statusAllowsTarget = (
                         Template inheritance: {{ templateState.templateName }}
                     </CardTitle>
                     <CardDescription>
-                        This project stays linked to its template. Sections below show whether the current configuration is still inherited or has local overrides.
+                        This project stays linked to its template. Sections
+                        below show whether the current configuration is still
+                        inherited or has local overrides.
                     </CardDescription>
                 </CardHeader>
                 <CardContent class="flex flex-wrap gap-2">