CERBERUS/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-07-02 04:12:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

refactor: migrate status badges to semantic status-color tokens

Browse source 
Migrate the genuine status badges to the status-* tokens: MCPConfigDialog
connection pills (info/warning/neutral/error/success + dot), MemoryUsageBadge
usage levels, and DialogImage quality badge (also gains dark-mode support it
previously lacked). Removes hardcoded colors and dark: twins.
This commit is contained in:
Marco Beretta 2026-06-19 17:48:19 +02:00
parent b126d2ed0b
commit 5872bb87bd
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
3 changed files with 12 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

6
client/src/components/Chat/Messages/Content/DialogImage.tsx
View file

@ -8,12 +8,12 @@ const imageSizeCache = new Map<string, string>();
const getQualityStyles = (quality: string): string => {
if (quality === 'high') {
return 'bg-green-100 text-green-800';
return 'bg-status-success-subtle text-status-success';
}
if (quality === 'low') {
return 'bg-orange-100 text-orange-800';
return 'bg-status-warning-subtle text-status-warning';
}
return 'bg-gray-100 text-gray-800';
return 'bg-status-neutral-subtle text-status-neutral';
};
export default function DialogImage({

12
client/src/components/MCP/MCPConfigDialog.tsx
View file

@ -91,7 +91,7 @@ export default function MCPConfigDialog({
// Connecting: blue (in progress)
if (connectionState === 'connecting') {
return (
<div className="flex items-center gap-2 rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-600 dark:bg-blue-950 dark:text-blue-400">
<div className="flex items-center gap-2 rounded-full bg-status-info-subtle px-2 py-0.5 text-xs font-medium text-status-info">
<Spinner className="size-3" />
<span>{localize('com_ui_connecting')}</span>
</div>
@ -103,7 +103,7 @@ export default function MCPConfigDialog({
if (requiresOAuth) {
// Needs OAuth: amber (requires action)
return (
<div className="flex items-center gap-2 rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-600 dark:bg-amber-950 dark:text-amber-400">
<div className="flex items-center gap-2 rounded-full bg-status-warning-subtle px-2 py-0.5 text-xs font-medium text-status-warning">
<KeyRound className="size-3" aria-hidden="true" />
<span>{localize('com_nav_mcp_status_needs_auth')}</span>
</div>
@ -111,7 +111,7 @@ export default function MCPConfigDialog({
}
// Simply disconnected: gray (neutral)
return (
<div className="flex items-center gap-2 rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-400">
<div className="flex items-center gap-2 rounded-full bg-status-neutral-subtle px-2 py-0.5 text-xs font-medium text-status-neutral">
<PlugZap className="size-3" aria-hidden="true" />
<span>{localize('com_nav_mcp_status_disconnected')}</span>
</div>
@ -121,7 +121,7 @@ export default function MCPConfigDialog({
// Error: red
if (connectionState === 'error') {
return (
<div className="flex items-center gap-2 rounded-full bg-red-50 px-2 py-0.5 text-xs font-medium text-red-600 dark:bg-red-950 dark:text-red-400">
<div className="flex items-center gap-2 rounded-full bg-status-error-subtle px-2 py-0.5 text-xs font-medium text-status-error">
<AlertTriangle className="size-3" aria-hidden="true" />
<span>{localize('com_ui_error')}</span>
</div>
@ -131,8 +131,8 @@ export default function MCPConfigDialog({
// Connected: green
if (connectionState === 'connected') {
return (
<div className="flex items-center gap-2 rounded-full bg-green-50 px-2 py-0.5 text-xs font-medium text-green-600 dark:bg-green-950 dark:text-green-400">
<div className="size-1.5 rounded-full bg-green-500" />
<div className="flex items-center gap-2 rounded-full bg-status-success-subtle px-2 py-0.5 text-xs font-medium text-status-success">
<div className="size-1.5 rounded-full bg-status-success" />
<span>{localize('com_ui_active')}</span>
</div>
);

6
client/src/components/SidePanel/Memories/MemoryUsageBadge.tsx
View file

@ -14,12 +14,12 @@ interface MemoryUsageBadgeProps {
const getStatusColor = (pct: number): string => {
if (pct > 90) {
return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
return 'bg-status-error-subtle text-status-error';
}
if (pct > 75) {
return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400';
return 'bg-status-warning-subtle text-status-warning';
}
return 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400';
return 'bg-status-success-subtle text-status-success';
};
export default function MemoryUsageBadge({