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:
sdarbinyan
2026-07-23 11:57:23 +04:00
parent ea1a5d9b8a
commit 99560202c3
3 changed files with 147 additions and 123 deletions

View File

@@ -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">