diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png index 007b8db..839415c 100644 Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png index de5b7b4..1f17c44 100644 Binary files a/public/favicon-16x16.png and b/public/favicon-16x16.png differ diff --git a/public/favicon-192x192-maskable.png b/public/favicon-192x192-maskable.png index caeb35b..b3dc76c 100644 Binary files a/public/favicon-192x192-maskable.png and b/public/favicon-192x192-maskable.png differ diff --git a/public/favicon-192x192.png b/public/favicon-192x192.png index f4e990f..06ebf81 100644 Binary files a/public/favicon-192x192.png and b/public/favicon-192x192.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png index 88cce1d..96a810e 100644 Binary files a/public/favicon-32x32.png and b/public/favicon-32x32.png differ diff --git a/public/favicon-512x512-maskable.png b/public/favicon-512x512-maskable.png index 53f35e9..9b812e8 100644 Binary files a/public/favicon-512x512-maskable.png and b/public/favicon-512x512-maskable.png differ diff --git a/public/favicon-512x512.png b/public/favicon-512x512.png index c9eec44..106342a 100644 Binary files a/public/favicon-512x512.png and b/public/favicon-512x512.png differ diff --git a/public/favicon.ico b/public/favicon.ico index aa56972..eb3a04c 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/scripts/generate-pwa-icons.mjs b/scripts/generate-pwa-icons.mjs index e39726e..2fd5fc5 100644 --- a/scripts/generate-pwa-icons.mjs +++ b/scripts/generate-pwa-icons.mjs @@ -35,8 +35,8 @@ const STANDARD_SIZES = [16, 32, 192, 512]; const MASKABLE_SIZES = [192, 512]; const APPLE_TOUCH_SIZE = 180; -// Background color for the icons (dark theme background) -const BACKGROUND_COLOR = { r: 2, g: 8, b: 23, alpha: 1 }; // #020817 +// Transparent background for the icons +const TRANSPARENT = { r: 0, g: 0, b: 0, alpha: 0 }; /** * Generate a standard icon (logo fills most of the space with small padding) @@ -67,7 +67,7 @@ async function generateStandardIcon(size, outputName) { width: size, height: size, channels: 4, - background: BACKGROUND_COLOR, + background: TRANSPARENT, }, }) .composite([{ input: resizedLogo, left, top }]) @@ -107,7 +107,7 @@ async function generateMaskableIcon(size, outputName) { width: size, height: size, channels: 4, - background: BACKGROUND_COLOR, + background: TRANSPARENT, }, }) .composite([{ input: resizedLogo, left, top }]) @@ -146,7 +146,7 @@ async function generateFavicon() { width: size, height: size, channels: 4, - background: BACKGROUND_COLOR, + background: TRANSPARENT, }, }) .composite([{ input: resizedLogo, left, top }]) diff --git a/src/components/GrimoireWelcome.tsx b/src/components/GrimoireWelcome.tsx index 2d7a948..c465329 100644 --- a/src/components/GrimoireWelcome.tsx +++ b/src/components/GrimoireWelcome.tsx @@ -87,9 +87,9 @@ export function GrimoireWelcome({

- {/* Mobile: Logo with gradient */} + {/* Mobile: Logo with gradient matching ASCII art */}
- +

a nostr client for magicians

diff --git a/src/components/ui/grimoire-logo.tsx b/src/components/ui/grimoire-logo.tsx index c4ace92..8038e53 100644 --- a/src/components/ui/grimoire-logo.tsx +++ b/src/components/ui/grimoire-logo.tsx @@ -1,19 +1,33 @@ import { cn } from "@/lib/utils"; +import { useId } from "react"; interface GrimoireLogoProps { className?: string; size?: number; + /** + * Which gradient style to use: + * - "original": The original radial gradient (orange -> purple -> blue) + * - "theme": Linear gradient matching text-grimoire-gradient (yellow -> orange -> purple -> cyan) + */ + gradient?: "original" | "theme"; } /** * Grimoire logo with the signature gradient. * The logo shape is a stylized pentagram/grimoire icon with a star element. */ -export function GrimoireLogo({ className, size = 160 }: GrimoireLogoProps) { +export function GrimoireLogo({ + className, + size = 160, + gradient = "original", +}: GrimoireLogoProps) { // Maintain original aspect ratio (121:160) const width = (size * 121) / 160; const height = size; + // Use unique ID to avoid conflicts when multiple logos are on the page + const gradientId = useId(); + return ( - - - - - + {gradient === "original" ? ( + + + + + + ) : ( + + {/* Matches text-grimoire-gradient CSS variables */} + + + + + + )} );