valknarandClaude Sonnet 5
f7503d03d0
Adds a pink/purple/blue SVG brand mark (favicon + header) and reworks the visual language around the app's actual interaction - fader-driven device control - via LED-style indicators, mono instrument readouts, hairline-framed cards, console-tab nav, and an oscilloscope-style session timeline. Leaves components/ui/* untouched, restyling only via design tokens and the app's own composed components. Also fixes a proxy.ts matcher gap that was gating /icon.svg behind auth. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01W8WkFF5ppURBAB918593Eb
43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
interface BrandMarkProps {
|
|
size?: number;
|
|
className?: string;
|
|
}
|
|
|
|
/** Inline twin of app/icon.svg (the favicon) - kept as markup, not an <img>, so it can be sized/animated with CSS. */
|
|
export function BrandMark({ size = 28, className }: BrandMarkProps) {
|
|
return (
|
|
<svg
|
|
width={size}
|
|
height={size}
|
|
viewBox="0 0 32 32"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={cn("shrink-0", className)}
|
|
aria-hidden="true"
|
|
>
|
|
<defs>
|
|
<linearGradient id="bpGradMark" x1="2" y1="2" x2="30" y2="30" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stopColor="#ff6fb0" />
|
|
<stop offset="52%" stopColor="#b34bde" />
|
|
<stop offset="100%" stopColor="#4f7fe0" />
|
|
</linearGradient>
|
|
</defs>
|
|
<rect x="1" y="1" width="30" height="30" rx="9" fill="url(#bpGradMark)" />
|
|
<path
|
|
d="M16 22.6c-.3 0-.5-.1-.7-.3C11.7 19 8 15.6 8 12.3 8 9.9 9.9 8 12.3 8c1.3 0 2.6.6 3.4 1.7.1.1.2.1.3 0 .8-1.1 2.1-1.7 3.4-1.7C21.8 8 23.7 9.9 23.7 12.3c0 3.3-3.7 6.7-7.3 10-.2.2-.4.3-.7.3z"
|
|
fill="rgba(255,255,255,0.22)"
|
|
/>
|
|
<polyline
|
|
points="6,15 10,15 12,9 15,21 18,13 20,15 26,15"
|
|
fill="none"
|
|
stroke="#ffffff"
|
|
strokeWidth={1.7}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|