From 20c73e589398b75d3743e763db020a48ac8d9524 Mon Sep 17 00:00:00 2001
From: Zhenya Goroh <zhenyagoroh@gmail.com>
Date: Mon, 30 Sep 2024 18:01:45 +0300
Subject: [PATCH 1/5] Added flatpak script

---
 src/components/download.tsx | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/download.tsx b/src/components/download.tsx
index fd7d314..bb293e2 100644
--- a/src/components/download.tsx
+++ b/src/components/download.tsx
@@ -190,7 +190,10 @@ export default function DownloadPage() {
 	};
 
 	const linuxAppimageBashScript =
-		'bash <(curl https://updates.zen-browser.app/appimage.sh)';
+		"bash <(curl https://updates.zen-browser.app/appimage.sh)";
+
+	const linuxFlatpakScript =
+		"flatpak install flathub io.github.zen_browser.zen";
 
 	return (
 		<>
@@ -241,15 +244,32 @@ export default function DownloadPage() {
 										If you're using an AppImage, you can use the automatic
 										installer, check it out{" "}
 									</p>
-									<pre className="mt-2 flex items-center rounded-md bg-background p-2 text-muted-foreground">
+									<pre className="mt-2 flex items-center justify-between rounded-md bg-background p-2 text-muted-foreground">
 										{linuxAppimageBashScript}
 										<CopyButton
-											className="ml-3"
 											valueToCopy={linuxAppimageBashScript}
 										/>
 									</pre>
 								</div>
 							)}
+							{selectedLinuxDownloadType === "flatpak" && (
+								<div className="mt-10 rounded-md border bg-surface p-5 shadow">
+									<div className="flex">
+										<InfoIcon className="size-4" />
+										<p className="ml-3 font-bold">Flatpak users?</p>
+									</div>
+									<p className="mt-2 text-muted-foreground">
+										If you're using Flatpak, you can install Zen Browser with
+										the following command
+									</p>
+									<pre className="mt-2 flex items-center justify-between rounded-md bg-background p-2 text-muted-foreground">
+										{linuxFlatpakScript}
+										<CopyButton
+											valueToCopy={linuxFlatpakScript}
+										/>
+									</pre>
+								</div>
+							)}
 						</div>
 					)) || (
 						<>
@@ -533,7 +553,7 @@ export default function DownloadPage() {
 											"mb-2 ml-5 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
 											selectedLinuxDownloadType === "flatpak"
 												? "border-blue-400"
-												: ""
+												: "",
 										)}
 									>
 										<h1 className="my-2 text-5xl opacity-40 dark:opacity-20">

From d90afa8eac1f839dfd1b99508a23025b166eb887 Mon Sep 17 00:00:00 2001
From: Zhenya Goroh <zhenyagoroh@gmail.com>
Date: Mon, 30 Sep 2024 18:02:33 +0300
Subject: [PATCH 2/5] Fixed InfoIcon alignment

---
 src/components/download.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/download.tsx b/src/components/download.tsx
index bb293e2..a1eac89 100644
--- a/src/components/download.tsx
+++ b/src/components/download.tsx
@@ -236,7 +236,7 @@ export default function DownloadPage() {
 							</div>
 							{selectedLinuxDownloadType === "appimage" && (
 								<div className="mt-10 rounded-md border bg-surface p-5 shadow">
-									<div className="flex">
+									<div className="flex items-center">
 										<InfoIcon className="size-4" />
 										<p className="ml-3 font-bold">AppImage users?</p>
 									</div>
@@ -254,7 +254,7 @@ export default function DownloadPage() {
 							)}
 							{selectedLinuxDownloadType === "flatpak" && (
 								<div className="mt-10 rounded-md border bg-surface p-5 shadow">
-									<div className="flex">
+									<div className="flex items-center">
 										<InfoIcon className="size-4" />
 										<p className="ml-3 font-bold">Flatpak users?</p>
 									</div>

From 3cca2611617626a6e346d11052876d5bdf0f8ce0 Mon Sep 17 00:00:00 2001
From: Zhenya Goroh <zhenyagoroh@gmail.com>
Date: Mon, 30 Sep 2024 18:25:06 +0300
Subject: [PATCH 3/5] Fixed linux installer cards height

---
 src/components/download.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/download.tsx b/src/components/download.tsx
index a1eac89..7c9f43f 100644
--- a/src/components/download.tsx
+++ b/src/components/download.tsx
@@ -246,9 +246,7 @@ export default function DownloadPage() {
 									</p>
 									<pre className="mt-2 flex items-center justify-between rounded-md bg-background p-2 text-muted-foreground">
 										{linuxAppimageBashScript}
-										<CopyButton
-											valueToCopy={linuxAppimageBashScript}
-										/>
+										<CopyButton valueToCopy={linuxAppimageBashScript} />
 									</pre>
 								</div>
 							)}
@@ -264,9 +262,7 @@ export default function DownloadPage() {
 									</p>
 									<pre className="mt-2 flex items-center justify-between rounded-md bg-background p-2 text-muted-foreground">
 										{linuxFlatpakScript}
-										<CopyButton
-											valueToCopy={linuxFlatpakScript}
-										/>
+										<CopyButton valueToCopy={linuxFlatpakScript} />
 									</pre>
 								</div>
 							)}
@@ -512,11 +508,11 @@ export default function DownloadPage() {
 								<FieldDescription>
 									Choose the type of download you want for Zen for Linux.
 								</FieldDescription>
-								<div className="flex items-center justify-center">
+								<div className="flex items-stretch justify-center">
 									<div
 										onClick={() => setSelectedLinuxDownloadType("appimage")}
 										className={ny(
-											"mb-2 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
+											"mb-2 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
 											selectedLinuxDownloadType === "appimage"
 												? "border-blue-400"
 												: "",
@@ -533,7 +529,7 @@ export default function DownloadPage() {
 									<div
 										onClick={() => setSelectedLinuxDownloadType("portable")}
 										className={ny(
-											"mb-2 ml-5 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
+											"mb-2 ml-5 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
 											selectedLinuxDownloadType === "portable"
 												? "border-blue-400"
 												: "",
@@ -550,7 +546,7 @@ export default function DownloadPage() {
 									<div
 										onClick={() => changeToFlatpak()}
 										className={ny(
-											"mb-2 ml-5 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
+											"mb-2 ml-5 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
 											selectedLinuxDownloadType === "flatpak"
 												? "border-blue-400"
 												: "",

From 0501e6dd455d7de57796eed06973af20fc9f880a Mon Sep 17 00:00:00 2001
From: Zhenya Goroh <zhenyagoroh@gmail.com>
Date: Mon, 30 Sep 2024 18:34:24 +0300
Subject: [PATCH 4/5] Fixed architecture cards height

---
 src/components/download.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/download.tsx b/src/components/download.tsx
index 7c9f43f..9549782 100644
--- a/src/components/download.tsx
+++ b/src/components/download.tsx
@@ -363,11 +363,11 @@ export default function DownloadPage() {
 										Choose the architecture of your device, either optimized or
 										generic.
 									</FieldDescription>
-									<div className="flex items-center justify-center">
+									<div className="flex items-stretch justify-center">
 										<div
 											onClick={() => setSelectedArchitecture("specific")}
 											className={ny(
-												"mb-2 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
+												"mb-2 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
 												selectedArchitecture === "specific"
 													? "border-blue-400"
 													: "",
@@ -384,7 +384,7 @@ export default function DownloadPage() {
 										<div
 											onClick={() => setSelectedArchitecture("generic")}
 											className={ny(
-												"mb-2 ml-10 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
+												"mb-2 ml-10 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
 												selectedArchitecture === "generic"
 													? "border-blue-400"
 													: "",

From ea5d9c8dc0e637439f4cc95cbdf222e72dbdf17b Mon Sep 17 00:00:00 2001
From: Zhenya Goroh <zhenyagoroh@gmail.com>
Date: Mon, 30 Sep 2024 18:36:56 +0300
Subject: [PATCH 5/5] Fixied windows installer cards height

---
 src/components/download.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/download.tsx b/src/components/download.tsx
index 9549782..bdcde99 100644
--- a/src/components/download.tsx
+++ b/src/components/download.tsx
@@ -459,11 +459,11 @@ export default function DownloadPage() {
 								<FieldDescription>
 									Choose the type of download you want for Zen for Windows.
 								</FieldDescription>
-								<div className="flex items-center justify-center">
+								<div className="flex items-stretch justify-center">
 									<div
 										onClick={() => setSelectedWindowsDownloadType("installer")}
 										className={ny(
-											"mb-2 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
+											"mb-2 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
 											selectedWindowsDownloadType === "installer"
 												? "border-blue-400"
 												: "",
@@ -480,7 +480,7 @@ export default function DownloadPage() {
 									<div
 										onClick={() => setSelectedWindowsDownloadType("portable")}
 										className={ny(
-											"mb-2 ml-10 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
+											"mb-2 ml-10 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
 											selectedWindowsDownloadType === "portable"
 												? "border-blue-400"
 												: "",