From 342ace5f5a3f35ecb4c436b6de23f5a0c30364ad Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Thu, 29 Aug 2024 23:27:39 -0300
Subject: [PATCH] Update zap-invoice design

---
 src/features/ui/components/modals/zap-invoice.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/features/ui/components/modals/zap-invoice.tsx b/src/features/ui/components/modals/zap-invoice.tsx
index 7592fc18d..e416f3eae 100644
--- a/src/features/ui/components/modals/zap-invoice.tsx
+++ b/src/features/ui/components/modals/zap-invoice.tsx
@@ -4,11 +4,14 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { closeModal } from 'soapbox/actions/modals';
 import CopyableInput from 'soapbox/components/copyable-input';
-import { Modal, Button, Stack } from 'soapbox/components/ui';
+import { Modal, Button, Stack, Avatar } from 'soapbox/components/ui';
+import IconButton from 'soapbox/components/ui/icon-button/icon-button';
 import { useAppDispatch } from 'soapbox/hooks';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
 
+const closeIcon = require('@tabler/icons/outline/x.svg');
+
 const messages = defineMessages({
   zap_open_wallet: { id: 'zap.open_wallet', defaultMessage: 'Open Wallet' },
 });
@@ -32,9 +35,15 @@ const ZapInvoiceModal: React.FC<IZapInvoice> = ({ account, invoice, onClose }) =
     return <FormattedMessage id='zap.send_to' defaultMessage='Send zaps to {target}' values={{ target: account.display_name }} />;
   };
 
+
   return (
-    <Modal title={renderTitle()} onClose={onClickClose}>
-      <Stack space={3} className='m-auto items-center'>
+    <Modal width='sm'>
+      <Stack space={6} className='relative m-auto' alignItems='center' >
+        <Avatar src={account.avatar} size={64} />
+        <h3 className='text-xl font-bold'>
+          {renderTitle()}
+        </h3>
+        <IconButton src={closeIcon} onClick={onClickClose} className='absolute -top-[8%] right-[2%] text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
         <QRCodeCanvas value={invoice} />
         <div className='w-full'>
           <CopyableInput value={invoice} />