From 5246301324e7b56cdcdea3498181ee22476b23c1 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Thu, 29 Aug 2024 10:44:00 -0300
Subject: [PATCH] update-zap

---
 src/assets/icons/questionIcon.svg                |  1 +
 src/assets/icons/questionIconDark.svg            |  1 +
 .../zap/components/zap-pay-request-form.tsx      | 16 +++++++++++++---
 3 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/icons/questionIcon.svg
 create mode 100644 src/assets/icons/questionIconDark.svg

diff --git a/src/assets/icons/questionIcon.svg b/src/assets/icons/questionIcon.svg
new file mode 100644
index 000000000..525e62b78
--- /dev/null
+++ b/src/assets/icons/questionIcon.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M10.125 8.875C10.125 7.83947 10.9645 7 12 7C13.0355 7 13.875 7.83947 13.875 8.875C13.875 9.56245 13.505 10.1635 12.9534 10.4899C12.478 10.7711 12 11.1977 12 11.75V13" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"></path> <circle cx="12" cy="16" r="1" fill="#ffffff"></circle> <path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"></path> </g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/questionIconDark.svg b/src/assets/icons/questionIconDark.svg
new file mode 100644
index 000000000..efd0ad8b2
--- /dev/null
+++ b/src/assets/icons/questionIconDark.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M10.125 8.875C10.125 7.83947 10.9645 7 12 7C13.0355 7 13.875 7.83947 13.875 8.875C13.875 9.56245 13.505 10.1635 12.9534 10.4899C12.478 10.7711 12 11.1977 12 11.75V13" stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path> <circle cx="12" cy="16" r="1" fill="#000000"></circle> <path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path> </g></svg>
\ No newline at end of file
diff --git a/src/features/zap/components/zap-pay-request-form.tsx b/src/features/zap/components/zap-pay-request-form.tsx
index 723c1fa64..cacffe7d7 100644
--- a/src/features/zap/components/zap-pay-request-form.tsx
+++ b/src/features/zap/components/zap-pay-request-form.tsx
@@ -8,8 +8,9 @@ import coinStack from 'soapbox/assets/icons/coin-stack.png';
 import coinIcon from 'soapbox/assets/icons/coin.png';
 import moneyBag from 'soapbox/assets/icons/money-bag.png';
 import pileCoin from 'soapbox/assets/icons/pile-coin.png';
+import questionIcon from 'soapbox/assets/icons/questionIcon.svg';
 import Account from 'soapbox/components/account';
-import { Stack, Button, Input } from 'soapbox/components/ui';
+import { Stack, HStack, Button, Input } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
 import type {  Account as AccountEntity, Status as StatusEntity   } from 'soapbox/types/entities';
@@ -64,7 +65,7 @@ const ZapPayRequestForm = ({ account, status }: IZapPayRequestForm) => {
   };
 
   return (
-    <Stack space={3} element='form' onSubmit={handleSubmit}>
+    <Stack space={3} alignItems='center' element='form' onSubmit={handleSubmit} >
       <Account account={account} showProfileHoverCard={false} />
       <div>
         <FormattedMessage id='zap.unit' defaultMessage='Zap amount in sats' />
@@ -85,8 +86,17 @@ const ZapPayRequestForm = ({ account, status }: IZapPayRequestForm) => {
         />
       </div>
 
-      <Input onChange={e => setZapComment(e.target.value)} type='text' placeholder={intl.formatMessage(messages.zap_commentPlaceholder)} />
+      <div className='w-full'>
+        <Input onChange={e => setZapComment(e.target.value)} type='text' placeholder={intl.formatMessage(messages.zap_commentPlaceholder)} />
+      </div>
+
       <Button className='m-auto w-auto' type='submit' theme='primary' icon={require('@tabler/icons/outline/bolt.svg')} text={renderZapButtonText()} disabled={zapAmount < 1 ? true : false} />
+      <HStack justifyContent='center' space={2}>
+        <p className='text-sm'>To suport Ditto, 'amount' sats will deducted</p>
+        <a className='flex gap-2' href='/'>
+          <img src={questionIcon} className='w-4' alt='' />
+        </a>
+      </HStack>
     </Stack>
   );
 };