Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BlogAppbar and TrackTools bar UI fixes #664

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

BlogAppbar and TrackTools bar UI fixes #664

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8e31124
BlogAppbar UI fixes
tarunmeena6846 Sep 27, 2024
4218750
UI fixes for BlogAppbar
tarunmeena6846 Sep 27, 2024
5de9881
Home button added for smallar screens
tarunmeena6846 Sep 28, 2024
09479ea
Revert "Home button added for smallar screens"
tarunmeena6846 Sep 28, 2024
1c75aee
Home button added for mobile screen
tarunmeena6846 Sep 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions apps/web/components/BlogAppbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-[#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 (
Expand Down Expand Up @@ -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>
Expand All @@ -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
Expand Down Expand Up @@ -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`
}`}
>
Expand Down
3 changes: 1 addition & 2 deletions apps/web/components/PageToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
28 changes: 14 additions & 14 deletions apps/web/components/TrackTools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = ({
Expand All @@ -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"
>
<div className="border-primary/10 flex gap-2 rounded-lg border bg-black/10 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
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={"/"}>
<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} />
Expand All @@ -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
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/shad/ui/switch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down