From b2d764aa152d8b7d5963765b2521f80848802e75 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Sun, 29 Sep 2024 17:28:30 +0330
Subject: [PATCH] rtl styles debugged

---
 src/app/_components/mobile-menu/page.tsx  | 4 ++--
 src/app/_components/testimonials/page.tsx | 2 +-
 src/app/layout.tsx                        | 7 +++++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/app/_components/mobile-menu/page.tsx b/src/app/_components/mobile-menu/page.tsx
index 0526b39..f489d64 100644
--- a/src/app/_components/mobile-menu/page.tsx
+++ b/src/app/_components/mobile-menu/page.tsx
@@ -6,11 +6,11 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
   return (
     <div className="flex">
       <div
-        className={`${clicked ? "fixed right-0" : "right-[-1000px] hidden"} top-0 z-30 flex h-full w-full bg-slate-950 opacity-20 lg:hidden`}
+        className={`${clicked ? "fixed end-0" : "end-[-1000px] hidden"} top-0 z-30 flex h-full w-full bg-slate-950 opacity-20 lg:hidden`}
         onClick={() => setClicked(false)}
       ></div>
       <div
-        className={`fixed left-0 top-0 z-40 flex h-full w-[250px] select-none flex-col items-start gap-10 bg-[#fd6f00] ${clicked ? "left-0" : "left-[-260px]"} mobile-menu lg:left-[-260px]`}
+        className={`fixed start-0 top-0 z-40 flex h-full w-[250px] select-none flex-col items-start gap-10 bg-[#fd6f00] ${clicked ? "start-0" : "start-[-260px]"} mobile-menu lg:start-[-260px]`}
       >
         <div className="z-50 flex w-full flex-wrap items-center justify-start bg-white px-3 py-6">
           <div className="flex w-[50px]">
diff --git a/src/app/_components/testimonials/page.tsx b/src/app/_components/testimonials/page.tsx
index 1674dcb..f18f816 100644
--- a/src/app/_components/testimonials/page.tsx
+++ b/src/app/_components/testimonials/page.tsx
@@ -99,7 +99,7 @@ export default function Testimonials() {
       >
         {testimonials.map((testimonial, index) => (
           <div
-            className={`testimonial absolute flex w-[80%] flex-wrap items-center justify-around gap-3 rounded-lg bg-[#F8F8F8] p-5 hover:cursor-grab md:w-[70%] ${currentIndex === index ? "left-[15%] z-20 scale-105 drop-shadow-lg sm:left-[15%] md:left-[25%]" : "left-0 z-10 scale-90 grayscale"} ${
+            className={`testimonial absolute flex w-[80%] flex-wrap items-center justify-around gap-3 rounded-lg bg-[#F8F8F8] p-5 hover:cursor-grab md:w-[70%] ${currentIndex === index ? "start-[15%] z-20 scale-105 drop-shadow-lg sm:start-[15%] md:start-[25%]" : "start-0 z-10 scale-90 grayscale"} ${
               currentIndex === index ? "" : "blur-[2px]"
             }`}
             key={index}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 04009d1..78914f1 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -26,10 +26,13 @@ export default function RootLayout({
         className={`${geistSans.variable} relative flex w-full flex-col items-center justify-between antialiased`}
       >
         <div className="scroll-watcher" id="top"></div>
-        <div className="absolute top-0 left-0 opacity-0" id="here-is-top"></div>
+        <div
+          className="absolute start-0 top-0 opacity-0"
+          id="here-is-top"
+        ></div>
         <a
           href="/#here-is-top"
-          className="scroll-to-top fixed bottom-10 right-5 flex h-[50px] w-[50px] items-center justify-center rounded-full border-2 bg-[#fd6f00] p-5 text-center text-[25px] font-[800] text-white hover:border-[#f3a66b] sm:bottom-[100px] sm:right-10"
+          className="scroll-to-top fixed bottom-10 end-5 flex h-[50px] w-[50px] items-center justify-center rounded-full border-2 bg-[#fd6f00] p-5 text-center text-[25px] font-[800] text-white hover:border-[#f3a66b] sm:bottom-[100px] sm:end-10"
           id="back-to-top"
         >
           ^