rotate the arrow icon for rtl language

rotate the arrow icon for rtl language

components/metrics/MetricsTable.js

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

components/metrics/WebsiteChart.js

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