Merge pull request #525 from fairDataSociety/fix/invite-buttons

fix: upgraded mobile UI for invite section
fairDataSociety · Sep 25, 2023 · 1d49966 · 1d49966
2 parents 1c03e65 + 4b4cc90
commit 1d49966
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/src/components/Invite/Invite.tsx b/src/components/Invite/Invite.tsx
@@ -139,9 +139,11 @@ const Invite: FC<InviteProps> = () => {
                 </CustomCheckbox>
               </div>
 
-              <div className="w-full step-create mt-8">
+              <div className="w-full step-create mt-8 md:pr-4">
                 <Button
                   disabled={loading}
+                  className="w-full lg:w-auto"
+                  centerText={true}
                   variant="primary-outlined"
                   label={intl.get('CREATE_INVITE')}
                   onClick={onCreateInvite}
@@ -155,7 +157,7 @@ const Invite: FC<InviteProps> = () => {
               <div className="font-semibold text-l text-color-accents-plum-black dark:text-color-shade-white-night">
                 {intl.get('TO_INVITE_QUESTION')}
               </div>
-              <div className="step-fill sm:mx-5 mx-0">
+              <div className="step-fill sm:mr-4 mx-0">
                 <form onSubmit={handleSubmit(onSaveInviteName)}>
                   <AuthenticationInput
                     id="name"
@@ -175,7 +177,7 @@ const Invite: FC<InviteProps> = () => {
 
                   <div className="mt-5 flex sm:justify-start justify-between">
                     <Button
-                      className="w-24 mr-4 mb-2"
+                      className="mr-4 mb-2 w-full lg:w-24"
                       disabled={loading}
                       variant="secondary"
                       centerText={true}
@@ -184,7 +186,7 @@ const Invite: FC<InviteProps> = () => {
                     />
 
                     <Button
-                      className="w-24 mb-2"
+                      className="mb-2 w-full lg:w-24"
                       disabled={loading}
                       variant="primary-outlined"
                       centerText={true}
@@ -226,9 +228,9 @@ const Invite: FC<InviteProps> = () => {
                 />
               </div>
 
-              <div className="create-again flex flex-wrap justify-between mt-6 pr-4">
+              <div className="create-again flex flex-wrap justify-between mt-6 lg:pr-4">
                 <Button
-                  className="primary-outlined w-60 mb-2 shrink-0 grow-0"
+                  className="primary-outlined w-full lg:w-60 mb-2 shrink-0 grow-0 md:mr-4"
                   disabled={loading}
                   variant="primary"
                   centerText={true}
@@ -237,7 +239,7 @@ const Invite: FC<InviteProps> = () => {
                 />
 
                 <Button
-                  className="primary-outlined w-60 mb-2 shrink-0 grow-0"
+                  className="primary-outlined w-full lg:w-60 mb-2 shrink-0 grow-0 md:mr-4 lg:mr-0"
                   disabled={loading}
                   variant="primary-outlined"
                   centerText={true}