fix(storefront): premium UX polish for cart, checkout
- cart.component.scss: normalize hardcoded hex colors to design tokens (--text-primary, --text-secondary, --bg-primary/--bg-secondary/ --bg-tertiary, --border-color, --error-color, --success-color, --warning-color, --shadow-*, --transition-*, --radius-* fallbacks) across cart items, quantity controls, summary, login gate, terms checkbox, payment modal, payment-active QR screen, and bank-payment iframe modal - cart.component.scss: deduplicate an accidental duplicate .close-modal-btn rule block (identical CSS repeated twice) - cart.component.scss: add focus-visible rings to clear-cart, remove, quantity, checkout, close-modal, retry-payment, copy/open-link, telegram-login, and card-payment buttons - cart.component.scss: delivery-required warning now pairs an icon with the text instead of relying on color/background alone - cart.component.html: add warning icon + role="alert" to the delivery-required notice; add aria-live/aria-label to the quantity value so screen readers announce quantity changes - delivery-selector.component.scss: normalize hardcoded hex colors to design tokens; remove dead :host-context(.cart-container.alt) rules left over after the .alt theme was removed from cart.component in RC-Visual-02 (cart-container never carries an .alt class anymore); add hover/focus-visible states to the delivery <select> Build verified green via `npm run build`. Out of scope / skipped: - Did not restructure the payment modal or bank-payment iframe overlay into shared app-dialog - it has custom multi-step state (creating/ waiting/success/error/timeout) and an already-implemented manual focus-trap; restructuring it is a composition change, not visual polish - Did not convert clearCart()'s native confirm() to a custom confirm-remove dialog - no existing storefront confirm-dialog pattern to follow, and adding one is a composition/architecture change - spinner-large/spinner-small left untouched per RC-Visual-02 guidance (in-progress action state, not content loading) - .email-form block (email/phone capture after payment success) is dead CSS behind commented-out markup; left in place rather than deleting, since removing it is a code-cleanup call, not visual polish - region-selector/language-selector are header-only, not part of the cart/checkout flow - left untouched - no dedicated checkout page exists; checkout is the payment section of the cart page, covered above Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -80,7 +80,7 @@
|
||||
<button class="qty-btn" (click)="decreaseQuantity(item)" [disabled]="item.quantity <= 1" [attr.aria-label]="'cart.decreaseQuantity' | translate">
|
||||
<app-icon name="minus" [size]="14" />
|
||||
</button>
|
||||
<span class="qty-value">{{ item.quantity }}</span>
|
||||
<span class="qty-value" aria-live="polite" [attr.aria-label]="item.quantity + ' ' + ('cart.items' | translate)">{{ item.quantity }}</span>
|
||||
<button class="qty-btn" (click)="increaseQuantity(item)" [attr.aria-label]="'cart.increaseQuantity' | translate">
|
||||
<app-icon name="plus" [size]="14" />
|
||||
</button>
|
||||
@@ -121,7 +121,10 @@
|
||||
}
|
||||
|
||||
@if (!allRequiredDeliveriesSelected()) {
|
||||
<p class="delivery-warning">{{ 'cart.deliveryRequired' | translate }}</p>
|
||||
<p class="delivery-warning" role="alert">
|
||||
<app-icon name="warning" [size]="16" />
|
||||
{{ 'cart.deliveryRequired' | translate }}
|
||||
</p>
|
||||
}
|
||||
|
||||
<div class="summary-row total">
|
||||
|
||||
Reference in New Issue
Block a user