moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'update-ui-design-zap-invoice' into 'main' 

Update zap-invoice design

Closes #1696

See merge request soapbox-pub/soapbox!3097
This commit is contained in:
Alex Gleason 2024-09-02 20:55:12 +00:00
parent 5bfb23aedd 342ace5f5a
commit c3304c7c3c
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/features/ui/components/modals/zap-invoice.tsx
View File

@ -4,11 +4,14 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import { closeModal } from 'soapbox/actions/modals'; import { closeModal } from 'soapbox/actions/modals';
import CopyableInput from 'soapbox/components/copyable-input'; 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 { useAppDispatch } from 'soapbox/hooks';
import type { Account as AccountEntity } from 'soapbox/types/entities'; import type { Account as AccountEntity } from 'soapbox/types/entities';
const closeIcon = require('@tabler/icons/outline/x.svg');
const messages = defineMessages({ const messages = defineMessages({
zap_open_wallet: { id: 'zap.open_wallet', defaultMessage: 'Open Wallet' }, 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 <FormattedMessage id='zap.send_to' defaultMessage='Send zaps to {target}' values={{ target: account.display_name }} />;
}; };
return ( return (
<Modal title={renderTitle()} onClose={onClickClose}> <Modal width='sm'>
<Stack space={3} className='m-auto items-center'> <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} /> <QRCodeCanvas value={invoice} />
<div className='w-full'> <div className='w-full'>
<CopyableInput value={invoice} /> <CopyableInput value={invoice} />