From c8313e2652b401b31bc724cf8919460c6d8d0a55 Mon Sep 17 00:00:00 2001
From: "P. Reis" <patrickpereirareal1@gmail.com>
Date: Wed, 5 Jun 2024 18:12:17 -0300
Subject: [PATCH] feat(ZapPayRequestForm): zap invoice design enhanced

---
 .../ui/components/modals/zap-invoice.tsx         | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/features/ui/components/modals/zap-invoice.tsx b/src/features/ui/components/modals/zap-invoice.tsx
index 962f0ce1c..7592fc18d 100644
--- a/src/features/ui/components/modals/zap-invoice.tsx
+++ b/src/features/ui/components/modals/zap-invoice.tsx
@@ -4,7 +4,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { closeModal } from 'soapbox/actions/modals';
 import CopyableInput from 'soapbox/components/copyable-input';
-import { Modal, Button } from 'soapbox/components/ui';
+import { Modal, Button, Stack } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
@@ -34,11 +34,15 @@ const ZapInvoiceModal: React.FC<IZapInvoice> = ({ account, invoice, onClose }) =
 
   return (
     <Modal title={renderTitle()} onClose={onClickClose}>
-      <QRCodeCanvas value={invoice} />
-      <CopyableInput value={invoice} />
-      <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>
+      <Stack space={3} className='m-auto items-center'>
+        <QRCodeCanvas value={invoice} />
+        <div className='w-full'>
+          <CopyableInput value={invoice} />
+        </div>
+        <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>
+      </Stack>
     </Modal>
   );
 };