From ce2b3b10da480b23b307ba22173562c1172bde12 Mon Sep 17 00:00:00 2001
From: ankitaniket <ankitaniket3@gmail.com>
Date: Tue, 5 Mar 2024 18:54:32 +0530
Subject: [PATCH 1/6] Issue: Update QuotesPage.tsx Quote.tsx
 QuotesNavigator.tsx

---
 .../[[...locale]]/QuotesPage.tsx              |  2 +-
 src/components/Quotes/Quote.tsx               |  2 +-
 src/components/Quotes/QuotesNavigator.tsx     | 32 +++++++++++++++++--
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx b/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx
index c4461e0..44a7656 100644
--- a/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx
+++ b/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx
@@ -18,7 +18,7 @@ export default function QuotesPage(props: LocaleAndTranslations) {
   return (
     <div className="mb-16">
       <QuotesBanner translate={translate} />
-      <div className="relative z-10 m-auto h-96 p-0 md:w-[90%] lg:w-[73%] xl:w-[66%]">
+      <div className="relative z-10 m-auto">
         <QuotesNavigator
           quoteCount={quotes.length}
           quoteIndex={quoteIndex}
diff --git a/src/components/Quotes/Quote.tsx b/src/components/Quotes/Quote.tsx
index 6adba64..f939463 100644
--- a/src/components/Quotes/Quote.tsx
+++ b/src/components/Quotes/Quote.tsx
@@ -17,7 +17,7 @@ export default function Quote({ quoteNumber, quote, translate }: Props) {
         <SvgChapterBackground className="relative inset-x-0 bottom-0 m-auto w-full rounded-full text-gray-300 text-opacity-25 dark:text-black dark:text-opacity-25 lg:top-12 lg:w-min" />
       </div>
 
-      <div className="xs:py-24 relative mx-auto max-w-5xl px-4 text-center font-inter sm:px-6 sm:py-28">
+      <div className="xs:py-24 relative mx-auto max-w-5xl p-2  text-center font-inter sm:px-6 sm:py-8 ">
         <h2
           className={classNames(
             "font-medium uppercase text-my-orange",
diff --git a/src/components/Quotes/QuotesNavigator.tsx b/src/components/Quotes/QuotesNavigator.tsx
index 37170f8..2f09cab 100644
--- a/src/components/Quotes/QuotesNavigator.tsx
+++ b/src/components/Quotes/QuotesNavigator.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { Dispatch, SetStateAction } from "react";
 
 import { SvgChevronLeft, SvgChevronRight } from "../svgs";
@@ -17,6 +18,8 @@ export default function QuotesNavigator({
   const nextQuote = quoteNumber + 1;
   const previousQuote = quoteNumber - 1;
 
+  const [isScrolling, setIsScrolling] = useState(false);
+
   const next = () => {
     quoteIndex < quoteCount - 1 && setQuote(quoteIndex + 1);
   };
@@ -25,12 +28,35 @@ export default function QuotesNavigator({
     quoteIndex > 0 && setQuote(quoteIndex - 1);
   };
 
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout;
+
+    const handleScroll = () => {
+      setIsScrolling(true);
+      clearTimeout(timeoutId);
+
+      // Set a timeout of 3 seconds to reset isScrolling after 3 seconds of no scrolling
+      timeoutId = setTimeout(() => {
+        setIsScrolling(false);
+      }, 1500);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      clearTimeout(timeoutId);
+    };
+  }, []);
+
   return (
     <>
       {previousQuote >= 1 && (
         <button
           onClick={previous}
-          className="absolute left-1 top-1/2 z-[60] flex h-10 w-10 items-center justify-center rounded-full border bg-white hover:cursor-pointer  hover:brightness-90 dark:border-gray-600 dark:bg-dark-100 dark:hover:bg-dark-bg md:top-1/2"
+          className={`fixed left-3 top-3/4 z-[60] flex h-10 w-10 items-center justify-center rounded-full border hover:cursor-pointer hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg lg:left-40 ${
+            isScrolling ? "bg-white dark:bg-dark-100" : ""
+          }`}
         >
           <SvgChevronLeft className="dark:text-gray-50" />
         </button>
@@ -38,7 +64,9 @@ export default function QuotesNavigator({
       {nextQuote <= quoteCount && (
         <button
           onClick={next}
-          className="absolute right-1 top-1/2 z-[60] flex h-10 w-10 items-center justify-center rounded-full border bg-white hover:cursor-pointer  hover:brightness-90 dark:border-gray-600 dark:bg-dark-100 dark:hover:bg-dark-bg md:top-1/2"
+          className={`fixed right-3 top-3/4 z-[60] flex h-10 w-10 items-center justify-center rounded-full border hover:cursor-pointer  hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg lg:right-40
+            ${ isScrolling ? "bg-white dark:bg-dark-100" : ""}
+          `}
         >
           <SvgChevronRight className="dark:text-gray-50" />
         </button>

From f6b00cb11f76064103652ad54d2ec875400afc64 Mon Sep 17 00:00:00 2001
From: ankitaniket <ankitaniket3@gmail.com>
Date: Tue, 5 Mar 2024 21:56:45 +0530
Subject: [PATCH 2/6] chore: Update setTimeout to 3000

---
 src/components/Quotes/QuotesNavigator.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Quotes/QuotesNavigator.tsx b/src/components/Quotes/QuotesNavigator.tsx
index 2f09cab..5635fbe 100644
--- a/src/components/Quotes/QuotesNavigator.tsx
+++ b/src/components/Quotes/QuotesNavigator.tsx
@@ -34,11 +34,9 @@ export default function QuotesNavigator({
     const handleScroll = () => {
       setIsScrolling(true);
       clearTimeout(timeoutId);
-
-      // Set a timeout of 3 seconds to reset isScrolling after 3 seconds of no scrolling
       timeoutId = setTimeout(() => {
         setIsScrolling(false);
-      }, 1500);
+      }, 3000);
     };
 
     window.addEventListener("scroll", handleScroll);

From 1944577672d3b4343ee11b31a5df0962eada710e Mon Sep 17 00:00:00 2001
From: ankitaniket <ankitaniket3@gmail.com>
Date: Tue, 26 Mar 2024 00:24:07 +0530
Subject: [PATCH 3/6] Chore: Fixed UI issues and improved alignment.

---
 src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx | 4 ++--
 src/components/Quotes/QuotesNavigator.tsx                 | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx b/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx
index 44a7656..532a197 100644
--- a/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx
+++ b/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx
@@ -16,9 +16,9 @@ export default function QuotesPage(props: LocaleAndTranslations) {
   const [quoteIndex, setQuoteIndex] = useState(0);
 
   return (
-    <div className="mb-16">
+    <div className="flex min-h-[800px] flex-col justify-center">
       <QuotesBanner translate={translate} />
-      <div className="relative z-10 m-auto">
+      <div className="relative z-10 m-auto w-full">
         <QuotesNavigator
           quoteCount={quotes.length}
           quoteIndex={quoteIndex}
diff --git a/src/components/Quotes/QuotesNavigator.tsx b/src/components/Quotes/QuotesNavigator.tsx
index 5635fbe..4b1bf58 100644
--- a/src/components/Quotes/QuotesNavigator.tsx
+++ b/src/components/Quotes/QuotesNavigator.tsx
@@ -52,7 +52,7 @@ export default function QuotesNavigator({
       {previousQuote >= 1 && (
         <button
           onClick={previous}
-          className={`fixed left-3 top-3/4 z-[60] flex h-10 w-10 items-center justify-center rounded-full border hover:cursor-pointer hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg lg:left-40 ${
+          className={`left-3 top-3/4 z-[60] flex h-10 w-10 items-center justify-center rounded-full border hover:cursor-pointer hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg absolute lg:left-40 ${
             isScrolling ? "bg-white dark:bg-dark-100" : ""
           }`}
         >
@@ -62,8 +62,8 @@ export default function QuotesNavigator({
       {nextQuote <= quoteCount && (
         <button
           onClick={next}
-          className={`fixed right-3 top-3/4 z-[60] flex h-10 w-10 items-center justify-center rounded-full border hover:cursor-pointer  hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg lg:right-40
-            ${ isScrolling ? "bg-white dark:bg-dark-100" : ""}
+          className={`right-3 top-3/4 z-[60] flex h-10 w-10 items-center justify-center rounded-full border hover:cursor-pointer  hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg absolute lg:right-40
+            ${isScrolling ? "bg-white dark:bg-dark-100" : ""}
           `}
         >
           <SvgChevronRight className="dark:text-gray-50" />

From 718a9c3c4cf55575541356b04ebd4547e32efa12 Mon Sep 17 00:00:00 2001
From: ankitaniket <ankitaniket3@gmail.com>
Date: Tue, 26 Mar 2024 13:05:01 +0530
Subject: [PATCH 4/6] chore: Fix arrow movement

---
 src/components/Quotes/QuotesNavigator.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Quotes/QuotesNavigator.tsx b/src/components/Quotes/QuotesNavigator.tsx
index 4b1bf58..77868cf 100644
--- a/src/components/Quotes/QuotesNavigator.tsx
+++ b/src/components/Quotes/QuotesNavigator.tsx
@@ -52,7 +52,7 @@ export default function QuotesNavigator({
       {previousQuote >= 1 && (
         <button
           onClick={previous}
-          className={`left-3 top-3/4 z-[60] flex h-10 w-10 items-center justify-center rounded-full border hover:cursor-pointer hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg absolute lg:left-40 ${
+          className={`absolute left-3 top-1/2 z-[60] flex h-10 w-10 items-center justify-center rounded-full border hover:cursor-pointer hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg lg:left-40 ${
             isScrolling ? "bg-white dark:bg-dark-100" : ""
           }`}
         >
@@ -62,7 +62,7 @@ export default function QuotesNavigator({
       {nextQuote <= quoteCount && (
         <button
           onClick={next}
-          className={`right-3 top-3/4 z-[60] flex h-10 w-10 items-center justify-center rounded-full border hover:cursor-pointer  hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg absolute lg:right-40
+          className={`absolute right-3 top-1/2 z-[60] flex h-10 w-10 items-center justify-center rounded-full border  hover:cursor-pointer hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg lg:right-40
             ${isScrolling ? "bg-white dark:bg-dark-100" : ""}
           `}
         >

From 3e9be2f8b104e99e02b69e6361444908e2427846 Mon Sep 17 00:00:00 2001
From: ankitaniket <ankitaniket3@gmail.com>
Date: Thu, 28 Mar 2024 15:25:02 +0530
Subject: [PATCH 5/6] Fix: Overlapping buttons in mobile view

---
 src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx | 2 +-
 src/components/Quotes/QuotesNavigator.tsx                 | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx b/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx
index 532a197..babde7e 100644
--- a/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx
+++ b/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx
@@ -16,7 +16,7 @@ export default function QuotesPage(props: LocaleAndTranslations) {
   const [quoteIndex, setQuoteIndex] = useState(0);
 
   return (
-    <div className="flex min-h-[800px] flex-col justify-center">
+    <div className="flex flex-col justify-center md:min-h-[800px]">
       <QuotesBanner translate={translate} />
       <div className="relative z-10 m-auto w-full">
         <QuotesNavigator
diff --git a/src/components/Quotes/QuotesNavigator.tsx b/src/components/Quotes/QuotesNavigator.tsx
index 77868cf..1e3984f 100644
--- a/src/components/Quotes/QuotesNavigator.tsx
+++ b/src/components/Quotes/QuotesNavigator.tsx
@@ -52,7 +52,7 @@ export default function QuotesNavigator({
       {previousQuote >= 1 && (
         <button
           onClick={previous}
-          className={`absolute left-3 top-1/2 z-[60] flex h-10 w-10 items-center justify-center rounded-full border hover:cursor-pointer hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg lg:left-40 ${
+          className={`absolute left-3 top-2 z-[60] flex h-10 w-10 items-center justify-center rounded-full border hover:cursor-pointer hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg md:top-1/2 lg:left-40 ${
             isScrolling ? "bg-white dark:bg-dark-100" : ""
           }`}
         >
@@ -62,7 +62,7 @@ export default function QuotesNavigator({
       {nextQuote <= quoteCount && (
         <button
           onClick={next}
-          className={`absolute right-3 top-1/2 z-[60] flex h-10 w-10 items-center justify-center rounded-full border  hover:cursor-pointer hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg lg:right-40
+          className={`absolute right-3 top-2 z-[60] flex h-10 w-10 items-center justify-center rounded-full border hover:cursor-pointer  hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg md:top-1/2 lg:right-40
             ${isScrolling ? "bg-white dark:bg-dark-100" : ""}
           `}
         >

From 7c0dd596f4b6e9b11186c719d47af38ad6ae4b1a Mon Sep 17 00:00:00 2001
From: ankitaniket <ankitaniket3@gmail.com>
Date: Thu, 28 Mar 2024 17:24:22 +0530
Subject: [PATCH 6/6] Fix: flicker issue in mobile view

---
 .../[[...locale]]/QuotesPage.tsx              |  2 +-
 src/components/Quotes/QuotesNavigator.tsx     | 26 +------------------
 2 files changed, 2 insertions(+), 26 deletions(-)

diff --git a/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx b/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx
index babde7e..6694298 100644
--- a/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx
+++ b/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx
@@ -16,7 +16,7 @@ export default function QuotesPage(props: LocaleAndTranslations) {
   const [quoteIndex, setQuoteIndex] = useState(0);
 
   return (
-    <div className="flex flex-col justify-center md:min-h-[800px]">
+    <div className="min-h-[900px] md:flex md:min-h-[800px] md:flex-col md:justify-center">
       <QuotesBanner translate={translate} />
       <div className="relative z-10 m-auto w-full">
         <QuotesNavigator
diff --git a/src/components/Quotes/QuotesNavigator.tsx b/src/components/Quotes/QuotesNavigator.tsx
index 1e3984f..607bb6e 100644
--- a/src/components/Quotes/QuotesNavigator.tsx
+++ b/src/components/Quotes/QuotesNavigator.tsx
@@ -18,8 +18,6 @@ export default function QuotesNavigator({
   const nextQuote = quoteNumber + 1;
   const previousQuote = quoteNumber - 1;
 
-  const [isScrolling, setIsScrolling] = useState(false);
-
   const next = () => {
     quoteIndex < quoteCount - 1 && setQuote(quoteIndex + 1);
   };
@@ -28,33 +26,12 @@ export default function QuotesNavigator({
     quoteIndex > 0 && setQuote(quoteIndex - 1);
   };
 
-  useEffect(() => {
-    let timeoutId: NodeJS.Timeout;
-
-    const handleScroll = () => {
-      setIsScrolling(true);
-      clearTimeout(timeoutId);
-      timeoutId = setTimeout(() => {
-        setIsScrolling(false);
-      }, 3000);
-    };
-
-    window.addEventListener("scroll", handleScroll);
-
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-      clearTimeout(timeoutId);
-    };
-  }, []);
-
   return (
     <>
       {previousQuote >= 1 && (
         <button
           onClick={previous}
-          className={`absolute left-3 top-2 z-[60] flex h-10 w-10 items-center justify-center rounded-full border hover:cursor-pointer hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg md:top-1/2 lg:left-40 ${
-            isScrolling ? "bg-white dark:bg-dark-100" : ""
-          }`}
+          className={`absolute left-3 top-2 z-[60] flex h-10 w-10 items-center justify-center rounded-full border hover:cursor-pointer hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg md:top-1/2 lg:left-40`}
         >
           <SvgChevronLeft className="dark:text-gray-50" />
         </button>
@@ -63,7 +40,6 @@ export default function QuotesNavigator({
         <button
           onClick={next}
           className={`absolute right-3 top-2 z-[60] flex h-10 w-10 items-center justify-center rounded-full border hover:cursor-pointer  hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg md:top-1/2 lg:right-40
-            ${isScrolling ? "bg-white dark:bg-dark-100" : ""}
           `}
         >
           <SvgChevronRight className="dark:text-gray-50" />