chore: Update privacy policy markdown styles and add back button to theme page

This commit is contained in:
Mauro Balades
2024-08-16 11:11:26 +02:00
parent d9fb9d28aa
commit 765e096d4f
3 changed files with 13 additions and 3 deletions

View File

@@ -5,6 +5,10 @@
font-weight: bold; font-weight: bold;
} }
#policy h1:first-child {
margin-top: 0 !important;
}
#policy h2 { #policy h2 {
font-size: 1.5em; font-size: 1.5em;
margin: 0.83em 0; margin: 0.83em 0;

View File

@@ -13,7 +13,7 @@ export default function MarketplacePage() {
}, []); }, []);
return ( return (
<div className="flex flex-col w-1/2 items-center justify-center h-full mt-36"> <div className="flex flex-col w-full p-5 lg:w-1/2 lg:p-0 items-center justify-center h-full mt-36">
<div className="mx-auto w-full text-center"> <div className="mx-auto w-full text-center">
<h1 className="text-7xl font-bold">Themes Marketplace</h1> <h1 className="text-7xl font-bold">Themes Marketplace</h1>
<ThemesSearch input={searchInput} setInput={setSearchInput} /> <ThemesSearch input={searchInput} setInput={setSearchInput} />

View File

@@ -3,6 +3,7 @@ import { Button } from "./ui/button";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Markdown from "react-markdown"; import Markdown from "react-markdown";
import '../app/privacy-policy/markdown.css'; import '../app/privacy-policy/markdown.css';
import { ChevronLeft, MoveLeftIcon } from "lucide-react";
export default function ThemePage({ theme }: { theme: ZenTheme }) { export default function ThemePage({ theme }: { theme: ZenTheme }) {
const [readme, setReadme] = useState<string | null>(null); const [readme, setReadme] = useState<string | null>(null);
@@ -11,7 +12,7 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
}, []); }, []);
return ( return (
<div className="mt-56 flex-col lg:flex-row flex mx-auto items-start"> <div className="mt-24 lg:mt-56 flex-col lg:flex-row flex mx-auto items-start">
<div className="flex flex-col w-md border-r p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm relative"> <div className="flex flex-col w-md border-r p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm relative">
<img src={theme.image} alt={theme.name} className="w-full object-cover rounded-lg border shadow" /> <img src={theme.image} alt={theme.name} className="w-full object-cover rounded-lg border shadow" />
<h1 className="text-2xl mt-5 font-bold">{theme.name}</h1> <h1 className="text-2xl mt-5 font-bold">{theme.name}</h1>
@@ -33,7 +34,12 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
>Install Theme</Button> >Install Theme</Button>
<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> <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> </div>
<div className="flex flex-col p-5 max-w-xl w-full"> <hr className="block my-4 lg:hidden" />
<div className="flex flex-col p-5 !pt-0 max-w-xl w-full">
<div className="flex my-2 items-center cursor-pointer opacity-70" onClick={() => window.history.back()}>
<ChevronLeft className="w-6 h-6 mr-1" />
<h3 className="text-lg font-bold">Go back</h3>
</div>
<div id="policy"> <div id="policy">
<Markdown>{`${readme}`}</Markdown> <Markdown>{`${readme}`}</Markdown>
</div> </div>