bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use arrow-left for ReplyMentionsModal

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2022-05-15 09:06:40 +02:00
parent 609c6196fb
commit 30017d62c9
2 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/soapbox/components/ui/modal/modal.tsx
View file

@ -15,6 +15,10 @@ interface IModal {
cancelAction?: () => void, cancelAction?: () => void,
/** Cancel button text. */ /** Cancel button text. */
cancelText?: string, cancelText?: string,
/** URL to an SVG icon for the close button. */
closeIcon?: string,
/** Position of the close button. */
closePosition?: 'left' | 'right',
/** Callback when the modal is confirmed. */ /** Callback when the modal is confirmed. */
confirmationAction?: () => void, confirmationAction?: () => void,
/** Whether the confirmation button is disabled. */ /** Whether the confirmation button is disabled. */
@ -40,6 +44,8 @@ const Modal: React.FC<IModal> = ({
cancelAction, cancelAction,
cancelText, cancelText,
children, children,
closeIcon = require('@tabler/icons/icons/x.svg'),
closePosition = 'right',
confirmationAction, confirmationAction,
confirmationDisabled, confirmationDisabled,
confirmationText, confirmationText,
@ -63,14 +69,18 @@ const Modal: React.FC<IModal> = ({
<div data-testid='modal' className='block w-full max-w-xl p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-800 text-black dark:text-white shadow-xl rounded-2xl pointer-events-auto'> <div data-testid='modal' className='block w-full max-w-xl p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-800 text-black dark:text-white shadow-xl rounded-2xl pointer-events-auto'>
<div className='sm:flex sm:items-start w-full justify-between'> <div className='sm:flex sm:items-start w-full justify-between'>
<div className='w-full'> <div className='w-full'>
<div className='w-full flex flex-row justify-between items-center'> <div
<h3 className='text-lg leading-6 font-medium text-gray-900 dark:text-white'> className={classNames('w-full flex items-center gap-2', {
'flex-row-reverse': closePosition === 'left',
})}
>
<h3 className='flex-grow text-lg leading-6 font-medium text-gray-900 dark:text-white'>
{title} {title}
</h3> </h3>
{onClose && ( {onClose && (
<IconButton <IconButton
src={require('@tabler/icons/icons/x.svg')} src={closeIcon}
title={intl.formatMessage(messages.close)} title={intl.formatMessage(messages.close)}
onClick={onClose} onClick={onClose}
className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200' className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200'

2
app/soapbox/features/ui/components/reply_mentions_modal.tsx
View file

@ -29,6 +29,8 @@ const ReplyMentionsModal: React.FC<IReplyMentionsModal> = ({ onClose }) => {
<Modal <Modal
title={<FormattedMessage id='navigation_bar.in_reply_to' defaultMessage='In reply to' />} title={<FormattedMessage id='navigation_bar.in_reply_to' defaultMessage='In reply to' />}
onClose={onClickClose} onClose={onClickClose}
closeIcon={require('@tabler/icons/icons/arrow-left.svg')}
closePosition='left'
> >
<div className='reply-mentions-modal__accounts'> <div className='reply-mentions-modal__accounts'>
{mentions.map(accountId => <Account key={accountId} accountId={accountId} added author={author === accountId} />)} {mentions.map(accountId => <Account key={accountId} accountId={accountId} added author={author === accountId} />)}