From 15bc34d866de679e0bb7e857ee1c38d0271e174e Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Tue, 3 Aug 2021 11:02:03 +0200
Subject: [PATCH] feat: arabic localization.

---
 client/src/components/App.js                  |   2 +-
 client/src/components/Dashboard/Dashboard.js  |   6 +-
 .../src/components/Dashboard/PrivatePages.js  |   8 +-
 .../Dashboard/PrivatePagesProvider.js         |   4 +-
 .../components/Preferences/PreferencesPage.js |   2 +-
 client/src/components/Sidebar/SidebarMenu.js  | 114 +++++++++---------
 .../src/components/SidebarOverlay/index.tsx   |  10 +-
 client/src/config/sidebarMenu.js              |  18 +--
 client/src/containers/Items/ItemFormPage.js   |   5 +-
 client/src/containers/Items/components.js     |   2 -
 .../Purchases/Bills/BillForm/BillFormPage.js  |   3 +-
 .../EstimateForm/EstimateFormPage.js          |   3 +-
 .../Invoices/InvoiceForm/InvoiceFormPage.js   |   3 +-
 .../PaymentReceiveFormPage.js                 |   5 +-
 .../Receipts/ReceiptForm/ReceiptFormPage.js   |   3 +-
 client/src/lang/ar-ly/index.json              |  75 +++++++++++-
 client/src/lang/en/index.json                 |   3 +-
 client/src/routes/dashboard.js                |   1 +
 client/src/style/App.scss                     |   7 ++
 19 files changed, 185 insertions(+), 89 deletions(-)

diff --git a/client/src/components/App.js b/client/src/components/App.js
index f851f4234..aa79941ae 100644
--- a/client/src/components/App.js
+++ b/client/src/components/App.js
@@ -28,7 +28,7 @@ const queryConfig = {
 function GlobalFetchQuery({
   children
 }) {
-  window.localStorage.setItem('lang', 'en');
+  window.localStorage.setItem('lang', 'ar-ly');
   return children
 }
 
diff --git a/client/src/components/Dashboard/Dashboard.js b/client/src/components/Dashboard/Dashboard.js
index a78a6f322..879fb77e3 100644
--- a/client/src/components/Dashboard/Dashboard.js
+++ b/client/src/components/Dashboard/Dashboard.js
@@ -17,8 +17,6 @@ import DrawersContainer from 'components/DrawersContainer';
  * Dashboard page.
  */
 export default function Dashboard() {
-  const dashboardContentRef = React.createRef();
-
   return (
     <DashboardProvider>
       <Switch>
@@ -31,8 +29,8 @@ export default function Dashboard() {
 
         <Route path="/">
           <DashboardSplitPane>
-            <Sidebar dashboardContentRef={dashboardContentRef} />
-            <DashboardContent ref={dashboardContentRef} />
+            <Sidebar />
+            <DashboardContent />
           </DashboardSplitPane>
         </Route>
       </Switch>
diff --git a/client/src/components/Dashboard/PrivatePages.js b/client/src/components/Dashboard/PrivatePages.js
index f49b356b7..0d0b5d06c 100644
--- a/client/src/components/Dashboard/PrivatePages.js
+++ b/client/src/components/Dashboard/PrivatePages.js
@@ -17,16 +17,16 @@ export default function DashboardPrivatePages() {
   return (
     <PrivatePagesProvider>
       <Switch>
-        {/* <Route path={'/setup'}>
+        <Route path={'/setup'}>
           <EnsureOrganizationIsNotReady>
             <SetupWizardPage />
           </EnsureOrganizationIsNotReady>
-        </Route> */}
+        </Route>
 
         <Route path='/'>
-          {/* <EnsureOrganizationIsReady> */}
+          <EnsureOrganizationIsReady>
             <Dashboard />
-          {/* </EnsureOrganizationIsReady> */}
+          </EnsureOrganizationIsReady>
         </Route>
       </Switch>
     </PrivatePagesProvider>
diff --git a/client/src/components/Dashboard/PrivatePagesProvider.js b/client/src/components/Dashboard/PrivatePagesProvider.js
index 1e67ce2bc..34db3a813 100644
--- a/client/src/components/Dashboard/PrivatePagesProvider.js
+++ b/client/src/components/Dashboard/PrivatePagesProvider.js
@@ -7,10 +7,10 @@ import { useCurrentOrganization } from '../../hooks/query/organization';
  */
 export function PrivatePagesProvider({ children }) {
   // Fetches the current user's organization.
-  // const { isLoading } = useCurrentOrganization();
+  const { isLoading } = useCurrentOrganization();
 
   return (
-    <DashboardLoadingIndicator isLoading={false}>
+    <DashboardLoadingIndicator isLoading={isLoading}>
       {children}
     </DashboardLoadingIndicator>
   )
diff --git a/client/src/components/Preferences/PreferencesPage.js b/client/src/components/Preferences/PreferencesPage.js
index 599794233..a0e23dc97 100644
--- a/client/src/components/Preferences/PreferencesPage.js
+++ b/client/src/components/Preferences/PreferencesPage.js
@@ -16,7 +16,7 @@ import 'style/pages/Preferences/Page.scss';
 export default function PreferencesPage() {
   return (
     <ErrorBoundary FallbackComponent={DashboardErrorBoundary}>
-      <div className={classNames(
+      <div id={'dashboard'} className={classNames(
         CLASSES.DASHBOARD_CONTENT,
         CLASSES.DASHBOARD_CONTENT_PREFERENCES,
       )}>
diff --git a/client/src/components/Sidebar/SidebarMenu.js b/client/src/components/Sidebar/SidebarMenu.js
index 62164f715..02535cc50 100644
--- a/client/src/components/Sidebar/SidebarMenu.js
+++ b/client/src/components/Sidebar/SidebarMenu.js
@@ -1,7 +1,8 @@
-import React, { useMemo } from 'react';
-import { Menu, MenuDivider, Button } from '@blueprintjs/core';
+import React from 'react';
+import { Menu, MenuDivider } from '@blueprintjs/core';
 import { useHistory, useLocation } from 'react-router-dom';
 import sidebarMenuList from 'config/sidebarMenu';
+import { Choose } from 'components';
 import Icon from 'components/Icon';
 import MenuItem from 'components/MenuItem';
 import { MenuItemLabel } from 'components';
@@ -11,6 +12,16 @@ import SidebarOverlay from 'components/SidebarOverlay';
 const DEFAULT_ITEM = {
   text: '',
   href: '',
+};
+
+function matchPath(pathname, path, matchExact) {
+  return matchExact ? pathname === path : pathname.indexOf(path) !== -1;
+}
+
+function SidebarMenuItemSpace({ space }) {
+  return (
+    <div class="bp3-menu-spacer" style={{ height: `${space}px` }} />
+  )
 }
 
 export default function SidebarMenu() {
@@ -24,64 +35,60 @@ export default function SidebarMenu() {
     return list.map((item, index) => {
       const hasChildren = Array.isArray(item.children);
 
-      const matchPath = (pathname, path) => {
-        return item.matchExact
-          ? pathname === path
-          : pathname.indexOf(path) !== -1;
-      };
-      const isActive = (item.children
-        ? item.children.some((c) => matchPath(location.pathname, c.href))
-        : item.href && matchPath(location.pathname, item.href)) || currentItem ===item;
+      const isActive =
+        (item.children
+          ? item.children.some((c) =>
+              matchPath(location.pathname, c.href, item.matchExact),
+            )
+          : item.href &&
+            matchPath(location.pathname, item.href, item.matchExact)) ||
+        currentItem === item;
 
       const handleItemClick = () => {
         if (item.href) {
           history.push(item.href);
         }
-        setIsOpen(true);
-        setCurrentItem(item);
+        if (item.children && item.children.length > 0) {
+          setIsOpen(true);
+          setCurrentItem(item);
+        } else {
+          setIsOpen(false);
+        }
       };
 
-      const maybeRenderLabel = (item) =>
-        item.newTabHref ? (
-          <Button
-            className="menu-item__add-btn"
-            icon={<Icon icon={'plus'} iconSize={16} />}
-            onClick={(event) => {
-              history.push(item.newTabHref);
-              event.stopPropagation();
-            }}
-          />
-        ) : null;
+      return (
+        <Choose>
+          <Choose.When condition={item.spacer}>
+            <SidebarMenuItemSpace space={item.spacer} />
+          </Choose.When>
 
-      return item.spacer ? (
-        <div
-          class="bp3-menu-spacer"
-          style={{
-            height: `${item.spacer}px`,
-          }}
-        ></div>
-      ) : item.divider ? (
-        <MenuDivider key={index} title={item.title} />
-      ) : item.label ? (
-        <MenuItemLabel key={index} text={item.text} />
-      ) : (
-        <MenuItem
-          key={index}
-          active={isActive}
-          icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
-          text={item.text}
-          label={maybeRenderLabel(item)}
-          disabled={item.disabled}
-          dropdownType={item.dropdownType || 'collapse'}
-          caretIconSize={16}
-          onClick={handleItemClick}
-          callapseActive={!!isActive}
-          itemClassName={classNames({
-            'is-active': isActive,
-            'has-icon': !hasChildren && item.icon,
-          })}
-          hasSubmenu={hasChildren}
-        />
+          <Choose.When condition={item.divider}>
+            <MenuDivider key={index} title={item.title} />
+          </Choose.When>
+
+          <Choose.When condition={item.label}>
+            <MenuItemLabel key={index} text={item.text} />
+          </Choose.When>
+
+          <Choose.Otherwise>
+            <MenuItem
+              key={index}
+              active={isActive}
+              icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
+              text={item.text}
+              disabled={item.disabled}
+              dropdownType={item.dropdownType || 'collapse'}
+              caretIconSize={16}
+              onClick={handleItemClick}
+              callapseActive={!!isActive}
+              itemClassName={classNames({
+                'is-active': isActive,
+                'has-icon': !hasChildren && item.icon,
+              })}
+              hasSubmenu={hasChildren}
+            />
+          </Choose.Otherwise>
+        </Choose>
       );
     });
   };
@@ -89,12 +96,11 @@ export default function SidebarMenu() {
 
   const handleSidebarOverlayClose = () => {
     setIsOpen(false);
-  }
+  };
 
   return (
     <div>
       <Menu className="sidebar-menu">{items}</Menu>{' '}
-
       <SidebarOverlay
         isOpen={isOpen}
         label={currentItem?.text || ''}
diff --git a/client/src/components/SidebarOverlay/index.tsx b/client/src/components/SidebarOverlay/index.tsx
index 73efa51c0..b4e37dd62 100644
--- a/client/src/components/SidebarOverlay/index.tsx
+++ b/client/src/components/SidebarOverlay/index.tsx
@@ -70,7 +70,10 @@ export default function SidebarOverlay({
   const [isOpen, setIsOpen] = React.useState(controllerdIsOpen);
 
   React.useEffect(() => {
-    if (controllerdIsOpen && isOpen !== controllerdIsOpen) {
+    if (
+      typeof controllerdIsOpen !== 'undefined' &&
+      isOpen !== controllerdIsOpen
+    ) {
       setIsOpen(controllerdIsOpen);
     }
   }, [controllerdIsOpen, setIsOpen, isOpen]);
@@ -103,7 +106,10 @@ export default function SidebarOverlay({
   return (
     <Overlay
       isOpen={isOpen}
-      portalContainer={document.getElementById('dashboard') || document.body}
+      portalContainer={
+        (document.querySelector('.Pane.vertical.Pane2') as HTMLElement) ||
+        document.body
+      }
       onClose={handleOverlayClose}
       onOpening={handleOverlayOpen}
       transitionDuration={100}
diff --git a/client/src/config/sidebarMenu.js b/client/src/config/sidebarMenu.js
index a32fcff06..86aaaf652 100644
--- a/client/src/config/sidebarMenu.js
+++ b/client/src/config/sidebarMenu.js
@@ -28,7 +28,7 @@ export default [
         href: '/items/categories',
       },
       {
-        text: 'New tasks',
+        text: <T id={'New tasks'} />,
         label: true,
       },
       {
@@ -46,9 +46,9 @@ export default [
         text: <T id={'New item category'} />,
         href: '/items/categories/new',
       },
-      {
-        text: 'New inventory adjustment',
-      },
+      // {
+      //   text: <T id={'New inventory adjustment'} />,
+      // },
     ],
   },
   {
@@ -76,7 +76,7 @@ export default [
         newTabHref: '/receipts/new',
       },
       {
-        text: 'New tasks',
+        text: <T id={'New tasks'} />,
         label: true,
       },
       {
@@ -114,7 +114,7 @@ export default [
         newTabHref: '/payment-mades/new',
       },
       {
-        text: 'New tasks',
+        text: <T id={'New tasks'} />,
         label: true,
       },
       {
@@ -144,7 +144,7 @@ export default [
         newTabHref: '/vendors/new',
       },
       {
-        text: 'New tasks',
+        text: <T id={'New tasks'} />,
         label: true,
       },
       {
@@ -180,7 +180,7 @@ export default [
         href: '/exchange-rates',
       },
       {
-        text: 'New tasks',
+        text: <T id={'New tasks'} />,
         label: true,
       },
       {
@@ -204,7 +204,7 @@ export default [
         href: '/expenses',
       },
       {
-        text: 'New tasks',
+        text: <T id={'New tasks'} />,
         label: true,
       },
       {
diff --git a/client/src/containers/Items/ItemFormPage.js b/client/src/containers/Items/ItemFormPage.js
index 00d51a96e..5852b1bdd 100644
--- a/client/src/containers/Items/ItemFormPage.js
+++ b/client/src/containers/Items/ItemFormPage.js
@@ -10,9 +10,10 @@ import ItemForm from 'containers/Items/ItemForm';
  */
 export default function ItemFormPage() {
   const { id } = useParams();
- 
+  const idInteger = parseInt(id, 10);
+
   return (
-    <ItemFormProvider itemId={id}>
+    <ItemFormProvider itemId={idInteger}>
       <DashboardCard page>
         <ItemForm />
       </DashboardCard>
diff --git a/client/src/containers/Items/components.js b/client/src/containers/Items/components.js
index 14d5d897e..361f23342 100644
--- a/client/src/containers/Items/components.js
+++ b/client/src/containers/Items/components.js
@@ -146,8 +146,6 @@ export const ItemsActionsTableCell = (props) => {
  * Retrieve all items table columns.
  */
 export const useItemsTableColumns = () => {
-  
-
   return React.useMemo(
     () => [
       {
diff --git a/client/src/containers/Purchases/Bills/BillForm/BillFormPage.js b/client/src/containers/Purchases/Bills/BillForm/BillFormPage.js
index 92652f15f..f24552b4b 100644
--- a/client/src/containers/Purchases/Bills/BillForm/BillFormPage.js
+++ b/client/src/containers/Purchases/Bills/BillForm/BillFormPage.js
@@ -8,9 +8,10 @@ import 'style/pages/Bills/PageForm.scss';
 
 export default function BillFormPage() {
   const { id } = useParams();
+  const idInt = parseInt(id, 10);
 
   return (
-    <BillFormProvider billId={id}>
+    <BillFormProvider billId={idInt}>
       <BillForm />
     </BillFormProvider>
   );
diff --git a/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormPage.js b/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormPage.js
index 56d0c54f5..2ec46d9d1 100644
--- a/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormPage.js
+++ b/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormPage.js
@@ -11,9 +11,10 @@ import { EstimateFormProvider } from './EstimateFormProvider';
  */
 export default function EstimateFormPage() {
   const { id } = useParams();
+  const idInteger = parseInt(id, 10);
 
   return (
-    <EstimateFormProvider estimateId={id}>
+    <EstimateFormProvider estimateId={idInteger}>
       <EstimateForm />
     </EstimateFormProvider>
   );
diff --git a/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormPage.js b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormPage.js
index 68c5555be..3c142d4b6 100644
--- a/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormPage.js
+++ b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormPage.js
@@ -11,9 +11,10 @@ import { InvoiceFormProvider } from './InvoiceFormProvider';
  */
 export default function InvoiceFormPage() {
   const { id } = useParams();
+  const idAsInteger = parseInt(id, 10);
 
   return (
-    <InvoiceFormProvider invoiceId={id}>
+    <InvoiceFormProvider invoiceId={idAsInteger}>
       <InvoiceForm />
     </InvoiceFormProvider>
   );
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormPage.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormPage.js
index d7b64783e..8cac5a52b 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormPage.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormPage.js
@@ -9,10 +9,11 @@ import PaymentReceiveForm from './PaymentReceiveForm';
  */
 export default function PaymentReceiveFormPage() {
   const { id: paymentReceiveId } = useParams();
+  const paymentReceiveIdInt = parseInt(paymentReceiveId, 10);
 
   return (
-    <PaymentReceiveFormProvider paymentReceiveId={paymentReceiveId}>
-      <PaymentReceiveForm paymentReceiveId={paymentReceiveId} />
+    <PaymentReceiveFormProvider paymentReceiveId={paymentReceiveIdInt}>
+      <PaymentReceiveForm paymentReceiveId={paymentReceiveIdInt} />
     </PaymentReceiveFormProvider>
   );
 }
diff --git a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormPage.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormPage.js
index db81ee5c8..443bf1daf 100644
--- a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormPage.js
+++ b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormPage.js
@@ -11,9 +11,10 @@ import { ReceiptFormProvider } from './ReceiptFormProvider';
  */
 export default function ReceiptFormPage() {
   const { id } = useParams();
+  const idInt = parseInt(id, 10);
 
   return (
-    <ReceiptFormProvider receiptId={id}>
+    <ReceiptFormProvider receiptId={idInt}>
       <ReceiptFrom />
     </ReceiptFormProvider>
   );
diff --git a/client/src/lang/ar-ly/index.json b/client/src/lang/ar-ly/index.json
index 12d3a287f..223afc1a4 100644
--- a/client/src/lang/ar-ly/index.json
+++ b/client/src/lang/ar-ly/index.json
@@ -1120,5 +1120,78 @@
   "something_went_wrong": "هناك خطأ ما!",
   "please_refresh_the_page": "يرجى تحديث الصفحة",
   "waiting_to_redirect": "في انتظار إعادة التوجيه",
-  "refresh_the_page_if_redirect_not_worked": "قم بتحديث الصفحة إذا لم تنجح إعادة التوجيه."
+  "refresh_the_page_if_redirect_not_worked": "قم بتحديث الصفحة إذا لم تنجح إعادة التوجيه.",
+  "blog": "المدونة",
+  "support": "الدعم النفي",
+  "service_status": "حالة الخدمة",
+  "pricing": "الاسعار",
+  "reseller_partner": "Reseller Partner",
+  "docs": "الوتائق",
+  "Pleasse enter your voucher number that you received from reseller.": "Pleasse enter your voucher number that you received from reseller.",
+  "Sale and purchase invoices.": "فواتير البيع والشراء.",
+  "Customers/vendors accounts.": "حسابات العملاء / البائعين.",
+  "Expenses tracking.": "تتبع المصاريف",
+  "Manual journals.": "القيود اليدوية.",
+  "Financial reports.": "Financial reports.",
+  "All Capital Starter features.": "All Capital Starter features.",
+  "Multi-currency.": "Multi-currency.",
+  "Purchase and sell orders.": "Purchase and sell orders.",
+  "Inventory management.": "Inventory management.",
+  "Three users with your accountant.": "Three users with your accountant.",
+  "Advanced financial reports.": "Advanced financial reports.",
+  "All Capital Essential features.": "All Capital Essential features.",
+  "Track multi-branches and locations.": "Track multi-branches and locations.",
+  "Projects accounting and timesheets.": "Projects accounting and timesheets.",
+  "Accounting dimensions.": "Accounting dimensions.",
+  "For one user and accountant.": "For one user and accountant.",
+  "Monthly": "Monthly",
+  "Yearly": "Yearly",
+  "Plans & Payment": "Plans & Payment",
+  "Initializing": "Initializing",
+  "Getting started": "Getting started",
+  "Congratulations": "Congratulations",
+  "payment_has_been_done_successfully": "Payment has been done successfully.",
+  "manual_journal_number": "Manual journal {number}",
+  "conditions_and_terms": "Conditions and terms",
+  "allocate_landed_coast": "Allocate landed cost",
+  "transaction_date": "Transaction date",
+  "transaction_type": "Transaction type",
+  "transaction_id": "Transaction #",
+  "transaction_number": "Transaction number",
+  "transaction_line": "Transaction line",
+  "allocation_method": "Allocation method",
+  "valuation": "Valuation",
+  "select_transaction": "Select transaction account",
+  "details": "التفاصيل",
+  "located_landed_cost": "Located Landed Cost",
+  "delete_transaction": "مسح العملية",
+  "all_items": "كل الاصناف",
+  "Specific items": "اصناف محددة",
+  "Selected contacts": "جهات الاتصال المحددة",
+  "All contacts": "كل جهات الاتصال",
+  "Selected items ({count})": "الاصناف المحددة ({count})",
+  "All items": "كل الاصناف",
+  "No items": "No items",
+  "cannot_delete_bill_that_has_associated_landed_cost_transactions": "Cannot delete bill that has associated landed cost transactions.",
+  "couldn_t_delete_expense_transaction_has_associated_located_landed_cost_transaction": "Couldn't delete expense transaction has associated located landed cost transaction",
+  "the_landed_cost_has_been_created_successfully": "The landed cost has been created successfully",
+  "Select transaction": "Select transaction",
+  "Select transaction entry": "Select transaction entry",
+  "From transaction": "From transaction",
+  "Landed": "Landed",
+  "This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.": "This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.",
+  "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?": "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?",
+  "journal_entries":"القيود",
+  "contact":"جهة الاتصال",
+  "invoice_details":"تفاصيل الفاتورة",
+  "receipt_details":"تفاصيل الإيصال",
+  "payment_receive_details":"Payment receive details",
+  "payment_made_details":"Payment made details",
+  "New item category": "اضافة تصنيف صنف جديد",
+  "New service": "اضافة خدمة جديدة",
+  "New inventory item": "اضافة صنف مخزون جديد",
+  "New purchase invoice": "فاتورة شراء جديدة",
+  "Sales/Purchases": "المبيعات والمشتريات",
+  "Reports": "التقارير",
+  "New tasks": "مهام جديدة"
 }
\ No newline at end of file
diff --git a/client/src/lang/en/index.json b/client/src/lang/en/index.json
index 4b75692bd..8a97e806e 100644
--- a/client/src/lang/en/index.json
+++ b/client/src/lang/en/index.json
@@ -1178,5 +1178,6 @@
   "New inventory item": "New inventory item",
   "New purchase invoice": "New purchase invoice",
   "Sales/Purchases": "Sales/Purchases",
-  "Reports": "Reports"
+  "Reports": "Reports",
+  "New tasks": "New tasks"
 }
\ No newline at end of file
diff --git a/client/src/routes/dashboard.js b/client/src/routes/dashboard.js
index 02e37c0a2..aaf0d03ad 100644
--- a/client/src/routes/dashboard.js
+++ b/client/src/routes/dashboard.js
@@ -1,3 +1,4 @@
+
 import React, { lazy } from 'react';
 import intl from 'react-intl-universal';
 
diff --git a/client/src/style/App.scss b/client/src/style/App.scss
index dee79b591..7cb9529ce 100644
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -206,6 +206,7 @@ html[lang^="ar"] {
   height: 100%;
   width: 225px;
   outline: 0;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
 
   &__scroll-wrapper {
     height: 100%
@@ -276,6 +277,12 @@ html[lang^="ar"] {
     padding: 14px 20px 10px;
     letter-spacing: 1px;
     color: #707a85;
+
+    html[lang^="ar"] & {
+      font-size: 13px;
+      letter-spacing: 0;
+      font-weight: 500;
+    }
   }
 
   &__label + .sidebar-overlay__divider{