Merge pull request #2547 from MohanadOO/master

Improvments related to Arabic Translations & Right To Left Direction Styles
This commit is contained in:
Mike Cao 2024-03-01 14:48:28 -08:00 committed by GitHub
commit 011dea41c9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
23 changed files with 97 additions and 82 deletions

View file

@ -6,7 +6,7 @@
z-index: var(--z-index-popup);
border-radius: 5px;
border: 1px solid var(--border-color);
margin-left: 10px;
margin-inline-start: 10px;
}
.item {

View file

@ -18,7 +18,7 @@
font-size: 11px;
color: var(--base600);
text-align: right;
margin-right: 10px;
margin-inline-end: 10px;
}
.name {

View file

@ -13,12 +13,11 @@
}
.buttons button:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-start-end-radius: 0;
border-end-end-radius: 0;
}
.buttons button:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 1px solid var(--base400) !important;
border-start-start-radius: 0;
border-end-start-radius: 0;
}

View file

@ -1,4 +1,4 @@
import { useDateRange } from 'components/hooks';
import { useDateRange, useLocale } from 'components/hooks';
import { isAfter } from 'date-fns';
import { getOffsetDateRange } from 'lib/date';
import { Button, Icon, Icons } from 'react-basics';
@ -7,6 +7,7 @@ import styles from './WebsiteDateFilter.module.css';
import { DateRange } from 'lib/types';
export function WebsiteDateFilter({ websiteId }: { websiteId: string }) {
const { dir } = useLocale();
const [dateRange, setDateRange] = useDateRange(websiteId);
const { value, startDate, endDate, offset } = dateRange;
const disableForward =
@ -25,12 +26,12 @@ export function WebsiteDateFilter({ websiteId }: { websiteId: string }) {
{value !== 'all' && (
<div className={styles.buttons}>
<Button onClick={() => handleIncrement(-1)}>
<Icon rotate={90}>
<Icon rotate={dir === 'rtl' ? 270 : 90}>
<Icons.ChevronDown />
</Icon>
</Button>
<Button onClick={() => handleIncrement(1)} disabled={disableForward}>
<Icon rotate={270}>
<Icon rotate={dir === 'rtl' ? 90 : 270}>
<Icons.ChevronDown />
</Icon>
</Button>