From 8e311247db9c6d51ab4b631891f2c3903861aa0e Mon Sep 17 00:00:00 2001
From: tarunmeena6846 <tarunmeena6846@gmail.com>
Date: Fri, 27 Sep 2024 17:00:35 +0530
Subject: [PATCH 1/5] BlogAppbar UI fixes

---
 apps/web/components/BlogAppbar.tsx | 2 +-
 packages/ui/src/shad/ui/switch.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/BlogAppbar.tsx b/apps/web/components/BlogAppbar.tsx
index defaa0d2..bee4b12d 100644
--- a/apps/web/components/BlogAppbar.tsx
+++ b/apps/web/components/BlogAppbar.tsx
@@ -93,7 +93,7 @@ export const BlogAppbar = ({
           transition={{ duration: 0.3 }}
           className={`${visible ? "translate-y-0" : "-translate-y-full"} px-6`}
         >
-          <Card className="border-primary/10 no-scrollbar max-h-[50vh] w-fit overflow-auto bg-black/10 pt-4 backdrop-blur-lg">
+          <Card className="border-primary/10 no-scrollbar max-h-[50vh] w-fit overflow-auto bg-white/95 dark:bg-black/95 pt-4 backdrop-blur-lg ">
             {track?.problems?.map((problem: { id: string; title: string }, index: number) => {
               const isDisabled = currentTrack === `${track.id}/${problem.id}`;
               return (
diff --git a/packages/ui/src/shad/ui/switch.tsx b/packages/ui/src/shad/ui/switch.tsx
index d7be702d..ac42f007 100644
--- a/packages/ui/src/shad/ui/switch.tsx
+++ b/packages/ui/src/shad/ui/switch.tsx
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-gray-300 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
       className
     )}
     {...props}

From 42187508308eed10c63ab6e3a733e77bfafc6cb4 Mon Sep 17 00:00:00 2001
From: tarunmeena6846 <tarunmeena6846@gmail.com>
Date: Fri, 27 Sep 2024 22:11:27 +0530
Subject: [PATCH 2/5] UI fixes for BlogAppbar

---
 apps/web/components/BlogAppbar.tsx | 8 ++++----
 apps/web/components/TrackTools.tsx | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/BlogAppbar.tsx b/apps/web/components/BlogAppbar.tsx
index bee4b12d..12451d35 100644
--- a/apps/web/components/BlogAppbar.tsx
+++ b/apps/web/components/BlogAppbar.tsx
@@ -93,7 +93,7 @@ export const BlogAppbar = ({
           transition={{ duration: 0.3 }}
           className={`${visible ? "translate-y-0" : "-translate-y-full"} px-6`}
         >
-          <Card className="border-primary/10 no-scrollbar max-h-[50vh] w-fit overflow-auto bg-white/95 dark:bg-black/95 pt-4 backdrop-blur-lg ">
+          <Card className="border-primary/10 no-scrollbar max-h-[50vh] w-fit overflow-auto bg-[#e5e5e5]/95 pt-4 backdrop-blur-lg dark:bg-black/95">
             {track?.problems?.map((problem: { id: string; title: string }, index: number) => {
               const isDisabled = currentTrack === `${track.id}/${problem.id}`;
               return (
@@ -175,7 +175,7 @@ export const BlogAppbar = ({
             {/* menu */}
             <div
               onClick={() => setIsOpen(!isOpen)}
-              className="text-primary border-primary/10 flex cursor-pointer items-center gap-4 rounded-lg border bg-black/10 p-3 backdrop-blur-lg"
+              className="text-primary border-primary/10 flex cursor-pointer items-center gap-4 rounded-lg border bg-[#e5e5e5]/95 dark:bg-black/95 p-3 backdrop-blur-lg"
             >
               {isOpen ? <X className="size-6" /> : <Menu className="size-6" />}
             </div>
@@ -187,7 +187,7 @@ export const BlogAppbar = ({
               className="flex justify-between gap-2"
             >
               <div
-                className={`border-primary/10 flex items-center gap-4 rounded-lg border bg-black/10 p-2 backdrop-blur-lg transition-all duration-500 ease-in-out`}
+                className={`border-primary/10 flex items-center gap-4 rounded-lg border bg-[#e5e5e5]/95 dark:bg-black/95 p-2 backdrop-blur-lg transition-all duration-500 ease-in-out`}
               >
                 <Link href={"/"} className="hidden cursor-pointer items-center gap-4 md:flex">
                   <Image
@@ -217,7 +217,7 @@ export const BlogAppbar = ({
             className="flex gap-2"
           >
             <div
-              className={`border-primary/10 flex items-center gap-2 rounded-lg border bg-black/10 p-2 backdrop-blur-lg transition-all duration-500 ease-in-out ${
+              className={`border-primary/10 flex items-center gap-2 rounded-lg border bg-[#e5e5e5]/95 p-2 backdrop-blur-lg transition-all duration-500 ease-in-out dark:bg-black/95 ${
                 isOpen ? `translate-y-0 opacity-100` : `-translate-y-32 opacity-0`
               }`}
             >
diff --git a/apps/web/components/TrackTools.tsx b/apps/web/components/TrackTools.tsx
index 078271bb..85e411cb 100644
--- a/apps/web/components/TrackTools.tsx
+++ b/apps/web/components/TrackTools.tsx
@@ -24,7 +24,7 @@ const TrackTools = ({
       transition={{ duration: 0.5, ease: "easeInOut", type: "spring", damping: 10 }}
       className="flex w-full items-center justify-between gap-2 p-6"
     >
-      <div className="border-primary/10 flex gap-2 rounded-lg border bg-black/10 p-1 backdrop-blur-lg">
+      <div className="border-primary/10 flex gap-2 rounded-lg border bg-[#e5e5e5]/95 dark:bg-black/95 p-1 backdrop-blur-lg">
         <Link href={"/"} className="hidden lg:block">
           <Button className="flex gap-2 bg-[#323232] font-semibold dark:bg-slate-50" size={"lg"}>
             Back to home

From 5de988152b4df25aa92ffda21895841023f9a817 Mon Sep 17 00:00:00 2001
From: tarunmeena6846 <tarunmeena6846@gmail.com>
Date: Sat, 28 Sep 2024 23:15:58 +0530
Subject: [PATCH 3/5] Home button added for smallar screens

---
 apps/web/components/PageToggle.tsx |  3 +--
 apps/web/components/TrackTools.tsx | 30 +++++++++++++++---------------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/apps/web/components/PageToggle.tsx b/apps/web/components/PageToggle.tsx
index 4167a9f3..a95b93da 100644
--- a/apps/web/components/PageToggle.tsx
+++ b/apps/web/components/PageToggle.tsx
@@ -27,10 +27,9 @@ export function PageToggle({
       <DropdownMenuTrigger asChild>
         <Button
           className={`flex gap-2 font-semibold ${isLegacyMode ? "" : "dark:bg-[#323232]"}`}
-          size={"lg"}
           variant={isLegacyMode ? "outline" : "secondary"}
         >
-          <span className={`hidden ${isAtHeader ? "lg" : "md"}:block`}>Jump To</span>
+          <span className={`hidden ${isAtHeader ? "lg" : "sm"}:block`}>Jump To</span>
           <ArrowUpRight className="size-4" />
         </Button>
       </DropdownMenuTrigger>
diff --git a/apps/web/components/TrackTools.tsx b/apps/web/components/TrackTools.tsx
index 85e411cb..53f25396 100644
--- a/apps/web/components/TrackTools.tsx
+++ b/apps/web/components/TrackTools.tsx
@@ -2,7 +2,7 @@ import { Track, Problem } from "@prisma/client";
 import { PageToggle } from "./PageToggle";
 import Link from "next/link";
 import { Button } from "@repo/ui";
-import { ArrowUp, ChevronLeft, ChevronRight } from "lucide-react";
+import { ArrowUp, ChevronLeft, ChevronRight,HomeIcon } from "lucide-react";
 import { motion } from "framer-motion";
 
 const TrackTools = ({
@@ -22,27 +22,27 @@ const TrackTools = ({
       initial={{ y: 20, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       transition={{ duration: 0.5, ease: "easeInOut", type: "spring", damping: 10 }}
-      className="flex w-full items-center justify-between gap-2 p-6"
-    >
+      className="flex w-full items-center justify-center sm:justify-between gap-2 py-6 sm:p-6"
+      >
       <div className="border-primary/10 flex gap-2 rounded-lg border bg-[#e5e5e5]/95 dark:bg-black/95 p-1 backdrop-blur-lg">
-        <Link href={"/"} className="hidden lg:block">
-          <Button className="flex gap-2 bg-[#323232] font-semibold dark:bg-slate-50" size={"lg"}>
-            Back to home
+        <Link href={"/"}>
+          <Button className="flex gap-2 bg-[#323232] font-semibold dark:bg-slate-50">
+            <span className="hidden sm:block">Back to home</span>
+            <HomeIcon className="size-4" />
           </Button>
         </Link>
         <PageToggle allProblems={track.problems} track={track} />
         <Link
           prefetch={true}
-          href={problemIndex !== 0 ? `/tracks/${track.id}/${track.problems[problemIndex - 1]!.id}` : ``}
+          href={problemIndex !== 0 ? `/tracks/${track.id}/${track.problems[problemIndex - 1]?.id}` : ``}
           style={{ cursor: problemIndex !== 0 ? "pointer" : "not-allowed" }}
         >
           <Button
             className="flex gap-2 bg-[#323232] font-semibold dark:bg-slate-50"
             disabled={problemIndex === 0}
-            size={"lg"}
           >
             <ChevronLeft className="size-4" />
-            <span className="hidden md:block">Prev</span>
+            <span className="hidden sm:block">Prev</span>
           </Button>
         </Link>
         <Link
@@ -50,23 +50,23 @@ const TrackTools = ({
           href={
             problemIndex + 1 === track.problems.length
               ? ``
-              : `/tracks/${track.id}/${track.problems[problemIndex + 1]!.id}`
+              : `/tracks/${track.id}/${track.problems[problemIndex + 1]?.id}`
           }
           style={{ cursor: problemIndex + 1 !== track.problems.length ? "pointer" : "not-allowed" }}
         >
           <Button
             className="flex gap-2 bg-[#323232] font-semibold dark:bg-slate-50"
             disabled={problemIndex + 1 === track.problems.length}
-            size={"lg"}
           >
-            <span className="hidden md:block">Next</span>
+            <span className="hidden sm:block">Next</span>
             <ChevronRight className="size-4" />
           </Button>
         </Link>
-
         {/* To Top */}
-        <Button className="flex gap-2 dark:bg-[#323232]" onClick={scrollToTop} size={"lg"} variant={"secondary"}>
-          <span className="hidden md:block">Go to Top</span>
+        <Button
+          className="flex gap-2 dark:bg-[#323232] sm:w-auto" onClick={scrollToTop} variant={"secondary"}
+        >
+          <span className="hidden sm:block">Go to Top</span>
           <ArrowUp className="size-4" />
         </Button>
       </div>

From 09479eab7b55d894471b55586525359f13fce892 Mon Sep 17 00:00:00 2001
From: tarunmeena6846 <tarunmeena6846@gmail.com>
Date: Sat, 28 Sep 2024 23:43:07 +0530
Subject: [PATCH 4/5] Revert "Home button added for smallar screens"

This reverts commit 5de988152b4df25aa92ffda21895841023f9a817.
---
 apps/web/components/PageToggle.tsx |  3 ++-
 apps/web/components/TrackTools.tsx | 30 +++++++++++++++---------------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/apps/web/components/PageToggle.tsx b/apps/web/components/PageToggle.tsx
index a95b93da..4167a9f3 100644
--- a/apps/web/components/PageToggle.tsx
+++ b/apps/web/components/PageToggle.tsx
@@ -27,9 +27,10 @@ export function PageToggle({
       <DropdownMenuTrigger asChild>
         <Button
           className={`flex gap-2 font-semibold ${isLegacyMode ? "" : "dark:bg-[#323232]"}`}
+          size={"lg"}
           variant={isLegacyMode ? "outline" : "secondary"}
         >
-          <span className={`hidden ${isAtHeader ? "lg" : "sm"}:block`}>Jump To</span>
+          <span className={`hidden ${isAtHeader ? "lg" : "md"}:block`}>Jump To</span>
           <ArrowUpRight className="size-4" />
         </Button>
       </DropdownMenuTrigger>
diff --git a/apps/web/components/TrackTools.tsx b/apps/web/components/TrackTools.tsx
index 53f25396..85e411cb 100644
--- a/apps/web/components/TrackTools.tsx
+++ b/apps/web/components/TrackTools.tsx
@@ -2,7 +2,7 @@ import { Track, Problem } from "@prisma/client";
 import { PageToggle } from "./PageToggle";
 import Link from "next/link";
 import { Button } from "@repo/ui";
-import { ArrowUp, ChevronLeft, ChevronRight,HomeIcon } from "lucide-react";
+import { ArrowUp, ChevronLeft, ChevronRight } from "lucide-react";
 import { motion } from "framer-motion";
 
 const TrackTools = ({
@@ -22,27 +22,27 @@ const TrackTools = ({
       initial={{ y: 20, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       transition={{ duration: 0.5, ease: "easeInOut", type: "spring", damping: 10 }}
-      className="flex w-full items-center justify-center sm:justify-between gap-2 py-6 sm:p-6"
-      >
+      className="flex w-full items-center justify-between gap-2 p-6"
+    >
       <div className="border-primary/10 flex gap-2 rounded-lg border bg-[#e5e5e5]/95 dark:bg-black/95 p-1 backdrop-blur-lg">
-        <Link href={"/"}>
-          <Button className="flex gap-2 bg-[#323232] font-semibold dark:bg-slate-50">
-            <span className="hidden sm:block">Back to home</span>
-            <HomeIcon className="size-4" />
+        <Link href={"/"} className="hidden lg:block">
+          <Button className="flex gap-2 bg-[#323232] font-semibold dark:bg-slate-50" size={"lg"}>
+            Back to home
           </Button>
         </Link>
         <PageToggle allProblems={track.problems} track={track} />
         <Link
           prefetch={true}
-          href={problemIndex !== 0 ? `/tracks/${track.id}/${track.problems[problemIndex - 1]?.id}` : ``}
+          href={problemIndex !== 0 ? `/tracks/${track.id}/${track.problems[problemIndex - 1]!.id}` : ``}
           style={{ cursor: problemIndex !== 0 ? "pointer" : "not-allowed" }}
         >
           <Button
             className="flex gap-2 bg-[#323232] font-semibold dark:bg-slate-50"
             disabled={problemIndex === 0}
+            size={"lg"}
           >
             <ChevronLeft className="size-4" />
-            <span className="hidden sm:block">Prev</span>
+            <span className="hidden md:block">Prev</span>
           </Button>
         </Link>
         <Link
@@ -50,23 +50,23 @@ const TrackTools = ({
           href={
             problemIndex + 1 === track.problems.length
               ? ``
-              : `/tracks/${track.id}/${track.problems[problemIndex + 1]?.id}`
+              : `/tracks/${track.id}/${track.problems[problemIndex + 1]!.id}`
           }
           style={{ cursor: problemIndex + 1 !== track.problems.length ? "pointer" : "not-allowed" }}
         >
           <Button
             className="flex gap-2 bg-[#323232] font-semibold dark:bg-slate-50"
             disabled={problemIndex + 1 === track.problems.length}
+            size={"lg"}
           >
-            <span className="hidden sm:block">Next</span>
+            <span className="hidden md:block">Next</span>
             <ChevronRight className="size-4" />
           </Button>
         </Link>
+
         {/* To Top */}
-        <Button
-          className="flex gap-2 dark:bg-[#323232] sm:w-auto" onClick={scrollToTop} variant={"secondary"}
-        >
-          <span className="hidden sm:block">Go to Top</span>
+        <Button className="flex gap-2 dark:bg-[#323232]" onClick={scrollToTop} size={"lg"} variant={"secondary"}>
+          <span className="hidden md:block">Go to Top</span>
           <ArrowUp className="size-4" />
         </Button>
       </div>

From 1c75aee20e207ad89444685a65dde4a0ee353dca Mon Sep 17 00:00:00 2001
From: tarunmeena6846 <tarunmeena6846@gmail.com>
Date: Sat, 28 Sep 2024 23:50:05 +0530
Subject: [PATCH 5/5] Home button added for mobile screen

---
 apps/web/components/PageToggle.tsx |  3 +--
 apps/web/components/TrackTools.tsx | 26 +++++++++++++-------------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/apps/web/components/PageToggle.tsx b/apps/web/components/PageToggle.tsx
index 4167a9f3..a95b93da 100644
--- a/apps/web/components/PageToggle.tsx
+++ b/apps/web/components/PageToggle.tsx
@@ -27,10 +27,9 @@ export function PageToggle({
       <DropdownMenuTrigger asChild>
         <Button
           className={`flex gap-2 font-semibold ${isLegacyMode ? "" : "dark:bg-[#323232]"}`}
-          size={"lg"}
           variant={isLegacyMode ? "outline" : "secondary"}
         >
-          <span className={`hidden ${isAtHeader ? "lg" : "md"}:block`}>Jump To</span>
+          <span className={`hidden ${isAtHeader ? "lg" : "sm"}:block`}>Jump To</span>
           <ArrowUpRight className="size-4" />
         </Button>
       </DropdownMenuTrigger>
diff --git a/apps/web/components/TrackTools.tsx b/apps/web/components/TrackTools.tsx
index 85e411cb..025c982c 100644
--- a/apps/web/components/TrackTools.tsx
+++ b/apps/web/components/TrackTools.tsx
@@ -2,7 +2,7 @@ import { Track, Problem } from "@prisma/client";
 import { PageToggle } from "./PageToggle";
 import Link from "next/link";
 import { Button } from "@repo/ui";
-import { ArrowUp, ChevronLeft, ChevronRight } from "lucide-react";
+import { ArrowUp, ChevronLeft, ChevronRight,HomeIcon } from "lucide-react";
 import { motion } from "framer-motion";
 
 const TrackTools = ({
@@ -22,12 +22,13 @@ const TrackTools = ({
       initial={{ y: 20, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       transition={{ duration: 0.5, ease: "easeInOut", type: "spring", damping: 10 }}
-      className="flex w-full items-center justify-between gap-2 p-6"
-    >
+      className="flex w-full items-center justify-center sm:justify-between gap-2 py-6 sm:p-6"
+      >
       <div className="border-primary/10 flex gap-2 rounded-lg border bg-[#e5e5e5]/95 dark:bg-black/95 p-1 backdrop-blur-lg">
-        <Link href={"/"} className="hidden lg:block">
-          <Button className="flex gap-2 bg-[#323232] font-semibold dark:bg-slate-50" size={"lg"}>
-            Back to home
+        <Link href={"/"}>
+          <Button className="flex gap-2 bg-[#323232] font-semibold dark:bg-slate-50">
+            <span className="hidden sm:block">Back to home</span>
+            <HomeIcon className="size-4" />
           </Button>
         </Link>
         <PageToggle allProblems={track.problems} track={track} />
@@ -39,10 +40,9 @@ const TrackTools = ({
           <Button
             className="flex gap-2 bg-[#323232] font-semibold dark:bg-slate-50"
             disabled={problemIndex === 0}
-            size={"lg"}
           >
             <ChevronLeft className="size-4" />
-            <span className="hidden md:block">Prev</span>
+            <span className="hidden sm:block">Prev</span>
           </Button>
         </Link>
         <Link
@@ -57,16 +57,16 @@ const TrackTools = ({
           <Button
             className="flex gap-2 bg-[#323232] font-semibold dark:bg-slate-50"
             disabled={problemIndex + 1 === track.problems.length}
-            size={"lg"}
           >
-            <span className="hidden md:block">Next</span>
+            <span className="hidden sm:block">Next</span>
             <ChevronRight className="size-4" />
           </Button>
         </Link>
-
         {/* To Top */}
-        <Button className="flex gap-2 dark:bg-[#323232]" onClick={scrollToTop} size={"lg"} variant={"secondary"}>
-          <span className="hidden md:block">Go to Top</span>
+        <Button
+          className="flex gap-2 dark:bg-[#323232] sm:w-auto" onClick={scrollToTop} variant={"secondary"}
+        >
+          <span className="hidden sm:block">Go to Top</span>
           <ArrowUp className="size-4" />
         </Button>
       </div>