rotate the arrow icon for rtl language

rotate the arrow icon for rtl language
This commit is contained in:
Ash Monsh 2023-04-19 07:31:25 +03:00
parent aca612c833
commit ab48a0882a
2 changed files with 8 additions and 2 deletions

View File

@ -13,6 +13,7 @@ import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
import Icons from 'components/icons'; import Icons from 'components/icons';
import useMessages from 'hooks/useMessages'; import useMessages from 'hooks/useMessages';
import styles from './MetricsTable.module.css'; import styles from './MetricsTable.module.css';
import useLocale from 'hooks/useLocale';
export default function MetricsTable({ export default function MetricsTable({
websiteId, websiteId,
@ -69,6 +70,7 @@ export default function MetricsTable({
} }
return []; return [];
}, [data, error, dataFilter, filterOptions]); }, [data, error, dataFilter, filterOptions]);
const { dir } = useLocale();
return ( return (
<div className={classNames(styles.container, className)}> <div className={classNames(styles.container, className)}>
@ -80,7 +82,7 @@ export default function MetricsTable({
<Link href={router.pathname} as={resolveUrl({ view: type })}> <Link href={router.pathname} as={resolveUrl({ view: type })}>
<Button variant="quiet"> <Button variant="quiet">
<Text>{formatMessage(labels.more)}</Text> <Text>{formatMessage(labels.more)}</Text>
<Icon size="sm"> <Icon size="sm" rotate={dir === 'rtl' ? 180 : 0}>
<Icons.ArrowRight /> <Icons.ArrowRight />
</Icon> </Icon>
</Button> </Button>

View File

@ -18,6 +18,7 @@ import Icons from 'components/icons';
import useSticky from 'hooks/useSticky'; import useSticky from 'hooks/useSticky';
import useMessages from 'hooks/useMessages'; import useMessages from 'hooks/useMessages';
import styles from './WebsiteChart.module.css'; import styles from './WebsiteChart.module.css';
import useLocale from 'hooks/useLocale';
export default function WebsiteChart({ export default function WebsiteChart({
websiteId, websiteId,
@ -72,6 +73,7 @@ export default function WebsiteChart({
return { pageviews: [], sessions: [] }; return { pageviews: [], sessions: [] };
}, [data, modified]); }, [data, modified]);
const { dir } = useLocale();
return ( return (
<> <>
<WebsiteHeader websiteId={websiteId} name={name} domain={domain}> <WebsiteHeader websiteId={websiteId} name={name} domain={domain}>
@ -80,7 +82,9 @@ export default function WebsiteChart({
<Button variant="primary"> <Button variant="primary">
<Text>{formatMessage(labels.viewDetails)}</Text> <Text>{formatMessage(labels.viewDetails)}</Text>
<Icon> <Icon>
<Icons.ArrowRight /> <Icon rotate={dir === 'rtl' ? 180 : 0}>
<Icons.ArrowRight />
</Icon>
</Icon> </Icon>
</Button> </Button>
</Link> </Link>