feat: Phase 3 Aether Drift — voice & video component token migration
Migrate all 10 voice/video components from Discord visual language to Aether Drift design system. Zero discord-* classes or hardcoded hex values remain in components/voice/. Key changes: - Status indicators use pastel accents: mint (connected/speaking), amber (connecting/idle), rose (muted/deafened/error) - VoiceControlBar converted to frosted glass-bubble material - ConnectionInfoPopover and ScreenShareSettingsPopover use glass popovers - Speaking ring glow changed from Discord green to mint (#86efac) - Slider accents use lavender instead of blurple - All bg/text/border tokens mapped to surface-*/txt-*/interactive-* system
This commit is contained in:
@@ -13,13 +13,13 @@ export function VoiceChatPanel({ channelId, channelName }: VoiceChatPanelProps)
|
||||
const toggleVoiceChat = useUIStore((s) => s.toggleVoiceChat);
|
||||
|
||||
return (
|
||||
<div className="w-[340px] flex-shrink-0 bg-discord-bg-primary flex flex-col border-l border-[#2b2d31]">
|
||||
<div className="w-[340px] flex-shrink-0 bg-surface-chat flex flex-col border-l border-border-soft">
|
||||
{/* Chat header */}
|
||||
<div className="h-12 px-4 flex items-center justify-between shadow-header flex-shrink-0">
|
||||
<span className="font-bold text-discord-text-primary text-[16px]">Chat</span>
|
||||
<span className="font-bold text-txt-primary text-[16px]">Chat</span>
|
||||
<button
|
||||
onClick={toggleVoiceChat}
|
||||
className="w-7 h-7 flex items-center justify-center text-discord-text-muted hover:text-discord-text-primary transition-colors rounded"
|
||||
className="w-7 h-7 flex items-center justify-center text-txt-tertiary hover:text-txt-primary transition-colors rounded"
|
||||
title="Close Chat"
|
||||
>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
||||
|
||||
Reference in New Issue
Block a user