From 168395b8c1787a8f9762d1cd2ecd5251f4d61d9a Mon Sep 17 00:00:00 2001 From: Brenden Bishop Date: Sun, 4 Jan 2026 22:24:31 -0500 Subject: [PATCH 1/5] feat(theme): implement retro Apple theme with 6-color palette Switch from dark to light theme with Apple's 1977-1999 rainbow logo colors: - Replace dot pattern with tiny colored apple SVGs - Update terminal to light theme (white bg, stone borders) - Border beams now cycle through Apple rainbow colors - Rainbow button uses 6-color Apple gradient - Confetti fires with Apple color palette - Update all component text colors for light theme contrast --- src/app/globals.css | 24 ++++--- src/app/layout.tsx | 2 +- src/app/page.tsx | 4 +- src/components/app-preview-container.tsx | 19 ++++- src/components/terminal-buttons.tsx | 2 +- src/components/terminal-content.tsx | 8 +-- src/components/ui/ciderpress-logo.tsx | 2 +- src/components/ui/dot-pattern.tsx | 92 +++++++++++++++++------- src/components/ui/rainbow-button.tsx | 10 ++- src/components/ui/terminal.tsx | 20 +++--- tailwind.config.ts | 11 ++- 11 files changed, 132 insertions(+), 62 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 0d5905b..4e09648 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -29,11 +29,13 @@ --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; - --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%; + /* Apple retro colors (1977-1999 logo) */ + --color-1: 107 48% 50%; /* green #61bb46 */ + --color-2: 42 98% 57%; /* yellow #fdb827 */ + --color-3: 28 91% 54%; /* orange #f5821f */ + --color-4: 358 73% 55%; /* red #e03a3e */ + --color-5: 300 42% 41%; /* purple #963d97 */ + --color-6: 197 100% 43%; /* blue #009ddc */ } .dark { @@ -61,11 +63,13 @@ --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; - --color-1: 180 100% 63%; - --color-2: 270 100% 63%; - --color-3: 210 100% 63%; - --color-4: 195 100% 63%; - --color-5: 90 100% 63%; + /* Apple retro colors (1977-1999 logo) */ + --color-1: 107 48% 50%; /* green #61bb46 */ + --color-2: 42 98% 57%; /* yellow #fdb827 */ + --color-3: 28 91% 54%; /* orange #f5821f */ + --color-4: 358 73% 55%; /* red #e03a3e */ + --color-5: 300 42% 41%; /* purple #963d97 */ + --color-6: 197 100% 43%; /* blue #009ddc */ } * { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 6cd7303..3da6815 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -47,7 +47,7 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - + {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index fd17d10..52f6a88 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -3,8 +3,8 @@ import { DotPattern } from "@/components/ui/dot-pattern"; export default function Home() { return ( -
- +
+
diff --git a/src/components/app-preview-container.tsx b/src/components/app-preview-container.tsx index 05f6acd..bfc5833 100644 --- a/src/components/app-preview-container.tsx +++ b/src/components/app-preview-container.tsx @@ -5,6 +5,16 @@ import { UploadButtonProvider } from "@/components/providers/upload-button-provi import VideoConvertFlow from "@/components/video-convert/VideoConvertFlow"; import { Confetti, type ConfettiRef } from "./ui/confetti"; +// Apple retro rainbow colors (1977-1999 logo) +const APPLE_CONFETTI_COLORS = [ + "#61bb46", // green + "#fdb827", // yellow + "#f5821f", // orange + "#e03a3e", // red + "#963d97", // purple + "#009ddc", // blue +]; + export default function AppPreviewContainer() { const confettiRef = useRef(null); const [isMounted, setIsMounted] = useState(false); @@ -14,7 +24,12 @@ export default function AppPreviewContainer() { }, []); const handleConversionComplete = () => { - confettiRef.current?.fire(); + confettiRef.current?.fire({ + colors: APPLE_CONFETTI_COLORS, + particleCount: 100, + spread: 70, + origin: { y: 0.6 }, + }); }; if (!isMounted) { @@ -22,7 +37,7 @@ export default function AppPreviewContainer() {
-
+
diff --git a/src/components/terminal-buttons.tsx b/src/components/terminal-buttons.tsx index fe4a754..a6a0055 100644 --- a/src/components/terminal-buttons.tsx +++ b/src/components/terminal-buttons.tsx @@ -82,7 +82,7 @@ export function TerminalButtons({ className={cn( "w-fit", button.action === "restart" && - "border-neutral-700 text-neutral-300 hover:bg-neutral-800 hover:text-neutral-100", + "border-stone-300 text-stone-600 hover:bg-stone-100 hover:text-stone-800", )} onClick={() => onButtonClick(button)} > diff --git a/src/components/terminal-content.tsx b/src/components/terminal-content.tsx index 5bdb538..c9dce52 100644 --- a/src/components/terminal-content.tsx +++ b/src/components/terminal-content.tsx @@ -190,10 +190,10 @@ export default function TerminalContent({ const textClassName = cn( "break-words w-full", - message.type === "prompt" && "text-cyan-400", - message.type === "info" && "text-neutral-400", - message.type === "success" && "text-emerald-400", - message.type === "error" && "text-red-400", + message.type === "prompt" && "text-cyan-600", + message.type === "info" && "text-stone-500", + message.type === "success" && "text-emerald-600", + message.type === "error" && "text-red-600", ); // Live messages render instantly and update in real-time diff --git a/src/components/ui/ciderpress-logo.tsx b/src/components/ui/ciderpress-logo.tsx index aa38cce..ffaca6d 100644 --- a/src/components/ui/ciderpress-logo.tsx +++ b/src/components/ui/ciderpress-logo.tsx @@ -57,7 +57,7 @@ export function CiderpressLogo({ size = "md", className, showText = false }: Cid {/* Wordmark */} {showText && ( - + Ciderpress )} diff --git a/src/components/ui/dot-pattern.tsx b/src/components/ui/dot-pattern.tsx index dcb690f..7026f4d 100644 --- a/src/components/ui/dot-pattern.tsx +++ b/src/components/ui/dot-pattern.tsx @@ -1,59 +1,103 @@ "use client"; import type React from "react"; -import { useId } from "react"; +import { useId, useMemo } from "react"; import { cn } from "@/lib/utils"; +const APPLE_COLORS = [ + "#61bb46", // green + "#fdb827", // yellow + "#f5821f", // orange + "#e03a3e", // red + "#963d97", // purple + "#009ddc", // blue +]; + interface DotPatternProps extends React.SVGProps { width?: number; height?: number; x?: number; y?: number; - cx?: number; - cy?: number; - cr?: number; className?: string; glow?: boolean; } export function DotPattern({ - width = 16, - height = 16, + width = 32, + height = 32, x = 0, y = 0, - cx = 1, - cy = 1, - cr = 1, className, glow = false, ...props }: DotPatternProps) { const id = useId(); + // Generate a grid of apples with deterministic colors based on position + const appleSize = 10; + const cols = Math.ceil(1920 / width); + const rows = Math.ceil(1080 / height); + + // Create apple symbols with each color + const appleSymbols = useMemo(() => { + return APPLE_COLORS.map((color, i) => ( + + {/* Stem */} + + {/* Leaf */} + + {/* Apple body */} + + {/* Highlight */} + + + )); + }, [id]); + + // Create a grid of apple uses with pseudo-random colors + const apples = useMemo(() => { + const result = []; + for (let row = 0; row < rows; row++) { + for (let col = 0; col < cols; col++) { + // Deterministic "random" color based on position + const colorIndex = (col * 7 + row * 13) % APPLE_COLORS.length; + result.push( + , + ); + } + } + return result; + }, [id, width, height, cols, rows, appleSize]); + return ( ); } diff --git a/src/components/ui/rainbow-button.tsx b/src/components/ui/rainbow-button.tsx index 9aeb2b2..20afe1d 100644 --- a/src/components/ui/rainbow-button.tsx +++ b/src/components/ui/rainbow-button.tsx @@ -10,12 +10,10 @@ export const RainbowButton = ({ className, children, ...props }: RainbowButtonPr
); } From 3cb77047a609e9bb8b537a2dc7294eb83dfbf566 Mon Sep 17 00:00:00 2001 From: Brenden Bishop Date: Sun, 4 Jan 2026 22:31:36 -0500 Subject: [PATCH 3/5] fix(ux): differentiate button variants for selection prompts - Add variant prop to Button interface - Platform selection: macOS = primary (green), iOS = secondary (muted) - Audio selection: Yes = primary (green), No = outline (subtle) - Improves visual hierarchy for user decision points --- src/components/terminal-buttons.tsx | 5 ++++- src/hooks/useTerminalMessages.ts | 8 ++++---- src/types/terminal.ts | 1 + 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/terminal-buttons.tsx b/src/components/terminal-buttons.tsx index fd5914d..9c54172 100644 --- a/src/components/terminal-buttons.tsx +++ b/src/components/terminal-buttons.tsx @@ -75,10 +75,13 @@ export function TerminalButtons({ ); } + // Use variant from button config, fallback to outline for restart, default otherwise + const variant = button.variant ?? (button.action === "restart" ? "outline" : "default"); + return (
- + void; }