Fix Worklow Form

frontend/pages/workflows/[token].vue

@@ -62,62 +62,74 @@ const resetForm = () => {
 </script>
 
 <template>
-  <div class="min-h-screen bg-gray-50 flex items-center justify-center p-4 font-sans">
+  <div class="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(var(--ui-primary-rgb),0.12),_transparent_35%),linear-gradient(180deg,var(--ui-bg)_0%,color-mix(in_oklab,var(--ui-bg)_92%,white)_100%)] px-4 py-10">
+    <div class="mx-auto flex min-h-[calc(100vh-5rem)] w-full max-w-5xl items-center justify-center">
 
-    <div v-if="status === 'loading'" class="text-center">
+      <div v-if="status === 'loading'" class="space-y-4 text-center">
-      <UIcon name="i-heroicons-arrow-path" class="w-10 h-10 animate-spin text-primary-500 mx-auto" />
+        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-3xl bg-primary/10 text-primary ring-1 ring-primary/15">
-      <p class="mt-4 text-gray-500">Lade Formular...</p>
+          <UIcon name="i-heroicons-arrow-path" class="h-8 w-8 animate-spin" />
-    </div>
+        </div>
-
+        <div>
-    <UCard v-else-if="status === 'error'" class="w-full max-w-md border-red-200">
+          <p class="text-base font-medium text-highlighted">Lade Formular...</p>
-      <div class="text-center text-red-600 space-y-2">
+          <p class="text-sm text-muted">Der Workflow wird vorbereitet.</p>
-        <UIcon name="i-heroicons-exclamation-circle" class="w-12 h-12 mx-auto" />
-        <h3 class="font-bold text-lg">Fehler</h3>
-        <p>{{ errorMsg }}</p>
-      </div>
-    </UCard>
-
-    <UCard v-else-if="status === 'pin_required'" class="w-full max-w-sm shadow-xl">
-      <div class="text-center mb-6">
-        <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-3">
-          <UIcon name="i-heroicons-lock-closed" class="w-6 h-6 text-primary-600" />
         </div>
-        <h2 class="text-xl font-bold text-gray-900">Geschützter Bereich</h2>
-        <p class="text-sm text-gray-500">Bitte PIN eingeben</p>
       </div>
-      <form @submit.prevent="handlePinSubmit" class="space-y-4">
+
-        <UInput
+      <UCard v-else-if="status === 'error'" class="w-full max-w-md border-error/20 shadow-xl">
-            v-model="pin"
+        <div class="space-y-3 text-center text-error">
-            type="password"
+          <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-error/10 ring-1 ring-error/15">
-            placeholder="PIN"
+            <UIcon name="i-heroicons-exclamation-circle" class="h-8 w-8" />
-            input-class="text-center text-lg tracking-widest"
+          </div>
-            autofocus
+          <div>
-            icon="i-heroicons-key"
+            <h3 class="text-lg font-semibold">Fehler</h3>
+            <p class="text-sm text-toned">{{ errorMsg }}</p>
+          </div>
+        </div>
+      </UCard>
+
+      <UCard v-else-if="status === 'pin_required'" class="w-full max-w-sm shadow-xl ring-1 ring-black/5">
+        <div class="mb-6 text-center">
+          <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary ring-1 ring-primary/15">
+            <UIcon name="i-heroicons-lock-closed" class="h-6 w-6" />
+          </div>
+          <h2 class="text-xl font-semibold text-highlighted">Geschützter Bereich</h2>
+          <p class="text-sm text-muted">Bitte PIN eingeben</p>
+        </div>
+        <form @submit.prevent="handlePinSubmit" class="space-y-4">
+          <UInput
+              v-model="pin"
+              type="password"
+              placeholder="PIN"
+              input-class="text-center text-lg tracking-widest"
+              autofocus
+              icon="i-heroicons-key"
+              class="w-full"
+              size="lg"
+          />
+          <div v-if="errorMsg" class="text-center text-xs font-medium text-error">{{ errorMsg }}</div>
+          <UButton type="submit" block label="Entsperren" size="lg" />
+        </form>
+      </UCard>
+
+      <UCard v-else-if="status === 'success'" class="w-full max-w-md py-10 text-center shadow-xl ring-1 ring-black/5">
+        <div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-3xl bg-success/10 text-success ring-1 ring-success/15">
+          <UIcon name="i-heroicons-check" class="h-8 w-8" />
+        </div>
+        <h2 class="mb-2 text-2xl font-semibold text-highlighted">Gespeichert!</h2>
+        <p class="mb-6 text-sm text-muted">Die Daten wurden erfolgreich übertragen.</p>
+        <UButton variant="outline" @click="resetForm">Neuen Eintrag erfassen</UButton>
+      </UCard>
+
+      <div v-else-if="status === 'ready'" class="w-full max-w-xl">
+        <PublicDynamicForm
+            v-if="context && token"
+            :key="formKey"
+            :context="context"
+            :token="token"
+            :pin="pin"
+            @success="handleFormSuccess"
         />
-        <div v-if="errorMsg" class="text-red-500 text-xs text-center font-medium">{{ errorMsg }}</div>
-        <UButton type="submit" block label="Entsperren" size="lg" />
-      </form>
-    </UCard>
-
-    <UCard v-else-if="status === 'success'" class="w-full max-w-md text-center py-10">
-      <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
-        <UIcon name="i-heroicons-check" class="w-8 h-8 text-green-600" />
       </div>
-      <h2 class="text-2xl font-bold text-gray-900 mb-2">Gespeichert!</h2>
-      <p class="text-gray-500 mb-6">Die Daten wurden erfolgreich übertragen.</p>
-      <UButton variant="outline" @click="resetForm">Neuen Eintrag erfassen</UButton>
-    </UCard>
-
-    <div v-else-if="status === 'ready'" class="w-full max-w-lg">
-      <PublicDynamicForm
-          v-if="context && token"
-          :key="formKey"
-          :context="context"
-          :token="token"
-          :pin="pin"
-          @success="handleFormSuccess"
-      />
     </div>
-
   </div>
-</template>
+</template>