Implement Fluid Emerald app redesign

resources/js/pages/project-templates/Index.vue

@@ -16,7 +16,10 @@ import {
     edit as projectTemplatesEdit,
     index as projectTemplatesIndex,
 } from '@/routes/project-templates';
-import { create as projectsCreate, index as projectsIndex } from '@/routes/projects/index';
+import {
+    create as projectsCreate,
+    index as projectsIndex,
+} from '@/routes/projects/index';
 import type { BreadcrumbItem, ProjectTemplatesIndexPageProps } from '@/types';
 
 const props = defineProps<ProjectTemplatesIndexPageProps>();
@@ -39,8 +42,10 @@ const removeTemplate = (templateId: number): void => {
     <AppLayout :breadcrumbs="breadcrumbs">
         <Head title="Project templates" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
-            <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div class="app-page">
+            <div
+                class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+            >
                 <Heading
                     title="Project templates"
                     description="Reusable published project templates. Internal project base templates stay hidden here by default."
@@ -57,30 +62,44 @@ const removeTemplate = (templateId: number): void => {
                 </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>
 
-            <div v-if="templates.length === 0" class="text-muted-foreground text-sm">
+            <div v-if="templates.length === 0" class="empty-state">
                 No published project templates have been saved yet.
             </div>
 
             <div v-else class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-                <Card v-for="template in templates" :key="template.id" class="h-full">
+                <Card
+                    v-for="template in templates"
+                    :key="template.id"
+                    class="h-full"
+                >
                     <CardHeader>
                         <div class="flex flex-wrap items-center gap-2">
                             <CardTitle>{{ template.name }}</CardTitle>
-                            <Badge variant="secondary">{{ template.slug }}</Badge>
-                            <Badge v-if="template.linked_project_count" variant="outline">
-                                {{ template.linked_project_count }} linked {{ template.linked_project_count === 1 ? 'project' : 'projects' }}
+                            <Badge variant="secondary">{{
+                                template.slug
+                            }}</Badge>
+                            <Badge
+                                v-if="template.linked_project_count"
+                                variant="outline"
+                            >
+                                {{ template.linked_project_count }} linked
+                                {{
+                                    template.linked_project_count === 1
+                                        ? 'project'
+                                        : 'projects'
+                                }}
                             </Badge>
                         </div>
                         <CardDescription>
                             <template v-if="template.source_project">
-                                Saved from {{ template.source_project.name }} ({{ template.source_project.key }}).
+                                Saved from
+                                {{ template.source_project.name }} ({{
+                                    template.source_project.key
+                                }}).
                             </template>
                             <template v-else>
                                 Saved template configuration.
@@ -106,7 +125,13 @@ const removeTemplate = (templateId: number): void => {
                             </Button>
 
                             <Button as-child variant="outline">
-                                <Link :href="projectsCreate({ query: { template: template.id } })">
+                                <Link
+                                    :href="
+                                        projectsCreate({
+                                            query: { template: template.id },
+                                        })
+                                    "
+                                >
                                     Use template
                                 </Link>
                             </Button>