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
@@ -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">
|
||||
|
||||
@@ -43,15 +43,20 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #fef2f2;
|
||||
border-color: #ef4444;
|
||||
color: #ef4444;
|
||||
background: color-mix(in srgb, var(--error-color) 8%, transparent);
|
||||
border-color: var(--error-color);
|
||||
color: var(--error-color);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -98,18 +103,18 @@
|
||||
.cart-container.platform .cart-item {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
background: white;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg, 13px);
|
||||
padding: 20px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
|
||||
box-shadow: var(--shadow-sm);
|
||||
|
||||
&:hover {
|
||||
border-color: #a1b4b5;
|
||||
box-shadow: 0 4px 12px rgba(73, 118, 113, 0.1);
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@@ -126,10 +131,10 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
background: white;
|
||||
background: var(--bg-primary);
|
||||
display: block;
|
||||
padding: 6px;
|
||||
transition: transform 0.3s ease;
|
||||
transition: transform var(--transition-normal);
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
@@ -170,14 +175,19 @@
|
||||
padding: 6px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #a1b4b5;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-sm, 8px);
|
||||
transition: all 0.2s;
|
||||
transition: background-color var(--transition-normal), color var(--transition-normal);
|
||||
|
||||
&:hover {
|
||||
background: #fef2f2;
|
||||
color: #ef4444;
|
||||
background: color-mix(in srgb, var(--error-color) 8%, transparent);
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -239,7 +249,7 @@
|
||||
|
||||
.original-price {
|
||||
font-size: var(--font-size-sm, 0.8125rem);
|
||||
color: #9ca3af;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
@@ -289,6 +299,11 @@
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.qty-value {
|
||||
@@ -307,7 +322,7 @@
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 80px;
|
||||
background: #ef4444;
|
||||
background: var(--error-color);
|
||||
border: none;
|
||||
color: white;
|
||||
display: flex;
|
||||
@@ -316,11 +331,18 @@
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease;
|
||||
border-radius: 0 12px 12px 0;
|
||||
transition: opacity var(--transition-slow);
|
||||
border-radius: 0 var(--radius-md, 12px) var(--radius-md, 12px) 0;
|
||||
|
||||
&:active {
|
||||
background: #dc2626;
|
||||
background: color-mix(in srgb, var(--error-color) 85%, black);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
outline: 2px solid white;
|
||||
outline-offset: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -396,10 +418,10 @@
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--primary-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(73, 118, 113, 0.3);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
&:active {
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@@ -407,6 +429,11 @@
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-login-gate {
|
||||
@@ -433,38 +460,51 @@
|
||||
margin: 0 0 4px;
|
||||
font-size: var(--font-size-lg, 1rem);
|
||||
font-weight: var(--font-weight-bold, 700);
|
||||
color: #1a1a1a;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.login-gate-desc {
|
||||
margin: 0 0 16px;
|
||||
font-size: var(--font-size-sm, 0.8125rem);
|
||||
color: #6b7280;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
// Telegram brand blue is intentional here (matches the Telegram logo/CTA convention),
|
||||
// not a design-token drift.
|
||||
.telegram-login-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
border-radius: var(--radius-sm, 10px);
|
||||
background: #2AABEE;
|
||||
color: #fff;
|
||||
font-size: var(--font-size-md, 0.9375rem);
|
||||
font-weight: var(--font-weight-semibold, 600);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: background-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
|
||||
|
||||
&:hover {
|
||||
background: #229ED9;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(42, 171, 238, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid #2AABEE;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Intentionally dark/near-black, distinct from --primary-color, to visually separate
|
||||
// the card-payment CTA from the QR-payment CTA (not a token-drift oversight).
|
||||
.card-payment-btn {
|
||||
background: #1f2937;
|
||||
|
||||
@@ -472,6 +512,11 @@
|
||||
background: #111827;
|
||||
box-shadow: 0 6px 16px rgba(31, 41, 55, 0.28);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid #1f2937;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -501,10 +546,10 @@
|
||||
top: 2px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
background: white;
|
||||
border: 2px solid #d1d5db;
|
||||
background: var(--bg-primary);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--radius-xs, 4px);
|
||||
transition: all 0.2s;
|
||||
transition: background-color var(--transition-normal), border-color var(--transition-normal);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
@@ -522,7 +567,7 @@
|
||||
|
||||
.terms-text {
|
||||
font-size: var(--font-size-sm, 0.8125rem);
|
||||
color: #6b7280;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
|
||||
a {
|
||||
@@ -540,15 +585,23 @@
|
||||
.delivery-warning {
|
||||
margin: -4px 0 0;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
border-radius: var(--radius-sm, 10px);
|
||||
font-size: var(--font-size-sm, 0.8125rem);
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
|
||||
app-icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-container.platform .cart-summary .delivery-warning {
|
||||
color: #9a6700;
|
||||
background: #fff8e8;
|
||||
border: 1px solid #f1ddb2;
|
||||
color: color-mix(in srgb, var(--warning-color) 65%, black);
|
||||
background: color-mix(in srgb, var(--warning-color) 12%, white);
|
||||
border: 1px solid color-mix(in srgb, var(--warning-color) 35%, white);
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
@@ -603,7 +656,7 @@
|
||||
}
|
||||
|
||||
.payment-modal {
|
||||
background: white;
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-lg, 13px);
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
@@ -612,8 +665,10 @@
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
// Deduplicated: this rule previously appeared twice (identical) - kept a single definition.
|
||||
.close-modal-btn {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
@@ -621,19 +676,19 @@
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
background: #f3f4f6;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: #6b7280;
|
||||
transition: background-color var(--transition-normal), color var(--transition-normal), transform var(--transition-normal);
|
||||
color: var(--text-secondary);
|
||||
z-index: 10;
|
||||
|
||||
&:hover {
|
||||
background: #e5e7eb;
|
||||
color: #1f2937;
|
||||
background: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@@ -641,36 +696,9 @@
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
.close-modal-btn {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
background: #f3f4f6;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: #6b7280;
|
||||
z-index: 10;
|
||||
|
||||
&:hover {
|
||||
background: #e5e7eb;
|
||||
color: #1f2937;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
svg {
|
||||
@@ -685,11 +713,11 @@
|
||||
h2 {
|
||||
font-size: var(--font-size-3xl, 1.5rem);
|
||||
margin: 20px 0 10px;
|
||||
color: #1a1a1a;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
p {
|
||||
color: #6b7280;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -697,7 +725,7 @@
|
||||
.success-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #10b981;
|
||||
background: var(--success-color);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -712,7 +740,7 @@
|
||||
.error-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #f97316;
|
||||
background: var(--error-color);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -737,13 +765,18 @@
|
||||
font-size: var(--font-size-lg, 1rem);
|
||||
font-weight: var(--font-weight-bold, 700);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: background-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(73, 118, 113, 0.3);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -786,7 +819,7 @@
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
color: #1a1a1a;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.qr-section {
|
||||
@@ -797,9 +830,9 @@
|
||||
|
||||
.qr-wrapper {
|
||||
padding: 16px;
|
||||
background: white;
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-md, 12px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: var(--shadow-md);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -842,19 +875,19 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background: #f9fafb;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-sm, 8px);
|
||||
margin-bottom: 16px;
|
||||
|
||||
.label {
|
||||
color: #6b7280;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-md, 0.9375rem);
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: var(--font-size-2xl, 1.25rem);
|
||||
font-weight: var(--font-weight-bold, 700);
|
||||
color: #1a1a1a;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -863,7 +896,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
color: #6b7280;
|
||||
color: var(--text-secondary);
|
||||
|
||||
.pulse-dot {
|
||||
width: 8px;
|
||||
@@ -887,20 +920,25 @@
|
||||
font-weight: var(--font-weight-semibold, 600);
|
||||
font-size: var(--font-size-md, 0.9375rem);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
transition: background-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
background: #10b981;
|
||||
background: var(--success-color);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
|
||||
|
||||
&:hover {
|
||||
background: #059669;
|
||||
background: color-mix(in srgb, var(--success-color) 85%, black);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
|
||||
}
|
||||
@@ -948,7 +986,7 @@
|
||||
width: min(960px, 92vw);
|
||||
height: min(760px, 86vh);
|
||||
padding: 56px 16px 16px;
|
||||
background: white;
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-lg, 13px);
|
||||
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
@@ -958,7 +996,7 @@
|
||||
height: 100%;
|
||||
border: 0;
|
||||
border-radius: var(--radius-sm, 8px);
|
||||
background: white;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
@@ -985,7 +1023,7 @@
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #ef4444;
|
||||
color: var(--error-color);
|
||||
font-size: var(--font-size-base, 0.875rem);
|
||||
padding-left: 4px;
|
||||
animation: slideDown 0.2s ease;
|
||||
|
||||
Reference in New Issue
Block a user