moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

OnboardingModalFlow: improve layout, improve transitions

This commit is contained in:
Alex Gleason 2025-01-28 14:33:46 -06:00
parent 867f37b030
commit 78b653371c
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 31 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
View File

@ -78,9 +78,8 @@ const OnboardingFlowModal: React.FC<IOnboardingFlowModal> = ({ onClose }) => {
return ( return (
<Stack justifyContent='center' alignItems='center' className='relative w-full'> <Stack space={5} justifyContent='center' alignItems='center' className='relative w-full'>
<Modal width='2xl' onClose={handleComplete} theme='transparent'> <Modal width='2xl' onClose={handleComplete}>
<Stack space={4}>
<ReactSwipeableViews animateHeight index={currentStep} onChangeIndex={handleSwipe}> <ReactSwipeableViews animateHeight index={currentStep} onChangeIndex={handleSwipe}>
{steps.map((step, i) => ( {steps.map((step, i) => (
<div key={i} className='w-full'> <div key={i} className='w-full'>
@ -96,9 +95,9 @@ const OnboardingFlowModal: React.FC<IOnboardingFlowModal> = ({ onClose }) => {
</div> </div>
))} ))}
</ReactSwipeableViews> </ReactSwipeableViews>
</Modal>
<div className='relative flex w-full justify-center'> <HStack space={3} alignItems='center' justifyContent='center' className='pointer-events-auto'>
<HStack space={3} alignItems='center' justifyContent='center' className='absolute h-10'>
{steps.map((_, i) => ( {steps.map((_, i) => (
<button <button
key={i} key={i}
@ -112,9 +111,6 @@ const OnboardingFlowModal: React.FC<IOnboardingFlowModal> = ({ onClose }) => {
/> />
))} ))}
</HStack> </HStack>
</div>
</Stack>
</Modal>
</Stack> </Stack>
); );
}; };