From 5784efd7a3d6aa789b16282c8c04259466363a37 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Tue, 26 May 2026 23:33:21 +0300
Subject: [PATCH] fix(chrome): replace 2 platform emoji + 1 en-dash with
 on-brand tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PRODUCT.md anti-references call out the SaaS-template / emoji-in-chrome
register: the reference products (Linear, Stripe, Things 3) don't put
platform emoji in product chrome. Three small drift spots:

- Balance saved-cards link used a 💳 emoji as the leading icon.
  Replaced with a new CreditCardIcon added to the barrel (Heroicons-
  style stroke, matches the chevron / chat / wallet siblings).

- Subscription paused-info banner used a ⏸️ emoji. Replaced with a
  new PauseIcon added to the barrel. Same 24×24 stroke, currentColor,
  preserves the urgent-400 tint via inline style.

- Balance payment-method min/max range used a literal en-dash ('–')
  in source. PRODUCT.md's anti-em-dash rule covers the en-dash by
  the same logic. Switched to a translated 'to' connector
  (t('common.rangeTo', 'to')) so other locales can translate freely.
---
 src/components/icons/index.tsx | 33 +++++++++++++++++++++++++++++++++
 src/pages/Balance.tsx          |  6 +++---
 src/pages/Subscription.tsx     |  9 +++++----
 3 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx
index 3464619..bbd76ec 100644
--- a/src/components/icons/index.tsx
+++ b/src/components/icons/index.tsx
@@ -701,3 +701,36 @@ export const ArrowPathIcon = ({ className }: IconProps) => (
     />
   </svg>
 );
+
+export const PauseIcon = ({ className, style }: IconProps & { style?: React.CSSProperties }) => (
+  <svg
+    className={cn('h-5 w-5', className)}
+    style={style}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={1.5}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M14.25 9v6m-4.5 0V9M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+    />
+  </svg>
+);
+
+export const CreditCardIcon = ({ className }: IconProps) => (
+  <svg
+    className={cn('h-5 w-5', className)}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={1.5}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"
+    />
+  </svg>
+);
diff --git a/src/pages/Balance.tsx b/src/pages/Balance.tsx
index fd0978e..7d43268 100644
--- a/src/pages/Balance.tsx
+++ b/src/pages/Balance.tsx
@@ -12,7 +12,7 @@ import type { PaginatedResponse, Transaction } from '../types';
 
 import { Card } from '@/components/data-display/Card';
 import { Button } from '@/components/primitives/Button';
-import { ChevronDownIcon, ChevronRightIcon } from '@/components/icons';
+import { ChevronDownIcon, ChevronRightIcon, CreditCardIcon } from '@/components/icons';
 import { staggerContainer, staggerItem } from '@/components/motion/transitions';
 import { isPaidStatus, isFailedStatus } from '../utils/paymentStatus';
 
@@ -346,7 +346,7 @@ export default function Balance() {
                       </div>
                     )}
                     <div className="mt-3 text-xs text-dark-600">
-                      {formatAmount(method.min_amount_kopeks / 100, 0)} –{' '}
+                      {formatAmount(method.min_amount_kopeks / 100, 0)} {t('common.rangeTo', 'to')}{' '}
                       {formatAmount(method.max_amount_kopeks / 100, 0)} {currencySymbol}
                     </div>
                   </Card>
@@ -485,7 +485,7 @@ export default function Balance() {
           <Card interactive onClick={() => navigate('/balance/saved-cards')}>
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-3">
-                <span className="text-xl">💳</span>
+                <CreditCardIcon className="h-5 w-5 text-dark-400" />
                 <span className="font-medium text-dark-100">{t('balance.savedCards.title')}</span>
               </div>
               <ChevronRightIcon className="h-5 w-5 text-dark-400" />
diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index eb1d631..33a2c9f 100644
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -17,7 +17,7 @@ import InsufficientBalancePrompt from '../components/InsufficientBalancePrompt';
 import { useCurrency } from '../hooks/useCurrency';
 import { useCloseOnSuccessNotification } from '../store/successNotification';
 import PurchaseCTAButton from '../components/subscription/PurchaseCTAButton';
-import { CopyIcon, CheckIcon } from '../components/icons';
+import { CopyIcon, CheckIcon, PauseIcon } from '../components/icons';
 import { useHaptic } from '../platform';
 import { resolveConnectionUrlForUi } from '../utils/connectionLink';
 import {
@@ -1240,9 +1240,10 @@ export default function Subscription() {
               }}
             >
               <div className="flex items-start gap-3">
-                <div className="text-lg" style={{ color: 'rgb(var(--color-urgent-400))' }}>
-                  ⏸️
-                </div>
+                <PauseIcon
+                  className="h-5 w-5 shrink-0"
+                  style={{ color: 'rgb(var(--color-urgent-400))' }}
+                />
                 <div>
                   <div
                     className="text-sm font-semibold"