update 6 files

src/views/Product/AddToCart/index.js

@@ -53,8 +53,22 @@ function AddToCart(props) {
   return (
     <>
       {window.innerWidth > 1000 ? (
-        <section className="product-addtocart d-flex flex-column">
-          <div className="product-addtocart__box d-flex flex-column">
+        <section
+          className={`product-addtocart d-flex flex-column ${
+            window.lang === "en" ? "align-items-end" : ""
+          }`}
+          style={{
+            width: window.lang === "en" ? "100%" : "",
+          }}
+        >
+          <div
+            className={`product-addtocart__box d-flex flex-column ${
+              window.lang === "en" ? "align-items-end" : ""
+            }`}
+            style={{
+              width: window.lang === "en" ? "100%" : "",
+            }}
+          >
             <div className="product-addtocart__box--price d-flex">
               <div
                 style={{ fontSize: fontSize.desktop.div, width: "100%" }}
@@ -86,7 +100,7 @@ function AddToCart(props) {
               // href={file(sampleFileId)}
               // target="_blank"
               // rel="noopener noreferrer"
-              style={{ fontSize: fontSize.desktop.button }}
+              style={{ fontSize: fontSize.desktop.button, width: "100%" }}
               className="product-addtocart__box--sampleButton"
             >
               {window.t("مشاهده نمونه کتاب")} <img src={document_red} alt="" />
@@ -103,14 +117,18 @@ function AddToCart(props) {
               //         window.location.pathname.length
               //       )}`
               // }`}
-              style={{ fontSize: fontSize.desktop.button, opacity: 0.3 }}
+              style={{
+                fontSize: fontSize.desktop.button,
+                opacity: 0.3,
+                width: "100%",
+              }}
               className="product-addtocart__box--digitalButton"
             >
               {page === "digital" ? "کتاب چاپی" : window.t("نسخه الکترونیک")}
               <img src={ebook_blue} alt="" />
             </Link>
             <button
-              style={{ fontSize: fontSize.desktop.button }}
+              style={{ fontSize: fontSize.desktop.button, width: "100%" }}
               className="product-addtocart__box--addButton"
               onClick={() => {
                 if (proxy.status())
@@ -137,8 +155,16 @@ function AddToCart(props) {
             >
               {window.t("افزودن به سبد خرید")} <img src={basket_white} alt="" />
             </button>
-            <div className="product-addtocart__box--accept d-flex">
-              <input type="checkbox" checked={true} />
+            <div
+              className={`product-addtocart__box--accept d-flex align-items-center ${
+                window.lang === "en" ? "flex-row-reverse" : ""
+              }`}
+            >
+              <input
+                type="checkbox"
+                checked={true}
+                style={{ marginRight: window.lang === "en" ? 5 : "" }}
+              />
               <Link
                 to="/page/privacy"
                 style={{ fontSize: "13px", margin: 0, padding: 0 }}
@@ -148,8 +174,16 @@ function AddToCart(props) {
                 )}
               </Link>
             </div>
-            <div className="product-addtocart__box--accept d-flex">
-              <input type="checkbox" checked={true} />
+            <div
+              className={`product-addtocart__box--accept d-flex align-items-center ${
+                window.lang === "en" ? "flex-row-reverse" : ""
+              }`}
+            >
+              <input
+                type="checkbox"
+                checked={true}
+                style={{ marginRight: window.lang === "en" ? 5 : "" }}
+              />
               <Link
                 to="/page/returning"
                 style={{ fontSize: "13px", margin: 0, padding: 0 }}
@@ -158,9 +192,14 @@ function AddToCart(props) {
               </Link>
             </div>
           </div>
-          <footer className="product-addtocart__footer d-flex justify-content-between mt-3">
+          <footer
+            className="product-addtocart__footer d-flex justify-content-between mt-3"
+            style={{
+              width: window.lang === "en" ? "100%" : "",
+            }}
+          >
             {supportItems.map((item, i) => (
-              <div className="d-flex flex-column align-items-center" key={i}>
+              <div className={`d-flex flex-column align-items-center`} key={i}>
                 <img src={item.icon} alt={item.name} />
                 <h2 style={{ fontSize: fontSize.desktop.h2 }}>{item.title}</h2>
               </div>

src/views/Product/BreadCrumb/index.js

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

src/views/Product/Comment/index.js

@@ -24,7 +24,7 @@ export default function Comment(props) {
   return (
     <>
       {window.innerWidth < 1000 ? (
-        <div className="mobile-comment d-flex flex-column">
+        <div className={`mobile-comment d-flex flex-column`}>
           <strong style={{ fontSize: fontSize.mobile.strong }}>
             {comment.username}
           </strong>

src/views/Product/Gallery/index.js

@@ -12,7 +12,11 @@ export default function Gallery(props) {
   return (
     <>
       {window.innerWidth > 1000 ? (
-        <section className="product-gallery d-flex flex-column">
+        <section
+          className={`product-gallery d-flex flex-column ${
+            window.lang === "en" ? "align-items-end" : ""
+          }`}
+        >
           <div className="product-gallery__top">
             {selectedMedia ? (
               <>
@@ -26,7 +30,11 @@ export default function Gallery(props) {
               </>
             ) : null}
           </div>
-          <div className="product-gallery__list d-flex">
+          <div
+            className={`product-gallery__list d-flex ${
+              window.lang === "en" ? "flex-row-reverse" : ""
+            }`}
+          >
             {props.gallery.length > 3 ? (
               <>
                 <Item
@@ -88,7 +96,10 @@ const Item = (props) => {
           className="product-gallery-item d-flex"
         >
           {item.type === "image" ? (
-            <img src={`https://dnvn.ir/api/v1/file/${item.id}`} alt={window.t("عکس")} />
+            <img
+              src={`https://dnvn.ir/api/v1/file/${item.id}`}
+              alt={window.t("عکس")}
+            />
           ) : null}
           {item.type === "film" ? (
             <Video fileId={`https://dnvn.ir/api/v1/file/${item.id}`} />

src/views/Product/Info/index.js

@@ -16,7 +16,11 @@ export default function Info(props) {
   return (
     <>
       {window.innerWidth > 1000 ? (
-        <section className="product-info d-flex flex-column">
+        <section
+          className={`product-info d-flex flex-column ${
+            window.lang === "en" ? "align-items-end" : ""
+          }`}
+        >
           <h1 style={{ fontSize: fontSize.desktop.h1 }}>{title}</h1>
           <span style={{ fontSize: fontSize.desktop.span }}>{subTitle}</span>
           <p style={{ fontSize: fontSize.desktop.p }}>{description}</p>

src/views/Product/index.js

@@ -130,7 +130,11 @@ class Product extends Component {
         {window.innerWidth > 1000 ? (
           info ? (
             <>
-              <div className="product d-flex flex-column">
+              <div
+                className={`product d-flex flex-column ${
+                  window.lang === "en" ? "align-items-end" : ""
+                }`}
+              >
                 <Navbar />
                 <Breadcrumbs
                   page={page}
@@ -140,7 +144,11 @@ class Product extends Component {
                       : info.product[0].name
                   }
                 />
-                <header className="product__header d-flex mt-4">
+                <header
+                  className={`product__header d-flex mt-4 ${
+                    window.lang === "en" ? "flex-row-reverse" : ""
+                  }`}
+                >
                   <Gallery gallery={info.files} />
                   <Info
                     subTitle={`پایه ${grades[info.gradeId]}`}
@@ -165,7 +173,11 @@ class Product extends Component {
                   />
                 </header>
                 <div className="product__comments d-flex flex-column">
-                  <div className="d-flex justify-content-between">
+                  <div
+                    className={`d-flex justify-content-between ${
+                      window.lang === "en" ? "flex-row-reverse" : ""
+                    }`}
+                  >
                     <h3 style={{ fontSize: fontSize.desktop.h1 }}>
                       {window.t("نظرات خریداران")}
                     </h3>