From befda224282f2a01a76064653dcbc94ea47b1813 Mon Sep 17 00:00:00 2001 From: Mauro Balades Date: Wed, 21 Aug 2024 13:47:11 +0200 Subject: [PATCH] chore: Update responsive margins and styles in Features component --- src/app/create-theme/page.tsx | 13 +++ src/components/create-theme.tsx | 179 +++++++++++++++++++++++++++++++ src/components/marketplace.tsx | 17 ++- src/components/theme-card.tsx | 2 +- src/components/themes-search.tsx | 14 ++- 5 files changed, 210 insertions(+), 15 deletions(-) create mode 100644 src/app/create-theme/page.tsx create mode 100644 src/components/create-theme.tsx diff --git a/src/app/create-theme/page.tsx b/src/app/create-theme/page.tsx new file mode 100644 index 0000000..867610e --- /dev/null +++ b/src/app/create-theme/page.tsx @@ -0,0 +1,13 @@ +import CreateThemePage from "@/components/create-theme"; +import Footer from "@/components/footer"; +import { Navigation } from "@/components/navigation"; + +export default function BrandingAssetsPage() { + return ( +
+ +
+ {/* At the bottom of the page */} +
+ ); +} diff --git a/src/components/create-theme.tsx b/src/components/create-theme.tsx new file mode 100644 index 0000000..358b91a --- /dev/null +++ b/src/components/create-theme.tsx @@ -0,0 +1,179 @@ +"use client"; + +import { ny } from "@/lib/utils"; +import { Button } from "./ui/button"; +import React from "react"; +import styled from "styled-components"; +import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "@radix-ui/react-dialog"; +import { DialogFooter, DialogHeader } from "./ui/dialog"; + +const COLORS = [ + "#ffaa40", + "#9c40ff", + "#ff40aa", + "#40ffaa", + "#40aaff", +]; + +const ThemeFormWrapper = styled.div<{ + primaryColor: string, + accentColor: string, + secondaryColor: string, + tertiaryColor: string, + colorsBorder: string, +}>` + ${({ + primaryColor, + accentColor, + secondaryColor, + tertiaryColor, + colorsBorder, + }: { + primaryColor: string; + accentColor: string; + secondaryColor: string; + tertiaryColor: string; + colorsBorder: string; + }) => ` + --zen-primary-color: ${accentColor}; + + --zen-colors-primary: ${primaryColor}; + --zen-colors-secondary: ${secondaryColor}; + --zen-colors-tertiary: ${tertiaryColor}; + + --zen-colors-border: ${colorsBorder}; + `} +`; + +const defaultStyles = { + primaryColor: { + light: "color-mix(in srgb, var(--zen-primary-color) 50%, black 50%)", + dark: "color-mix(in srgb, var(--zen-primary-color) 50%, black 50%)", + }, + secondaryColor: { + light: "color-mix(in srgb, var(--zen-primary-color) 40%, white 60%)", + dark: "color-mix(in srgb, var(--zen-primary-color) 40%, black 60%)", + }, + tertiaryColor: { + light: "color-mix(in srgb, var(--zen-primary-color) 7%, white 93%)", + dark: "color-mix(in srgb, var(--zen-primary-color) 15%, black 85%)", + }, + colorsBorder: { + light: "color-mix(in srgb, var(--zen-colors-secondary) 90%, black 10%)", + dark: "color-mix(in srgb, var(--zen-colors-secondary) 80%, black 20%)", + }, +} + +export default function CreateThemePage() { + const [selectedColor, setSelectedColor] = React.useState(COLORS[0]); + const [isDarkMode, setIsDarkMode] = React.useState(false); + + const [primaryColor, setPrimaryColor] = React.useState(defaultStyles.primaryColor.dark); + const [secondaryColor, setSecondaryColor] = React.useState(defaultStyles.secondaryColor.dark); + const [tertiaryColor, setTertiaryColor] = React.useState(defaultStyles.tertiaryColor.dark); + const [colorsBorder, setColorsBorder] = React.useState(defaultStyles.colorsBorder.dark); + + React.useEffect(() => { + setPrimaryColor(isDarkMode ? defaultStyles.primaryColor.dark : defaultStyles.primaryColor.light); + setSecondaryColor(isDarkMode ? defaultStyles.secondaryColor.dark : defaultStyles.secondaryColor.light); + setTertiaryColor(isDarkMode ? defaultStyles.tertiaryColor.dark : defaultStyles.tertiaryColor.light); + setColorsBorder(isDarkMode ? defaultStyles.colorsBorder.dark : defaultStyles.colorsBorder.light); + }, [isDarkMode]); + + const generateThemeData = () => { + return JSON.stringify({ + primaryColor, + secondaryColor, + tertiaryColor, + colorsBorder, + }, null, 4); + } + + return ( + +
+

Create your theme

+

Create your own theme for Zen Browser and share it with the community.

+
+ {COLORS.map((color) => ( +
setSelectedColor(color)} + className={ny(`w-6 h-6 mx-2 cursor-pointer rounded-md shadow-sm text-white`, selectedColor === color ? "ring-2 ring-black dark:ring-white" : "")} + style={{ backgroundColor: color }} + >
+ ))} +
+
+
+
+ setIsDarkMode(e.target.checked)} id="dark-mode" /> + +
+

+ Primary color +

+
+ setPrimaryColor(e.target.value)} /> +
+
+

+ Secondary color +

+
+ setSecondaryColor(e.target.value)} /> +
+
+

+ Tertiary color +

+
+ setTertiaryColor(e.target.value)} /> +
+
+

+ Border color +

+
+ setColorsBorder(e.target.value)} /> +
+
+ + + + + + + Theme data + + Copy the following JSON object and paste it into your Zen Browser theme format. + + + 
{generateThemeData()}
+ + + + + +
+ {/* Preview */} +
+
+ +
+
+
+
+ + ); +} diff --git a/src/components/marketplace.tsx b/src/components/marketplace.tsx index 63b24f6..ad9bb4b 100644 --- a/src/components/marketplace.tsx +++ b/src/components/marketplace.tsx @@ -14,19 +14,14 @@ export default function MarketplacePage() { }, []); return ( -
-
-

Themes Store

- -
- +
+
+
+

Themes Store

+
-
-
+
{getThemesFromSearch(themes, searchInput).map((theme) => ( ))} diff --git a/src/components/theme-card.tsx b/src/components/theme-card.tsx index 0ceeccc..aae70f6 100644 --- a/src/components/theme-card.tsx +++ b/src/components/theme-card.tsx @@ -15,7 +15,7 @@ export default function ThemeCard({ { if (event.target instanceof HTMLAnchorElement) return; window.open(`/themes/${theme.id}`, "_self"); - }} className="flex flex-col justify-start p-5 rounded-lg shadow-md bg-muted/50 border border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none hover:border-blue-500 hover:shadow-lg"> + }} className="flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none hover:border-blue-500 hover:shadow-lg"> {theme.name}

{theme.name}

diff --git a/src/components/themes-search.tsx b/src/components/themes-search.tsx index d447c10..c040f40 100644 --- a/src/components/themes-search.tsx +++ b/src/components/themes-search.tsx @@ -8,15 +8,23 @@ export default function ThemesSearch({ setInput: (input: string) => void; }) { return ( -
- +
+ setInput(e.target.value)} placeholder="Search themes" - className="w-full bg-transparent border-none focus:outline-none focus:border-none focus:ring-0 text-white placeholder-muted" + className="w-full bg-transparent border-none focus:outline-none focus:border-none focus:ring-0 dark:text-white text-black" /> + +
); }