diff --git a/src/app/components/GifPicker.tsx b/src/app/components/GifPicker.tsx index 2d19ee5f6..dc10d2f3f 100644 --- a/src/app/components/GifPicker.tsx +++ b/src/app/components/GifPicker.tsx @@ -36,12 +36,12 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne
@@ -82,11 +82,11 @@ export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) { const containerStyle = lotusTerminal ? { - background: '#060c14', - border: '1px solid rgba(255,107,0,0.35)', + background: 'var(--lt-bg-secondary)', + border: '1px solid color-mix(in srgb, var(--lt-accent-orange) 35%, transparent)', borderRadius: '4px', overflow: 'hidden', - boxShadow: '0 4px 24px rgba(255,107,0,0.10), 0 0 0 1px rgba(255,107,0,0.08)', + boxShadow: '0 4px 24px color-mix(in srgb, var(--lt-accent-orange) 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--lt-accent-orange) 8%, transparent)', width: `${PICKER_WIDTH}px`, } : { diff --git a/src/app/components/VoiceMessageRecorder.tsx b/src/app/components/VoiceMessageRecorder.tsx index 352ee7ee7..68aa6bc8e 100644 --- a/src/app/components/VoiceMessageRecorder.tsx +++ b/src/app/components/VoiceMessageRecorder.tsx @@ -203,7 +203,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) { width: toRem(8), height: toRem(8), borderRadius: '50%', - background: lotusTerminal ? '#FF6B00' : 'var(--tc-danger-normal)', + background: lotusTerminal ? 'var(--lt-accent-orange)' : 'var(--tc-danger-normal)', flexShrink: 0, animation: 'pttLivePulse 900ms ease-in-out infinite', }} @@ -214,7 +214,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) { minWidth: toRem(32), fontVariantNumeric: 'tabular-nums', ...(lotusTerminal - ? { fontFamily: 'JetBrains Mono, monospace', color: '#00FF88', fontWeight: 700 } + ? { fontFamily: 'JetBrains Mono, monospace', color: 'var(--lt-accent-green)', fontWeight: 700 } : {}), }} > @@ -233,7 +233,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) { width: toRem(2), height: toRem(2 + (h / barMax) * 16), borderRadius: toRem(1), - background: lotusTerminal ? '#00FF88' : 'var(--tc-primary-normal)', + background: lotusTerminal ? 'var(--lt-accent-green)' : 'var(--tc-primary-normal)', flexShrink: 0, }} /> diff --git a/src/app/components/presence/Presence.tsx b/src/app/components/presence/Presence.tsx index a5b396b88..9b9838525 100644 --- a/src/app/components/presence/Presence.tsx +++ b/src/app/components/presence/Presence.tsx @@ -10,7 +10,7 @@ import { TooltipProvider, toRem, } from 'folds'; -import React, { ReactNode, useId } from 'react'; +import React, { ReactNode } from 'react'; import * as css from './styles.css'; import { Presence, usePresenceLabel } from '../../hooks/useUserPresence'; @@ -27,7 +27,7 @@ type PresenceBadgeProps = { }; export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) { const label = usePresenceLabel(); - const badgeLabelId = useId(); + const ariaLabel = status ? `${label[presence]} — ${status}` : label[presence]; return ( + {label[presence]} {status && } @@ -47,7 +47,7 @@ export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) { > {(triggerRef) => (