etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 17:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor modal components: update ConnectionModal and TopUpModal to improve layout with top alignment and auto-focus functionality, enhancing user experience on mobile devices.

Browse Source
This commit is contained in:
PEDZEO
2026-01-20 03:39:10 +03:00
parent 1a642bb7d4
commit a82e809a34
2 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/ConnectionModal.tsx
View File

@@ -339,18 +339,19 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
window.location.href = redirectUrl window.location.href = redirectUrl
} }
// Modal wrapper - centered on all devices // Modal wrapper - top aligned with auto-focus
const ModalWrapper = ({ children }: { children: React.ReactNode }) => ( const ModalWrapper = ({ children }: { children: React.ReactNode }) => (
<div <div
className="fixed inset-0 bg-black/70 z-[60] flex items-center justify-center" className="fixed inset-0 bg-black/70 z-[60] flex items-start justify-center pt-8 sm:pt-12"
style={{ paddingTop: `calc(2rem + env(safe-area-inset-top, 0px))` }}
onClick={onClose} onClick={onClose}
> >
<div <div
className="w-[calc(100%-2rem)] max-w-sm bg-dark-900 rounded-2xl border border-dark-700/50 overflow-hidden animate-scale-in shadow-2xl flex flex-col" ref={(el) => el?.focus()}
tabIndex={-1}
className="w-[calc(100%-2rem)] max-w-sm bg-dark-900 rounded-2xl border border-dark-700/50 overflow-hidden animate-scale-in shadow-2xl flex flex-col outline-none"
style={{ style={{
maxHeight: 'calc(100dvh - 4rem)', maxHeight: 'calc(100dvh - 6rem)',
marginTop: 'env(safe-area-inset-top, 0px)',
marginBottom: 'env(safe-area-inset-bottom, 0px)',
}} }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >

15
src/components/TopUpModal.tsx
View File

@@ -164,17 +164,22 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
: convertAmount(rub).toFixed(currencyDecimals) : convertAmount(rub).toFixed(currencyDecimals)
const isPending = topUpMutation.isPending || starsPaymentMutation.isPending const isPending = topUpMutation.isPending || starsPaymentMutation.isPending
// Auto-focus input on mount
useEffect(() => {
const timer = setTimeout(() => {
inputRef.current?.focus()
}, 100)
return () => clearTimeout(timer)
}, [])
return ( return (
<div <div
className="fixed inset-0 bg-black/70 z-[60] flex items-center justify-center" className="fixed inset-0 bg-black/70 z-[60] flex items-start justify-center"
style={{ paddingTop: `calc(2rem + env(safe-area-inset-top, 0px))` }}
onClick={onClose} onClick={onClose}
> >
<div <div
className="w-[calc(100%-2rem)] max-w-sm bg-dark-900 rounded-2xl border border-dark-700/50 shadow-2xl overflow-hidden animate-scale-in" className="w-[calc(100%-2rem)] max-w-sm bg-dark-900 rounded-2xl border border-dark-700/50 shadow-2xl overflow-hidden animate-scale-in"
style={{
marginTop: 'env(safe-area-inset-top, 0px)',
marginBottom: 'env(safe-area-inset-bottom, 0px)',
}}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
{/* Header */} {/* Header */}