From 46d03a0e4af779dc5f842fff548550e40b58147a Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Mon, 24 Nov 2025 08:43:26 +0100
Subject: [PATCH] Refactor Tailwind Configuration and Update Checkout Form UI

- Renamed the 'red' color to 'experimenta-red' in tailwind.config.ts for better clarity.
- Replaced SVG error icons with the AlertCircle component in CheckoutForm.vue for improved visual consistency.
- Streamlined Input component structure in CheckoutForm.vue for cleaner code.
- Updated styleguide.vue to reflect changes in color representation for better documentation.
---
 app/components/Checkout/CheckoutForm.vue | 98 ++++++------------------
 app/pages/internal/styleguide.vue        |  2 +-
 tailwind.config.ts                       |  2 +-
 3 files changed, 27 insertions(+), 75 deletions(-)

diff --git a/app/components/Checkout/CheckoutForm.vue b/app/components/Checkout/CheckoutForm.vue
index 1af0f08..a934ab4 100644
--- a/app/components/Checkout/CheckoutForm.vue
+++ b/app/components/Checkout/CheckoutForm.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { z } from 'zod'
+import { AlertCircle } from 'lucide-vue-next'
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
@@ -157,7 +158,7 @@ function getError(field: string): string {
         </SelectContent>
       </Select>
       <p v-if="hasError('salutation')" class="form-error">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-warning flex-shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+        <AlertCircle class="h-4 w-4 text-warning flex-shrink-0" />
         {{ getError('salutation') }}
       </p>
     </div>
@@ -165,16 +166,10 @@ function getError(field: string): string {
     <!-- First Name -->
     <div class="space-y-2">
       <label for="firstName" class="text-sm font-medium text-white">Vorname *</label>
-      <Input
-        id="firstName"
-        v-model="form.firstName"
-        type="text"
-        placeholder="Max"
-        :disabled="loading"
-        :class="{ 'border-warning/50': hasError('firstName') }"
-      />
+      <Input id="firstName" v-model="form.firstName" type="text" placeholder="Max" :disabled="loading"
+        :class="{ 'border-warning/50': hasError('firstName') }" />
       <p v-if="hasError('firstName')" class="form-error">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-warning flex-shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+        <AlertCircle class="h-4 w-4 text-warning flex-shrink-0" />
         {{ getError('firstName') }}
       </p>
     </div>
@@ -182,16 +177,10 @@ function getError(field: string): string {
     <!-- Last Name -->
     <div class="space-y-2">
       <label for="lastName" class="text-sm font-medium text-white">Nachname *</label>
-      <Input
-        id="lastName"
-        v-model="form.lastName"
-        type="text"
-        placeholder="Mustermann"
-        :disabled="loading"
-        :class="{ 'border-warning/50': hasError('lastName') }"
-      />
+      <Input id="lastName" v-model="form.lastName" type="text" placeholder="Mustermann" :disabled="loading"
+        :class="{ 'border-warning/50': hasError('lastName') }" />
       <p v-if="hasError('lastName')" class="form-error">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-warning flex-shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+        <AlertCircle class="h-4 w-4 text-warning flex-shrink-0" />
         {{ getError('lastName') }}
       </p>
     </div>
@@ -201,15 +190,10 @@ function getError(field: string): string {
       <label for="dateOfBirth" class="text-sm font-medium text-white">
         Geburtsdatum *
       </label>
-      <Input
-        id="dateOfBirth"
-        v-model="form.dateOfBirth"
-        type="date"
-        :disabled="loading"
-        :class="{ 'border-warning/50': hasError('dateOfBirth') }"
-      />
+      <Input id="dateOfBirth" v-model="form.dateOfBirth" type="date" :disabled="loading"
+        :class="{ 'border-warning/50': hasError('dateOfBirth') }" />
       <p v-if="hasError('dateOfBirth')" class="form-error">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-warning flex-shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+        <AlertCircle class="h-4 w-4 text-warning flex-shrink-0" />
         {{ getError('dateOfBirth') }}
       </p>
     </div>
@@ -219,16 +203,10 @@ function getError(field: string): string {
       <label for="street" class="text-sm font-medium text-white">
         Straße und Hausnummer *
       </label>
-      <Input
-        id="street"
-        v-model="form.street"
-        type="text"
-        placeholder="Musterstraße 123"
-        :disabled="loading"
-        :class="{ 'border-warning/50': hasError('street') }"
-      />
+      <Input id="street" v-model="form.street" type="text" placeholder="Musterstraße 123" :disabled="loading"
+        :class="{ 'border-warning/50': hasError('street') }" />
       <p v-if="hasError('street')" class="form-error">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-warning flex-shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+        <AlertCircle class="h-4 w-4 text-warning flex-shrink-0" />
         {{ getError('street') }}
       </p>
     </div>
@@ -236,17 +214,10 @@ function getError(field: string): string {
     <!-- Post Code -->
     <div class="space-y-2">
       <label for="postCode" class="text-sm font-medium text-white">Postleitzahl *</label>
-      <Input
-        id="postCode"
-        v-model="form.postCode"
-        type="text"
-        placeholder="74072"
-        maxlength="5"
-        :disabled="loading"
-        :class="{ 'border-warning/50': hasError('postCode') }"
-      />
+      <Input id="postCode" v-model="form.postCode" type="text" placeholder="74072" maxlength="5" :disabled="loading"
+        :class="{ 'border-warning/50': hasError('postCode') }" />
       <p v-if="hasError('postCode')" class="form-error">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-warning flex-shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+        <AlertCircle class="h-4 w-4 text-warning flex-shrink-0" />
         {{ getError('postCode') }}
       </p>
     </div>
@@ -254,16 +225,10 @@ function getError(field: string): string {
     <!-- City -->
     <div class="space-y-2">
       <label for="city" class="text-sm font-medium text-white">Stadt *</label>
-      <Input
-        id="city"
-        v-model="form.city"
-        type="text"
-        placeholder="Heilbronn"
-        :disabled="loading"
-        :class="{ 'border-warning/50': hasError('city') }"
-      />
+      <Input id="city" v-model="form.city" type="text" placeholder="Heilbronn" :disabled="loading"
+        :class="{ 'border-warning/50': hasError('city') }" />
       <p v-if="hasError('city')" class="form-error">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-warning flex-shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+        <AlertCircle class="h-4 w-4 text-warning flex-shrink-0" />
         {{ getError('city') }}
       </p>
     </div>
@@ -282,38 +247,25 @@ function getError(field: string): string {
         </SelectContent>
       </Select>
       <p v-if="hasError('countryCode')" class="form-error">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-warning flex-shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+        <AlertCircle class="h-4 w-4 text-warning flex-shrink-0" />
         {{ getError('countryCode') }}
       </p>
     </div>
 
     <!-- Save Address Checkbox -->
     <div class="flex items-start gap-3 pt-2">
-      <input
-        id="saveAddress"
-        v-model="form.saveAddress"
-        type="checkbox"
-        :disabled="loading"
-        class="mt-1 h-4 w-4 rounded border-white/20 bg-white/10 text-experimenta-accent focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 focus:ring-offset-experimenta-primary"
-      />
+      <input id="saveAddress" v-model="form.saveAddress" type="checkbox" :disabled="loading"
+        class="mt-1 h-4 w-4 rounded border-white/20 bg-white/10 text-experimenta-accent focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 focus:ring-offset-experimenta-primary" />
       <label for="saveAddress" class="text-sm text-white/80 cursor-pointer select-none">
         Adresse für zukünftige Bestellungen speichern
       </label>
     </div>
 
     <!-- Submit Button -->
-    <Button
-      type="submit"
-      :disabled="loading"
-      variant="experimenta"
-      size="experimenta"
-      class="w-full"
-    >
+    <Button type="submit" :disabled="loading" variant="experimenta" size="experimenta" class="w-full">
       <span v-if="!loading">Weiter zur Zahlung</span>
       <span v-else class="flex items-center gap-2">
-        <div
-          class="animate-spin rounded-full h-4 w-4 border-2 border-white/20 border-t-white"
-        />
+        <div class="animate-spin rounded-full h-4 w-4 border-2 border-white/20 border-t-white" />
         Wird verarbeitet...
       </span>
     </Button>
diff --git a/app/pages/internal/styleguide.vue b/app/pages/internal/styleguide.vue
index 802601e..f06f02e 100644
--- a/app/pages/internal/styleguide.vue
+++ b/app/pages/internal/styleguide.vue
@@ -109,7 +109,7 @@ const selectCountry = ref('DE')
             </div>
             <div>
               <div class="h-24 rounded-lg bg-white mb-2"></div>
-              <p class="font-mono text-sm text-black">#ffffff</p>
+              <p class="font-mono text-sm text-white/90">#ffffff</p>
               <p class="text-sm text-white/70">white</p>
             </div>
           </div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4590970..a9caa4f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -62,7 +62,7 @@ export default {
           DEFAULT: '#f59d24',
           hover: '#ffb347',
         },
-        red: '#E40521',
+        'experimenta-red': '#E40521',
 
         // Purple Variants (Background)
         'experimenta-purple': '#2e1065',