update 25 files

public/ar.js

@@ -146,12 +146,12 @@ const ar = {
   "شما در حال مطالعه": "شما در حال مطالعه",
   "سخنی با خوانندگان": "سخنی با خوانندگان",
   "تصویر بارگزاری شد": "تصویر بارگزاری شد",
-  "ثبت کد فعال سازی": "ثبت کد فعال سازی",
+  "ثبت کد فعال سازی": "سجل كود التفعيل",
   "مسدود سازی مخاطب": "مسدود سازی مخاطب",
   "لینک های کاربردی": "روابط التطبيق",
   "تاریخ فعال‌سازی:": "تاریخ فعال‌سازی:",
-  "پاسخ مدیریت سایت": "پاسخ مدیریت سایت",
+  "پاسخ مدیریت سایت": "استجابة إدارة الموقع",
-  "دسته بندی موضوعی": "دسته بندی موضوعی",
+  "دسته بندی موضوعی": "صف موضوعی",
   "کتاب‌های دانوین": "کتاب‌های دانوین",
   "جزئیات صورتحساب": "جزئیات صورتحساب",
   "ورود یا ثبت‌نام": "ورود یا ثبت‌نام",
@@ -341,4 +341,5 @@ const ar = {
   حذف: "حذف",
   فلش: "السهام",
   نام: "اسم",
+  "پرفروش ترین": "أفضل مبيعات",
 };

public/en.js

@@ -1,8 +1,8 @@
 const en = {
   "ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولید محتوایی جذاب بصورت کتاب با کمک پلتفرم دانوین، قصد تغییراتی بنیادین در نظام آموزش و پرورش کشور داریم. دانوین پلتفرمی شامل کتاب، محتوای الکترونیکی، رویه های آموزشی، پشتیبانی علمی و نرم افزار ارائه خدمات با رویکرد مخاطب محور است.":
-    "In Danwin, we intend to create fundamental changes in the country's education system with the aim of creating interactive and educational infrastructure with the production of attractive content as a book with the help of the Danovin platform. Danin Platform includes books, electronic content, educational procedures, scientific support and software providing services with an audience -based approach.",
+    "In Danovin, we intend to create fundamental changes in the country's education system with the aim of creating interactive and educational infrastructure with the production of attractive content as a book with the help of the Danovin platform. Danin Platform includes books, electronic content, educational procedures, scientific support and software providing services with an audience -based approach.",
   "ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولیدمحتوایی جذاب بصورت کتاب قصد داریم تغییراتی بنیادین در نظام آموزش و پرورش کشور ایجاد کنیم.":
-    "In Danwin, we intend to create fundamental changes in the country's education system with the aim of creating interactive and educational infrastructure with attractive book production.",
+    "In Danovin, we intend to create fundamental changes in the country's education system with the aim of creating interactive and educational infrastructure with attractive book production.",
   "برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده کنید و پس از انتخاب دپارتمان مد نظر پیام خود را ارسال کنید.":
     "Use the form below to connect with the amazing world of Danvin and send your message after selecting the department.",
   "ارتقای سطح کیفیت و جذابیت آموزش در مدارس بصورت سازگار با نظام رسمی و کنونی آ.پ در راستای نیل به اهداف سند تحول":
@@ -32,7 +32,7 @@ const en = {
   "برای خدمات هوشمند کتاب کد فعال سازی را اینجا وارد نمایید":
     "Enter activation code here for smart book services",
   "شرایط استفاده از دانوین و حریم خصوصی را مطالعه کرده ام":
-    "I have studied the terms of use of Danwin and Privacy",
+    "I have studied the terms of use of Danovin and Privacy",
   "برای استفاده از این بخش باید یک کتاب فعال خریداری کرده":
     "To use this section must have purchased an active book",
   "از اینکه با نظرات خود ما را در ارتقای کیفیت محصولاتمان":
@@ -42,7 +42,7 @@ const en = {
   "با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید":
     "Select one of the following two options according to the terms",
   "تمامی حقوق این وبسایت متعلق به دانوین می باشد. 1400":
-    "All rights of this website are owned by Danwin. 1400",
+    "All rights of this website are owned by Danovin. 1400",
   "پرداخت شما با خطا مواجه شد ، لطفا مجدد تلاش نمایید":
     "Your payment faced an error, please try again",
   "اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید":
@@ -90,7 +90,7 @@ const en = {
   "درخواست شما با موفقیت انجام شد.": "Your request was successfully made.",
   "دارای رویکرد آموزش سرگرم کننده": "Have a fun tutorial approach",
   "شرایط مرجوع کردن کالا در دانوین":
-    "Conditions to reference the goods in Danwin",
+    "Conditions to reference the goods in Danovin",
   "کتاب شما با موفقیت فعال گردید.": "Your book was successfully activated.",
   "ثبت درخواست با موفقیت انجام شد":
     "Registration of the application was successfully completed",
@@ -105,7 +105,7 @@ const en = {
   "سلام چطوری میتونم کمکتون کنم؟": "Hi how can I help you?",
   "محصولی با این مشخصات یافت نشد": "Product was not found with this profile",
   "کد به شماره شما ارسال گردید.": "The code was sent to your number.",
-  "ماموریت ما در  دانوین چیست ؟": "What is our mission in Danwin?",
+  "ماموریت ما در  دانوین چیست ؟": "What is our mission in Danovin?",
   "زمان باقیمانده تا انقضای کد:": "Remaining time to expire code:",
   "کد فعالسازی محتوای الکترونیک": "Electronic Content Activation Code",
   "این کتاب شامل چه مواردی است؟": "What is this book?",
@@ -129,7 +129,7 @@ const en = {
   "مالیات بر ارزش افزوده": "VAT",
   "نام ‌و ‌نام  خانوادگی": "first name and last name",
   "آتشفشانها و اقیانوسها": "Volcanoes and oceans",
-  "به دانوین خوش آمدید.": "Welcome to Danwin.",
+  "به دانوین خوش آمدید.": "Welcome to Danovin.",
   "ویدئو های منحصر بفرد": "Unique videos",
   "نام ‌و ‌نام خانوادگی": "first name and last name",
   "توضیحات محصول خالیست": "The product description is empty",
@@ -157,7 +157,7 @@ const en = {
   "تاریخ فعال‌سازی:": "Activation Date:",
   "پاسخ مدیریت سایت": "Site Management Answer",
   "دسته بندی موضوعی": "Subject Category",
-  "کتاب‌های دانوین": "Danvin Books",
+  "کتاب‌های دانوین": "Danovin Books",
   "جزئیات صورتحساب": "Billing details",
   "ورود یا ثبت‌نام": "Login or registration",
   "کتاب علوم چهارم": "Fourth Science Book",
@@ -172,7 +172,7 @@ const en = {
   "مبلغ سبد خرید": "Cart amount",
   "مشخصات تحصیلی": "School Profile",
   "دریافت افزونه": "Get the plugin",
-  "دانوین کجاست؟": "Where is Danuin?",
+  "دانوین کجاست؟": "Where is Danovin?",
   "سوالات متداول": "Frequently Asked Questions",
   "ویرایش مشخصات": "Edit Profile",
   "پیگری سفارشات": "Follow orders",
@@ -334,7 +334,7 @@ const en = {
   دختر: "Girl",
   معلم: "Teacher",
   مبلغ: "Amount",
-  پایه: "grade",
+  پایه: "the base",
   اول: "First",
   دوم: "Second",
   سوم: "Third",
@@ -344,4 +344,6 @@ const en = {
   عکس: "Picture",
   ثبت: "Record",
   نام: "name",
+  متن: "text",
+  "پرفروش ترین": "Most Sales",
 };

public/index.html

@@ -23,7 +23,8 @@
     window.ar = ar;
     window.en = en;
 
-    window.ratio = (lang == "en" || lang == "ar") ? (1 / 15000) : 1
+    const ratio = (lang == "en" || lang == "ar") ? (1 / 15000) : 1
+    window.tr = (price) => Math.round(ratio * price * 100) / 100
     function t(val) {
       const lang_ = window[lang];
       if (!lang_) return val;

src/App.css

@@ -7,6 +7,10 @@
   direction: ltr;
 }
 
+.left: {
+  text-align: left !important;
+}
+
 .rtl {
   direction: rtl;
 }
@@ -15,9 +19,11 @@
   height: 100vh;
   max-width: 100vw !important;
 }
+
 .MuiFormLabel-asterisk {
   color: red !important;
 }
+
 @font-face {
   font-family: numeralMedium;
   src: url(assets/IRANSans/Farsi_numerals/IRANSans\(FaNum\)_Medium.ttf);

src/views/AR/BreadCrumb/index.js

@@ -13,7 +13,10 @@ const fontSize = {
 
 export default function ActiveLastBreadcrumb(props) {
   return (
-    <Breadcrumbs aria-label="breadcrumb">
+    <Breadcrumbs
+      aria-label="breadcrumb"
+      className={window.lang === "en" ? "ltr" : ""}
+    >
       <Link
         style={{
           fontSize:

src/views/AR/index.js

@@ -71,7 +71,11 @@ class AR extends Component {
       <>
         {window.innerWidth > 1000 ? (
           <>
-            <div className="ar d-flex flex-column">
+            <div
+              className={
+                "ar d-flex flex-column " + window.lang == "en" ? "ltr" : ""
+              }
+            >
               <Navbar />
               <BreadCrumbs />
               <div className="ar__box d-flex flex-wrap">

src/views/About/index.js

@@ -71,7 +71,7 @@ export default class About extends Component {
         window.t(
           "بکارگیری بروز ترین تکنولوژی های تولید و مدیریت محتوای آموزشی-تربیتی (مانند واقعیت افزوده)"
         ),
-        window.t("دارای رویکرد آموزش سرگرم کننده "),
+        window.t("دارای رویکرد آموزش سرگرم کننده"),
         window.t("بستر تعاملی و اشتراک گذاری فیلم و محتوای آموزشی"),
         window.t("رویکرد معرفتی-ارزشی"),
         window.t("ویدئو های منحصر بفرد"),
@@ -85,10 +85,14 @@ export default class About extends Component {
       <>
         {window.innerWidth > 1000 ? (
           <>
-            <div className="about d-flex flex-column align-items-center">
+            <div className={"about d-flex flex-column align-items-center "}>
               <Navbar page={"about"} />
-              <div className="about__first d-flex">
+              <div
-                <div className="top align-self-start">
+                className={
+                  "about__first d-flex " + (window.lang == "en" ? "ltr" : "")
+                }
+              >
+                <div className={"top align-self-start"}>
                   <h1 style={{ fontSize: fontSize.desktop.h1 }}>
                     {first.title}
                   </h1>
@@ -106,7 +110,11 @@ export default class About extends Component {
                 className="linegr"
                 style={{ width: "100%", height: "4px" }}
               ></div>
-              <div className="about__fury d-flex">
+              <div
+                className={
+                  "about__fury d-flex " + (window.lang == "en" ? "ltr" : "")
+                }
+              >
                 <div className="about__fury--right d-flex flex-column justify-content-center">
                   <div className="right-top align-self-start">
                     <h1 style={{ fontSize: fontSize.desktop.h1 }}>
@@ -160,7 +168,12 @@ export default class About extends Component {
                   ))} */}
                 </div>
               </div>
-              <div className="about__advantages d-flex">
+              <div
+                className={
+                  "about__advantages d-flex " +
+                  (window.lang == "en" ? "ltr" : "")
+                }
+              >
                 <div className="about__advantages--right d-flex">
                   <img src={pic} alt="" />
                 </div>

src/views/Blog/BreadCrumb/index.js

@@ -15,7 +15,10 @@ export default function ActiveLastBreadcrumb(props) {
   const { name } = props;
   const isblog = window.location.pathname.includes("blog");
   return (
-    <Breadcrumbs aria-label="breadcrumb">
+    <Breadcrumbs
+      aria-label="breadcrumb"
+      className={window.lang === "en" ? "ltr" : ""}
+    >
       <Link
         style={{
           fontSize:

src/views/Blog/index.js

@@ -81,14 +81,31 @@ class Blog extends Component {
         ) : null}
         {window.innerWidth < 1000 ? (
           blog ? (
-            <div className="portrait-blog d-flex flex-column">
+            <div
+              className={
+                "portrait-blog d-flex flex-column " +
+                (window.lang == "en" ? "ltr" : "")
+              }
+              style={{ textAlign: window.lang == "en" ? "left" : "right" }}
+            >
               <Navbar />
               <div className="portrait-blog__header d-flex flex-column">
                 <BreadCrumb name={blog.title} />
                 <div className="portrait-blog__header--top d-flex">
-                  <h1>{blog.title}</h1>
+                  <h1
+                    style={{
+                      textAlign: window.lang == "en" ? "left" : "right",
+                    }}
+                  >
+                    {blog.title}
+                  </h1>
                 </div>
-                <div className="portrait-blog__header--bottom d-flex">
+                <div
+                  className={
+                    "portrait-blog__header--bottom d-flex  " +
+                    (window.lang == "en" ? "ltr" : "")
+                  }
+                >
                   <h2>{blog.subTitle}</h2>
                   <div>{blog.date}</div>
                 </div>
@@ -98,8 +115,16 @@ class Blog extends Component {
                   <Identifier data={blog} />
                 </div>
                 <p
-                  className="portrait-blog__body--text "
+                  className={
-                  style={{ padding: 10, maxWidth: "95% !important" }}
+                    "portrait-blog__body--text " +
+                    (window.lang == "en" ? "ltr left" : "")
+                  }
+                  style={{
+                    padding: 10,
+                    maxWidth: "95% !important",
+                    textAlign:
+                      window.lang == "en" ? "left !important" : "right",
+                  }}
                 >
                   <div dangerouslySetInnerHTML={{ __html: blog.text }}></div>
                 </p>

src/views/Blog/index.scss

@@ -5,7 +5,7 @@
   padding: 0px 10px;
   position: relative;
   &__header {
-    direction: rtl;
+    // direction: rtl;
     width: 100%;
     margin-top: 80px;
     &--top {
@@ -22,7 +22,7 @@
     }
     &--bottom {
       align-items: center;
-      direction: rtl;
+      // direction: rtl;
       width: 100%;
       justify-content: space-between;
       h2 {
@@ -55,7 +55,7 @@
     &--text {
       margin-top: 10px;
       width: 100%;
-      direction: rtl;
+      // direction: rtl;
       text-align: justify !important;
       // color: $dusk;
       color: #4e4e4e;
@@ -82,7 +82,7 @@
   min-height: calc(100vh - 315px);
 
   &__header {
-    direction: rtl;
+    // direction: rtl;
     width: 100%;
     margin-top: 100px;
     max-width: 800px;

src/views/Blogs/BreadCrumb/index.js

@@ -13,7 +13,11 @@ const fontSize = {
 
 export default function ActiveLastBreadcrumb() {
   return (
-    <Breadcrumbs aria-label="breadcrumb" style={{ marginBottom: 10 }}>
+    <Breadcrumbs
+      aria-label="breadcrumb"
+      style={{ marginBottom: 10 }}
+      className={window.lang === "en" ? "ltr" : ""}
+    >
       <Link
         to={"/"}
         style={{

src/views/Blogs/index.js

@@ -93,7 +93,14 @@ const Item = (props) => {
               <img src={music} alt={item.title} />
             ) : null}
           </div>
-          <div className="landscape-blogs-item__left d-flex flex-column">
+          <div
+            className={
+              "landscape-blogs-item__left d-flex flex-column " + window.lang ==
+              "en"
+                ? "ltr"
+                : ""
+            }
+          >
             <h1>{item.title}</h1>
             <span>{window.t("مطالعه کامل")}</span>
           </div>
@@ -102,7 +109,10 @@ const Item = (props) => {
       {window.innerWidth < 1000 ? (
         <Link
           to={"/blogs/" + item.id}
-          className="portrait-blogs-item d-flex flex-column"
+          className={
+            "portrait-blogs-item d-flex flex-column " +
+            (window.lang == "en" ? "ltr" : "")
+          }
         >
           {item.type === "image" ? (
             <img
@@ -112,7 +122,12 @@ const Item = (props) => {
           ) : null}
           {item.type === "video" ? <img src={video} alt={item.title} /> : null}
           {item.type === "audio" ? <img src={music} alt={item.title} /> : null}
-          <h1>{item.title}</h1>
+          <h1
+            className={window.lang == "en" ? "ltr" : ""}
+            style={{ textAlign: window.lang == "en" ? "left" : "right" }}
+          >
+            {item.title}
+          </h1>
           {/* <p>{item.text}</p> */}
           <span>{window.t("مطالعه کامل")}</span>
         </Link>

src/views/Blogs/index.scss

@@ -3,7 +3,7 @@
   padding: 90px 10px 10px;
   max-width: 1250px;
   margin: 0px auto;
-  direction: rtl;
+
   min-height: calc(100vh - 288px);
   &__header {
     width: 100%;

src/views/Cart/Table/index.js

@@ -333,7 +333,7 @@ const Item = (props) => {
                   } ${data.product?.book?.name} `}
                 </strong>
                 <p style={{ fontSize: fontSize?.desktop?.info.p }}>
-                  {`پایه ${grades[data.product?.book?.gradeId]}`}
+                  {window.t("پایه") + ` ${grades[data.product?.book?.gradeId]}`}
                 </p>
                 <span style={{ fontSize: fontSize.desktop.info.span }}>
                   {window.t("همراه با:")}

src/views/Checkout/Table/index.js

@@ -223,7 +223,7 @@ const Item = (props) => {
                 </span>
 
                 <p style={{ fontSize: fontSize.desktop.info.p }}>
-                  {`پایه ${grades[data.product.book.gradeId]}`}
+                  {window.t("پایه") + ` ${grades[data.product.book.gradeId]}`}
                 </p>
               </div>
             </div>

src/views/Faq/Collapse/index.js

@@ -65,8 +65,9 @@ class Collapse extends Component {
         </div>
         {message.active ? (
           <div
-            className="collapse__body"
+            className={"collapse__body " + (window.lang == "en" ? "ltr" : "")}
             style={{
+              direction: window.lang == "en" ? "ltr" : "rtl",
               borderColor: message.active ? "#7dc241" : "rgb(223, 223, 223)",
               borderTop: 0,
               fontSize:

src/views/Faq/index.js

@@ -90,13 +90,26 @@ class Faq extends Component {
         {window.innerWidth > 1000 ? (
           faqList && faqList.length > 0 ? (
             <>
-              <div className="faq d-flex flex-column align-items-center">
+              <div
+                className={
+                  "faq d-flex flex-column align-items-center " +
+                  (window.lang == "en" ? "ltr" : "")
+                }
+              >
                 <Navbar page={"faq"} />
                 <header className="faq__header d-flex flex-column align-items-center">
-                  <h1 style={{ fontSize: fontSize.desktop.h1 }}>
+                  <h1
+                    style={{ fontSize: fontSize.desktop.h1 }}
+                    className={window.lang == "en" ? "ltr" : ""}
+                  >
                     {window.t("سلام چطوری میتونم کمکتون کنم؟")}
                   </h1>
-                  <div className="faq__header--search d-flex align-items-center">
+                  <div
+                    className={
+                      "faq__header--search d-flex align-items-center " +
+                      (window.lang == "en" ? "ltr" : "")
+                    }
+                  >
                     <input
                       type="search"
                       placeholder={window.t("دنبال چه چیزی برات باشیم؟")}
@@ -110,7 +123,12 @@ class Faq extends Component {
                     </button>
                   </div>
                 </header>
-                <div className="faq__list d-flex flex-column">
+                <div
+                  className={
+                    "faq__list d-flex flex-column " +
+                    (window.lang == "en" ? "ltr" : "")
+                  }
+                >
                   {this.state.search === ""
                     ? faqList.map((item, i) => (
                         <Collapse

src/views/Home/Footer/index.js

@@ -13,26 +13,31 @@ export default class Footer extends Component {
         {window.innerWidth > 1000 ? (
           <footer
             className={`footer d-flex flex-column ${
-              window.lang === "en" ? "align-items-end" : ""
+              window.lang === "en" ? "ltr" : ""
             }`}
           >
             <div
               className={`footer-container d-flex ${
-                window.lang === "en" ? "flex-row-reverse" : ""
+                window.lang === "en" ? "ltr" : ""
               }`}
             >
               <div
                 className={`footer-container__content d-flex ${
-                  window.lang === "en" ? "flex-row-reverse" : ""
+                  window.lang === "en" ? "ltr" : ""
                 }`}
               >
                 <div
                   className={`footer-container__content--box first d-flex flex-column ${
-                    window.lang === "en" ? "align-items-start" : ""
+                    window.lang === "en" ? "ltr" : ""
                   }`}
                 >
                   <h1>{window.t("دانوین کجاست؟")}</h1>
-                  <p className="mt-2">
+                  <p
+                    className="mt-2"
+                    style={{
+                      textAlign: window.lang == "en" ? "left" : "right",
+                    }}
+                  >
                     {window.t(
                       "ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولیدمحتوایی جذاب بصورت کتاب قصد داریم تغییراتی بنیادین در نظام آموزش و پرورش کشور ایجاد کنیم."
                     )}
@@ -50,12 +55,20 @@ export default class Footer extends Component {
                     </p>
                   </div>
                   <div
-                    className="d-flex align-items-center mt-1"
+                    className={
+                      "d-flex align-items-center mt-1 " + window.lang == "en"
+                        ? "ltr"
+                        : ""
+                    }
                     style={{ width: "55%", justifyContent: "space-between" }}
                   >
                     <div
-                      className="d-flex align-items-center"
+                      className={
-                      style={{ fontName: "IRANSansNumeralLight" }}
+                        "d-flex align-items-center " + window.lang === "en"
+                          ? "ltr"
+                          : ""
+                      }
+                      style={{ fontFamily: "Arial !important" }}
                     >
                       <a
                         href="tel:58795"

src/views/Home/HomeSlider/Blog/index.js

@@ -31,7 +31,7 @@ export default class Simple extends Component {
         {window.innerWidth > 1000 ? (
           <article
             className={`slider-blog d-flex flex-column ${
-              window.lang === "en" ? "align-items-end" : ""
+              window.lang === "en" ? "ltr" : ""
             }`}
             style={{
               height: height,
@@ -67,18 +67,14 @@ export default class Simple extends Component {
               </h2>
               <div
                 className={`slider-blog__footer d-flex mt-3 ${
-                  window.lang === "en" ? "flex-row-reverse" : ""
+                  window.lang === "en" ? "ltr" : ""
                 }`}
               >
-                <div
+                <div className={`d-flex ${window.lang === "en" ? "ltr" : ""}`}>
-                  className={`d-flex ${
-                    window.lang === "en" ? "flex-row-reverse" : ""
-                  }`}
-                >
                   {/* <img src={} /> */}
                   <div
                     className={`d-flex flex-column ${
-                      window.lang === "en" ? "align-items-end" : ""
+                      window.lang === "en" ? "ltr" : ""
                     }`}
                   >
                     <span style={{ fontSize: fontSize.desktop.span }}>

src/views/Home/Navbar/Mobile/index.js

@@ -18,7 +18,11 @@ function BackButton({ children }) {
   let history = useHistory();
   return (
     <div type="button" onClick={() => history.goBack()}>
-      <img src={back} alt={window.t("بازگشت")} />
+      <img
+        src={back}
+        alt={window.t("بازگشت")}
+        style={{ transform: window.lang == "en" ? "rotate(180deg)" : "" }}
+      />
     </div>
   );
 }
@@ -87,14 +91,12 @@ export default function MobileNavbar(props) {
   if (!status)
     return (
       <nav
-        className={`mobile-navbar d-flex ${
+        className={`mobile-navbar d-flex ${window.lang === "en" ? "ltr" : ""}`}
-          window.lang === "en" ? "flex-row-reverse" : ""
-        }`}
         style={{ width: "100%" }}
       >
         <div
           className={`d-flex justify-content-between align-items-center ${
-            window.lang === "en" ? "flex-row-reverse" : ""
+            window.lang === "en" ? "ltr" : ""
           }`}
           style={{ width: "100%" }}
         >
@@ -110,7 +112,7 @@ export default function MobileNavbar(props) {
           </div>
           <div
             className={`d-flex align-items-center ${
-              window.lang === "en" ? "flex-row-reverse" : ""
+              window.lang === "en" ? "ltr" : ""
             }`}
           >
             <select
@@ -147,7 +149,7 @@ export default function MobileNavbar(props) {
         </div>
         <div
           className={`mobile-navbar__left d-flex ${
-            window.lang === "en" ? "flex-row-reverse" : ""
+            window.lang === "en" ? "ltr" : ""
           }`}
           style={{ marginLeft: 10 }}
         >
@@ -164,7 +166,9 @@ export default function MobileNavbar(props) {
       </nav>
     );
   return (
-    <nav className="mobile-navbar d-flex">
+    <nav
+      className={"mobile-navbar d-flex " + (window.lang === "en" ? "ltr" : "")}
+    >
       {/* <div
         className="mobile-navbar__logo"
         // style={{ transform: page !== "home" ? "translateX(-29px)" : "none" }}
@@ -183,7 +187,11 @@ export default function MobileNavbar(props) {
         </Link>
       </div>
 
-      <div className="mobile-navbar__left">
+      <div
+        className={
+          "mobile-navbar__left d-flex " + (window.lang == "en" ? "ltr" : "")
+        }
+      >
         <select
           className="language-select"
           onChange={(e) => {
@@ -204,35 +212,38 @@ export default function MobileNavbar(props) {
               {el.key}
             </option>
           ))}
-        </select>
+        </select>{" "}
-        {page === "home" || page === "download" ? (
+        <div className={window.lang == "en" ? "ltr" : ""}>
-          <Link to={"/products"}>
+          {" "}
-            <img src={search} alt={window.t("جستجو")} />
+          {page === "home" || page === "download" ? (
-          </Link>
+            <Link to={"/products"}>
-        ) : (
+              <img src={search} alt={window.t("جستجو")} />
-          <div className="d-flex align-items-center">
+            </Link>
-            {window.location.pathname !== "/products" &&
+          ) : (
-              window.location.pathname !== "/mybooks" &&
+            <div className="d-flex align-items-center">
-              window.location.pathname !== "/profile" && (
+              {window.location.pathname !== "/products" &&
-                <Link to={"/products"}>
+                window.location.pathname !== "/mybooks" &&
-                  <img src={search} alt={window.t("جستجو")} />
+                window.location.pathname !== "/profile" && (
-                </Link>
+                  <Link to={"/products"}>
-              )}
+                    <img src={search} alt={window.t("جستجو")} />
-            {window.location.pathname !== "/qr-scan" &&
+                  </Link>
-              window.location.pathname !== "/profile" && (
+                )}
-                <Link to={"/qr-scan"}>
+              {window.location.pathname !== "/qr-scan" &&
-                  <img src={qr} alt="QR" />
+                window.location.pathname !== "/profile" && (
-                </Link>
+                  <Link to={"/qr-scan"}>
-              )}
+                    <img src={qr} alt="QR" />
-            {window.location.pathname !== "/ar" &&
+                  </Link>
-              window.location.pathname !== "/profile" && (
+                )}
-                <Link to={"/ar"}>
+              {window.location.pathname !== "/ar" &&
-                  <img src={ar} alt="AR" />
+                window.location.pathname !== "/profile" && (
-                </Link>
+                  <Link to={"/ar"}>
-              )}
+                    <img src={ar} alt="AR" />
-            <BackButton />
+                  </Link>
-          </div>
+                )}
-        )}
+              <BackButton />
+            </div>
+          )}
+        </div>
       </div>
       <SwipeableDrawer
         anchor="right"

src/views/Home/SingleBlog/index.js

@@ -26,19 +26,17 @@ export default class SingleBlog extends Component {
     return (
       <div
         style={{ height: height }}
-        className={`single-blog d-flex ${
+        className={`single-blog d-flex ${window.lang === "en" ? "ltr" : ""}`}
-          window.lang === "en" ? "flex-row-reverse" : ""
-        }`}
       >
         <div
           className={`single-blog__right d-flex flex-column ${
-            window.lang === "en" ? "align-items-end" : ""
+            window.lang === "en" ? "align-items-start ltr" : ""
           } justify-content-center`}
         >
           <h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1>
           <p
             style={{ fontSize: fontSize.desktop.p }}
-            className={`${window.lang === "en" ? "text-start" : ""}`}
+            className={`${window.lang === "en" ? "ltr" : ""}`}
           >
             {data.text}
           </p>

src/views/Product/index.js

@@ -151,7 +151,7 @@ class Product extends Component {
                 >
                   <Gallery gallery={info.files} />
                   <Info
-                    subTitle={`پایه ${grades[info.gradeId]}`}
+                    subTitle={`${window.t("پایه")} ${grades[info.gradeId]}`}
                     title={`${info.name}  ${grades[info.gradeId]}`}
                     description={
                       info.description || window.t("توضیحات محصول خالیست")

src/views/Products/Product/index.js

@@ -56,7 +56,9 @@ function Product(props) {
               alt={window.t("عکس مجصول")}
             />
             <div className="mobile-products-product__info d-flex flex-column">
-              <h1>{`${product.name} پایه ${grades[product.gradeId]}`}</h1>
+              <h1>{`${product.name} ${window.t("پایه")} ${
+                grades[product.gradeId]
+              }`}</h1>
             </div>
           </Link>
 
@@ -145,7 +147,7 @@ function Product(props) {
             >
               <h2 style={{ fontSize: 12 }}>{window.t("نسخه چاپی")}</h2>
               <span style={{ fontSize: 12 }}>
-                {product.product[0].price} {window.t("تومان")}
+                {window.tr(product.product[0].price)} {window.t("تومان")}
               </span>
             </Link>
             <div

src/views/Products/index.js

@@ -171,5 +171,5 @@ export default connect(
 )(Products);
 
 Products.defaultProps = {
-  sortItems: ["پرفروش ترین", window.t("جدیدترین")],
+  sortItems: [window.t("پرفروش ترین"), window.t("جدیدترین")],
 };