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

Merge branch 'rtl-arrows' into 'develop' 

Rotate arrows for RTL

See merge request soapbox-pub/soapbox!1977
This commit is contained in:
Alex Gleason 2022-12-23 16:31:17 +00:00
parent 622b90daee 6154e4bac4
commit 6dc16911f3
5 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/soapbox/components/birthday-input.tsx
View File

@ -70,7 +70,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
<div className='flex flex-col gap-2'> <div className='flex flex-col gap-2'>
<div className='flex items-center justify-between'> <div className='flex items-center justify-between'>
<IconButton <IconButton
className='datepicker__button' className='datepicker__button rtl:rotate-180'
src={require('@tabler/icons/chevron-left.svg')} src={require('@tabler/icons/chevron-left.svg')}
onClick={decreaseMonth} onClick={decreaseMonth}
disabled={prevMonthButtonDisabled} disabled={prevMonthButtonDisabled}
@ -79,7 +79,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
/> />
{intl.formatDate(date, { month: 'long' })} {intl.formatDate(date, { month: 'long' })}
<IconButton <IconButton
className='datepicker__button' className='datepicker__button rtl:rotate-180'
src={require('@tabler/icons/chevron-right.svg')} src={require('@tabler/icons/chevron-right.svg')}
onClick={increaseMonth} onClick={increaseMonth}
disabled={nextMonthButtonDisabled} disabled={nextMonthButtonDisabled}
@ -89,7 +89,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
</div> </div>
<div className='flex items-center justify-between'> <div className='flex items-center justify-between'>
<IconButton <IconButton
className='datepicker__button' className='datepicker__button rtl:rotate-180'
src={require('@tabler/icons/chevron-left.svg')} src={require('@tabler/icons/chevron-left.svg')}
onClick={decreaseYear} onClick={decreaseYear}
disabled={prevYearButtonDisabled} disabled={prevYearButtonDisabled}
@ -98,7 +98,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
/> />
{intl.formatDate(date, { year: 'numeric' })} {intl.formatDate(date, { year: 'numeric' })}
<IconButton <IconButton
className='datepicker__button' className='datepicker__button rtl:rotate-180'
src={require('@tabler/icons/chevron-right.svg')} src={require('@tabler/icons/chevron-right.svg')}
onClick={increaseYear} onClick={increaseYear}
disabled={nextYearButtonDisabled} disabled={nextYearButtonDisabled}

2
app/soapbox/components/list.tsx
View File

@ -70,7 +70,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
<HStack space={1} alignItems='center' className='text-gray-700 dark:text-gray-600'> <HStack space={1} alignItems='center' className='text-gray-700 dark:text-gray-600'>
{children} {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> </HStack>
) : null} ) : null}

2
app/soapbox/components/ui/card/card.tsx
View File

@ -64,7 +64,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
return ( return (
<Comp {...backAttributes} className='text-gray-900 dark:text-gray-100 focus:ring-primary-500 focus:ring-2' aria-label={intl.formatMessage(messages.back)}> <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> <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
</Comp> </Comp>
); );

2
app/soapbox/components/ui/modal/modal.tsx
View File

@ -101,7 +101,7 @@ const Modal: React.FC<IModal> = ({
src={closeIcon} 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 rtl:rotate-180'
/> />
)} )}
</div> </div>

2
app/soapbox/components/ui/widget/widget.tsx
View File

@ -44,7 +44,7 @@ const Widget: React.FC<IWidget> = ({
<WidgetTitle title={title} /> <WidgetTitle title={title} />
{action || (onActionClick && ( {action || (onActionClick && (
<IconButton <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} src={actionIcon}
onClick={onActionClick} onClick={onActionClick}
title={actionTitle} title={actionTitle}