mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

OnboardingFlowModal: improve spacing between dots and card

merge-requests/3318/head
Alex Gleason 2025-01-28 14:27:05 -06:00
rodzic e46211bdc7
commit 867f37b030
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
1 zmienionych plików z 19 dodań i 18 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

37
src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
Wyświetl plik

@ -78,8 +78,8 @@ const OnboardingFlowModal: React.FC<IOnboardingFlowModal> = ({ onClose }) => {
return (
<Stack space={4} justifyContent='center' alignItems='center' className='relative w-full'>
<Modal width='2xl' onClose={handleComplete} theme='transparent' >
<Stack justifyContent='center' alignItems='center' className='relative w-full'>
<Modal width='2xl' onClose={handleComplete} theme='transparent'>
<Stack space={4}>
<ReactSwipeableViews animateHeight index={currentStep} onChangeIndex={handleSwipe}>
{steps.map((step, i) => (
@ -96,23 +96,24 @@ const OnboardingFlowModal: React.FC<IOnboardingFlowModal> = ({ onClose }) => {
</div>
))}
</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>
<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>
</Modal>
</Stack>
);