From 7f0d6a7d18f2f1c2cf69f6d0e7d9a767ce159a80 Mon Sep 17 00:00:00 2001
From: PEDZEO <vitali.gavrikov@yandex.ru>
Date: Tue, 20 Jan 2026 17:25:43 +0300
Subject: [PATCH] Enhance TopUpModal styling and update localization files

- Updated button styles in TopUpModal for improved visual feedback during interactions.
- Adjusted modal positioning for better user experience on desktop.
- Added 'paymentMethod' key to localization files for English, Persian, Russian, and Chinese languages, enhancing multi-language support.
---
 src/components/TopUpModal.tsx | 16 ++++++++--------
 src/locales/en.json           |  1 +
 src/locales/fa.json           |  1 +
 src/locales/ru.json           |  1 +
 src/locales/zh.json           |  1 +
 5 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/TopUpModal.tsx b/src/components/TopUpModal.tsx
index ffe11a6..a52ddd8 100644
--- a/src/components/TopUpModal.tsx
+++ b/src/components/TopUpModal.tsx
@@ -375,12 +375,12 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
         type="button"
         onClick={handleSubmit}
         disabled={isPending || !amount || parseFloat(amount) <= 0}
-        className={`relative w-full h-14 rounded-2xl text-base font-bold transition-all duration-300 overflow-hidden ${
+        className={`relative w-full h-14 rounded-2xl text-base font-bold transition-colors duration-200 overflow-hidden ${
           isPending || !amount || parseFloat(amount) <= 0
             ? 'bg-dark-700 text-dark-500 cursor-not-allowed'
             : isStarsMethod
-              ? 'bg-gradient-to-r from-yellow-500 to-orange-500 text-white shadow-lg shadow-yellow-500/25 hover:shadow-xl hover:shadow-yellow-500/30 hover:scale-[1.02] active:scale-[0.98]'
-              : 'bg-gradient-to-r from-accent-500 to-accent-600 text-white shadow-lg shadow-accent-500/25 hover:shadow-xl hover:shadow-accent-500/30 hover:scale-[1.02] active:scale-[0.98]'
+              ? 'bg-gradient-to-r from-yellow-500 to-orange-500 text-white shadow-lg shadow-yellow-500/25 hover:from-yellow-400 hover:to-orange-400 active:from-yellow-600 active:to-orange-600'
+              : 'bg-gradient-to-r from-accent-500 to-accent-600 text-white shadow-lg shadow-accent-500/25 hover:from-accent-400 hover:to-accent-500 active:from-accent-600 active:to-accent-700'
         }`}
       >
         {isPending ? (
@@ -408,13 +408,13 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
     <>
       {/* Backdrop */}
       <div
-        className="fixed inset-0 z-[9998] bg-black/70 backdrop-blur-sm animate-fade-in-fast"
+        className="fixed inset-0 z-[9998] bg-black/70"
         onClick={handleClose}
       />
       {/* Bottom sheet */}
       <div
         data-modal-content
-        className="fixed inset-x-0 bottom-0 z-[9999] bg-dark-900 rounded-t-3xl max-h-[90vh] flex flex-col animate-slide-up overflow-hidden"
+        className="fixed inset-x-0 bottom-0 z-[9999] bg-dark-900 rounded-t-3xl max-h-[90vh] flex flex-col overflow-hidden"
         style={{ paddingBottom: safeBottom ? `${safeBottom + 20}px` : 'max(20px, env(safe-area-inset-bottom))' }}
         onClick={(e) => e.stopPropagation()}
       >
@@ -448,15 +448,15 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
     </>
   )
 
-  // Desktop centered modal
+  // Desktop modal - positioned higher
   const DesktopModal = () => (
     <div
-      className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[60] flex items-center justify-center p-4 animate-fade-in-fast"
+      className="fixed inset-0 bg-black/60 z-[60] flex items-start justify-center p-4 pt-[10vh]"
       onClick={handleClose}
     >
       <div
         data-modal-content
-        className="w-full max-w-md bg-dark-900 rounded-3xl border border-dark-700/50 shadow-2xl overflow-hidden animate-scale-in"
+        className="w-full max-w-md bg-dark-900 rounded-3xl border border-dark-700/50 shadow-2xl overflow-hidden"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
diff --git a/src/locales/en.json b/src/locales/en.json
index 4e97bd5..718150a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -254,6 +254,7 @@
     "topUp": "Top Up",
     "topUpBalance": "Top Up Balance",
     "enterAmount": "Enter amount",
+    "paymentMethod": "Payment Method",
     "paymentMethods": "Payment Methods",
     "transactionHistory": "Transaction History",
     "noTransactions": "No transactions",
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 0f00446..a13371a 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -184,6 +184,7 @@
     "topUp": "شارژ",
     "topUpBalance": "شارژ موجودی",
     "enterAmount": "مقدار را وارد کنید",
+    "paymentMethod": "روش پرداخت",
     "paymentMethods": {
       "yookassa": {
         "name": "YooKassa",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index b6453d3..310a0ae 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -254,6 +254,7 @@
     "topUp": "Пополнить",
     "topUpBalance": "Пополнение баланса",
     "enterAmount": "Введите сумму",
+    "paymentMethod": "Способ оплаты",
     "paymentMethods": "Способы оплаты",
     "transactionHistory": "История операций",
     "noTransactions": "Нет операций",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index c8c2a9f..f02e127 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -185,6 +185,7 @@
     "topUp": "充值",
     "topUpBalance": "充值余额",
     "enterAmount": "输入金额",
+    "paymentMethod": "支付方式",
     "paymentMethods": {
       "yookassa": {
         "name": "YooKassa",