senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui(tokens): migrate text-red-500 to text-destructive across 11 components

Browse source 
Replace hardcoded red-500/red-400 color references with the semantic
`destructive` design token. This ensures error and danger states adapt
correctly to theme changes and maintain consistency across the UI.

Files: PlayerExpanded, PlayerQueue, WebhooksView, RolesPage, ChatPage,
AdminDashboardStatCard, NotificationsViewItem/Header, AnalyticsViewTopTracks,
AdminDashboardTabs, AdminDashboardHeader.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-08 23:26:34 +01:00
parent 47164e5f3c
commit c5b14dc09b
11 changed files with 20 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/web/src/components/admin/admin-dashboard-view/AdminDashboardHeader.tsx
View file

@ -46,7 +46,7 @@ export function AdminDashboardHeader({
</Button>
<Button
variant="outline"
className="border-red-500/20 text-red-500 hover:bg-red-500/10 font-mono text-xs h-10 tracking-widest"
className="border-destructive/20 text-destructive hover:bg-destructive/10 font-mono text-xs h-10 tracking-widest"
onClick={onLockdown}
>
<Lock className="w-3 h-3 mr-2" /> LOCKDOWN

4
apps/web/src/components/admin/admin-dashboard-view/AdminDashboardStatCard.tsx
View file

@ -14,7 +14,7 @@ const textColorClasses: Record<StatCardProps['color'], string> = {
cyan: 'text-cyan-500',
gold: 'text-gold-500',
lime: 'text-lime-500',
red: 'text-red-500',
red: 'text-destructive',
};
export function AdminDashboardStatCard({
@ -50,7 +50,7 @@ export function AdminDashboardStatCard({
className={cn(
'text-xs font-mono font-bold px-2 py-0.5 rounded-full border tracking-tighter',
trend > 0 && 'text-lime-500 border-lime-500/20 bg-lime-500/10',
trend < 0 && 'text-red-500 border-red-500/20 bg-red-500/10',
trend < 0 && 'text-destructive border-destructive/20 bg-destructive/10',
trend === 0 && 'text-muted-foreground border-border bg-muted/30',
)}
>

12
apps/web/src/components/admin/admin-dashboard-view/AdminDashboardTabs.tsx
View file

@ -24,11 +24,11 @@ export function AdminDashboardTabs({
<TabsList className="bg-black/20 border-b border-white/5 w-full justify-start h-auto p-0 rounded-none gap-10 mb-8 backdrop-blur-md">
<TabsTrigger
value="reports"
className="relative group rounded-none border-b-2 border-transparent data-[state=active]:bg-transparent data-[state=active]:border-red-500 data-[state=active]:text-red-500 py-5 px-0 text-lg font-display bg-transparent transition-all"
className="relative group rounded-none border-b-2 border-transparent data-[state=active]:bg-transparent data-[state=active]:border-destructive data-[state=active]:text-destructive py-5 px-0 text-lg font-display bg-transparent transition-all"
>
<div className="flex items-center gap-3">
MODERATION
<span className="bg-red-500/20 text-red-500 px-2 py-0.5 rounded-full text-xs font-mono">
<span className="bg-destructive/20 text-destructive px-2 py-0.5 rounded-full text-xs font-mono">
{reports.length}
</span>
</div>
@ -69,15 +69,15 @@ export function AdminDashboardTabs({
className="flex items-center justify-between p-6 hover:bg-white/5 transition-colors group"
>
<div className="flex items-center gap-5">
<div className="p-3 bg-red-500/10 rounded-xl text-red-500 group-hover:scale-110 transition-transform">
<div className="p-3 bg-destructive/10 rounded-xl text-destructive group-hover:scale-110 transition-transform">
<AlertTriangle className="w-5 h-5" />
</div>
<div>
<div className="font-bold text-lg text-white group-hover:text-red-400 transition-colors uppercase tracking-tight">
<div className="font-bold text-lg text-white group-hover:text-destructive transition-colors uppercase tracking-tight">
{r.targetName}
</div>
<div className="text-xs text-muted-foreground font-mono uppercase flex items-center gap-2">
<span className="text-red-500/70">{r.targetType}</span> •{' '}
<span className="text-destructive/70">{r.targetType}</span> •{' '}
<span className="opacity-60">{r.reason}</span> •{' '}
<span className="opacity-40">{r.timestamp}</span>
</div>
@ -95,7 +95,7 @@ export function AdminDashboardTabs({
<Button
variant="outline"
size="sm"
className="border-red-500/20 text-red-500 hover:bg-red-500/10"
className="border-destructive/20 text-destructive hover:bg-destructive/10"
onClick={() => onReportAction(r.id, 'quarantined')}
>
QUARANTINE

4
apps/web/src/components/developer/WebhooksView.tsx
View file

@ -106,7 +106,7 @@ export const WebhooksView: React.FC = () => {
<div className="flex flex-col md:flex-row items-start md:items-center justify-between p-6 pl-8 gap-4">
<div className="flex-1">
<div className="flex items-center gap-3 mb-2">
<div className={cn("text-xs font-bold px-2 py-0.5 rounded border uppercase tracking-wider", hook.status === 'active' ? 'border-lime-500/30 text-lime-500 bg-lime-500/10' : 'border-red-500/30 text-red-500 bg-red-500/10')}>
<div className={cn("text-xs font-bold px-2 py-0.5 rounded border uppercase tracking-wider", hook.status === 'active' ? 'border-lime-500/30 text-lime-500 bg-lime-500/10' : 'border-destructive/30 text-destructive bg-destructive/10')}>
{hook.status}
</div>
<span className="font-mono text-white text-sm break-all">{hook.url}</span>
@ -128,7 +128,7 @@ export const WebhooksView: React.FC = () => {
<Button variant="outline" size="sm" onClick={() => handleTest(hook.id)} className="border-white/10 hover:bg-primary/20 hover:text-primary hover:border-primary/50">
<Zap className="w-3 h-3 mr-2" /> Test
</Button>
<Button variant="outline" size="sm" onClick={() => handleDelete(hook.id)} className="border-white/10 hover:bg-red-500/20 hover:text-red-500 hover:border-red-500/50">
<Button variant="outline" size="sm" onClick={() => handleDelete(hook.id)} className="border-white/10 hover:bg-destructive/20 hover:text-destructive hover:border-destructive/50">
<Trash2 className="w-3 h-3" />
</Button>
</div>

2
apps/web/src/components/views/analytics-view/AnalyticsViewTopTracks.tsx
View file

@ -54,7 +54,7 @@ export function AnalyticsViewTopTracks({ tracks, onNavigateTrack }: AnalyticsVie
'inline-flex items-center gap-1.5 px-2 py-0.5 rounded text-xs font-bold uppercase tracking-wider border',
track.change >= 0
? 'text-lime-500 border-lime-500/20 bg-lime-500/10'
: 'text-red-500 border-red-500/20 bg-red-500/10'
: 'text-destructive border-destructive/20 bg-destructive/10'
)}
>
{track.change >= 0 ? (

2
apps/web/src/components/views/notifications-view/NotificationsViewHeader.tsx
View file

@ -34,7 +34,7 @@ export function NotificationsViewHeader({
variant="outline"
size="sm"
onClick={onClearAll}
className="border-red-500/20 hover:bg-red-500/10 text-red-500"
className="border-destructive/20 hover:bg-destructive/10 text-destructive"
>
<Trash2 className="w-4 h-4 mr-2" /> Clear
</Button>

2
apps/web/src/components/views/notifications-view/NotificationsViewItem.tsx
View file

@ -24,7 +24,7 @@ export function NotificationsViewItem({
);
const iconCn =
notification.type === 'like'
? 'bg-red-500/10 text-red-500'
? 'bg-destructive/10 text-destructive'
: notification.type === 'follow'
? 'bg-lime-500/10 text-lime-500'
: 'bg-cyan-500/10 text-cyan-500';

6
apps/web/src/features/chat/pages/ChatPage.tsx
View file

@ -74,10 +74,10 @@ export const ChatPage: React.FC = () => {
if (tokenError) return (
<div className="flex flex-col items-center justify-center h-[calc(100vh-6.25rem)]">
<Card variant="glass" className="p-8 text-center max-w-md border-red-500/30">
<AlertCircle className="w-12 h-12 text-red-500 mb-4" />
<Card variant="glass" className="p-8 text-center max-w-md border-destructive/30">
<AlertCircle className="w-12 h-12 text-destructive mb-4" />
<h2 className="text-xl font-bold text-white mb-2">Connection Terminated</h2>
<p className="text-red-400/80 mb-4">{(tokenError as any).message || 'Secure handshake failed.'}</p>
<p className="text-destructive/80 mb-4">{(tokenError as any).message || 'Secure handshake failed.'}</p>
<Button variant="outline" onClick={() => window.location.reload()}>Retry Connection</Button>
</Card>
</div>

2
apps/web/src/features/player/components/PlayerExpanded.tsx
View file

@ -105,7 +105,7 @@ export function PlayerExpanded({ isOpen, onClose, currentTime, duration, onSeek,
{currentTrack.artist}
</p>
</div>
<Button size="icon" variant="ghost" className="text-muted-foreground hover:text-red-500 hover:bg-red-500/10 rounded-full h-12 w-12 transition-all">
<Button size="icon" variant="ghost" className="text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-full h-12 w-12 transition-all">
<Heart className="w-6 h-6" />
</Button>
</div>

2
apps/web/src/features/player/components/PlayerQueue.tsx
View file

@ -115,7 +115,7 @@ export function PlayerQueue({ isOpen, onClose, currentTrackId, onPlay }: PlayerQ
e.stopPropagation();
removeFromQueue(index);
}}
className="opacity-0 group-hover:opacity-100 p-2 text-muted-foreground hover:text-red-400 hover:bg-red-400/10 rounded-full transition-all duration-[var(--duration-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
className="opacity-0 group-hover:opacity-100 p-2 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-full transition-all duration-[var(--duration-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
>
<X className="w-3 h-3" />
</button>

2
apps/web/src/features/roles/pages/RolesPage.tsx
View file

@ -150,7 +150,7 @@ export function RolesPage() {
<Button size="sm" variant="ghost" onClick={() => { setEditingRole(role); setIsEditModalOpen(true); }}>
<Edit className="w-4 h-4" />
</Button>
<Button size="sm" variant="ghost" className="text-red-500 hover:bg-red-500/10" onClick={() => handleDeleteClick(role)}>
<Button size="sm" variant="ghost" className="text-destructive hover:bg-destructive/10" onClick={() => handleDeleteClick(role)}>
<Trash2 className="w-4 h-4" />
</Button>
</>