From 33e878da846409868f623b36532b7d73a1a678d0 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Feb 2026 04:14:35 +0300
Subject: [PATCH] feat: update payment method icons with brand-accurate favicon
 designs

Replace generic placeholder icons with designs based on actual favicon
assets from payment provider websites. Updated icons for Platega,
Tribute, WATA, CloudPayments, Kassa AI, YooKassa, CryptoBot, Heleket,
MulenPay, PAL24, and Freekassa with correct brand colors and marks.
---
 src/components/PaymentMethodIcon.tsx | 122 +++++++++++++++------------
 1 file changed, 70 insertions(+), 52 deletions(-)

diff --git a/src/components/PaymentMethodIcon.tsx b/src/components/PaymentMethodIcon.tsx
index 3f4aa1b..82da357 100644
--- a/src/components/PaymentMethodIcon.tsx
+++ b/src/components/PaymentMethodIcon.tsx
@@ -8,6 +8,7 @@ export default function PaymentMethodIcon({
   className = 'h-8 w-8',
 }: PaymentMethodIconProps) {
   switch (method) {
+    // Telegram Stars — blue circle + gold star
     case 'telegram_stars':
       return (
         <svg className={className} viewBox="0 0 40 40">
@@ -19,139 +20,156 @@ export default function PaymentMethodIcon({
         </svg>
       );
 
+    // CryptoBot (app.cr.bot) — blue circle, white BTC-style ₿ mark
     case 'cryptobot':
       return (
         <svg className={className} viewBox="0 0 40 40">
           <circle cx="20" cy="20" r="20" fill="#0088CC" />
           <path
-            d="M20 7c-7.18 0-13 5.82-13 13s5.82 13 13 13 13-5.82 13-13S27.18 7 20 7zm1.5 18.75v2.5h-3v-2.4c-2.1-.3-3.8-1.2-4.6-2.1l1.8-2.4c.9.8 2.1 1.5 3.3 1.5 1.1 0 1.8-.5 1.8-1.3 0-.9-.8-1.3-2.5-1.9-2.3-.8-4.2-1.9-4.2-4.4 0-2.1 1.5-3.7 4.2-4.1v-2.4h3v2.3c1.6.2 2.9.9 3.8 1.7l-1.7 2.3c-.7-.6-1.7-1.1-2.8-1.1-1 0-1.6.4-1.6 1.2 0 .8.8 1.2 2.6 1.9 2.5.9 4.1 2 4.1 4.4 0 2.2-1.6 3.9-4.2 4.2z"
+            d="M16.5 11.5V13h-1v2h1v10h-1v2h1v1.5h2V28h3c2.5 0 4.5-1.2 4.5-3.3 0-1.5-.9-2.6-2.3-3.1 1-.5 1.8-1.5 1.8-2.9 0-2-1.8-3.2-4-3.2h-3v-1.5h-2zM20 17h1.5c1.1 0 1.8.6 1.8 1.5s-.7 1.5-1.8 1.5H20v-3zm0 5h2c1.2 0 2 .7 2 1.7s-.8 1.8-2 1.8h-2v-3.5z"
             fill="#fff"
           />
         </svg>
       );
 
+    // YooKassa — blue circle, stylized "Ю" mark (vertical bar + ring)
     case 'yookassa':
       return (
         <svg className={className} viewBox="0 0 40 40">
           <circle cx="20" cy="20" r="20" fill="#0070F0" />
-          <g fill="#fff">
-            <rect x="11" y="11" width="4" height="18" rx="2" />
-            <circle cx="23" cy="20" r="7" fill="none" stroke="#fff" strokeWidth="3.5" />
-          </g>
+          <rect x="11" y="11" width="4.5" height="18" rx="2.25" fill="#fff" />
+          <circle cx="25" cy="20" r="6.5" fill="none" stroke="#fff" strokeWidth="3.5" />
         </svg>
       );
 
+    // Heleket — dark circle, green H-mark (from favicon.ico brand)
     case 'heleket':
       return (
         <svg className={className} viewBox="0 0 40 40">
           <circle cx="20" cy="20" r="20" fill="#1A1A2E" />
-          <path
-            d="M20 8l2.47 5.01.55 1.12 1.23.18L30 15.27l-4 3.9-.89.87.21 1.22L26.18 27 20.9 24.22l-1.1-.58-1.1.58L13.62 27l.86-5.74.21-1.22-.89-.87-4-3.9 5.75-.96 1.23-.18.55-1.12L20 8z"
-            fill="#00E68A"
-          />
+          <path d="M12 11h4v7h8v-7h4v18h-4v-7h-8v7h-4z" fill="#00E68A" />
         </svg>
       );
 
+    // MulenPay — red circle, white "M" letter mark
     case 'mulenpay':
       return (
         <svg className={className} viewBox="0 0 40 40">
-          <circle cx="20" cy="20" r="20" fill="#FF4D4D" />
-          <path
-            d="M10 14h20c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H10c-1.1 0-2-.9-2-2v-8c0-1.1.9-2 2-2zm0 3v6h20v-6H10zm2 2h4v2h-4v-2z"
-            fill="#fff"
-            fillRule="evenodd"
-          />
+          <circle cx="20" cy="20" r="20" fill="#E5383B" />
+          <path d="M10 28V12h4.5l5.5 10 5.5-10H30v16h-4v-9.5l-4.5 8h-3l-4.5-8V28z" fill="#fff" />
         </svg>
       );
 
+    // PAL24 / PayPalych (pally.info) — green circle, white "P" mark
     case 'pal24':
       return (
         <svg className={className} viewBox="0 0 40 40">
-          <circle cx="20" cy="20" r="20" fill="#00B341" />
-          <g fill="#fff" fontFamily="Arial,sans-serif" fontWeight="700">
-            <text x="20" y="26" textAnchor="middle" fontSize="16">
-              P24
-            </text>
-          </g>
+          <circle cx="20" cy="20" r="20" fill="#31B545" />
+          <path
+            d="M14 10h8c4.42 0 7 2.8 7 6.5S26.42 23 22 23h-4v7h-4V10zm4 3.5v6h4c1.93 0 3-1.3 3-3s-1.07-3-3-3h-4z"
+            fill="#fff"
+          />
         </svg>
       );
 
+    // Platega — purple/blue gradient mark from favicon (triangle P shape)
     case 'platega':
       return (
         <svg className={className} viewBox="0 0 40 40">
-          <circle cx="20" cy="20" r="20" fill="#6C5CE7" />
+          <circle cx="20" cy="20" r="20" fill="#533BEB" />
+          <path d="M14.4 27.1L8.5 24.5l2.3-7L17.6 20.8z" fill="#533BEB" opacity="0.7" />
           <path
-            d="M14 12h8c3.31 0 6 2.69 6 6s-2.69 6-6 6h-4v4h-4V12zm4 8h4c1.1 0 2-.9 2-2s-.9-2-2-2h-4v4z"
+            d="M23.2 6h-6.4c-.7 0-1.4.6-1.6 1.3L9.4 28.6c-.2.7.2 1.3.9 1.3h5.1c.7 0 1.4-.6 1.6-1.3l.6-2.3c.2-.7.9-1.2 1.7-1.3 2.1-.2 4.2-1.1 6-2.5 2.2-1.6 3.8-3.8 4.4-6.1.6-2.3.2-4.5-1.2-6.2S25.8 6 23.2 6z"
             fill="#fff"
           />
+          <path
+            d="M9.5 22.4l9.1-4.4c.4-.2.8-.1 1 .3l.4 1.1c.2.5.9.5 1.3 0l7-8.1c.4-.5.2-1.1-.4-1.1H16.5c-.6 0-1.1.6-.9 1.1l.3.9c.1.4-.1.8-.5 1l-5.8 2.8z"
+            fill="url(#plategaGrad)"
+          />
+          <defs>
+            <linearGradient id="plategaGrad" x1="28" y1="10.7" x2="12" y2="17">
+              <stop stopColor="#2B99FF" />
+              <stop offset="1" stopColor="#725BFF" />
+            </linearGradient>
+          </defs>
         </svg>
       );
 
+    // WATA (wata.pro) — yellow-green square icon with black W/V shapes from favicon
     case 'wata':
       return (
         <svg className={className} viewBox="0 0 40 40">
-          <circle cx="20" cy="20" r="20" fill="#2D7FF9" />
+          <rect width="40" height="40" rx="8" fill="#E1FF00" />
           <path
-            d="M20 10c-.55 0-1 .35-1.27.8L12 24c-.4.7.1 1.5.9 1.5h14.2c.8 0 1.3-.8.9-1.5l-6.73-13.2c-.27-.45-.72-.8-1.27-.8z"
-            fill="#fff"
-            opacity=".9"
-          />
-          <path
-            d="M20 30c3.87 0 7-2.24 7-5 0-2.76-7-10-7-10s-7 7.24-7 10c0 2.76 3.13 5 7 5z"
-            fill="#fff"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M18.8 24.4l-2.8 5.9L6.7 12.6h5.7l6.4 11.8zm-4.2-11.9l5.2 10.3 5.4-10.3h-10.6zm9.5 17.4l-2.8-5.8 6.4-11.7h5.7L24.1 29.9z"
+            fill="#1B1C19"
           />
         </svg>
       );
 
+    // Freekassa — orange circle, white "F" mark
     case 'freekassa':
       return (
         <svg className={className} viewBox="0 0 40 40">
           <circle cx="20" cy="20" r="20" fill="#FF6600" />
-          <g fill="#fff" fontFamily="Arial,sans-serif" fontWeight="700">
-            <text x="20" y="26" textAnchor="middle" fontSize="16">
-              FK
-            </text>
-          </g>
+          <path d="M14 10h13v4H18v4h8v4h-8v8h-4z" fill="#fff" />
         </svg>
       );
 
+    // CloudPayments — blue circle with white checkmark cross from favicon.svg
     case 'cloudpayments':
       return (
         <svg className={className} viewBox="0 0 40 40">
-          <circle cx="20" cy="20" r="20" fill="#004EBD" />
+          <circle cx="20" cy="20" r="20" fill="#6496DC" />
           <path
-            d="M28.5 22c.83 0 1.5.67 1.5 1.5S29.33 25 28.5 25h-17c-1.93 0-3.5-1.57-3.5-3.5 0-1.72 1.24-3.15 2.88-3.45C11.15 15.17 13.86 13 17 13c2.48 0 4.65 1.3 5.89 3.25C23.56 15.48 24.7 15 26 15c2.76 0 5 2.24 5 5 0 .7-.15 1.37-.42 1.97-.02.01-.04.03-.08.03h-2z"
+            d="M15.7 25.6l12.9-12.9c1.35-1.35 3.53-1.35 4.88 0 1.35 1.35 1.35 3.53 0 4.88l-8.07 8.07c-2.7 2.7-7.08 2.7-9.78 0z"
+            fill="#fff"
+          />
+          <path
+            d="M24.3 14.4L11.3 27.4c-1.35 1.35-3.53 1.35-4.88 0-1.35-1.35-1.35-3.53 0-4.88l8.07-8.07c2.7-2.7 7.08-2.7 9.78 0z"
             fill="#fff"
           />
         </svg>
       );
 
+    // Tribute — blue gradient rounded square with white star/arrow from favicon
     case 'tribute':
       return (
         <svg className={className} viewBox="0 0 40 40">
-          <circle cx="20" cy="20" r="20" fill="#7B61FF" />
+          <rect width="40" height="40" rx="13" fill="url(#tributeGrad)" />
           <path
-            d="M20 10l2.94 5.96L29 17.02l-4.5 4.39L25.56 28 20 25.14 14.44 28l1.06-6.59L11 17.02l6.06-.96L20 10z"
+            opacity="0.65"
+            d="M19 10.2c.5-1.4.7-2.1 1.1-2.3a1.1 1.1 0 011.1 0c.4.2.6.9 1.1 2.3.9 2.5 2 5.6 2.8 8 .8 2.5 1.6 5.2 2.5 8.1.4 1.4.6 2.2.4 2.6a1.1 1.1 0 01-.9.6c-.4.1-1.1-.4-2.3-1.2l-3.2-2.2c-.4-.2-.5-.4-.7-.4a1.1 1.1 0 00-.5 0c-.2.1-.4.2-.8.4L16.5 30c-1.2.8-1.9 1.3-2.3 1.2a1.1 1.1 0 01-.9-.6c-.2-.4 0-1.1.5-2.6.7-2.5 1.7-5.6 2.4-8.1.8-2.4 1.9-5.5 2.8-8z"
             fill="#fff"
           />
+          <path
+            d="M27 15.5c1.5 0 2.2.1 2.5.4.3.2.4.5.3 1-.1.4-.7.9-1.8 1.8-2.1 1.6-4.7 3.6-6.8 5.1-2 1.5-4.5 3.2-6.9 4.8-1.2.9-1.9 1.3-2.3 1.2a1.1 1.1 0 01-.9-.6c-.2-.4 0-1.1.4-2.6l1.1-3.7c.1-.4.2-.6.2-.8a1.1 1.1 0 00-.2-.5c-.1-.2-.3-.3-.6-.6L9 17.6c-1.2-.9-1.8-1.4-1.9-1.8-.1-.4.1-.7.3-1 .3-.3 1.1-.3 2.6-.4 2.6-.1 5.9-.2 8.4-.2 2.6 0 5.8.1 8.5.2z"
+            fill="#fff"
+          />
+          <defs>
+            <linearGradient
+              id="tributeGrad"
+              x1="20"
+              y1="0"
+              x2="20"
+              y2="40"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="#79C9FF" />
+              <stop offset="1" stopColor="#007AFF" />
+            </linearGradient>
+          </defs>
         </svg>
       );
 
+    // Kassa AI — orange circle with white "K" mark from brand
     case 'kassa_ai':
       return (
         <svg className={className} viewBox="0 0 40 40">
-          <defs>
-            <linearGradient id="kassaAiGrad" x1="0" y1="0" x2="1" y2="1">
-              <stop offset="0%" stopColor="#6366F1" />
-              <stop offset="100%" stopColor="#8B5CF6" />
-            </linearGradient>
-          </defs>
-          <circle cx="20" cy="20" r="20" fill="url(#kassaAiGrad)" />
-          <g fill="#fff" fontFamily="Arial,sans-serif" fontWeight="700">
-            <text x="20" y="26" textAnchor="middle" fontSize="15">
-              AI
-            </text>
-          </g>
+          <circle cx="20" cy="20" r="20" fill="#FF6C1A" />
+          <path d="M14 10h4v7.5l7-7.5h5l-7.5 8L30 30h-5l-7-8.5V30h-4z" fill="#fff" />
         </svg>
       );