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

ui(tokens): migrate text-kodo-secondary to text-muted-foreground (11 files)

Browse source 
Replace legacy text-kodo-secondary with semantic text-muted-foreground
across chat, notifications, developer tools, and PWA components.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-09 00:13:27 +01:00
parent 1eb9baa881
commit 68a4aba534
11 changed files with 31 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/web/src/components/OfflineQueueManager.tsx
View file

@ -45,9 +45,9 @@ function getPriorityColor(priority: QueuedRequest['priority']): string {
case 'normal':
return 'bg-muted/20 text-kodo-steel border-border/30';
case 'low':
return 'bg-muted/30 text-kodo-secondary border-border/50';
return 'bg-muted/30 text-muted-foreground border-border/50';
default:
return 'bg-muted/30 text-kodo-secondary border-border/50';
return 'bg-muted/30 text-muted-foreground border-border/50';
}
}
@ -121,7 +121,7 @@ export function OfflineQueueManager({
<div className="flex items-center justify-between p-4 bg-kodo-ink/50 rounded-lg border border-border">
<div className="flex items-center gap-2">
<Clock className="w-5 h-5 text-kodo-steel" />
<span className="text-sm text-kodo-secondary">
<span className="text-sm text-muted-foreground">
{queue.length === 0
? 'No queued requests'
: `${queue.length} ${queue.length === 1 ? 'request' : 'requests'} queued`}
@ -142,7 +142,7 @@ export function OfflineQueueManager({
{/* Queue List */}
{queue.length === 0 ? (
<div className="text-center py-8 text-kodo-secondary">
<div className="text-center py-8 text-muted-foreground">
<CheckCircle2 className="w-12 h-12 mx-auto mb-4 text-kodo-cyan/50" />
<p className="text-sm">All requests have been processed</p>
</div>
@ -163,7 +163,7 @@ export function OfflineQueueManager({
</div>
{/* Metadata */}
<div className="flex items-center gap-4 flex-wrap text-xs text-kodo-secondary">
<div className="flex items-center gap-4 flex-wrap text-xs text-muted-foreground">
{/* Priority Badge */}
<span
className={cn(
@ -213,7 +213,7 @@ export function OfflineQueueManager({
{/* Info Message */}
{queue.length > 0 && (
<div className="p-4 bg-muted/10 border border-border/20 rounded-lg text-xs text-kodo-secondary">
<div className="p-4 bg-muted/10 border border-border/20 rounded-lg text-xs text-muted-foreground">
<p>
Queued requests will be automatically processed when you're back
online. You can remove individual requests or clear the entire

2
apps/web/src/components/Onboarding.tsx
View file

@ -166,7 +166,7 @@ export function Onboarding({
<h3 className="text-xl font-semibold text-white mb-2">
{step.title}
</h3>
<p className="text-kodo-secondary text-sm leading-relaxed">
<p className="text-muted-foreground text-sm leading-relaxed">
{step.description}
</p>
</div>

2
apps/web/src/components/developer/SwaggerUI.tsx
View file

@ -149,7 +149,7 @@ export function SwaggerUIDoc({ specUrl, spec, useIframe = false }: SwaggerUIProp
<h3 className="text-xl font-bold text-white mb-2">
Failed to Load API Documentation
</h3>
<p className="text-sm text-kodo-secondary mb-4 text-center max-w-md">
<p className="text-sm text-muted-foreground mb-4 text-center max-w-md">
{error}
</p>
<p className="text-xs text-muted-foreground mb-6 text-center max-w-md">

4
apps/web/src/components/developer/modals/CreateAPIKeyModal.tsx
View file

@ -115,7 +115,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
{step === 1 ? (
<div className="space-y-8">
<div>
<label className="block text-xs font-bold text-kodo-secondary uppercase tracking-wider mb-3">
<label className="block text-xs font-bold text-muted-foreground uppercase tracking-wider mb-3">
Key Name
</label>
<Input
@ -129,7 +129,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
</div>
<div>
<label className="block text-xs font-bold text-kodo-secondary uppercase tracking-wider mb-4">
<label className="block text-xs font-bold text-muted-foreground uppercase tracking-wider mb-4">
Permissions (Scopes)
</label>
<div className="grid grid-cols-1 gap-3">

2
apps/web/src/components/notifications/NotificationBell.tsx
View file

@ -40,7 +40,7 @@ export const NotificationBell: React.FC<NotificationBellProps> = ({
<Button
variant="ghost"
size="sm"
className={`relative text-kodo-secondary hover:text-kodo-primary ${isOpen ? 'text-kodo-primary bg-white/5' : ''}`}
className={`relative text-muted-foreground hover:text-kodo-primary ${isOpen ? 'text-kodo-primary bg-white/5' : ''}`}
onClick={() => setIsOpen(!isOpen)}
>
<Bell className="w-5 h-5" />

2
apps/web/src/components/pwa/PWAInstallBanner.tsx
View file

@ -40,7 +40,7 @@ export function PWAInstallBanner() {
</div>
<button
onClick={handleDismiss}
className="p-1 px-2 rounded-md bg-white/5 text-kodo-secondary hover:text-white transition-all text-xs font-mono border border-transparent hover:border-white/10"
className="p-1 px-2 rounded-md bg-white/5 text-muted-foreground hover:text-white transition-all text-xs font-mono border border-transparent hover:border-white/10"
>
DISMISS
</button>

4
apps/web/src/components/theme/ThemeSwitcher.tsx
View file

@ -48,7 +48,7 @@ export function ThemeSwitcher({
</div>
<div>
<h3 className="text-xl font-bold text-white">Color Theme</h3>
<p className="text-sm text-kodo-secondary">
<p className="text-sm text-muted-foreground">
Choose your visual style
</p>
</div>
@ -89,7 +89,7 @@ export function ThemeSwitcher({
<div className="font-bold text-lg text-white mb-1">
{theme.name}
</div>
<div className="text-sm text-kodo-secondary">
<div className="text-sm text-muted-foreground">
{theme.description}
</div>
</div>

12
apps/web/src/features/chat/components/ChatInput.tsx
View file

@ -140,7 +140,7 @@ export const ChatInput: React.FC = () => {
{att.file_type.startsWith('image') ? (
<ImageIcon size={14} className="text-kodo-cyan" />
) : (
<File size={14} className="text-kodo-secondary" />
<File size={14} className="text-muted-foreground" />
)}
<span className="truncate flex-1">{att.file_name}</span>
<button
@ -160,7 +160,7 @@ export const ChatInput: React.FC = () => {
type="button"
variant="ghost"
size="icon"
className="text-kodo-secondary hover:text-white hover:bg-white/5"
className="text-muted-foreground hover:text-white hover:bg-white/5"
onClick={() => fileInputRef.current?.click()}
>
<Paperclip size={20} />
@ -172,7 +172,7 @@ export const ChatInput: React.FC = () => {
variant="ghost"
size="icon"
className={cn(
'text-kodo-secondary hover:text-white hover:bg-white/5',
'text-muted-foreground hover:text-white hover:bg-white/5',
showEmojiPicker && 'text-kodo-steel bg-white/5',
)}
onClick={() => setShowEmojiPicker(!showEmojiPicker)}
@ -214,7 +214,7 @@ export const ChatInput: React.FC = () => {
value={message}
onChange={(e) => setMessage(e.target.value)}
placeholder="Broadcast message..."
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-white placeholder:text-kodo-secondary/50 focus:outline-none focus:border-border/50 focus:ring-1 focus:ring-kodo-steel/50 transition-all font-mono text-sm"
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-white placeholder:text-muted-foreground/50 focus:outline-none focus:border-border/50 focus:ring-1 focus:ring-kodo-steel/50 transition-all font-mono text-sm"
disabled={!currentConversationId || isUploading}
/>
{message.length === 0 && !isUploading && (
@ -222,7 +222,7 @@ export const ChatInput: React.FC = () => {
type="button"
variant="ghost"
size="icon"
className="absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 text-kodo-secondary/30 hover:text-white"
className="absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 text-muted-foreground/30 hover:text-white"
>
<Mic className="w-4 h-4" />
</Button>
@ -237,7 +237,7 @@ export const ChatInput: React.FC = () => {
'rounded-xl transition-all duration-[var(--duration-normal)]',
message.trim() || attachments.length > 0
? 'bg-kodo-cyan text-kodo-void hover:bg-kodo-cyan-dim shadow-neon-cyan'
: 'bg-white/5 text-kodo-secondary hover:bg-white/10',
: 'bg-white/5 text-muted-foreground hover:bg-white/10',
)}
disabled={
!currentConversationId ||

10
apps/web/src/features/chat/components/ChatMessage.tsx
View file

@ -56,7 +56,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
// ...
{isMe ? 'You' : safeString(message.sender_username || 'Unknown_Signal')}
</span>
<span className="text-xs text-kodo-secondary/60">
<span className="text-xs text-muted-foreground/60">
{new Date(message.created_at).toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
@ -69,7 +69,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
{isMe && (
<button
onClick={() => setShowEmojiPicker(!showEmojiPicker)}
className="opacity-0 group-hover/bubble:opacity-100 p-1.5 hover:bg-white/10 rounded-full transition-all text-kodo-secondary hover:text-white"
className="opacity-0 group-hover/bubble:opacity-100 p-1.5 hover:bg-white/10 rounded-full transition-all text-muted-foreground hover:text-white"
>
<Smile size={14} />
</button>
@ -128,7 +128,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
{!isMe && (
<button
onClick={() => setShowEmojiPicker(!showEmojiPicker)}
className="opacity-0 group-hover/bubble:opacity-100 p-1.5 hover:bg-white/10 rounded-full transition-all text-kodo-secondary hover:text-white"
className="opacity-0 group-hover/bubble:opacity-100 p-1.5 hover:bg-white/10 rounded-full transition-all text-muted-foreground hover:text-white"
>
<Smile size={14} />
</button>
@ -179,7 +179,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
'flex items-center gap-1 px-1.5 py-0.5 rounded-full text-xs border transition-all animate-scaleIn',
users.includes(user?.id || '')
? 'bg-kodo-cyan/20 border-kodo-cyan/40 text-kodo-cyan shadow-queue-item-current'
: 'bg-white/5 border-white/10 text-kodo-secondary hover:bg-white/10 hover:border-white/20',
: 'bg-white/5 border-white/10 text-muted-foreground hover:bg-white/10 hover:border-white/20',
)}
>
<span>{emoji}</span>
@ -191,7 +191,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
</div>
{isMe && (
<div className="text-kodo-secondary/40 ml-auto">
<div className="text-muted-foreground/40 ml-auto">
<CheckCheck size={12} />
</div>
)}

6
apps/web/src/features/chat/components/ChatRoom.tsx
View file

@ -61,7 +61,7 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
if (!conversationId) {
return (
<div className="flex-1 flex flex-col items-center justify-center text-kodo-secondary opacity-50 space-y-4">
<div className="flex-1 flex flex-col items-center justify-center text-muted-foreground opacity-50 space-y-4">
<div className="w-24 h-24 rounded-full bg-white/5 flex items-center justify-center animate-pulse">
<Wifi className="w-10 h-10 text-kodo-steel opacity-50" />
</div>
@ -106,7 +106,7 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
variant="ghost"
size="sm"
onClick={() => setShowSearch(true)}
className="text-kodo-secondary/50 hover:text-white hover:bg-white/5 bg-black/20 backdrop-blur-sm rounded-full h-8 px-4 border border-white/5"
className="text-muted-foreground/50 hover:text-white hover:bg-white/5 bg-black/20 backdrop-blur-sm rounded-full h-8 px-4 border border-white/5"
>
<Search className="h-3 w-3 mr-2" />
<span className="text-xs font-mono uppercase">Search Log</span>
@ -124,7 +124,7 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
</div>
<div>
<p className="text-white font-medium">Channel Established</p>
<p className="text-sm text-kodo-secondary mt-1">
<p className="text-sm text-muted-foreground mt-1">
Begin transmission on this frequency.
</p>
</div>

6
apps/web/src/features/chat/components/chat-sidebar/ConversationItem.tsx
View file

@ -123,7 +123,7 @@ export function ConversationItem({
'w-8 h-8 rounded-lg flex items-center justify-center transition-colors shrink-0',
isSelected
? 'bg-kodo-cyan text-kodo-void'
: 'bg-white/5 text-kodo-secondary group-hover:text-white',
: 'bg-white/5 text-muted-foreground group-hover:text-white',
)}
>
{conversation.type === 'direct' ? (
@ -142,7 +142,7 @@ export function ConversationItem({
{safeString(conversation.name || `Channel ${conversation.id.substring(0, 4)}`)}
</span>
{conversation.type !== 'direct' && (
<span className="text-xs text-kodo-secondary/50 uppercase tracking-wider">
<span className="text-xs text-muted-foreground/50 uppercase tracking-wider">
{safeString(conversation.type)}
</span>
)}
@ -162,7 +162,7 @@ export function ConversationItem({
size="sm"
className={cn(
'h-6 w-6 p-0 opacity-0 group-hover:opacity-100 transition-opacity shrink-0',
isSelected ? 'text-kodo-cyan hover:bg-kodo-cyan/20' : 'text-kodo-secondary hover:text-white',
isSelected ? 'text-kodo-cyan hover:bg-kodo-cyan/20' : 'text-muted-foreground hover:text-white',
)}
>
<MoreVertical className="h-4 w-4" />