jared
9684ab75bb
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>
35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import { color, Icon, Icons, Text, Tooltip, TooltipProvider } from 'folds';
|
|
import { useUserVerifiedStatus } from '../hooks/useUserVerifiedStatus';
|
|
|
|
type MemberVerificationBadgeProps = {
|
|
userId: string;
|
|
};
|
|
|
|
export function MemberVerificationBadge({ userId }: MemberVerificationBadgeProps) {
|
|
const vs = useUserVerifiedStatus(userId);
|
|
if (vs === 'unknown') return null;
|
|
const iconColor = vs === 'verified' ? color.Success.Main : color.Warning.Main;
|
|
const label = vs === 'verified' ? 'Identity verified' : 'Not verified';
|
|
return (
|
|
<TooltipProvider
|
|
position="Top"
|
|
tooltip={
|
|
<Tooltip>
|
|
<Text size="T200">{label}</Text>
|
|
</Tooltip>
|
|
}
|
|
>
|
|
{(ref) => (
|
|
<span
|
|
ref={ref}
|
|
title={label}
|
|
style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}
|
|
>
|
|
<Icon size="100" src={Icons.ShieldUser} style={{ color: iconColor }} />
|
|
</span>
|
|
)}
|
|
</TooltipProvider>
|
|
);
|
|
}
|