From 07683824c27ca7779bacf4e45ce6bd182daeb16e Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Wed, 1 Oct 2025 18:58:10 -0400
Subject: [PATCH] feat: Improve UI of Create New Sermon page

---
 pages/admin.vue | 86 +++++++++++++++++++++----------------------------
 1 file changed, 37 insertions(+), 49 deletions(-)

diff --git a/pages/admin.vue b/pages/admin.vue
index c400be7..b1b0e9b 100644
--- a/pages/admin.vue
+++ b/pages/admin.vue
@@ -1,34 +1,31 @@
 <template>
-  <div class="min-h-screen bg-gray-50">
+  <div class="min-h-screen bg-gray-100">
     <!-- Header -->
-    <header class="bg-white shadow-sm border-b">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex justify-between items-center py-4">
-          <div class="flex items-center">
-            <img src="/logos/logo.png" alt="New Life Christian Church" class="logo-image" />
-            <UButton
-              @click="navigateTo('/')"
-              variant="ghost"
-              color="gray"
-              icon="i-heroicons-arrow-left"
-              class="mr-4"
-            >
-              Back to Sermons
-            </UButton>
-            <h1 class="text-2xl font-bold text-gray-900">Create New Sermon</h1>
-          </div>
+    <UCard class="rounded-none" :ui="{ body: { padding: 'py-2 px-4 sm:px-6 lg:px-8' } }">
+      <div class="flex justify-between items-center">
+        <div class="flex items-center space-x-4">
+          <img src="/logos/logo.png" alt="New Life Christian Church" class="h-10" />
           <UButton
-            @click="handleLogout"
-            variant="outline"
+            @click="navigateTo('/')"
+            variant="ghost"
             color="gray"
+            icon="i-heroicons-arrow-left"
           >
-            Logout
+            Back to Sermons
           </UButton>
+          <h1 class="text-2xl font-bold text-gray-900">Create New Sermon</h1>
         </div>
+        <UButton
+          @click="handleLogout"
+          variant="outline"
+          color="gray"
+        >
+          Logout
+        </UButton>
       </div>
-    </header>
+    </UCard>
 
-    <main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <UContainer class="py-8">
       <UCard>
         <template #header>
           <h2 class="text-xl font-semibold">Sermon Details</h2>
@@ -39,57 +36,50 @@
           <div class="space-y-4">
             <h3 class="text-lg font-medium text-gray-900">Basic Information</h3>
 
-            <div class="flex flex-wrap items-end gap-x-4 gap-y-2 mb-4">
-              <UFormGroup label="Sermon Title" name="title" required class="w-full sm:max-w-xs">
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <UFormGroup label="Sermon Title" name="title" required>
                 <UInput
                   v-model="form.title"
                   placeholder="Enter sermon title"
                   :disabled="loading"
-                  size="sm"
                 />
               </UFormGroup>
 
-              <UFormGroup label="Sermon Date" name="date" required class="w-full sm:max-w-[150px]">
+              <UFormGroup label="Sermon Date" name="date" required>
                 <UInput
                   v-model="form.date"
                   type="date"
                   :disabled="loading"
-                  size="sm"
                 />
               </UFormGroup>
             </div>
 
-            <div class="bg-blue-50 p-4 rounded-lg">
-              <p class="text-sm text-blue-800">
-                <strong>Generated URL:</strong>
-                <span v-if="form.title && form.date" class="font-mono">
-                  {{ generateSlug(form.title, form.date) }}
-                </span>
-                <span v-else class="text-blue-600">Enter title and date to see URL</span>
-              </p>
-            </div>
+            <UFormGroup label="Generated URL" name="generatedUrl">
+              <UInput
+                :value="form.title && form.date ? generateSlug(form.title, form.date) : 'Enter title and date to see URL'"
+                :disabled="loading"
+                readonly
+              />
+            </UFormGroup>
           </div>
 
           <!-- Bible References -->
-          <div class="space-y-2">
-            <h3 class="text-lg font-medium text-gray-900">Bible References</h3>
+          <UFormGroup label="Bible References" name="bibleReferences">
             <div
               v-for="(reference, index) in form.bibleReferences"
               :key="index"
-              class="flex items-center gap-2"
+              class="flex items-center gap-2 mb-2"
             >
               <UInput
                 v-model="form.bibleReferences[index]"
                 :placeholder="`Bible reference ${index + 1}`"
                 :disabled="loading"
                 class="flex-1"
-                size="lg"
               />
               <UButton
                 @click="removeBibleReference(index)"
                 variant="ghost"
                 color="red"
-                size="sm"
                 icon="i-heroicons-minus"
                 :disabled="loading"
                 v-if="form.bibleReferences.length > 1"
@@ -102,33 +92,31 @@
               icon="i-heroicons-plus"
               :disabled="loading"
               :padded="false"
-              class="-ml-1 mt-2"
+              class="-ml-1"
             >
               Add another reference
             </UButton>
-          </div>
+          </UFormGroup>
 
           <!-- Personal Application -->
-          <div class="space-y-4">
-            <h3 class="text-lg font-medium text-gray-900">Personal Application</h3>
+          <UFormGroup label="Personal Application" name="personalApplication">
             <UTextarea
               v-model="form.personalApplication"
               :rows="4"
               placeholder="Describe how this sermon applies to daily life..."
               :disabled="loading"
             />
-          </div>
+          </UFormGroup>
 
           <!-- Pastor's Challenge -->
-          <div class="space-y-4">
-            <h3 class="text-lg font-medium text-gray-900">Pastor's Challenge</h3>
+          <UFormGroup label="Pastor's Challenge" name="pastorChallenge">
             <UTextarea
               v-model="form.pastorChallenge"
               :rows="4"
               placeholder="What challenge does the pastor give to the congregation?"
               :disabled="loading"
             />
-          </div>
+          </UFormGroup>
 
           <!-- Submit -->
           <div class="flex justify-end space-x-4">