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

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

View file

@ -58,6 +58,6 @@
gap: 20px;
align-items: center;
justify-content: space-between;
padding-right: 0;
padding-inline-end: 0;
}
}

View file

@ -12,7 +12,7 @@ import ReferrersTable from 'components/metrics/ReferrersTable';
import ScreenTable from 'components/metrics/ScreenTable';
import EventsTable from 'components/metrics/EventsTable';
import SideNav from 'components/layout/SideNav';
import { useNavigation, useMessages } from 'components/hooks';
import { useNavigation, useMessages, useLocale } from 'components/hooks';
import LinkButton from 'components/common/LinkButton';
import styles from './WebsiteExpandedView.module.css';
@ -39,6 +39,7 @@ export default function WebsiteExpandedView({
websiteId: string;
domainName?: string;
}) {
const { dir } = useLocale();
const { formatMessage, labels } = useMessages();
const {
router,
@ -122,7 +123,7 @@ export default function WebsiteExpandedView({
<div className={styles.layout}>
<div className={styles.menu}>
<LinkButton href={pathname} className={styles.back} variant="quiet" scroll={false}>
<Icon rotate={180}>
<Icon rotate={dir === 'rtl' ? 0 : 180}>
<Icons.ArrowRight />
</Icon>
<Text>{formatMessage(labels.back)}</Text>

View file

@ -27,7 +27,7 @@
}
.icon {
margin-right: 10px;
margin-inline-end: 10px;
}
.time {