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.
This commit is contained in:
PEDZEO
2026-01-20 17:25:43 +03:00
parent 0a0d2e015b
commit 7f0d6a7d18
5 changed files with 12 additions and 8 deletions

View File

@@ -375,12 +375,12 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
type="button" type="button"
onClick={handleSubmit} onClick={handleSubmit}
disabled={isPending || !amount || parseFloat(amount) <= 0} 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 isPending || !amount || parseFloat(amount) <= 0
? 'bg-dark-700 text-dark-500 cursor-not-allowed' ? 'bg-dark-700 text-dark-500 cursor-not-allowed'
: isStarsMethod : 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-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:shadow-xl hover:shadow-accent-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:from-accent-400 hover:to-accent-500 active:from-accent-600 active:to-accent-700'
}`} }`}
> >
{isPending ? ( {isPending ? (
@@ -408,13 +408,13 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
<> <>
{/* Backdrop */} {/* Backdrop */}
<div <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} onClick={handleClose}
/> />
{/* Bottom sheet */} {/* Bottom sheet */}
<div <div
data-modal-content 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))' }} style={{ paddingBottom: safeBottom ? `${safeBottom + 20}px` : 'max(20px, env(safe-area-inset-bottom))' }}
onClick={(e) => e.stopPropagation()} 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 = () => ( const DesktopModal = () => (
<div <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} onClick={handleClose}
> >
<div <div
data-modal-content 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()} onClick={(e) => e.stopPropagation()}
> >
{/* Header */} {/* Header */}

View File

@@ -254,6 +254,7 @@
"topUp": "Top Up", "topUp": "Top Up",
"topUpBalance": "Top Up Balance", "topUpBalance": "Top Up Balance",
"enterAmount": "Enter amount", "enterAmount": "Enter amount",
"paymentMethod": "Payment Method",
"paymentMethods": "Payment Methods", "paymentMethods": "Payment Methods",
"transactionHistory": "Transaction History", "transactionHistory": "Transaction History",
"noTransactions": "No transactions", "noTransactions": "No transactions",

View File

@@ -184,6 +184,7 @@
"topUp": "شارژ", "topUp": "شارژ",
"topUpBalance": "شارژ موجودی", "topUpBalance": "شارژ موجودی",
"enterAmount": "مقدار را وارد کنید", "enterAmount": "مقدار را وارد کنید",
"paymentMethod": "روش پرداخت",
"paymentMethods": { "paymentMethods": {
"yookassa": { "yookassa": {
"name": "YooKassa", "name": "YooKassa",

View File

@@ -254,6 +254,7 @@
"topUp": "Пополнить", "topUp": "Пополнить",
"topUpBalance": "Пополнение баланса", "topUpBalance": "Пополнение баланса",
"enterAmount": "Введите сумму", "enterAmount": "Введите сумму",
"paymentMethod": "Способ оплаты",
"paymentMethods": "Способы оплаты", "paymentMethods": "Способы оплаты",
"transactionHistory": "История операций", "transactionHistory": "История операций",
"noTransactions": "Нет операций", "noTransactions": "Нет операций",

View File

@@ -185,6 +185,7 @@
"topUp": "充值", "topUp": "充值",
"topUpBalance": "充值余额", "topUpBalance": "充值余额",
"enterAmount": "输入金额", "enterAmount": "输入金额",
"paymentMethod": "支付方式",
"paymentMethods": { "paymentMethods": {
"yookassa": { "yookassa": {
"name": "YooKassa", "name": "YooKassa",