diff --git a/src/app/components/read-receipt-avatars/ReadReceiptAvatars.tsx b/src/app/components/read-receipt-avatars/ReadReceiptAvatars.tsx index 14585d0c8..beda4ed8c 100644 --- a/src/app/components/read-receipt-avatars/ReadReceiptAvatars.tsx +++ b/src/app/components/read-receipt-avatars/ReadReceiptAvatars.tsx @@ -106,12 +106,12 @@ export function ReadReceiptAvatars({ display: 'flex', alignItems: 'center', backgroundColor: lotusTerminal - ? 'rgba(0,212,255,0.07)' + ? 'color-mix(in srgb, var(--lt-accent-cyan) 7%, transparent)' : color.SurfaceVariant.Container, border: lotusTerminal - ? `${config.borderWidth.B300} solid rgba(0,212,255,0.30)` + ? `${config.borderWidth.B300} solid color-mix(in srgb, var(--lt-accent-cyan) 30%, transparent)` : `${config.borderWidth.B300} solid transparent`, - boxShadow: lotusTerminal ? '0 0 10px rgba(0,212,255,0.12)' : 'none', + boxShadow: lotusTerminal ? 'var(--lt-box-glow-cyan)' : 'none', borderRadius: config.radii.Pill, padding: `${config.space.S100} ${config.space.S200}`, gap: '0px', diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx index 2ef6fdc2a..f3438d61f 100644 --- a/src/app/features/room/message/Message.tsx +++ b/src/app/features/room/message/Message.tsx @@ -104,15 +104,19 @@ function DeliveryStatus({ if (status === EventStatus.NOT_SENT || status === EventStatus.CANCELLED) { iconSrc = Icons.Cross; label = 'Failed to send'; - colorStyle = lotusTerminal ? '#FF3B3B' : color.Critical.Main; + colorStyle = lotusTerminal ? 'var(--lt-accent-red)' : color.Critical.Main; } else if (status === EventStatus.QUEUED || isSending) { iconSrc = Icons.Send; label = isSending ? 'Sending...' : 'Queued'; - colorStyle = lotusTerminal ? 'rgba(0,212,255,0.60)' : color.Secondary.Main; + colorStyle = lotusTerminal + ? 'color-mix(in srgb, var(--lt-accent-cyan) 60%, transparent)' + : color.Secondary.Main; } else { iconSrc = Icons.Check; label = 'Sent'; - colorStyle = lotusTerminal ? 'rgba(0,212,255,0.70)' : color.Secondary.Main; + colorStyle = lotusTerminal + ? 'color-mix(in srgb, var(--lt-accent-cyan) 70%, transparent)' + : color.Secondary.Main; } return (