Merge pull request #2547 from MohanadOO/master

Improvments related to Arabic Translations & Right To Left Direction Styles

public/intl/messages/ar-SA.json

@@ -32,7 +32,7 @@
   "label.add-member": [
     {
       "type": 0,
-      "value": "Add member"
+      "value": "أضِف عضو"
     }
   ],
   "label.add-website": [
@@ -44,7 +44,7 @@
   "label.administrator": [
     {
       "type": 0,
-      "value": "Administrator"
+      "value": "مدير"
     }
   ],
   "label.after": [
@@ -215,6 +215,12 @@
       "value": "أُنشئت"
     }
   ],
+  "label.created-by": [
+    {
+      "type": 0,
+      "value": "أُنشئ من قبل"
+    }
+  ],
   "label.current-password": [
     {
       "type": 0,
@@ -272,7 +278,7 @@
   "label.delete-report": [
     {
       "type": 0,
-      "value": "Delete report"
+      "value": "احذف التقرير"
     }
   ],
   "label.delete-team": [
@@ -332,7 +338,7 @@
   "label.does-not-contain": [
     {
       "type": 0,
-      "value": "Does not contain"
+      "value": "لا يحتوي"
     }
   ],
   "label.domain": [
@@ -362,7 +368,7 @@
   "label.edit-member": [
     {
       "type": 0,
-      "value": "Edit member"
+      "value": "عدّل العضو"
     }
   ],
   "label.enable-share-url": [
@@ -380,7 +386,7 @@
   "label.event-data": [
     {
       "type": 0,
-      "value": "Event data"
+      "value": "تاريخ الحدث"
     }
   ],
   "label.events": [
@@ -588,7 +594,7 @@
   "label.manage": [
     {
       "type": 0,
-      "value": "Manage"
+      "value": "التحكم"
     }
   ],
   "label.max": [
@@ -600,7 +606,7 @@
   "label.member": [
     {
       "type": 0,
-      "value": "Member"
+      "value": "عضو"
     }
   ],
   "label.members": [
@@ -630,7 +636,7 @@
   "label.my-account": [
     {
       "type": 0,
-      "value": "My account"
+      "value": "حسابي"
     }
   ],
   "label.my-websites": [
@@ -694,7 +700,7 @@
   "label.ok": [
     {
       "type": 0,
-      "value": "OK"
+      "value": "نعم"
     }
   ],
   "label.os": [
@@ -842,7 +848,7 @@
   "label.remove-member": [
     {
       "type": 0,
-      "value": "Remove member"
+      "value": "احذف عضو"
     }
   ],
   "label.reports": [
@@ -914,7 +920,7 @@
   "label.select": [
     {
       "type": 0,
-      "value": "Select"
+      "value": "اختر"
     }
   ],
   "label.select-date": [
@@ -926,7 +932,7 @@
   "label.select-role": [
     {
       "type": 0,
-      "value": "Select role"
+      "value": "حدد الدور"
     }
   ],
   "label.select-website": [
@@ -1094,7 +1100,7 @@
   "label.transfer-website": [
     {
       "type": 0,
-      "value": "Transfer website"
+      "value": "انقل الموقع"
     }
   ],
   "label.true": [
@@ -1232,7 +1238,7 @@
   "message.action-confirmation": [
     {
       "type": 0,
-      "value": "Type "
+      "value": "اكتب "
     },
     {
       "type": 1,
@@ -1240,7 +1246,7 @@
     },
     {
       "type": 0,
-      "value": " in the box below to confirm."
+      "value": " في المربع أدناه للتأكيد."
     }
   ],
   "message.active-users": [
@@ -1308,7 +1314,7 @@
   "message.confirm-remove": [
     {
       "type": 0,
-      "value": "Are you sure you want to remove "
+      "value": "هل انت متأكد من حذف "
     },
     {
       "type": 1,
@@ -1336,7 +1342,7 @@
   "message.delete-team-warning": [
     {
       "type": 0,
-      "value": "Deleting a team will also delete all team websites."
+      "value": "حذف فريق سيؤدي إلى حذف جميع مواقع الفريق"
     }
   ],
   "message.delete-website-warning": [
@@ -1532,25 +1538,25 @@
   "message.transfer-team-website-to-user": [
     {
       "type": 0,
-      "value": "Transfer this website to your account?"
+      "value": "نقل هذا الموقع إلى حسابك؟"
     }
   ],
   "message.transfer-user-website-to-team": [
     {
       "type": 0,
-      "value": "Select the team to transfer this website to."
+      "value": "اختر الفريق الذي تريد نقل الموقع إليه."
     }
   ],
   "message.transfer-website": [
     {
       "type": 0,
-      "value": "Transfer website ownership to your account or another team."
+      "value": "نقل ملكية الموقع لحسابك أو فريق أخر."
     }
   ],
   "message.triggered-event": [
     {
       "type": 0,
-      "value": "Triggered event"
+      "value": "أُطلق الحدث"
     }
   ],
   "message.user-deleted": [
@@ -1562,7 +1568,7 @@
   "message.viewed-page": [
     {
       "type": 0,
-      "value": "Viewed page"
+      "value": "شوهدت الصفحة"
     }
   ],
   "message.visitor-log": [
@@ -1602,7 +1608,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "أنخفض عدد الزوار"
     }
   ]
 }

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}

src/components/common/ErrorMessage.module.css

@@ -11,5 +11,5 @@
 }
 
 .icon {
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }

src/components/common/MobileMenu.module.css

@@ -35,5 +35,5 @@ a.item.selected,
 
 .submenu a.item {
   color: var(--base600);
-  margin-left: 40px;
+  margin-inline-start: 40px;
 }

src/components/input/LanguageButton.module.css

@@ -6,7 +6,7 @@
   z-index: var(--z-index-popup);
   border-radius: 5px;
   border: 1px solid var(--border-color);
-  margin-left: 10px;
+  margin-inline-start: 10px;
 }
 
 .item {

src/components/input/ProfileButton.module.css

@@ -18,7 +18,7 @@
   font-size: 11px;
   color: var(--base600);
   text-align: right;
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }
 
 .name {

src/components/input/WebsiteDateFilter.module.css

@@ -13,12 +13,11 @@
 }
 
 .buttons button:first-child {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }
 
 .buttons button:last-child {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-left: 1px solid var(--base400) !important;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
 }

src/components/input/WebsiteDateFilter.tsx

@@ -1,4 +1,4 @@
-import { useDateRange } from 'components/hooks';
+import { useDateRange, useLocale } from 'components/hooks';
 import { isAfter } from 'date-fns';
 import { getOffsetDateRange } from 'lib/date';
 import { Button, Icon, Icons } from 'react-basics';
@@ -7,6 +7,7 @@ import styles from './WebsiteDateFilter.module.css';
 import { DateRange } from 'lib/types';
 
 export function WebsiteDateFilter({ websiteId }: { websiteId: string }) {
+  const { dir } = useLocale();
   const [dateRange, setDateRange] = useDateRange(websiteId);
   const { value, startDate, endDate, offset } = dateRange;
   const disableForward =
@@ -25,12 +26,12 @@ export function WebsiteDateFilter({ websiteId }: { websiteId: string }) {
       {value !== 'all' && (
         <div className={styles.buttons}>
           <Button onClick={() => handleIncrement(-1)}>
-            <Icon rotate={90}>
+            <Icon rotate={dir === 'rtl' ? 270 : 90}>
               <Icons.ChevronDown />
             </Icon>
           </Button>
           <Button onClick={() => handleIncrement(1)} disabled={disableForward}>
-            <Icon rotate={270}>
+            <Icon rotate={dir === 'rtl' ? 90 : 270}>
               <Icons.ChevronDown />
             </Icon>
           </Button>

src/components/layout/MenuLayout.module.css

@@ -7,7 +7,7 @@
 .menu {
   width: 240px;
   padding-top: 34px;
-  padding-right: 20px;
+  padding-inline-end: 20px;
 }
 
 .content {

src/components/layout/NavGroup.module.css

@@ -29,12 +29,12 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  border-right: 2px solid var(--base200);
+  border-inline-end: 2px solid var(--base200);
   padding: 1rem 2rem;
   gap: var(--size500);
   font-weight: 600;
   width: 200px;
-  margin-right: -2px;
+  margin-inline-end: -2px;
 }
 
 a.item {
@@ -43,7 +43,7 @@ a.item {
 
 .item.selected {
   color: var(--base900);
-  border-right-color: var(--primary400);
+  border-inline-end-color: var(--primary400);
   background: var(--blue100);
 }
 

src/components/layout/PageHeader.module.css

@@ -29,7 +29,7 @@
 
 .icon {
   color: var(--base700);
-  margin-right: 1rem;
+  margin-inline-end: 1rem;
 }
 
 .actions {

src/components/metrics/ActiveUsers.module.css

@@ -1,7 +1,7 @@
 .container {
   display: flex;
   align-items: center;
-  margin-left: 20px;
+  margin-inline-start: 20px;
 }
 
 .text {
@@ -13,5 +13,5 @@
 
 .value {
   font-weight: 600;
-  margin-right: 4px;
+  margin-inline-end: 4px;
 }

src/components/metrics/DatePickerForm.module.css

@@ -14,9 +14,9 @@
 }
 
 .calendars > div + div {
-  margin-left: 20px;
-  padding-left: 20px;
-  border-left: 1px solid var(--base300);
+  margin-inline-start: 20px;
+  padding-inline-start: 20px;
+  border-inline-start: 1px solid var(--base300);
 }
 
 .filter {
@@ -41,7 +41,7 @@
 
   .calendars > div + div {
     padding: 0;
-    margin-left: 0;
+    margin-inline-start: 0;
     margin-top: 20px;
     border: 0;
   }

src/components/metrics/ListTable.module.css

@@ -76,7 +76,7 @@
   position: relative;
   width: 50px;
   color: var(--base600);
-  border-left: 1px solid var(--base600);
+  border-inline-start: 1px solid var(--base600);
   padding-inline-start: 10px;
   z-index: 1;
 }

src/lang/ar-SA.json

@@ -4,9 +4,9 @@
   "label.activity-log": "سجل الأحداث",
   "label.add": "أضِف",
   "label.add-description": "أضِف وصف",
-  "label.add-member": "Add member",
+  "label.add-member": "أضِف عضو",
   "label.add-website": "إضافة موقع",
-  "label.administrator": "Administrator",
+  "label.administrator": "مدير",
   "label.after": "يعد",
   "label.all": "الكل",
   "label.all-time": "كل الوقت",
@@ -35,6 +35,7 @@
   "label.create-team": "أنشِئ فريق",
   "label.create-user": "أنشِئ مستخدم",
   "label.created": "أُنشئت",
+  "label.created-by": "أُنشئ من قبل",
   "label.current-password": "كلمة المرور الحالية",
   "label.custom-range": "فترة مخصّصة",
   "label.dashboard": "الشاشة الرئيسية",
@@ -44,7 +45,7 @@
   "label.day": "يوم",
   "label.default-date-range": "الفترة المخصّصة الافتراضية",
   "label.delete": "حذف",
-  "label.delete-report": "Delete report",
+  "label.delete-report": "احذف التقرير",
   "label.delete-team": "حذف الفريق",
   "label.delete-user": "جذف مستخدم",
   "label.delete-website": "حذف الموقع",
@@ -54,15 +55,15 @@
   "label.device": "الجهاز",
   "label.devices": "الأجهزة",
   "label.dismiss": "تجاهل",
-  "label.does-not-contain": "Does not contain",
+  "label.does-not-contain": "لا يحتوي",
   "label.domain": "النطاق",
   "label.dropoff": "إنزال",
   "label.edit": "عدّل",
   "label.edit-dashboard": "عدّل لوحة التحكم",
-  "label.edit-member": "Edit member",
+  "label.edit-member": "عدّل العضو",
   "label.enable-share-url": "فعّل مشاركة الرابط",
   "label.event": "الحدث",
-  "label.event-data": "Event data",
+  "label.event-data": "تاريخ الحدث",
   "label.events": "الأحداث",
   "label.false": "خطأ",
   "label.field": "الحقل",
@@ -94,20 +95,20 @@
   "label.less-than-equals": "أقل مِن أو يساوي",
   "label.login": "تسجيل الدخول",
   "label.logout": "تسجيل الخروج",
-  "label.manage": "Manage",
+  "label.manage": "التحكم",
   "label.max": "الحد الأقصى",
-  "label.member": "Member",
+  "label.member": "عضو",
   "label.members": "الأعضاء",
   "label.min": "الحد الأدنى",
   "label.mobile": "جوال",
   "label.more": "المزيد",
-  "label.my-account": "My account",
+  "label.my-account": "حسابي",
   "label.my-websites": "مواقعي",
   "label.name": "الاسم",
   "label.new-password": "كلمة مرور جديدة",
   "label.none": "غير معرّف",
   "label.number-of-records": "{x} {x, plural, one {record} other {records}}",
-  "label.ok": "OK",
+  "label.ok": "نعم",
   "label.os": "نظام التشغيل",
   "label.overview": "نظرة عامة",
   "label.owner": "المالك",
@@ -129,7 +130,7 @@
   "label.region": "المنطقة",
   "label.regions": "المناطق",
   "label.remove": "أزِل",
-  "label.remove-member": "Remove member",
+  "label.remove-member": "احذف عضو",
   "label.reports": "التقارير",
   "label.required": "اجباري",
   "label.reset": "اعادة تعيين",
@@ -141,9 +142,9 @@
   "label.save": "حفظ",
   "label.screens": "الشاشات",
   "label.search": "بحث",
-  "label.select": "Select",
+  "label.select": "اختر",
   "label.select-date": "حدد التاريخ",
-  "label.select-role": "Select role",
+  "label.select-role": "حدد الدور",
   "label.select-website": "حدد موقع",
   "label.sessions": "الزيارات",
   "label.settings": "الإعدادات",
@@ -171,7 +172,7 @@
   "label.total-records": "إجمالي السجلات",
   "label.tracking-code": "كود التتبع",
   "label.transfer": "Transfer",
-  "label.transfer-website": "Transfer website",
+  "label.transfer-website": "انقل الموقع",
   "label.true": "حقيقي",
   "label.type": "النوع",
   "label.unique": "فريد",
@@ -194,13 +195,13 @@
   "label.websites": "المواقع",
   "label.window": "النافذة",
   "label.yesterday": "الأمس",
-  "message.action-confirmation": "Type {confirmation} in the box below to confirm.",
+  "message.action-confirmation": "اكتب {confirmation} في المربع أدناه للتأكيد.",
   "message.active-users": "{x} حاليا {x, plural, one {زائر واحد} other {زوار}}",
   "message.confirm-delete": "هل أنت متأكد من حذف {target}?",
   "message.confirm-leave": "هل أنت متأكد من مغادرة {target}?",
-  "message.confirm-remove": "Are you sure you want to remove {target}?",
+  "message.confirm-remove": "هل انت متأكد من حذف {target}?",
   "message.confirm-reset": "هل أنت متأكد من اعادة تعيين الإحصائيات لـ {target}؟",
-  "message.delete-team-warning": "Deleting a team will also delete all team websites.",
+  "message.delete-team-warning": "حذف فريق سيؤدي إلى حذف جميع مواقع الفريق",
   "message.delete-website-warning": "سيتم حذف كافة بيانات الموقع.",
   "message.error": "حدث خطأ ما.",
   "message.event-log": "{event} في {url}",
@@ -226,12 +227,12 @@
   "message.team-not-found": "لم يتم العثور على الفريق",
   "message.team-websites-info": "يمكن مشاهدة الموقع من اي عضو في الفريق.",
   "message.tracking-code": "كود التتبع",
-  "message.transfer-team-website-to-user": "Transfer this website to your account?",
-  "message.transfer-user-website-to-team": "Select the team to transfer this website to.",
-  "message.transfer-website": "Transfer website ownership to your account or another team.",
-  "message.triggered-event": "Triggered event",
+  "message.transfer-team-website-to-user": "نقل هذا الموقع إلى حسابك؟",
+  "message.transfer-user-website-to-team": "اختر الفريق الذي تريد نقل الموقع إليه.",
+  "message.transfer-website": "نقل ملكية الموقع لحسابك أو فريق أخر.",
+  "message.triggered-event": "أُطلق الحدث",
   "message.user-deleted": "تم حذف المستخدم.",
-  "message.viewed-page": "Viewed page",
+  "message.viewed-page": "شوهدت الصفحة",
   "message.visitor-log": "زائر من {country} يستخدم {browser} على {os} {device}",
-  "message.visitors-dropped-off": "Visitors droppped off"
+  "message.visitors-dropped-off": "أنخفض عدد الزوار"
 }