Implement Fluid Emerald app redesign

resources/js/pages/admin/users/Create.vue

@@ -34,7 +34,7 @@ const breadcrumbs: BreadcrumbItem[] = [
     <AppLayout :breadcrumbs="breadcrumbs">
         <Head title="Create user" />
 
-        <div class="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6 p-4">
+        <div class="app-page-narrow max-w-3xl">
             <Heading
                 title="Create user"
                 description="Create a user account and optionally force a password change on the next login."
@@ -52,12 +52,16 @@ const breadcrumbs: BreadcrumbItem[] = [
                 <CardContent>
                     <Form
                         v-bind="UserManagementController.store.form()"
-                        :transform="(data) => ({
-                            ...data,
-                            must_change_password_on_next_login:
-                                data.must_change_password_on_next_login === true ||
-                                data.must_change_password_on_next_login === 'on',
-                        })"
+                        :transform="
+                            (data) => ({
+                                ...data,
+                                must_change_password_on_next_login:
+                                    data.must_change_password_on_next_login ===
+                                        true ||
+                                    data.must_change_password_on_next_login ===
+                                        'on',
+                            })
+                        "
                         class="space-y-6"
                         v-slot="{ errors, processing }"
                     >
@@ -128,13 +132,19 @@ const breadcrumbs: BreadcrumbItem[] = [
                                     <span class="block font-medium">
                                         Must change password on next login
                                     </span>
-                                    <span class="text-muted-foreground block text-sm">
-                                        Redirect the user to the security settings page until they save a new password.
+                                    <span
+                                        class="text-muted-foreground block text-sm"
+                                    >
+                                        Redirect the user to the security
+                                        settings page until they save a new
+                                        password.
                                     </span>
                                 </span>
                             </Label>
                             <InputError
-                                :message="errors.must_change_password_on_next_login"
+                                :message="
+                                    errors.must_change_password_on_next_login
+                                "
                             />
                         </div>
 

resources/js/pages/admin/users/Edit.vue

@@ -50,7 +50,7 @@ const submit = (): void => {
     <AppLayout :breadcrumbs="breadcrumbs">
         <Head :title="`Edit ${user.name}`" />
 
-        <div class="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6 p-4">
+        <div class="app-page-narrow max-w-3xl">
             <Heading
                 :title="`Edit ${user.name}`"
                 description="Update user details, reset the password if needed, and control whether the user must change it on next login."

resources/js/pages/admin/users/Index.vue

@@ -45,7 +45,7 @@ const hasPermission = (actorId: number, permission: string) =>
     <AppLayout :breadcrumbs="breadcrumbs">
         <Head title="User management" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page">
             <div class="flex items-start justify-between gap-4">
                 <Heading
                     title="User management"
@@ -67,10 +67,7 @@ const hasPermission = (actorId: number, permission: string) =>
                 </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>