Changes on zap-split-modal

src/features/ui/components/modals/zap-split/zap-split-modal.tsx

@@ -27,6 +27,7 @@ const ZapSplitModal: React.FC<IZapSplitModal> = ({ account, status, onClose, zap
   const intl = useIntl();
   const hasZapSplit = true;
   const [invoice, setInvoice] = useState<string | null>(null);
+  const [widthModal, setWidthModal] = useState<'xl' | 'xs' | 'sm' | 'md' | 'lg' | '2xl' | '3xl' | '4xl' | undefined>('sm');
 
 
   const onClickClose = () => {
@@ -50,16 +51,21 @@ const ZapSplitModal: React.FC<IZapSplitModal> = ({ account, status, onClose, zap
     }
 
     setInvoice(invoice);
+    setWidthModal('xl');
   };
 
   useEffect(() => {
     handleSubmit();
   }, []);
 
+  const step = 2 ;
+  const amountAdm = 3;
 
   return (
-    <Modal title={renderTitle()} onClose={onClickClose} className='max-w-[350px] sm:max-w-xl'>
-      <div className='flex flex-col sm:flex-row'>
+    <Modal
+      title={renderTitle()} onClose={onClickClose} width={widthModal}
+    >
+      <div className='relative flex flex-col sm:flex-row'>
         <ZapSplit account={account} status={status} zapAmount={50} />
 
         {invoice &&  <div className='border-grey-500 mt-4 flex w-full border-t pt-4 sm:ml-4 sm:w-4/5 sm:border-l sm:border-t-0 sm:pl-4'>
@@ -75,12 +81,17 @@ const ZapSplitModal: React.FC<IZapSplitModal> = ({ account, status, onClose, zap
               <a href={'lightning:' + invoice}>
                 <Button type='submit' theme='primary' icon={require('@tabler/icons/outline/folder-open.svg')} text={intl.formatMessage(messages.zap_open_wallet)} />
               </a>
-              {hasZapSplit ? <a href={'lightning:' + invoice}>
+              {hasZapSplit &&
                 <Button type='button' theme='muted' className='!font-bold' text={intl.formatMessage(messages.zap_next)} />
-              </a> : null}
+              }
             </HStack>
           </Stack>
         </div>}
+        <p className='absolute -bottom-4 -right-2'>
+          <span className='font-bold'>
+            {step}/{amountAdm}
+          </span>
+        </p>
       </div>
     </Modal>
   );

src/features/zap/components/zap-split.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Account from 'soapbox/components/account';
-import { Stack, HStack } from 'soapbox/components/ui';
+import { Stack } from 'soapbox/components/ui';
 
 import type {  Account as AccountEntity, Status as StatusEntity   } from 'soapbox/types/entities';
 
@@ -19,8 +19,10 @@ const ZapSplit = ({ account, status, amountAdm = 3, zapAmount = 50, step = 2 }:
     <Stack space={10} alignItems='center' className='relative pb-4 pt-2'>
 
       <Stack space={4} justifyContent='center' className='w-full' alignItems='center'>
-        <Stack className='w-4/5'>
-          <Account account={account} showProfileHoverCard={false} />
+        <Stack justifyContent='center' alignItems='center' className='w-3/5 sm:w-4/5'>
+          <div>
+            <Account account={account} showProfileHoverCard={false} />
+          </div>
         </Stack>
         <div className='bg-grey-500 dark:border-grey-800 -mx-4 w-full border-b border-solid sm:-mx-10' />
 
@@ -43,18 +45,13 @@ const ZapSplit = ({ account, status, amountAdm = 3, zapAmount = 50, step = 2 }:
         </div>
       </div>
 
-      <HStack justifyContent='center' space={2}>
-        <a className='flex gap-2' href='/'>
-          <p className='text-sm'>
-            <FormattedMessage id='zap_split.question' defaultMessage='Why am I paying this?' />
-          </p>
-        </a>
-        <p className='absolute right-2'>
-          <span className='font-bold'>
-            {step}/{amountAdm}
-          </span>
+
+      <a className='flex gap-2' href='/'>
+        <p className='text-sm'>
+          <FormattedMessage id='zap_split.question' defaultMessage='Why am I paying this?' />
         </p>
-      </HStack>
+      </a>
+
     </Stack>
   );
 };