From 30017d62c9c9696458a5c37a408a2f0af7c83c70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 15 May 2022 09:06:40 +0200
Subject: [PATCH] Use arrow-left for ReplyMentionsModal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/ui/modal/modal.tsx        | 16 +++++++++++++---
 .../ui/components/reply_mentions_modal.tsx       |  2 ++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx
index b78dfe823..5ac16ca14 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@@ -15,6 +15,10 @@ interface IModal {
   cancelAction?: () => void,
   /** Cancel button text. */
   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. */
   confirmationAction?: () => void,
   /** Whether the confirmation button is disabled. */
@@ -40,6 +44,8 @@ const Modal: React.FC<IModal> = ({
   cancelAction,
   cancelText,
   children,
+  closeIcon = require('@tabler/icons/icons/x.svg'),
+  closePosition = 'right',
   confirmationAction,
   confirmationDisabled,
   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 className='sm:flex sm:items-start w-full justify-between'>
         <div className='w-full'>
-          <div className='w-full flex flex-row justify-between items-center'>
-            <h3 className='text-lg leading-6 font-medium text-gray-900 dark:text-white'>
+          <div
+            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}
             </h3>
 
             {onClose && (
               <IconButton
-                src={require('@tabler/icons/icons/x.svg')}
+                src={closeIcon}
                 title={intl.formatMessage(messages.close)}
                 onClick={onClose}
                 className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200'
diff --git a/app/soapbox/features/ui/components/reply_mentions_modal.tsx b/app/soapbox/features/ui/components/reply_mentions_modal.tsx
index 996aeee15..c1d3422fb 100644
--- a/app/soapbox/features/ui/components/reply_mentions_modal.tsx
+++ b/app/soapbox/features/ui/components/reply_mentions_modal.tsx
@@ -29,6 +29,8 @@ const ReplyMentionsModal: React.FC<IReplyMentionsModal> = ({ onClose }) => {
     <Modal
       title={<FormattedMessage id='navigation_bar.in_reply_to' defaultMessage='In reply to' />}
       onClose={onClickClose}
+      closeIcon={require('@tabler/icons/icons/arrow-left.svg')}
+      closePosition='left'
     >
       <div className='reply-mentions-modal__accounts'>
         {mentions.map(accountId => <Account key={accountId} accountId={accountId} added author={author === accountId} />)}