Merge pull request #2547 from MohanadOO/master

Improvments related to Arabic Translations & Right To Left Direction Styles

src/app/(main)/reports/[reportId]/ReportBody.module.css

@@ -1,5 +1,5 @@
 .body {
-  padding-left: 20px;
+  padding-inline-start: 20px;
   grid-row: 2/3;
   grid-column: 2 / 3;
 }

src/app/(main)/reports/[reportId]/ReportMenu.module.css

@@ -1,7 +1,7 @@
 .menu {
   width: 300px;
-  padding-right: 20px;
-  border-right: 1px solid var(--base300);
+  padding-inline-end: 20px;
+  border-inline-end: 1px solid var(--base300);
   grid-row: 2 / 3;
   grid-column: 1 / 2;
 }

src/app/(main)/reports/funnel/FunnelChart.module.css

@@ -63,7 +63,7 @@
 
 .value {
   color: var(--base50);
-  margin-right: 20px;
+  margin-inline-end: 20px;
 }
 
 .track {

src/app/(main)/reports/insights/InsightsParameters.module.css

@@ -13,5 +13,5 @@
 
 .popup {
   margin-top: -10px;
-  margin-left: 30px;
+  margin-inline-start: 30px;
 }

src/app/(main)/settings/teams/WebsiteTags.module.css

@@ -7,5 +7,5 @@
 .tag {
   text-align: center;
   margin-bottom: 10px;
-  margin-right: 20px;
+  margin-inline-end: 20px;
 }

src/app/(main)/websites/[websiteId]/WebsiteExpandedView.module.css

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

src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx

@@ -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>

src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.module.css

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

src/app/Providers.tsx

@@ -5,6 +5,7 @@ import { ReactBasicsProvider } from 'react-basics';
 import ErrorBoundary from 'components/common/ErrorBoundary';
 import { useLocale } from 'components/hooks';
 import 'chartjs-adapter-date-fns';
+import { useEffect } from 'react';
 
 const client = new QueryClient({
   defaultOptions: {
@@ -16,7 +17,13 @@ const client = new QueryClient({
 });
 
 function MessagesProvider({ children }) {
-  const { locale, messages } = useLocale();
+  const { locale, messages, dir } = useLocale();
+
+  useEffect(() => {
+    document.documentElement.setAttribute('dir', dir);
+    document.documentElement.setAttribute('lang', locale);
+  }, [locale, dir]);
+
   return (
     <IntlProvider locale={locale} messages={messages[locale]} onError={() => null}>
       {children}