From 6154e4bac46a22e000af1ec72c4afb3d088c4b0a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 4 Dec 2022 19:40:09 -0600
Subject: [PATCH] Rotate arrows for RTL

---
 app/soapbox/components/birthday-input.tsx   | 8 ++++----
 app/soapbox/components/list.tsx             | 2 +-
 app/soapbox/components/ui/card/card.tsx     | 2 +-
 app/soapbox/components/ui/modal/modal.tsx   | 2 +-
 app/soapbox/components/ui/widget/widget.tsx | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/components/birthday-input.tsx b/app/soapbox/components/birthday-input.tsx
index 9da717e0d..b8e4d11ad 100644
--- a/app/soapbox/components/birthday-input.tsx
+++ b/app/soapbox/components/birthday-input.tsx
@@ -70,7 +70,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
       <div className='flex flex-col gap-2'>
         <div className='flex items-center justify-between'>
           <IconButton
-            className='datepicker__button'
+            className='datepicker__button rtl:rotate-180'
             src={require('@tabler/icons/chevron-left.svg')}
             onClick={decreaseMonth}
             disabled={prevMonthButtonDisabled}
@@ -79,7 +79,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
           />
           {intl.formatDate(date, { month: 'long' })}
           <IconButton
-            className='datepicker__button'
+            className='datepicker__button rtl:rotate-180'
             src={require('@tabler/icons/chevron-right.svg')}
             onClick={increaseMonth}
             disabled={nextMonthButtonDisabled}
@@ -89,7 +89,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
         </div>
         <div className='flex items-center justify-between'>
           <IconButton
-            className='datepicker__button'
+            className='datepicker__button rtl:rotate-180'
             src={require('@tabler/icons/chevron-left.svg')}
             onClick={decreaseYear}
             disabled={prevYearButtonDisabled}
@@ -98,7 +98,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
           />
           {intl.formatDate(date, { year: 'numeric' })}
           <IconButton
-            className='datepicker__button'
+            className='datepicker__button rtl:rotate-180'
             src={require('@tabler/icons/chevron-right.svg')}
             onClick={increaseYear}
             disabled={nextYearButtonDisabled}
diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx
index 0ac33653e..d36bc68c2 100644
--- a/app/soapbox/components/list.tsx
+++ b/app/soapbox/components/list.tsx
@@ -68,7 +68,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick }) => {
         <HStack space={1} alignItems='center' className='text-gray-700 dark:text-gray-600'>
           {children}
 
-          <Icon src={require('@tabler/icons/chevron-right.svg')} className='ml-1' />
+          <Icon src={require('@tabler/icons/chevron-right.svg')} className='ml-1 rtl:rotate-180' />
         </HStack>
       ) : renderChildren()}
     </Comp>
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index fd01e5a94..110bc79fe 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -64,7 +64,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
 
     return (
       <Comp {...backAttributes} className='text-gray-900 dark:text-gray-100 focus:ring-primary-500 focus:ring-2' aria-label={intl.formatMessage(messages.back)}>
-        <SvgIcon src={require('@tabler/icons/arrow-left.svg')} className='h-6 w-6' />
+        <SvgIcon src={require('@tabler/icons/arrow-left.svg')} className='h-6 w-6 rtl:rotate-180' />
         <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
       </Comp>
     );
diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx
index 741309195..9284c82e2 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@@ -100,7 +100,7 @@ const Modal: React.FC<IModal> = ({
                   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'
+                  className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180'
                 />
               )}
             </div>
diff --git a/app/soapbox/components/ui/widget/widget.tsx b/app/soapbox/components/ui/widget/widget.tsx
index 16cc33234..ec855c5f8 100644
--- a/app/soapbox/components/ui/widget/widget.tsx
+++ b/app/soapbox/components/ui/widget/widget.tsx
@@ -44,7 +44,7 @@ const Widget: React.FC<IWidget> = ({
         <WidgetTitle title={title} />
         {action || (onActionClick && (
           <IconButton
-            className='w-6 h-6 ml-2 text-black dark:text-white'
+            className='w-6 h-6 ml-2 text-black dark:text-white rtl:rotate-180'
             src={actionIcon}
             onClick={onActionClick}
             title={actionTitle}