mirror of
https://github.com/davidkaya/aryx.git
synced 2026-07-24 13:38:43 +02:00
David KayaandCopilot
f8b4c3cf4f
Complete visual overhaul of the Aryx application with the Luminous Depth design language — blue-tinted dark surfaces, brand gradient accents, glass-morphism effects, and refined typography. Design Foundation: - New color system with CSS custom properties for all surfaces, borders, text, accents, and status colors - Typography: Outfit (display), DM Sans (body), JetBrains Mono (code) - Animations: accent-flow, thinking-wave, ambient-glow - Utility classes: glass-surface, glow-border, brand-gradient-bg/text - Light theme with cool-tinted whites and blue-tinted shadows Components Updated: - UI primitives (TextInput, SelectInput, ToggleSwitch, FormField, etc.) - AppShell with ambient glow background - Sidebar with brand gradient selection and accent-flow running bars - ChatPane with semantic phase tinting and gradient user avatars - WelcomePane with nebula background and motion entrance animations - All chat banners (Approval, UserInput, PlanReview, MCP Auth, etc.) - ActivityPanel and RunTimeline with glass-surface cards - Settings panels, modals, and editor shells - TerminalPanel with harmonized ANSI palette - PatternGraph nodes with glass-surface styling - MarkdownComposer toolbar Zero hardcoded zinc/indigo color classes remain in renderer components. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
25 lines
858 B
TypeScript
25 lines
858 B
TypeScript
export interface ToggleSwitchProps {
|
|
enabled: boolean;
|
|
size?: 'sm' | 'md';
|
|
}
|
|
|
|
export function ToggleSwitch({ enabled, size = 'md' }: ToggleSwitchProps) {
|
|
const trackSize = size === 'sm' ? 'h-[14px] w-[24px]' : 'h-[18px] w-[32px]';
|
|
const thumbSize = size === 'sm' ? 'size-[10px]' : 'size-[14px]';
|
|
const translateOn = size === 'sm' ? 'translate-x-[12px]' : 'translate-x-[16px]';
|
|
|
|
return (
|
|
<span
|
|
className={`relative inline-flex ${trackSize} shrink-0 items-center rounded-full transition-all duration-200 ${
|
|
enabled ? 'brand-gradient-bg shadow-[0_0_8px_rgba(36,92,249,0.3)]' : 'bg-[var(--color-surface-3)]'
|
|
}`}
|
|
>
|
|
<span
|
|
className={`inline-block ${thumbSize} rounded-full bg-white shadow-sm transition-transform ${
|
|
enabled ? translateOn : 'translate-x-[2px]'
|
|
}`}
|
|
/>
|
|
</span>
|
|
);
|
|
}
|