Implement Fluid Emerald app redesign

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

@@ -218,10 +218,10 @@ const submitUpdate = (): void => {
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <Head :title="`${project.name} repository 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"
             >
@@ -270,10 +270,7 @@ const submitUpdate = (): 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>
 
@@ -283,7 +280,8 @@ const submitUpdate = (): void => {
                         Template inheritance: {{ templateState.templateName }}
                     </CardTitle>
                     <CardDescription>
-                        Repository links can stay inherited from the template or be replaced with project-specific overrides.
+                        Repository links can stay inherited from the template or
+                        be replaced with project-specific overrides.
                     </CardDescription>
                 </CardHeader>
                 <CardContent class="flex flex-wrap gap-2">
@@ -320,9 +318,9 @@ const submitUpdate = (): void => {
                         </Link>
                     </Button>
                     <p class="text-muted-foreground text-sm">
-                        Without a matching personal connection, {{ appName }} only
-                        shows the repository name and links you to your user
-                        settings.
+                        Without a matching personal connection,
+                        {{ appName }} only shows the repository name and links
+                        you to your user settings.
                     </p>
                 </CardContent>
             </Card>
@@ -647,8 +645,8 @@ const submitUpdate = (): void => {
                                 >
                                     This project link is visible, but you need a
                                     matching Git connection in your user
-                                    settings before {{ appName }} can open or query
-                                    this repository for you.
+                                    settings before {{ appName }} can open or
+                                    query this repository for you.
                                 </p>
 
                                 <div class="mt-4 flex justify-end">
@@ -683,9 +681,9 @@ const submitUpdate = (): void => {
                         <CardHeader class="border-b">
                             <CardTitle>Detected personal sources</CardTitle>
                             <CardDescription>
-                                {{ appName }} loads repositories from your personal
-                                Git connections and offers them for project
-                                linking.
+                                {{ appName }} loads repositories from your
+                                personal Git connections and offers them for
+                                project linking.
                             </CardDescription>
                         </CardHeader>