bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor Tailwind Configuration and Update Checkout Form UI

Browse Source 
- 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
2025-11-24 08:43:26 +01:00
parent f173a274e8
commit 46d03a0e4a
3 changed files with 27 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
app/components/Checkout/CheckoutForm.vue
View File

@@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { z } from 'zod' import { z } from 'zod'
import { AlertCircle } from 'lucide-vue-next'
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select' import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
@@ -157,7 +158,7 @@ function getError(field: string): string {
</SelectContent> </SelectContent>
</Select> </Select>
<p v-if="hasError('salutation')" class="form-error"> <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') }} {{ getError('salutation') }}
</p> </p>
</div> </div>
@@ -165,16 +166,10 @@ function getError(field: string): string {
<!-- First Name --> <!-- First Name -->
<div class="space-y-2"> <div class="space-y-2">
<label for="firstName" class="text-sm font-medium text-white">Vorname *</label> <label for="firstName" class="text-sm font-medium text-white">Vorname *</label>
<Input <Input id="firstName" v-model="form.firstName" type="text" placeholder="Max" :disabled="loading"
id="firstName" :class="{ 'border-warning/50': hasError('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"> <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') }} {{ getError('firstName') }}
</p> </p>
</div> </div>
@@ -182,16 +177,10 @@ function getError(field: string): string {
<!-- Last Name --> <!-- Last Name -->
<div class="space-y-2"> <div class="space-y-2">
<label for="lastName" class="text-sm font-medium text-white">Nachname *</label> <label for="lastName" class="text-sm font-medium text-white">Nachname *</label>
<Input <Input id="lastName" v-model="form.lastName" type="text" placeholder="Mustermann" :disabled="loading"
id="lastName" :class="{ 'border-warning/50': hasError('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"> <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') }} {{ getError('lastName') }}
</p> </p>
</div> </div>
@@ -201,15 +190,10 @@ function getError(field: string): string {
<label for="dateOfBirth" class="text-sm font-medium text-white"> <label for="dateOfBirth" class="text-sm font-medium text-white">
Geburtsdatum * Geburtsdatum *
</label> </label>
<Input <Input id="dateOfBirth" v-model="form.dateOfBirth" type="date" :disabled="loading"
id="dateOfBirth" :class="{ 'border-warning/50': hasError('dateOfBirth') }" />
v-model="form.dateOfBirth"
type="date"
:disabled="loading"
:class="{ 'border-warning/50': hasError('dateOfBirth') }"
/>
<p v-if="hasError('dateOfBirth')" class="form-error"> <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') }} {{ getError('dateOfBirth') }}
</p> </p>
</div> </div>
@@ -219,16 +203,10 @@ function getError(field: string): string {
<label for="street" class="text-sm font-medium text-white"> <label for="street" class="text-sm font-medium text-white">
Straße und Hausnummer * Straße und Hausnummer *
</label> </label>
<Input <Input id="street" v-model="form.street" type="text" placeholder="Musterstraße 123" :disabled="loading"
id="street" :class="{ 'border-warning/50': hasError('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"> <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') }} {{ getError('street') }}
</p> </p>
</div> </div>
@@ -236,17 +214,10 @@ function getError(field: string): string {
<!-- Post Code --> <!-- Post Code -->
<div class="space-y-2"> <div class="space-y-2">
<label for="postCode" class="text-sm font-medium text-white">Postleitzahl *</label> <label for="postCode" class="text-sm font-medium text-white">Postleitzahl *</label>
<Input <Input id="postCode" v-model="form.postCode" type="text" placeholder="74072" maxlength="5" :disabled="loading"
id="postCode" :class="{ 'border-warning/50': hasError('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"> <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') }} {{ getError('postCode') }}
</p> </p>
</div> </div>
@@ -254,16 +225,10 @@ function getError(field: string): string {
<!-- City --> <!-- City -->
<div class="space-y-2"> <div class="space-y-2">
<label for="city" class="text-sm font-medium text-white">Stadt *</label> <label for="city" class="text-sm font-medium text-white">Stadt *</label>
<Input <Input id="city" v-model="form.city" type="text" placeholder="Heilbronn" :disabled="loading"
id="city" :class="{ 'border-warning/50': hasError('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"> <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') }} {{ getError('city') }}
</p> </p>
</div> </div>
@@ -282,38 +247,25 @@ function getError(field: string): string {
</SelectContent> </SelectContent>
</Select> </Select>
<p v-if="hasError('countryCode')" class="form-error"> <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') }} {{ getError('countryCode') }}
</p> </p>
</div> </div>
<!-- Save Address Checkbox --> <!-- Save Address Checkbox -->
<div class="flex items-start gap-3 pt-2"> <div class="flex items-start gap-3 pt-2">
<input <input id="saveAddress" v-model="form.saveAddress" type="checkbox" :disabled="loading"
id="saveAddress" 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" />
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"> <label for="saveAddress" class="text-sm text-white/80 cursor-pointer select-none">
Adresse für zukünftige Bestellungen speichern Adresse für zukünftige Bestellungen speichern
</label> </label>
</div> </div>
<!-- Submit Button --> <!-- Submit Button -->
<Button <Button type="submit" :disabled="loading" variant="experimenta" size="experimenta" class="w-full">
type="submit"
:disabled="loading"
variant="experimenta"
size="experimenta"
class="w-full"
>
<span v-if="!loading">Weiter zur Zahlung</span> <span v-if="!loading">Weiter zur Zahlung</span>
<span v-else class="flex items-center gap-2"> <span v-else class="flex items-center gap-2">
<div <div class="animate-spin rounded-full h-4 w-4 border-2 border-white/20 border-t-white" />
class="animate-spin rounded-full h-4 w-4 border-2 border-white/20 border-t-white"
/>
Wird verarbeitet... Wird verarbeitet...
</span> </span>
</Button> </Button>

2
app/pages/internal/styleguide.vue
View File

@@ -109,7 +109,7 @@ const selectCountry = ref('DE')
</div> </div>
<div> <div>
<div class="h-24 rounded-lg bg-white mb-2"></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> <p class="text-sm text-white/70">white</p>
</div> </div>
</div> </div>

2
tailwind.config.ts
View File

@@ -62,7 +62,7 @@ export default {
DEFAULT: '#f59d24', DEFAULT: '#f59d24',
hover: '#ffb347', hover: '#ffb347',
}, },
red: '#E40521', 'experimenta-red': '#E40521',
// Purple Variants (Background) // Purple Variants (Background)
'experimenta-purple': '#2e1065', 'experimenta-purple': '#2e1065',