watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-07 06:07:17 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

style: 🎨 Use Logical Style properties to apply same styles based on Language Direction (dir)

Browse source
This commit is contained in:
Mohanad Alrwaihy 2024-02-29 23:32:06 +03:00
parent 354da4bc56
commit adf910306b
20 changed files with 35 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/input/LanguageButton.module.css
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 {

2
src/components/input/ProfileButton.module.css
View file

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

9
src/components/input/WebsiteDateFilter.module.css
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;
}

7
src/components/input/WebsiteDateFilter.tsx
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>