From 765e096d4fc0c0d5570542ed0874d171e3381466 Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Fri, 16 Aug 2024 11:11:26 +0200
Subject: [PATCH] chore: Update privacy policy markdown styles and add back
 button to theme page

---
 src/app/privacy-policy/markdown.css |  4 ++++
 src/components/marketplace.tsx      |  2 +-
 src/components/theme-page.tsx       | 10 ++++++++--
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/app/privacy-policy/markdown.css b/src/app/privacy-policy/markdown.css
index 27d5953..293b725 100644
--- a/src/app/privacy-policy/markdown.css
+++ b/src/app/privacy-policy/markdown.css
@@ -5,6 +5,10 @@
   font-weight: bold;
 }
 
+#policy h1:first-child {
+  margin-top: 0 !important;
+}
+
 #policy h2 {
   font-size: 1.5em;
   margin: 0.83em 0;
diff --git a/src/components/marketplace.tsx b/src/components/marketplace.tsx
index 0678b98..4e9348a 100644
--- a/src/components/marketplace.tsx
+++ b/src/components/marketplace.tsx
@@ -13,7 +13,7 @@ export default function MarketplacePage() {
   }, []);
 
   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">
         <h1 className="text-7xl font-bold">Themes Marketplace</h1>
         <ThemesSearch input={searchInput} setInput={setSearchInput} />
diff --git a/src/components/theme-page.tsx b/src/components/theme-page.tsx
index e536aa8..522778e 100644
--- a/src/components/theme-page.tsx
+++ b/src/components/theme-page.tsx
@@ -3,6 +3,7 @@ import { Button } from "./ui/button";
 import { useEffect, useState } from "react";
 import Markdown from "react-markdown";
 import '../app/privacy-policy/markdown.css';
+import { ChevronLeft, MoveLeftIcon } from "lucide-react";
 
 export default function ThemePage({ theme }: { theme: ZenTheme }) {
   const [readme, setReadme] = useState<string | null>(null);
@@ -11,7 +12,7 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
   }, []);
 
   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">
         <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>
@@ -33,7 +34,12 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
         >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>
       </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">
           <Markdown>{`${readme}`}</Markdown>
         </div>