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.
This commit is contained in:
Bastian Masanek
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -62,7 +62,7 @@ export default {
|
||||
DEFAULT: '#f59d24',
|
||||
hover: '#ffb347',
|
||||
},
|
||||
red: '#E40521',
|
||||
'experimenta-red': '#E40521',
|
||||
|
||||
// Purple Variants (Background)
|
||||
'experimenta-purple': '#2e1065',
|
||||
|
||||
Reference in New Issue
Block a user