f4ce1595d6
Migrate all 84 frontend files from the old themed/colored design to a monochrome glass-morphism design system. Pure black backgrounds, white text with opacity levels, glass-card components with backdrop-blur, and functional color reserved for status indicators only. Foundation: remap CSS variables to monochrome, simplify Tailwind config, remove theme toggle, convert brand logo/wordmark to white. Pages: all 14 pages updated. Components: all common, library, session, step-library, tree-editor, tree-preview, admin, and subscription components converted. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
47 lines
2.3 KiB
TypeScript
47 lines
2.3 KiB
TypeScript
import { cn } from '@/lib/utils'
|
|
|
|
interface BrandLogoProps {
|
|
size?: 'sm' | 'lg'
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* ResolutionFlow brand logo icon — white monochrome.
|
|
* sm (32x32) for header/navbar, lg (80x80) for login/register pages.
|
|
*/
|
|
export function BrandLogo({ size = 'sm', className }: BrandLogoProps) {
|
|
const sizeClasses = size === 'sm' ? 'h-8 w-8' : 'h-20 w-20'
|
|
|
|
const strokeBase = size === 'sm' ? 1 : 2
|
|
const strokeThick = size === 'sm' ? 1.25 : 2.5
|
|
const dashArray = size === 'sm' ? '1 1.5' : '2 3'
|
|
const nodeR = size === 'sm' ? { outer: 2.5, inner: 2.75 } : { outer: 5, inner: 5.5 }
|
|
const hubR = size === 'sm' ? { glow: 5, solid: 3.5 } : { glow: 10, solid: 7 }
|
|
|
|
const vb = size === 'sm' ? '0 0 40 40' : '0 0 80 80'
|
|
const s = size === 'sm' ? 1 : 2
|
|
|
|
return (
|
|
<svg viewBox={vb} fill="none" className={cn(sizeClasses, className)}>
|
|
{/* Input nodes */}
|
|
<circle cx={5 * s} cy={7 * s} r={nodeR.outer} fill="white" opacity="0.35" />
|
|
<circle cx={5 * s} cy={15 * s} r={nodeR.inner} fill="white" opacity="0.5" />
|
|
<circle cx={5 * s} cy={25 * s} r={nodeR.inner} fill="white" opacity="0.5" />
|
|
<circle cx={5 * s} cy={33 * s} r={nodeR.outer} fill="white" opacity="0.35" />
|
|
|
|
{/* Connecting lines */}
|
|
<path d={`M${7.5 * s} ${7 * s}L${14 * s} ${17 * s}`} stroke="white" strokeWidth={strokeBase} strokeLinecap="round" strokeDasharray={dashArray} opacity="0.45" />
|
|
<path d={`M${7.75 * s} ${15 * s}L${14 * s} ${19 * s}`} stroke="white" strokeWidth={strokeBase} strokeLinecap="round" opacity="0.6" />
|
|
<path d={`M${7.75 * s} ${25 * s}L${14 * s} ${21 * s}`} stroke="white" strokeWidth={strokeBase} strokeLinecap="round" opacity="0.6" />
|
|
<path d={`M${7.5 * s} ${33 * s}L${14 * s} ${23 * s}`} stroke="white" strokeWidth={strokeBase} strokeLinecap="round" strokeDasharray={dashArray} opacity="0.45" />
|
|
|
|
{/* Central hub */}
|
|
<circle cx={18 * s} cy={20 * s} r={hubR.glow} fill="white" opacity="0.15" />
|
|
<circle cx={18 * s} cy={20 * s} r={hubR.solid} fill="white" />
|
|
|
|
{/* Output arrow */}
|
|
<path d={`M${21.5 * s} ${20 * s}H${35 * s}M${35 * s} ${20 * s}L${30 * s} ${15 * s}M${35 * s} ${20 * s}L${30 * s} ${25 * s}`} stroke="white" strokeWidth={strokeThick} strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
)
|
|
}
|