joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(theme-page): resolve sidebar overlapping footer issue

Browse Source 
- Fixed the issue where the sidebar was overlapping the footer by
changing `lg:fixed` to `lg:sticky` and adjusting padding/margin.
- Removed unused imports (`LoaderIcon`, `LoaderPinwheelIcon`,
`MoveLeftIcon`) from `lucide-react`.
- Moved "Go back" button to the top of the sidebar for better UX.
This commit is contained in:
camilo
2024-08-23 21:21:14 -05:00
parent 96e64d5759
commit 465b1ab524
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/theme-page.tsx
View File

@@ -4,7 +4,7 @@ import { Button } from "./ui/button";
import { useEffect, useState } from "react";
import Markdown from "react-markdown";
import '../app/privacy-policy/markdown.css';
import { ChevronLeft, LoaderCircleIcon, LoaderIcon, LoaderPinwheelIcon, MoveLeftIcon } from "lucide-react";
import { ChevronLeft, LoaderCircleIcon } from "lucide-react";
export default function ThemePage({ theme }: { theme: ZenTheme }) {
const [readme, setReadme] = useState<string | null>(null);
@@ -14,7 +14,11 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
return (
<div className="mt-24 lg:mt-56 flex-col lg:flex-row flex mx-auto items-start relative">
<div className="flex flex-col relative lg:fixed w-md h-full p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm">
<div className="flex flex-col relative lg:sticky lg:top-0 w-md h-full p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm">
<div className="flex mt-2 mb-9 items-center cursor-pointer opacity-70" onClick={() => window.history.back()}>
<ChevronLeft className="w-4 h-4 mr-1" />
<h3 className="text-md">Go back</h3>
</div>
<Image src={theme.image} alt={theme.name} width={500} height={500} className="w-full object-cover rounded-lg border-2 shadow" />
<h1 className="text-2xl mt-5 font-bold">{theme.name}</h1>
<p className="text-sm text-muted-foreground mt-2">{theme.description}</p>
@@ -42,11 +46,7 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
<p id="install-theme-error" className="text-muted-foreground text-sm mt-2">You need to have Zen Browser installed to install this theme. <a href="/download" className="text-blue-500">Download now!</a></p>
</div>
<hr className="block my-4 lg:hidden" />
<div className="flex flex-col lg:border-l lg:min-h-96 pl-10 lg:ml-[25rem] max-w-xl lg:min-w-96 w-full">
<div className="flex my-2 items-center cursor-pointer opacity-70" onClick={() => window.history.back()}>
<ChevronLeft className="w-4 h-4 mr-1" />
<h3 className="text-md">Go back</h3>
</div>
<div className="flex flex-col lg:border-l lg:min-h-96 px-5 lg:pl-10 max-w-xl lg:min-w-96 w-full">
<div id="policy" className="w-full">
{readme === null ? (
<LoaderCircleIcon className="animate-spin w-12 h-12 mx-auto" />