From f752156d684e1d3bb240c613326ba786dfe0a1e8 Mon Sep 17 00:00:00 2001 From: mauro-balades Date: Sun, 6 Oct 2024 00:04:05 +0200 Subject: [PATCH] refactor: Update color variables in globals.css and tailwind.config.ts This commit updates the color variables in the `globals.css` and `tailwind.config.ts` files. The new color variables are `color-1`, `color-2`, `color-3`, `color-4`, and `color-5`. These variables are used to define the colors for the Zen Browser UI. The changes were made to improve the consistency and readability of the code. --- src/app/globals.css | 6 ++ src/components/download.tsx | 82 +++++++++++++++++----------- src/components/ui/rainbow-button.tsx | 28 ++++++++++ tailwind.config.ts | 10 ++++ 4 files changed, 94 insertions(+), 32 deletions(-) create mode 100644 src/components/ui/rainbow-button.tsx 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 ( + + ) +} 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",