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

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

@ -78,43 +78,39 @@ 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'> <div
<div className={clsx({
className={clsx({ 'transition-opacity ease-linear': true,
'transition-opacity ease-linear': true, 'opacity-0 duration-500': currentStep !== i,
'opacity-0 duration-500': currentStep !== i, 'opacity-100 duration-75': currentStep === i,
'opacity-100 duration-75': currentStep === i, })}
})} >
> {step}
{step}
</div>
</div> </div>
))} </div>
</ReactSwipeableViews> ))}
</ReactSwipeableViews>
<div className='relative flex w-full justify-center'>
<HStack space={3} alignItems='center' justifyContent='center' className='absolute h-10'>
{steps.map((_, i) => (
<button
key={i}
tabIndex={0}
onClick={() => handleDotClick(i)}
className={clsx({
'w-5 h-5 rounded-full focus:ring-primary-600 focus:ring-2 focus:ring-offset-2': true,
'bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-700/75 hover:bg-gray-400': i !== currentStep,
'bg-primary-600': i === currentStep,
})}
/>
))}
</HStack>
</div>
</Stack>
</Modal> </Modal>
<HStack space={3} alignItems='center' justifyContent='center' className='pointer-events-auto'>
{steps.map((_, i) => (
<button
key={i}
tabIndex={0}
onClick={() => handleDotClick(i)}
className={clsx({
'w-5 h-5 rounded-full focus:ring-primary-600 focus:ring-2 focus:ring-offset-2': true,
'bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-700/75 hover:bg-gray-400': i !== currentStep,
'bg-primary-600': i === currentStep,
})}
/>
))}
</HStack>
</Stack> </Stack>
); );
}; };