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