fix(ui): replace ungated invented CSS vars with folds tokens (native-cinny audit 1/N)

Audit of our delta vs Cinny v4.12.3 found invented CSS vars (--tc-*, --bg-*)
used outside Lotus-Terminal-gated code, which render unstyled/wrong on stock
themes. Batch 1:
- MemberVerificationBadge: --tc-positive/warning-normal -> color.Success/Warning.Main
- RoomInput (gif/location errors): --tc-danger-normal -> color.Critical.Main
- MsgTypeRenderers (location iframe): --bg-surface-border -> color.SurfaceVariant.ContainerLine
- MessageSearch (cached-room row): --bg-surface-variant -> color.SurfaceVariant.Container
- PrescreenControls (mic-denied): --tc-critical-high -> color.Critical.Main

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-28 21:54:42 -04:00
parent 0a6b035a67
commit 9684ab75bb
5 changed files with 22 additions and 14 deletions
@@ -1,5 +1,5 @@
import React from 'react';
import { Icon, Icons, Text, Tooltip, TooltipProvider } from 'folds';
import { color, Icon, Icons, Text, Tooltip, TooltipProvider } from 'folds';
import { useUserVerifiedStatus } from '../hooks/useUserVerifiedStatus';
type MemberVerificationBadgeProps = {
@@ -9,8 +9,7 @@ type MemberVerificationBadgeProps = {
export function MemberVerificationBadge({ userId }: MemberVerificationBadgeProps) {
const vs = useUserVerifiedStatus(userId);
if (vs === 'unknown') return null;
const color =
vs === 'verified' ? 'var(--tc-positive-normal, #5effc4)' : 'var(--tc-warning-normal, #ffcc55)';
const iconColor = vs === 'verified' ? color.Success.Main : color.Warning.Main;
const label = vs === 'verified' ? 'Identity verified' : 'Not verified';
return (
<TooltipProvider
@@ -27,7 +26,7 @@ export function MemberVerificationBadge({ userId }: MemberVerificationBadgeProps
title={label}
style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}
>
<Icon size="100" src={Icons.ShieldUser} style={{ color }} />
<Icon size="100" src={Icons.ShieldUser} style={{ color: iconColor }} />
</span>
)}
</TooltipProvider>
@@ -529,7 +529,7 @@ export function MLocation({ content }: MLocationProps) {
style={{
width: '280px',
height: '160px',
border: '1px solid var(--bg-surface-border)',
border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
borderRadius: '8px',
display: 'block',
}}