From 9ffbc1f726aa5d6e840f90f6eb7f12db1c7e7b46 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 1 Oct 2024 21:17:59 -0300
Subject: [PATCH] Improve spacing on mobile

---
 .../modals/onboarding-flow-modal/steps/avatar-step.tsx |  6 +++---
 .../modals/onboarding-flow-modal/steps/bio-step.tsx    |  8 ++++----
 .../onboarding-flow-modal/steps/completed-step.tsx     |  4 ++--
 .../steps/cover-photo-selection-step.tsx               | 10 +++++-----
 .../onboarding-flow-modal/steps/display-name-step.tsx  |  8 ++++----
 .../steps/suggested-accounts-step.tsx                  | 10 +++++-----
 6 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
index 105522b2b..c6f29e6f9 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
@@ -71,10 +71,10 @@ const AvatarSelectionModal: React.FC<IAvatarSelectionModal> = ({ onClose, onNext
     }).catch(console.error);
   };
   return (
-    <Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
+    <Stack space={2} justifyContent='center' alignItems='center' className='relative w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
 
-      <div className='relative w-full'>
-        <IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
+      <div className='w-full'>
+        <IconButton src={closeIcon} onClick={onClose} className='absolute right-2 top-2 text-gray-500 hover:text-gray-700 sm:right-6 sm:top-5 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
         <Stack space={2} justifyContent='center' alignItems='center' className='border-grey-200 dark:border-grey-800 -mx-4 mb-4 border-b border-solid pb-4 sm:-mx-10 sm:pb-10'>
           <Text size='2xl' align='center' weight='bold'>
             <FormattedMessage id='onboarding.avatar.title' defaultMessage={'Choose a profile picture'} />
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
index f79c7e688..398e509a7 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
@@ -52,10 +52,10 @@ const BioStep: React.FC<IBioStep> = ({ onClose, onNext }) => {
 
   return (
 
-    <Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
+    <Stack space={2} justifyContent='center' alignItems='center' className='relative w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
 
-      <div className='relative w-full'>
-        <IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
+      <div className='w-full'>
+        <IconButton src={closeIcon} onClick={onClose} className='absolute right-2 top-2 text-gray-500 hover:text-gray-700 sm:right-6 sm:top-5 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
         <Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
           <Text size='2xl' align='center' weight='bold'>
             <FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />
@@ -66,7 +66,7 @@ const BioStep: React.FC<IBioStep> = ({ onClose, onNext }) => {
         </Stack>
       </div>
 
-      <div className='mx-auto w-2/3'>
+      <div className='mx-auto w-full sm:w-2/3'>
         <FormGroup
           hintText={<FormattedMessage id='onboarding.bio.hint' defaultMessage='Max 500 characters' />}
           labelText={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />}
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
index 98c26261d..d80c0e851 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
@@ -14,10 +14,10 @@ interface ICompletedModal {
 const CompletedModal: React.FC<ICompletedModal> = ({ onClose, onComplete }) => {
   return (
 
-    <Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
+    <Stack space={4} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
 
       <div className='relative w-full'>
-        <IconButton src={closeIcon} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' onClick={onClose} />
+        <IconButton src={closeIcon} className='absolute -right-2 -top-6 text-gray-500 hover:text-gray-700 sm:-right-4 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' onClick={onClose} />
         <Stack space={2} justifyContent='center' alignItems='center' className=''>
           <Icon strokeWidth={1} src={require('@tabler/icons/outline/confetti.svg')} className='mx-auto h-16 w-16 text-primary-600 dark:text-primary-400' />
           <Text size='2xl' align='center' weight='bold'>
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
index 8b794d438..b064e9030 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
@@ -76,10 +76,10 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
 
   return (
 
-    <Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
+    <Stack space={2} justifyContent='center' alignItems='center' className='relative w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
 
-      <div className='relative w-full'>
-        <IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
+      <div className='w-full'>
+        <IconButton src={closeIcon} onClick={onClose} className='absolute right-2 top-2 text-gray-500 hover:text-gray-700 sm:right-6 sm:top-5 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
         <Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
           <Text size='2xl' align='center' weight='bold'>
             <FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />
@@ -90,8 +90,8 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
         </Stack>
       </div>
 
-      <Stack space={10} justifyContent='center' alignItems='center' className='w-full'>
-        <div className='w-2/3 rounded-lg border border-solid border-gray-200 dark:border-gray-800'>
+      <Stack space={2} justifyContent='center' alignItems='center' className='w-full'>
+        <div className='w-full rounded-lg border border-solid border-gray-200 sm:w-2/3 dark:border-gray-800'>
           <div
             role='button'
             className='relative flex h-24 w-full items-center justify-center rounded-t-md bg-gray-200 dark:bg-gray-800'
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
index d792fae51..f3a26f359 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
@@ -63,10 +63,10 @@ const DisplayNameStep: React.FC<IDisplayNameStep> = ({ onClose, onNext }) => {
 
   return (
 
-    <Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
+    <Stack space={2} justifyContent='center' alignItems='center' className='relative w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
 
-      <div className='relative w-full'>
-        <IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
+      <div className='w-full'>
+        <IconButton src={closeIcon} onClick={onClose} className='absolute right-2 top-2 text-gray-500 hover:text-gray-700 sm:right-6 sm:top-5 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
         <Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
           <Text size='2xl' align='center' weight='bold'>
             <FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />
@@ -78,7 +78,7 @@ const DisplayNameStep: React.FC<IDisplayNameStep> = ({ onClose, onNext }) => {
       </div>
 
       <Stack space={5} justifyContent='center' alignItems='center' className='w-full'>
-        <div className='w-2/3'>
+        <div className='w-full sm:w-2/3'>
           <FormGroup
             hintText={hintText}
             labelText={<FormattedMessage id='onboarding.display_name.label' defaultMessage='Display name' />}
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
index 67aba9ed0..1e5f4ddef 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
@@ -74,10 +74,10 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
 
   return (
 
-    <Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
+    <Stack space={2} justifyContent='center' alignItems='center' className='relative w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
 
-      <div className='relative w-full'>
-        <IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
+      <div className='w-5/6 sm:w-full'>
+        <IconButton src={closeIcon} onClick={onClose} className='absolute right-2 top-2 text-gray-500 hover:text-gray-700 sm:right-6 sm:top-5 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
         <Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
           <Text size='2xl' align='center' weight='bold'>
             <FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />
@@ -88,8 +88,8 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
         </Stack>
       </div>
 
-      <Stack justifyContent='center' alignItems='center' className='w-full'>
-        <div className='w-2/3'>
+      <Stack space={5} justifyContent='center' alignItems='center' className='w-full'>
+        <div className='w-full sm:w-2/3'>
           {renderBody()}
         </div>