From a52bfaa629ff44597a342536d52ef3d55238a3d4 Mon Sep 17 00:00:00 2001
From: Ash Monsh <wh7r.com@gmail.com>
Date: Wed, 19 Apr 2023 07:30:09 +0300
Subject: [PATCH 1/3] Update LanguageButton.js

set alignment base on the page dir for Language menu
---
 components/input/LanguageButton.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/input/LanguageButton.js b/components/input/LanguageButton.js
index e6da5991..bc130c4c 100644
--- a/components/input/LanguageButton.js
+++ b/components/input/LanguageButton.js
@@ -6,7 +6,7 @@ import Icons from 'components/icons';
 import styles from './LanguageButton.module.css';
 
 export default function LanguageButton() {
-  const { locale, saveLocale } = useLocale();
+  const { locale, saveLocale, dir } = useLocale();
   const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
 
   function handleSelect(value) {
@@ -20,7 +20,7 @@ export default function LanguageButton() {
           <Icons.Globe />
         </Icon>
       </Button>
-      <Popup position="bottom" alignment="end">
+      <Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
         <div className={styles.menu}>
           {items.map(({ value, label }) => {
             return (

From aca612c833f542bee90905aae3a32fb3b4711e25 Mon Sep 17 00:00:00 2001
From: Ash Monsh <wh7r.com@gmail.com>
Date: Wed, 19 Apr 2023 07:30:43 +0300
Subject: [PATCH 2/3] Update ProfileButton.js

set alignment base on the page dir for User profile menu
---
 components/input/ProfileButton.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/input/ProfileButton.js b/components/input/ProfileButton.js
index 547054e0..453f1df3 100644
--- a/components/input/ProfileButton.js
+++ b/components/input/ProfileButton.js
@@ -5,12 +5,14 @@ import useMessages from 'hooks/useMessages';
 import useUser from 'hooks/useUser';
 import useConfig from 'hooks/useConfig';
 import styles from './ProfileButton.module.css';
+import useLocale from 'hooks/useLocale';
 
 export default function ProfileButton() {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
   const { cloudMode } = useConfig();
   const router = useRouter();
+  const { dir } = useLocale();
 
   const handleSelect = key => {
     if (key === 'profile') {
@@ -31,7 +33,7 @@ export default function ProfileButton() {
           <Icons.ChevronDown />
         </Icon>
       </Button>
-      <Popup position="bottom" alignment="end">
+      <Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
         <Menu variant="popup" onSelect={handleSelect} className={styles.menu}>
           <Item key="user" className={styles.item}>
             <Text>{user.username}</Text>

From ab48a0882ad8747e22ae713f9f223eb9972f58ab Mon Sep 17 00:00:00 2001
From: Ash Monsh <wh7r.com@gmail.com>
Date: Wed, 19 Apr 2023 07:31:25 +0300
Subject: [PATCH 3/3] rotate the arrow icon for rtl language

rotate the arrow icon for rtl language
---
 components/metrics/MetricsTable.js | 4 +++-
 components/metrics/WebsiteChart.js | 6 +++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js
index 0d83fc22..15eeb893 100644
--- a/components/metrics/MetricsTable.js
+++ b/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>
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
index cc27ac25..fe7f90f9 100644
--- a/components/metrics/WebsiteChart.js
+++ b/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,7 +82,9 @@ export default function WebsiteChart({
             <Button variant="primary">
               <Text>{formatMessage(labels.viewDetails)}</Text>
               <Icon>
-                <Icons.ArrowRight />
+                <Icon rotate={dir === 'rtl' ? 180 : 0}>
+                  <Icons.ArrowRight />
+                </Icon>
               </Icon>
             </Button>
           </Link>