diff --git a/src/app/globals.css b/src/app/globals.css
index 8cf74e2..df514c6 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -48,6 +48,12 @@
--color-two: #72afd3;
--color-three: #ff2e63;
*/
+
+ --color-1: 0 100% 63%;
+ --color-2: 270 100% 63%;
+ --color-3: 210 100% 63%;
+ --color-4: 195 100% 63%;
+ --color-5: 90 100% 63%;
}
[data-theme="dark"],
diff --git a/src/components/download.tsx b/src/components/download.tsx
index 766605d..e63df2b 100644
--- a/src/components/download.tsx
+++ b/src/components/download.tsx
@@ -2,7 +2,7 @@
import { useState, useEffect } from "react";
import styled, { keyframes } from "styled-components";
import { ny } from "@/lib/utils";
-import { ChevronLeft, InfoIcon } from "lucide-react";
+import { BicepsFlexedIcon, ChevronLeft, InfoIcon, TestTubeDiagonalIcon } from "lucide-react";
import { Button } from "./ui/button";
import { CopyButton } from "./ui/copy-button";
import Particles from "./ui/particles";
@@ -12,8 +12,11 @@ import { InfoCircledIcon } from "@radix-ui/react-icons";
import Link from "next/link";
const BASE_URL =
"https://github.com/zen-browser/desktop/releases/latest/download";
+const TWILIGHT_BASE_URL =
+ "https://github.com/zen-browser/desktop/releases/twilight/download";
import SparklesText from "./ui/sparkles-text";
+import { RainbowButton } from "./ui/rainbow-button";
const field_enter = keyframes`
0% {
opacity: 0;
@@ -50,7 +53,7 @@ const field_exit = keyframes`
const FormField = styled.div<{ enter: boolean; out: boolean }>`
max-height: 0;
flex-direction: column;
- margin-top: 3rem;
+ margin-top: 2rem;
opacity: 0;
width: 100%;
animation: 0.2s ease-in-out forwards
@@ -71,13 +74,10 @@ const FieldDescription = styled.div`
export default function DownloadPage() {
const [platform, setPlatform] = useState(null);
+ if (typeof window === "undefined") return null;
+ const searchParams = new URLSearchParams(window.location.search);
+ const [isTwilight, setIsTwilight] = useState(searchParams.has("twilight"));
const [architecture, setArchitecture] = useState(null);
- const [windowsDownloadType, setWindowsDownloadType] = useState(
- null,
- );
- const [linuxDownloadType, setLinuxDownloadType] = useState(
- null,
- );
const [selectedPlatform, setSelectedPlatform] = useState("");
const [selectedArchitecture, setSelectedArchitecture] = useState("specific");
@@ -154,7 +154,8 @@ export default function DownloadPage() {
console.log("Downloading: ");
console.log("platform: ", selectedPlatform);
console.log("compat: ", arch);
- window.location.replace(`${BASE_URL}/${releases[releaseTarget]}`);
+ const baseUrl = isTwilight ? TWILIGHT_BASE_URL : BASE_URL;
+ window.location.replace(`${baseUrl}/${releases[releaseTarget]}`);
}
setHasDownloaded(true);
throwConfetti();
@@ -164,8 +165,6 @@ export default function DownloadPage() {
if (flowIndex === 0) setPlatform(selectedPlatform);
if (flowIndex === 1) setArchitecture(selectedArchitecture);
if (flowIndex === 2 || (flowIndex === 1 && platform === "MacOS")) {
- setWindowsDownloadType(selectedWindowsDownloadType);
- setLinuxDownloadType(selectedLinuxDownloadType);
startDownload();
}
setFlowIndex(flowIndex + 1);
@@ -177,9 +176,7 @@ export default function DownloadPage() {
} else if (flowIndex === 2) {
setArchitecture(null);
} else if (flowIndex === 3) {
- setWindowsDownloadType(null);
setSelectedWindowsDownloadType("installer");
- setLinuxDownloadType(null);
setSelectedLinuxDownloadType("portable");
}
if (flowIndex > 0) setFlowIndex(flowIndex - 1);
@@ -269,14 +266,24 @@ export default function DownloadPage() {
)) || (
<>
-
- Download
+
+ Download
We're thrilled for you to experience Zen Browser. First, let us
know which device you're using. This will only take a moment, we
promise.
+ {isTwilight && (
+
+
+
+ You're about to download Zen Browser Twilight, our
+ experimental build. This build is not stable and may contain
+ bugs.
+
+
+ )}
>
)}
{/*Changes for the Choose your platform as checkbox looks old*/}
@@ -543,23 +550,25 @@ export default function DownloadPage() {
Download Zen as a ZIP file
- changeToFlatpak()}
- className={ny(
- "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"
- : "",
- )}
- >
-
- 🧑💻
-
-
Flatpak
-
- Install Zen from the Flatpak repository.
-
-
+ {!isTwilight && (
+ changeToFlatpak()}
+ className={ny(
+ "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"
+ : "",
+ )}
+ >
+
+ 🧑💻
+
+
Flatpak
+
+ Install Zen from the Flatpak repository.
+
+
+ )}
)}
@@ -615,6 +624,15 @@ export default function DownloadPage() {
)}
+ {/* We'll hide the button for now since "mr. benchmarks" thinks people act like apes and just "click on buttons without reading" */}
+ {isTwilight && (
+
+ setIsTwilight(!isTwilight)}>
+ {!isTwilight ? : }
+ {!isTwilight ? "Download Twilight" : "Switch to Stable"}
+
+
+ )}
{}
+
+export function RainbowButton({ children, ...props }: RainbowButtonProps) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8e8cad4..22779ac 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -29,6 +29,11 @@ const config = {
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
surface: "var(--surface)",
+ "color-1": "hsl(var(--color-1))",
+ "color-2": "hsl(var(--color-2))",
+ "color-3": "hsl(var(--color-3))",
+ "color-4": "hsl(var(--color-4))",
+ "color-5": "hsl(var(--color-5))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
@@ -64,6 +69,10 @@ const config = {
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
+ rainbow: {
+ "0%": { "background-position": "0%" },
+ "100%": { "background-position": "200%" },
+ },
orbit: {
"0%": {
transform:
@@ -137,6 +146,7 @@ const config = {
},
},
animation: {
+ rainbow: "rainbow var(--speed, 2s) infinite linear",
orbit: "orbit calc(var(--duration)*1s) linear infinite",
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",