Skip to content

Commit 13dbdfc

Browse files
bbishdotdevbbishdotdev
authored
Merge pull request #4 from btbishop93/feat/retro-apple-theme
Feat/retro apple theme
2 parents 303a643 + d13573c commit 13dbdfc

15 files changed

Lines changed: 140 additions & 99 deletions

‎src/app/globals.css‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,13 @@
2929
--chart-3: 197 37% 24%;
3030
--chart-4: 43 74% 66%;
3131
--chart-5: 27 87% 67%;
32-
--color-1: 0 100% 63%;
33-
--color-2: 270 100% 63%;
34-
--color-3: 210 100% 63%;
35-
--color-4: 195 100% 63%;
36-
--color-5: 90 100% 63%;
32+
/* Apple retro colors (1977-1999 logo) */
33+
--color-1: 107 48% 50%; /* green #61bb46 */
34+
--color-2: 42 98% 57%; /* yellow #fdb827 */
35+
--color-3: 28 91% 54%; /* orange #f5821f */
36+
--color-4: 358 73% 55%; /* red #e03a3e */
37+
--color-5: 300 42% 41%; /* purple #963d97 */
38+
--color-6: 197 100% 43%; /* blue #009ddc */
3739
}
3840

3941
.dark {
@@ -61,11 +63,13 @@
6163
--chart-3: 30 80% 55%;
6264
--chart-4: 280 65% 60%;
6365
--chart-5: 340 75% 55%;
64-
--color-1: 180 100% 63%;
65-
--color-2: 270 100% 63%;
66-
--color-3: 210 100% 63%;
67-
--color-4: 195 100% 63%;
68-
--color-5: 90 100% 63%;
66+
/* Apple retro colors (1977-1999 logo) */
67+
--color-1: 107 48% 50%; /* green #61bb46 */
68+
--color-2: 42 98% 57%; /* yellow #fdb827 */
69+
--color-3: 28 91% 54%; /* orange #f5821f */
70+
--color-4: 358 73% 55%; /* red #e03a3e */
71+
--color-5: 300 42% 41%; /* purple #963d97 */
72+
--color-6: 197 100% 43%; /* blue #009ddc */
6973
}
7074

7175
* {

‎src/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default function RootLayout({
4747
children: React.ReactNode;
4848
}>) {
4949
return (
50-
<html lang="en" className="dark">
50+
<html lang="en">
5151
<body className={`${jetbrainsMono.variable} font-mono antialiased`}>
5252
<ErrorBoundary>
5353
<MobileBlock>{children}</MobileBlock>

‎src/app/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { DotPattern } from "@/components/ui/dot-pattern";
33

44
export default function Home() {
55
return (
6-
<div className="relative min-h-screen bg-neutral-950 overflow-hidden">
7-
<DotPattern className="text-neutral-700/50" width={24} height={24} cr={1.5} glow />
6+
<div className="relative min-h-screen bg-stone-100 overflow-hidden">
7+
<DotPattern width={32} height={32} glow />
88
<div className="relative z-10">
99
<AppPreviewContainer />
1010
</div>

‎src/components/app-preview-container.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,16 @@ import { UploadButtonProvider } from "@/components/providers/upload-button-provi
55
import VideoConvertFlow from "@/components/video-convert/VideoConvertFlow";
66
import { Confetti, type ConfettiRef } from "./ui/confetti";
77

8+
// Apple retro rainbow colors (1977-1999 logo)
9+
const APPLE_CONFETTI_COLORS = [
10+
"#61bb46", // green
11+
"#fdb827", // yellow
12+
"#f5821f", // orange
13+
"#e03a3e", // red
14+
"#963d97", // purple
15+
"#009ddc", // blue
16+
];
17+
818
export default function AppPreviewContainer() {
919
const confettiRef = useRef<ConfettiRef>(null);
1020
const [isMounted, setIsMounted] = useState(false);
@@ -14,15 +24,20 @@ export default function AppPreviewContainer() {
1424
}, []);
1525

1626
const handleConversionComplete = () => {
17-
confettiRef.current?.fire();
27+
confettiRef.current?.fire({
28+
colors: APPLE_CONFETTI_COLORS,
29+
particleCount: 100,
30+
spread: 70,
31+
origin: { y: 0.6 },
32+
});
1833
};
1934

2035
if (!isMounted) {
2136
return (
2237
<UploadButtonProvider>
2338
<div className="flex justify-center items-center min-h-screen">
2439
<div className="max-w-3xl w-full mx-auto px-4 py-24">
25-
<div className="animate-pulse bg-neutral-900 h-96 rounded-xl"></div>
40+
<div className="animate-pulse bg-stone-200 h-96 rounded-xl"></div>
2641
</div>
2742
</div>
2843
</UploadButtonProvider>

‎src/components/terminal-buttons.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { AnimatedUploadButton } from "@/components/ui/animated-upload-button";
44
import { BMCButton } from "@/components/ui/bmc-button";
55
import { Button } from "@/components/ui/button";
66
import { RainbowButton } from "@/components/ui/rainbow-button";
7-
import { cn } from "@/lib/utils";
87
import type { Button as ButtonType } from "@/types/terminal";
98

109
interface TerminalButtonsProps {
@@ -75,15 +74,14 @@ export function TerminalButtons({
7574
);
7675
}
7776

77+
// Use variant from button config, fallback to outline for restart, default otherwise
78+
const variant = button.variant ?? (button.action === "restart" ? "outline" : "default");
79+
7880
return (
7981
<Button
8082
key={button.action}
81-
variant={button.action === "restart" ? "outline" : "default"}
82-
className={cn(
83-
"w-fit",
84-
button.action === "restart" &&
85-
"border-neutral-700 text-neutral-300 hover:bg-neutral-800 hover:text-neutral-100",
86-
)}
83+
variant={variant}
84+
className="w-fit"
8785
onClick={() => onButtonClick(button)}
8886
>
8987
{button.text}

‎src/components/terminal-content.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -190,10 +190,10 @@ export default function TerminalContent({
190190

191191
const textClassName = cn(
192192
"break-words w-full",
193-
message.type === "prompt" && "text-cyan-400",
194-
message.type === "info" && "text-neutral-400",
195-
message.type === "success" && "text-emerald-400",
196-
message.type === "error" && "text-red-400",
193+
message.type === "prompt" && "text-cyan-600",
194+
message.type === "info" && "text-stone-500",
195+
message.type === "success" && "text-emerald-600",
196+
message.type === "error" && "text-red-600",
197197
);
198198

199199
// Live messages render instantly and update in real-time

‎src/components/ui/animated-upload-button.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const AnimatedUploadButton = React.forwardRef<HTMLButtonElement, Animated
2727
<motion.button
2828
ref={ref}
2929
className={cn(
30-
"relative flex h-10 w-fit items-center justify-center overflow-hidden rounded-lg bg-primary px-6 text-primary-foreground",
30+
"relative flex h-10 w-fit items-center justify-center overflow-hidden rounded-lg bg-[#61bb46] px-6 text-white",
3131
className,
3232
)}
3333
onClick={handleClick}
@@ -52,7 +52,7 @@ export const AnimatedUploadButton = React.forwardRef<HTMLButtonElement, Animated
5252
<motion.button
5353
ref={ref}
5454
className={cn(
55-
"relative flex h-10 w-fit cursor-wait items-center justify-center rounded-lg border-none bg-primary/80 px-6 text-primary-foreground",
55+
"relative flex h-10 w-fit cursor-wait items-center justify-center rounded-lg border-none bg-[#61bb46]/80 px-6 text-white",
5656
className,
5757
)}
5858
onClick={handleClick}
@@ -76,7 +76,7 @@ export const AnimatedUploadButton = React.forwardRef<HTMLButtonElement, Animated
7676
<motion.button
7777
ref={ref}
7878
className={cn(
79-
"relative flex h-10 w-fit cursor-pointer items-center justify-center rounded-lg border-none bg-primary px-6 text-primary-foreground",
79+
"relative flex h-10 w-fit cursor-pointer items-center justify-center rounded-lg border-none bg-[#61bb46] hover:bg-[#4fa336] px-6 text-white transition-colors",
8080
className,
8181
)}
8282
onClick={handleClick}

‎src/components/ui/button.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,20 @@ const buttonVariants = cva(
99
{
1010
variants: {
1111
variant: {
12-
default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
12+
default: "bg-[#61bb46] text-white shadow hover:bg-[#4fa336]",
1313
destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
1414
outline:
15-
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
16-
secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
17-
ghost: "hover:bg-accent hover:text-accent-foreground",
18-
link: "text-primary underline-offset-4 hover:underline",
15+
"border border-stone-300 bg-white text-stone-700 shadow-sm hover:bg-stone-50 hover:text-stone-900",
16+
secondary: "bg-stone-100 text-stone-800 shadow-sm hover:bg-stone-200",
17+
ghost: "hover:bg-stone-100 hover:text-stone-900",
18+
link: "text-[#009ddc] underline-offset-4 hover:underline",
19+
// Apple retro color variants
20+
"apple-blue": "bg-[#009ddc] text-white shadow hover:bg-[#0087c1]",
21+
"apple-purple": "bg-[#963d97] text-white shadow hover:bg-[#7a3279]",
22+
"apple-orange": "bg-[#f5821f] text-white shadow hover:bg-[#dd7119]",
23+
"apple-red": "bg-[#e03a3e] text-white shadow hover:bg-[#c4282c]",
24+
"apple-yellow": "bg-[#fdb827] text-stone-900 shadow hover:bg-[#e5a520]",
25+
"apple-green": "bg-[#61bb46] text-white shadow hover:bg-[#4fa336]",
1926
},
2027
size: {
2128
default: "h-9 px-4 py-2",

‎src/components/ui/ciderpress-logo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export function CiderpressLogo({ size = "md", className, showText = false }: Cid
5757

5858
{/* Wordmark */}
5959
{showText && (
60-
<span className={cn("font-mono font-bold tracking-tight text-white", text)}>
60+
<span className={cn("font-mono font-bold tracking-tight text-stone-800", text)}>
6161
Ciderpress
6262
</span>
6363
)}

‎src/components/ui/dot-pattern.tsx‎

Lines changed: 42 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,62 @@
11
"use client";
22

3-
import type React from "react";
4-
import { useId } from "react";
3+
import { Apple } from "lucide-react";
54
import { cn } from "@/lib/utils";
65

7-
interface DotPatternProps extends React.SVGProps<SVGSVGElement> {
6+
const APPLE_COLORS = [
7+
"#61bb46", // green
8+
"#fdb827", // yellow
9+
"#f5821f", // orange
10+
"#e03a3e", // red
11+
"#963d97", // purple
12+
"#009ddc", // blue
13+
];
14+
15+
interface DotPatternProps {
816
width?: number;
917
height?: number;
10-
x?: number;
11-
y?: number;
12-
cx?: number;
13-
cy?: number;
14-
cr?: number;
1518
className?: string;
1619
glow?: boolean;
1720
}
1821

19-
export function DotPattern({
20-
width = 16,
21-
height = 16,
22-
x = 0,
23-
y = 0,
24-
cx = 1,
25-
cy = 1,
26-
cr = 1,
27-
className,
28-
glow = false,
29-
...props
30-
}: DotPatternProps) {
31-
const id = useId();
22+
export function DotPattern({ width = 48, height = 48, className, glow = false }: DotPatternProps) {
23+
// Calculate grid dimensions based on a reasonable viewport
24+
const cols = Math.ceil(1920 / width);
25+
const rows = Math.ceil(1080 / height);
26+
27+
// Create a grid of apples with deterministic colors
28+
const apples = [];
29+
for (let row = 0; row < rows; row++) {
30+
for (let col = 0; col < cols; col++) {
31+
// Deterministic "random" color based on position
32+
const colorIndex = (col * 7 + row * 13) % APPLE_COLORS.length;
33+
const color = APPLE_COLORS[colorIndex];
34+
35+
apples.push(
36+
<div
37+
key={`${row}-${col}`}
38+
className="absolute"
39+
style={{
40+
left: col * width + width / 2 - 6,
41+
top: row * height + height / 2 - 6,
42+
}}
43+
>
44+
<Apple size={12} color={color} strokeWidth={1.5} style={{ opacity: 0.35 }} />
45+
</div>,
46+
);
47+
}
48+
}
3249

3350
return (
34-
<svg
51+
<div
3552
aria-hidden="true"
3653
className={cn(
37-
"pointer-events-none absolute inset-0 h-full w-full text-neutral-400/80",
54+
"pointer-events-none absolute inset-0 overflow-hidden",
3855
glow && "animate-dot-glow",
3956
className,
4057
)}
41-
{...props}
4258
>
43-
<defs>
44-
<pattern
45-
id={`${id}-pattern`}
46-
width={width}
47-
height={height}
48-
patternUnits="userSpaceOnUse"
49-
patternContentUnits="userSpaceOnUse"
50-
x={x}
51-
y={y}
52-
>
53-
<circle cx={cx} cy={cy} r={cr} fill="currentColor" />
54-
</pattern>
55-
</defs>
56-
<rect width="100%" height="100%" fill={`url(#${id}-pattern)`} strokeWidth={0} />
57-
</svg>
59+
{apples}
60+
</div>
5861
);
5962
}

0 commit comments

Comments
 (0)