From 99560202c3a18401a861391509e718c0b00fd71a Mon Sep 17 00:00:00 2001
From: sdarbinyan <sdarbinyan@4pay.ru>
Date: Thu, 23 Jul 2026 11:57:23 +0400
Subject: [PATCH] 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>
---
 .../delivery-selector.component.scss          |  49 ++--
 src/app/pages/cart/cart.component.html        |   7 +-
 src/app/pages/cart/cart.component.scss        | 214 +++++++++++-------
 3 files changed, 147 insertions(+), 123 deletions(-)

diff --git a/src/app/components/delivery-selector/delivery-selector.component.scss b/src/app/components/delivery-selector/delivery-selector.component.scss
index ee70e5b..aea7b04 100644
--- a/src/app/components/delivery-selector/delivery-selector.component.scss
+++ b/src/app/components/delivery-selector/delivery-selector.component.scss
@@ -6,8 +6,8 @@
   margin-top: 12px;
   padding: 12px;
   border-radius: var(--radius-md, 12px);
-  border: 1px solid #d3dad9;
-  background: #fafbfb;
+  border: 1px solid var(--border-color);
+  background: var(--bg-secondary);
 }
 
 .delivery-label {
@@ -15,23 +15,28 @@
   margin-bottom: 8px;
   font-size: var(--font-size-sm, 0.8125rem);
   font-weight: var(--font-weight-bold, 700);
-  color: #3f5f5c;
+  color: var(--text-primary);
 }
 
 .delivery-control select {
   width: 100%;
   padding: 10px 12px;
-  border-radius: 10px;
-  border: 1px solid #c9d5d3;
-  background: #fff;
-  color: #1f2937;
+  border-radius: var(--radius-sm, 10px);
+  border: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  color: var(--text-primary);
   font-size: var(--font-size-base, 0.875rem);
   line-height: 1.4;
+  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
+
+  &:hover {
+    border-color: var(--primary-color);
+  }
 }
 
-.delivery-control select:focus {
+.delivery-control select:focus-visible {
   outline: none;
-  border-color: #497671;
+  border-color: var(--primary-color);
   box-shadow: 0 0 0 3px rgba(73, 118, 113, 0.12);
 }
 
@@ -39,8 +44,8 @@
   display: grid;
   gap: 4px;
   margin-top: 10px;
-  font-size: 0.82rem;
-  color: #697777;
+  font-size: var(--font-size-sm, 0.8125rem);
+  color: var(--text-secondary);
   line-height: 1.45;
 }
 
@@ -58,25 +63,3 @@
   background: rgba(37, 99, 235, 0.12);
 }
 
-:host-context(.cart-container.alt) .delivery-selector {
-  border-color: #d1fae5;
-  background: #f9fffc;
-}
-
-:host-context(.cart-container.alt) .delivery-label {
-  color: #047857;
-}
-
-:host-context(.cart-container.alt) .delivery-control select {
-  border-color: #bbf7d0;
-}
-
-:host-context(.cart-container.alt) .delivery-control select:focus {
-  border-color: #10b981;
-  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
-}
-
-:host-context(.cart-container.alt) .delivery-meta {
-  color: #4b5563;
-}
-
diff --git a/src/app/pages/cart/cart.component.html b/src/app/pages/cart/cart.component.html
index f51b982..0e5d8ee 100644
--- a/src/app/pages/cart/cart.component.html
+++ b/src/app/pages/cart/cart.component.html
@@ -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">
diff --git a/src/app/pages/cart/cart.component.scss b/src/app/pages/cart/cart.component.scss
index cfaefb1..a2f1e6e 100644
--- a/src/app/pages/cart/cart.component.scss
+++ b/src/app/pages/cart/cart.component.scss
@@ -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;