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) => (