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

ui(tokens): complete text-kodo-content-dim → text-muted-foreground migration (52 files)

Browse source 
Eliminate all remaining text-kodo-content-dim from user-facing source files.
This legacy token (hardcoded Gray-400) is now fully replaced by the
theme-aware text-muted-foreground token across UI primitives, settings,
social features, playlists, modals, inventory, and admin views.

Only story files (.stories.tsx) retain the old token for reference.
Total migration: ~345 instances across 87 files (this + previous commit).

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-09 00:04:51 +01:00
parent a508dde511
commit 7113d35a4a
52 changed files with 182 additions and 182 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/web/src/components/admin/modals/BanUserModal.tsx
View file

@ -30,7 +30,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
<ShieldBan className="w-5 h-5 fill-current" /> Suspend User
</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
</button>
</div>
@ -42,7 +42,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
</p>
<div>
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
<label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
Reason
</label>
<select
@ -60,7 +60,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
</div>
<div>
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
<label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
Details (Internal Note)
</label>
<textarea
@ -73,17 +73,17 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
<div className="flex items-center justify-between p-4 bg-kodo-ink rounded border border-kodo-steel">
<div className="flex items-center gap-4">
<Calendar className="w-5 h-5 text-kodo-content-dim" />
<Calendar className="w-5 h-5 text-muted-foreground" />
<div>
<div className="text-sm font-bold text-white">Ban Duration</div>
<div className="text-xs text-kodo-content-dim">
<div className="text-xs text-muted-foreground">
{isPermanent ? 'Permanent Ban' : `${duration} Days`}
</div>
</div>
</div>
<div className="flex items-center gap-2">
<span
className={`text-xs ${!isPermanent ? 'text-white' : 'text-kodo-content-dim'}`}
className={`text-xs ${!isPermanent ? 'text-white' : 'text-muted-foreground'}`}
>
Temp
</span>
@ -96,7 +96,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
></div>
</div>
<span
className={`text-xs ${isPermanent ? 'text-kodo-red font-bold' : 'text-kodo-content-dim'}`}
className={`text-xs ${isPermanent ? 'text-kodo-red font-bold' : 'text-muted-foreground'}`}
>
Perm
</span>
@ -105,7 +105,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
{!isPermanent && (
<div>
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
<label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
Days
</label>
<input

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

@ -152,7 +152,7 @@ export function SwaggerUIDoc({ specUrl, spec, useIframe = false }: SwaggerUIProp
<p className="text-sm text-kodo-secondary mb-4 text-center max-w-md">
{error}
</p>
<p className="text-xs text-kodo-content-dim mb-6 text-center max-w-md">
<p className="text-xs text-muted-foreground mb-6 text-center max-w-md">
Trying to load from: {getOpenApiUrl()}
<br />
<span className="text-kodo-steel">

6
apps/web/src/components/education/MyCoursesView.tsx
View file

@ -110,13 +110,13 @@ export const MyCoursesView: React.FC<MyCoursesViewProps> = ({ onContinue }) => {
<div className="border-b border-kodo-steel flex gap-6">
<button
onClick={() => setActiveTab('in_progress')}
className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === 'in_progress' ? 'border-kodo-cyan text-white' : 'border-transparent text-kodo-content-dim hover:text-kodo-text-main'}`}
className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === 'in_progress' ? 'border-kodo-cyan text-white' : 'border-transparent text-muted-foreground hover:text-kodo-text-main'}`}
>
In Progress
</button>
<button
onClick={() => setActiveTab('completed')}
className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === 'completed' ? 'border-kodo-lime text-white' : 'border-transparent text-kodo-content-dim hover:text-kodo-text-main'}`}
className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === 'completed' ? 'border-kodo-lime text-white' : 'border-transparent text-muted-foreground hover:text-kodo-text-main'}`}
>
Completed
</button>
@ -133,7 +133,7 @@ export const MyCoursesView: React.FC<MyCoursesViewProps> = ({ onContinue }) => {
/>
))}
{filteredCourses.length === 0 && (
<div className="col-span-full text-center py-24 text-kodo-content-dim">
<div className="col-span-full text-center py-24 text-muted-foreground">
<p>No courses found in this category.</p>
</div>
)}

2
apps/web/src/components/gamification/AchievementsView.tsx
View file

@ -58,7 +58,7 @@ export const AchievementsView: React.FC = () => {
<h2 className="text-2xl font-display font-bold text-white mb-2">
ACHIEVEMENTS
</h2>
<p className="text-kodo-content-dim font-mono text-sm">
<p className="text-muted-foreground font-mono text-sm">
Track your milestones and earn rewards.
</p>
</div>

10
apps/web/src/components/inventory/AddEquipmentView.tsx
View file

@ -56,7 +56,7 @@ export const AddEquipmentView: React.FC = () => {
<h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
<Camera className="w-4 h-4 text-kodo-steel" /> Photos
</h3>
<div className="aspect-square bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-xl flex flex-col items-center justify-center text-kodo-content-dim hover:text-white hover:border-kodo-steel/50 cursor-pointer transition-colors group mb-4">
<div className="aspect-square bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-xl flex flex-col items-center justify-center text-muted-foreground hover:text-white hover:border-kodo-steel/50 cursor-pointer transition-colors group mb-4">
<Camera className="w-8 h-8 mb-2 transition-opacity group-hover:opacity-80" />
<span className="text-xs font-bold uppercase">Upload Photos</span>
</div>
@ -72,10 +72,10 @@ export const AddEquipmentView: React.FC = () => {
<Card variant="default">
<h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
<FileText className="w-4 h-4 text-kodo-content-dim" /> Documents
<FileText className="w-4 h-4 text-muted-foreground" /> Documents
</h3>
<FileUpload />
<p className="text-xs text-kodo-content-dim mt-2 text-center">
<p className="text-xs text-muted-foreground mt-2 text-center">
Receipts, Manuals, Warranty Cards
</p>
</Card>
@ -89,7 +89,7 @@ export const AddEquipmentView: React.FC = () => {
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label className="block text-sm font-medium text-kodo-content-dim mb-2">
<label className="block text-sm font-medium text-muted-foreground mb-2">
Category
</label>
<select
@ -159,7 +159,7 @@ export const AddEquipmentView: React.FC = () => {
/>
</div>
<div>
<label className="block text-sm font-medium text-kodo-content-dim mb-2">
<label className="block text-sm font-medium text-muted-foreground mb-2">
Location / Tags
</label>
<Input

8
apps/web/src/components/inventory/InventoryView.tsx
View file

@ -56,7 +56,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
<h2 className="text-2xl font-display font-bold text-white mb-2">
GEAR INVENTORY
</h2>
<p className="text-kodo-content-dim font-mono text-sm">
<p className="text-muted-foreground font-mono text-sm">
Track hardware, warranties, and maintenance.
</p>
</div>
@ -90,7 +90,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
<div className="flex flex-wrap gap-2 w-full md:w-auto">
<div className="flex items-center gap-2 bg-kodo-void rounded-lg p-1 border border-kodo-steel">
<Filter className="w-4 h-4 text-kodo-content-dim ml-2" />
<Filter className="w-4 h-4 text-muted-foreground ml-2" />
<select
className="bg-transparent text-sm text-kodo-text-main focus:outline-none p-1 cursor-pointer"
value={filterCat}
@ -105,7 +105,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
</div>
<div className="flex items-center gap-2 bg-kodo-void rounded-lg p-1 border border-kodo-steel">
<Box className="w-4 h-4 text-kodo-content-dim ml-2" />
<Box className="w-4 h-4 text-muted-foreground ml-2" />
<select
className="bg-transparent text-sm text-kodo-text-main focus:outline-none p-1 cursor-pointer"
value={filterStatus}
@ -136,7 +136,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
/>
))}
{filteredItems.length === 0 && (
<div className="col-span-full text-center py-24 text-kodo-content-dim">
<div className="col-span-full text-center py-24 text-muted-foreground">
<Box className="w-12 h-12 mx-auto mb-4 opacity-50" />
<p>No equipment found.</p>
</div>

2
apps/web/src/components/keyboard/KeyboardShortcutsHelp.tsx
View file

@ -79,7 +79,7 @@ export function KeyboardShortcutsHelp({
key={index}
className="flex items-center justify-between border-b border-kodo-steel dark:border-kodo-steel pb-2 last:border-0"
>
<span className="text-sm text-kodo-content-dim dark:text-kodo-content-dim">
<span className="text-sm text-muted-foreground dark:text-muted-foreground">
{shortcut.description}
</span>
<kbd className="px-2 py-1 text-xs font-semibold text-kodo-text-main dark:text-kodo-text-main bg-kodo-void dark:bg-kodo-graphite border border-kodo-steel dark:border-kodo-steel rounded">

12
apps/web/src/components/library/AutoMetadataDetectionModal.tsx
View file

@ -49,7 +49,7 @@ export const AutoMetadataDetectionModal: React.FC<
<Wand2 className="w-4 h-4 text-kodo-steel" /> AI Metadata Detection
</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
</button>
</div>
@ -66,7 +66,7 @@ export const AutoMetadataDetectionModal: React.FC<
<h4 className="text-lg font-bold text-white animate-pulse">
Analyzing Audio...
</h4>
<p className="text-sm text-kodo-content-dim mt-2">
<p className="text-sm text-muted-foreground mt-2">
Detecting BPM, Key, and Genre for <br />
<span className="text-kodo-steel">{fileName}</span>
</p>
@ -77,7 +77,7 @@ export const AutoMetadataDetectionModal: React.FC<
<div className="bg-kodo-ink border border-kodo-steel/20 rounded-lg p-6 w-full">
<div className="grid grid-cols-2 gap-4">
<div className="text-center p-2">
<div className="text-xs text-kodo-content-dim uppercase font-bold mb-1">
<div className="text-xs text-muted-foreground uppercase font-bold mb-1">
Detected BPM
</div>
<div className="text-2xl font-bold text-white">
@ -85,7 +85,7 @@ export const AutoMetadataDetectionModal: React.FC<
</div>
</div>
<div className="text-center p-2">
<div className="text-xs text-kodo-content-dim uppercase font-bold mb-1">
<div className="text-xs text-muted-foreground uppercase font-bold mb-1">
Detected Key
</div>
<div className="text-2xl font-bold text-kodo-steel">
@ -93,7 +93,7 @@ export const AutoMetadataDetectionModal: React.FC<
</div>
</div>
<div className="text-center p-2">
<div className="text-xs text-kodo-content-dim uppercase font-bold mb-1">
<div className="text-xs text-muted-foreground uppercase font-bold mb-1">
Genre
</div>
<div className="text-lg font-medium text-white">
@ -101,7 +101,7 @@ export const AutoMetadataDetectionModal: React.FC<
</div>
</div>
<div className="text-center p-2">
<div className="text-xs text-kodo-content-dim uppercase font-bold mb-1">
<div className="text-xs text-muted-foreground uppercase font-bold mb-1">
Energy Level
</div>
<div className="text-lg font-medium text-kodo-gold">

10
apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
View file

@ -38,12 +38,12 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white">Create Playlist</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
</button>
</div>
<div className="p-6 flex flex-col md:flex-row gap-6">
<div className="w-40 h-40 bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-lg flex flex-col items-center justify-center text-kodo-content-dim hover:text-white hover:border-kodo-steel/50 cursor-pointer transition-colors flex-shrink-0">
<div className="w-40 h-40 bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-lg flex flex-col items-center justify-center text-muted-foreground hover:text-white hover:border-kodo-steel/50 cursor-pointer transition-colors flex-shrink-0">
<ImageIcon className="w-8 h-8 mb-2" />
<span className="text-xs font-bold uppercase">Cover</span>
</div>
@ -78,7 +78,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
<div className="text-white font-bold">
{isPublic ? 'Public' : 'Private'}
</div>
<div className="text-xs text-kodo-content-dim">
<div className="text-xs text-muted-foreground">
{isPublic
? 'Visible to everyone'
: 'Only you can see this'}
@ -100,11 +100,11 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
>
<div className="flex items-center gap-4">
<Users
className={`w-4 h-4 ${isCollaborative ? 'text-kodo-lime' : 'text-kodo-content-dim'}`}
className={`w-4 h-4 ${isCollaborative ? 'text-kodo-lime' : 'text-muted-foreground'}`}
/>
<div className="text-sm">
<div className="text-white font-bold">Collaborative</div>
<div className="text-xs text-kodo-content-dim">
<div className="text-xs text-muted-foreground">
Friends can add tracks
</div>
</div>

4
apps/web/src/components/library/playlists/EditPlaylistModal.tsx
View file

@ -49,7 +49,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
<h3 className="text-xl font-bold text-white mb-2">
Delete "{playlist.title}"?
</h3>
<p className="text-sm text-kodo-content-dim mb-6">
<p className="text-sm text-muted-foreground mb-6">
This action cannot be undone.
</p>
<div className="flex gap-4 justify-center">
@ -79,7 +79,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white">Edit Details</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
</button>
</div>

14
apps/web/src/components/library/playlists/PlaylistDetailView.tsx
View file

@ -118,7 +118,7 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
<h1 className="text-4xl md:text-6xl font-display font-bold text-white mb-4 leading-tight">
{playlist.title}
</h1>
<p className="text-kodo-content-dim text-sm mb-6 max-w-2xl">
<p className="text-muted-foreground text-sm mb-6 max-w-2xl">
{playlist.description}
</p>
@ -178,7 +178,7 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
{/* Tracks List */}
<div className="px-2">
<div className="grid grid-cols-[auto_1fr_auto_auto_auto] gap-4 text-xs font-bold text-kodo-content-dim uppercase px-4 pb-2 border-b border-white/10 mb-2">
<div className="grid grid-cols-[auto_1fr_auto_auto_auto] gap-4 text-xs font-bold text-muted-foreground uppercase px-4 pb-2 border-b border-white/10 mb-2">
<div className="w-8 text-center">#</div>
<div>Title</div>
<div className="hidden md:block">Album</div>
@ -198,7 +198,7 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
onDragEnd={() => setDraggedIndex(null)}
className={`grid grid-cols-[auto_1fr_auto_auto_auto] gap-4 items-center p-2 rounded-lg hover:bg-white/5 group transition-colors ${draggedIndex === i ? 'bg-kodo-cyan/10' : ''}`}
>
<div className="w-8 text-center flex justify-center text-kodo-content-dim group-hover:text-white cursor-grab active:cursor-grabbing">
<div className="w-8 text-center flex justify-center text-muted-foreground group-hover:text-white cursor-grab active:cursor-grabbing">
<span className="group-hover:hidden">{i + 1}</span>
<Play
className="w-4 h-4 fill-current hidden group-hover:block cursor-pointer"
@ -214,18 +214,18 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
<div className="text-white font-bold text-sm truncate">
{track.title}
</div>
<div className="text-kodo-content-dim text-xs truncate hover:underline cursor-pointer">
<div className="text-muted-foreground text-xs truncate hover:underline cursor-pointer">
{track.artist}
</div>
</div>
</div>
<div className="hidden md:block text-kodo-content-dim text-sm truncate">
<div className="hidden md:block text-muted-foreground text-sm truncate">
{track.album}
</div>
<div className="hidden sm:block text-kodo-content-dim text-xs">
<div className="hidden sm:block text-muted-foreground text-xs">
2 days ago
</div>
<div className="text-right pr-2 flex items-center justify-end gap-4 text-sm text-kodo-content-dim font-mono">
<div className="text-right pr-2 flex items-center justify-end gap-4 text-sm text-muted-foreground font-mono">
<Heart className="w-4 h-4 opacity-0 group-hover:opacity-100 hover:text-kodo-magenta cursor-pointer transition-all" />
<span>{track.duration}</span>
<MoreHorizontal className="w-4 h-4 opacity-0 group-hover:opacity-100 hover:text-white cursor-pointer" />

20
apps/web/src/components/library/playlists/QueueView.tsx
View file

@ -61,7 +61,7 @@ export const QueueView: React.FC = () => {
<h1 className="text-3xl font-display font-bold text-white mb-2">
PLAY QUEUE
</h1>
<p className="text-kodo-content-dim font-mono text-sm">
<p className="text-muted-foreground font-mono text-sm">
{queue.length} tracks upcoming
</p>
</div>
@ -87,7 +87,7 @@ export const QueueView: React.FC = () => {
{/* Current Track */}
{currentTrack && (
<div>
<h3 className="text-xs font-bold text-kodo-content-dim uppercase tracking-widest mb-3">
<h3 className="text-xs font-bold text-muted-foreground uppercase tracking-widest mb-3">
Now Playing
</h3>
<Card
@ -123,7 +123,7 @@ export const QueueView: React.FC = () => {
</h2>
<p className="text-kodo-steel">{currentTrack.artist}</p>
</div>
<div className="text-kodo-content-dim font-mono text-sm hidden md:block">
<div className="text-muted-foreground font-mono text-sm hidden md:block">
{currentTrack.duration}
</div>
</Card>
@ -133,7 +133,7 @@ export const QueueView: React.FC = () => {
{/* Up Next */}
<div>
<div className="flex justify-between items-center mb-3">
<h3 className="text-xs font-bold text-kodo-content-dim uppercase tracking-widest">
<h3 className="text-xs font-bold text-muted-foreground uppercase tracking-widest">
Up Next
</h3>
<div
@ -141,7 +141,7 @@ export const QueueView: React.FC = () => {
onClick={toggleAutoplay}
>
<span
className={`text-xs font-bold ${autoplay ? 'text-kodo-lime' : 'text-kodo-content-dim'}`}
className={`text-xs font-bold ${autoplay ? 'text-kodo-lime' : 'text-muted-foreground'}`}
>
Autoplay
</span>
@ -157,7 +157,7 @@ export const QueueView: React.FC = () => {
<div className="space-y-2">
{queue.length === 0 ? (
<div className="text-center py-12 border-2 border-dashed border-kodo-steel rounded-xl text-kodo-content-dim">
<div className="text-center py-12 border-2 border-dashed border-kodo-steel rounded-xl text-muted-foreground">
<ListMusic className="w-12 h-12 mx-auto mb-4 opacity-50" />
<p className="text-sm">
Queue is empty. Add tracks to keep the vibe going.
@ -178,7 +178,7 @@ export const QueueView: React.FC = () => {
onDragEnd={() => setDraggedIndex(null)}
className={`flex items-center gap-4 p-4 bg-kodo-ink rounded-lg border border-transparent hover:border-kodo-steel transition-all group ${draggedIndex === i ? 'opacity-50 border-kodo-cyan' : ''}`}
>
<div className="text-kodo-content-dim cursor-grab active:cursor-grabbing hover:text-white p-1">
<div className="text-muted-foreground cursor-grab active:cursor-grabbing hover:text-white p-1">
<GripVertical className="w-5 h-5" />
</div>
<div className="w-10 h-10 rounded overflow-hidden flex-shrink-0 relative">
@ -197,15 +197,15 @@ export const QueueView: React.FC = () => {
<div className="text-sm font-bold text-white truncate">
{track.title}
</div>
<div className="text-xs text-kodo-content-dim truncate">
<div className="text-xs text-muted-foreground truncate">
{track.artist}
</div>
</div>
<div className="text-kodo-content-dim font-mono text-xs hidden sm:block">
<div className="text-muted-foreground font-mono text-xs hidden sm:block">
{track.duration}
</div>
<button
className="p-2 text-kodo-content-dim hover:text-kodo-red opacity-0 group-hover:opacity-100 transition-opacity"
className="p-2 text-muted-foreground hover:text-kodo-red opacity-0 group-hover:opacity-100 transition-opacity"
onClick={() => removeFromQueue(track.id)}
>
<X className="w-4 h-4" />

4
apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx
View file

@ -35,7 +35,7 @@ export const SaveQueueAsPlaylistModal: React.FC<
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white">Save Queue as Playlist</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
</button>
</div>
@ -62,7 +62,7 @@ export const SaveQueueAsPlaylistModal: React.FC<
<div className="text-sm font-bold text-white">
{isPublic ? 'Public Playlist' : 'Private Playlist'}
</div>
<div className="text-xs text-kodo-content-dim">
<div className="text-xs text-muted-foreground">
{isPublic ? 'Visible on your profile' : 'Only visible to you'}
</div>
</div>

18
apps/web/src/components/live/modals/TipStreamerModal.tsx
View file

@ -43,14 +43,14 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
<DollarSign className="w-5 h-5" /> Support {streamerName}
</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
</button>
</div>
<div className="p-6 space-y-6">
{/* Amount Selection */}
<div>
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
<label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
Select Amount
</label>
<div className="flex gap-2 mb-3">
@ -58,14 +58,14 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
<button
key={val}
onClick={() => setAmount(val)}
className={`flex-1 py-2 rounded font-bold border transition-colors ${amount === val ? 'bg-kodo-gold text-black border-kodo-gold' : 'bg-kodo-void border-kodo-steel text-kodo-content-dim hover:text-white'}`}
className={`flex-1 py-2 rounded font-bold border transition-colors ${amount === val ? 'bg-kodo-gold text-black border-kodo-gold' : 'bg-kodo-void border-kodo-steel text-muted-foreground hover:text-white'}`}
>
${val}
</button>
))}
</div>
<div className="relative">
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-kodo-content-dim font-bold">
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground font-bold">
$
</span>
<input
@ -80,7 +80,7 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
{/* Message */}
<div>
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
<label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
Message (Optional)
</label>
<textarea
@ -90,26 +90,26 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
onChange={(e) => setMessage(e.target.value)}
maxLength={200}
/>
<p className="text-right text-xs text-kodo-content-dim mt-1">
<p className="text-right text-xs text-muted-foreground mt-1">
{message.length}/200
</p>
</div>
{/* Payment Method (Mock) */}
<div>
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
<label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
Payment Method
</label>
<div className="flex gap-2">
<button
onClick={() => setPaymentMethod('card')}
className={`flex-1 flex items-center justify-center gap-2 py-2 rounded border ${paymentMethod === 'card' ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-kodo-void border-kodo-steel text-kodo-content-dim'}`}
className={`flex-1 flex items-center justify-center gap-2 py-2 rounded border ${paymentMethod === 'card' ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-kodo-void border-kodo-steel text-muted-foreground'}`}
>
<CreditCard className="w-4 h-4" /> Card
</button>
<button
onClick={() => setPaymentMethod('crypto')}
className={`flex-1 flex items-center justify-center gap-2 py-2 rounded border ${paymentMethod === 'crypto' ? 'bg-kodo-magenta/10 border-kodo-magenta text-kodo-magenta' : 'bg-kodo-void border-kodo-steel text-kodo-content-dim'}`}
className={`flex-1 flex items-center justify-center gap-2 py-2 rounded border ${paymentMethod === 'crypto' ? 'bg-kodo-magenta/10 border-kodo-magenta text-kodo-magenta' : 'bg-kodo-void border-kodo-steel text-muted-foreground'}`}
>
<span className="font-bold">Ξ</span> Crypto
</button>

8
apps/web/src/components/marketplace/modals/ReviewProductModal.tsx
View file

@ -40,13 +40,13 @@ export const ReviewProductModal: React.FC<ReviewProductModalProps> = ({
<MessageSquare className="w-4 h-4 text-kodo-steel" /> Write Review
</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
</button>
</div>
<div className="p-6 space-y-6">
<div className="text-center">
<p className="text-kodo-content-dim text-sm mb-2">
<p className="text-muted-foreground text-sm mb-2">
How was your experience with
</p>
<h4 className="font-bold text-white text-lg">{productTitle}?</h4>
@ -65,7 +65,7 @@ export const ReviewProductModal: React.FC<ReviewProductModalProps> = ({
className={`w-8 h-8 transition-colors ${
star <= (hoverRating || rating)
? 'fill-kodo-gold text-kodo-gold'
: 'text-kodo-content-dim'
: 'text-muted-foreground'
}`}
/>
</button>
@ -73,7 +73,7 @@ export const ReviewProductModal: React.FC<ReviewProductModalProps> = ({
</div>
<div>
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
<label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
Your Review
</label>
<textarea

4
apps/web/src/components/settings/accessibility/AccessibilitySettingsView.tsx
View file

@ -32,7 +32,7 @@ export const AccessibilitySettingsView: React.FC = () => {
<h2 className="text-3xl font-display font-bold text-white mb-2">
ACCESSIBILITY
</h2>
<p className="text-kodo-content-dim font-mono text-sm">
<p className="text-muted-foreground font-mono text-sm">
Tools to make the platform work for you.
</p>
</div>
@ -132,7 +132,7 @@ const ToggleRow: React.FC<{
<div className="text-sm font-bold text-white group-hover:text-white transition-colors">
{label}
</div>
<div className="text-xs text-kodo-content-dim">{desc}</div>
<div className="text-xs text-muted-foreground">{desc}</div>
</div>
<Switch checked={active} onChange={onToggle} />
</div>

8
apps/web/src/components/settings/account/ChangeEmailModal.tsx
View file

@ -42,14 +42,14 @@ export const ChangeEmailModal: React.FC<ChangeEmailModalProps> = ({
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white">Change Email Address</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
</button>
</div>
<div className="p-6">
{step === 1 ? (
<div className="space-y-4">
<p className="text-sm text-kodo-content-dim">
<p className="text-sm text-muted-foreground">
Current email:{' '}
<span className="text-white font-mono">{currentEmail}</span>
</p>
@ -70,7 +70,7 @@ export const ChangeEmailModal: React.FC<ChangeEmailModalProps> = ({
onChange={(e) => setPassword(e.target.value)}
/>
<div className="bg-kodo-ink p-4 rounded text-xs text-kodo-content-dim border border-kodo-steel">
<div className="bg-kodo-ink p-4 rounded text-xs text-muted-foreground border border-kodo-steel">
We will send a verification link to your new email address. You
must verify it before the change takes effect.
</div>
@ -83,7 +83,7 @@ export const ChangeEmailModal: React.FC<ChangeEmailModalProps> = ({
<h4 className="text-lg font-bold text-white mb-2">
Check your inbox
</h4>
<p className="text-sm text-kodo-content-dim mb-6">
<p className="text-sm text-muted-foreground mb-6">
We've sent a verification link to{' '}
<span className="text-white">{newEmail}</span>.
</p>

4
apps/web/src/components/settings/account/ChangeUsernameModal.tsx
View file

@ -52,7 +52,7 @@ export const ChangeUsernameModal: React.FC<ChangeUsernameModalProps> = ({
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white">Change Username</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
</button>
</div>
@ -69,7 +69,7 @@ export const ChangeUsernameModal: React.FC<ChangeUsernameModalProps> = ({
/>
<div className="absolute right-4 top-[38px]">
{isChecking && (
<Loader2 className="w-4 h-4 animate-spin text-kodo-content-dim" />
<Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
)}
{!isChecking && isAvailable === true && (
<Check className="w-4 h-4 text-kodo-lime" />

4
apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx
View file

@ -44,7 +44,7 @@ export const DeleteAccountConfirmModal: React.FC<
<button
onClick={onClose}
disabled={loading}
className="text-kodo-content-dim hover:text-white disabled:opacity-50"
className="text-muted-foreground hover:text-white disabled:opacity-50"
>
<X className="w-5 h-5" />
</button>
@ -57,7 +57,7 @@ export const DeleteAccountConfirmModal: React.FC<
</p>
<div className="bg-kodo-ink p-4 rounded border border-kodo-steel">
<ul className="text-xs text-kodo-content-dim space-y-2 list-disc pl-4">
<ul className="text-xs text-muted-foreground space-y-2 list-disc pl-4">
<li>All uploaded tracks and assets will be deleted.</li>
<li>Your username will be released.</li>
<li>Any active subscriptions will be cancelled immediately.</li>

12
apps/web/src/components/settings/account/DeleteAccountView.tsx
View file

@ -40,7 +40,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
<div className="flex items-center gap-4 mb-2">
<button
onClick={onBack}
className="p-2 hover:bg-white/5 rounded-full text-kodo-content-dim hover:text-white transition-colors"
className="p-2 hover:bg-white/5 rounded-full text-muted-foreground hover:text-white transition-colors"
>
<ArrowLeft className="w-5 h-5" />
</button>
@ -61,7 +61,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
<h3 className="text-lg font-bold text-white mb-2">
We're sorry to see you go
</h3>
<p className="text-kodo-content-dim text-sm leading-relaxed">
<p className="text-muted-foreground text-sm leading-relaxed">
Deleting your account is permanent and cannot be undone. Please
read the warnings below carefully before proceeding.
</p>
@ -82,7 +82,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
<span className="font-bold text-kodo-text-main block mb-1">
I lose all my data
</span>
<span className="text-kodo-content-dim">
<span className="text-muted-foreground">
All uploaded tracks, projects, and assets will be permanently
removed from our servers.
</span>
@ -102,7 +102,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
<span className="font-bold text-kodo-text-main block mb-1">
This action is irreversible
</span>
<span className="text-kodo-content-dim">
<span className="text-muted-foreground">
I understand that Veza support cannot restore my account once
deleted.
</span>
@ -122,7 +122,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
<span className="font-bold text-kodo-text-main block mb-1">
Subscriptions will be cancelled
</span>
<span className="text-kodo-content-dim">
<span className="text-muted-foreground">
Any active Pro or Enterprise subscriptions will be terminated
immediately. No refunds will be issued.
</span>
@ -146,7 +146,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
<Button
variant="primary"
className="w-full bg-kodo-red hover:bg-kodo-red text-white border-kodo-red disabled:bg-kodo-graphite disabled:border-kodo-steel disabled:text-kodo-content-dim"
className="w-full bg-kodo-red hover:bg-kodo-red text-white border-kodo-red disabled:bg-kodo-graphite disabled:border-kodo-steel disabled:text-muted-foreground"
disabled={!isFormValid}
onClick={() => setShowFinalModal(true)}
icon={<Trash2 className="w-4 h-4" />}

14
apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
View file

@ -42,7 +42,7 @@ export const AppearanceSettingsView: React.FC = () => {
<h2 className="text-3xl font-display font-bold text-white mb-2">
INTERFACE
</h2>
<p className="text-kodo-content-dim font-mono text-sm">
<p className="text-muted-foreground font-mono text-sm">
Customize your visual experience.
</p>
</div>
@ -95,12 +95,12 @@ export const AppearanceSettingsView: React.FC = () => {
`}
>
<div
className={`p-4 rounded-full ${theme === opt.id ? 'bg-kodo-cyan text-black' : 'bg-kodo-slate text-kodo-content-dim'}`}
className={`p-4 rounded-full ${theme === opt.id ? 'bg-kodo-cyan text-black' : 'bg-kodo-slate text-muted-foreground'}`}
>
{opt.icon}
</div>
<span
className={`font-bold ${theme === opt.id ? 'text-white' : 'text-kodo-content-dim'}`}
className={`font-bold ${theme === opt.id ? 'text-white' : 'text-muted-foreground'}`}
>
{opt.label}
</span>
@ -151,7 +151,7 @@ export const AppearanceSettingsView: React.FC = () => {
>
{opt.label}
</div>
<div className="text-xs text-kodo-content-dim">{opt.desc}</div>
<div className="text-xs text-muted-foreground">{opt.desc}</div>
</div>
</div>
))}
@ -164,7 +164,7 @@ export const AppearanceSettingsView: React.FC = () => {
</h3>
<div className="space-y-8">
<div>
<div className="flex justify-between text-sm text-kodo-content-dim mb-2">
<div className="flex justify-between text-sm text-muted-foreground mb-2">
<span>Font Size</span>
<span>{fontSize}px</span>
</div>
@ -211,7 +211,7 @@ export const AppearanceSettingsView: React.FC = () => {
<Card variant="default">
<h3 className="text-lg font-bold text-white mb-6 flex items-center gap-2">
<Layout className="w-5 h-5 text-kodo-content-dim" /> Layout
<Layout className="w-5 h-5 text-muted-foreground" /> Layout
</h3>
<div
className="flex items-center justify-between p-4 bg-kodo-ink rounded-lg border border-kodo-steel cursor-pointer hover:border-kodo-steel"
@ -219,7 +219,7 @@ export const AppearanceSettingsView: React.FC = () => {
>
<div>
<div className="text-sm font-bold text-white">Show Sidebar</div>
<div className="text-xs text-kodo-content-dim">
<div className="text-xs text-muted-foreground">
Toggle the main navigation sidebar
</div>
</div>

12
apps/web/src/components/settings/backups/BackupsView.tsx
View file

@ -73,7 +73,7 @@ export const BackupsView: React.FC = () => {
<h2 className="text-2xl font-bold text-white flex items-center gap-2">
<Database className="w-6 h-6 text-kodo-gold" /> System Backups
</h2>
<p className="text-kodo-content-dim text-sm">
<p className="text-muted-foreground text-sm">
Manage restore points and redundancy.
</p>
</div>
@ -111,7 +111,7 @@ export const BackupsView: React.FC = () => {
<div className="font-bold text-white text-sm">
{backup.date}
</div>
<div className="text-xs text-kodo-content-dim flex gap-2">
<div className="text-xs text-muted-foreground flex gap-2">
<span>{backup.type}</span>
<span>•</span>
<span>{backup.size}</span>
@ -157,7 +157,7 @@ export const BackupsView: React.FC = () => {
<div className="text-sm text-white font-bold">
Auto-Backup
</div>
<div className="text-xs text-kodo-content-dim">
<div className="text-xs text-muted-foreground">
Daily incremental backups
</div>
</div>
@ -174,7 +174,7 @@ export const BackupsView: React.FC = () => {
{autoBackup && (
<div className="animate-fadeIn space-y-4 pt-2 border-t border-kodo-steel">
<div>
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-1">
<label className="block text-xs font-bold text-muted-foreground uppercase mb-1">
Frequency
</label>
<select className="w-full bg-kodo-void border border-kodo-steel rounded p-2 text-white text-sm">
@ -184,7 +184,7 @@ export const BackupsView: React.FC = () => {
</select>
</div>
<div>
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-1">
<label className="block text-xs font-bold text-muted-foreground uppercase mb-1">
Time
</label>
<input
@ -194,7 +194,7 @@ export const BackupsView: React.FC = () => {
/>
</div>
<div>
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-1">
<label className="block text-xs font-bold text-muted-foreground uppercase mb-1">
Retention
</label>
<select className="w-full bg-kodo-void border border-kodo-steel rounded p-2 text-white text-sm">

20
apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
View file

@ -30,7 +30,7 @@ export const CloudIntegrationView: React.FC = () => {
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
<div className="flex items-center gap-4">
<div
className={`w-16 h-16 rounded-full flex items-center justify-center ${isConnected ? 'bg-kodo-cyan text-black' : 'bg-kodo-steel text-kodo-content-dim'}`}
className={`w-16 h-16 rounded-full flex items-center justify-center ${isConnected ? 'bg-kodo-cyan text-black' : 'bg-kodo-steel text-muted-foreground'}`}
>
<Cloud className="w-8 h-8" />
</div>
@ -38,7 +38,7 @@ export const CloudIntegrationView: React.FC = () => {
<h2 className="text-2xl font-bold text-white">
Nextcloud Integration
</h2>
<p className="text-kodo-content-dim text-sm">
<p className="text-muted-foreground text-sm">
Sync your projects, samples, and presets.
</p>
</div>
@ -85,17 +85,17 @@ export const CloudIntegrationView: React.FC = () => {
<div className="bg-kodo-ink p-4 rounded-lg border border-kodo-steel text-center">
<Server className="w-6 h-6 text-kodo-steel mx-auto mb-2" />
<div className="text-sm font-bold text-white">{url}</div>
<div className="text-xs text-kodo-content-dim">Host</div>
<div className="text-xs text-muted-foreground">Host</div>
</div>
<div className="bg-kodo-ink p-4 rounded-lg border border-kodo-steel text-center">
<RefreshCw className="w-6 h-6 text-kodo-gold mx-auto mb-2" />
<div className="text-sm font-bold text-white">Every 15 mins</div>
<div className="text-xs text-kodo-content-dim">Sync Frequency</div>
<div className="text-xs text-muted-foreground">Sync Frequency</div>
</div>
<div className="bg-kodo-ink p-4 rounded-lg border border-kodo-steel text-center">
<Shield className="w-6 h-6 text-kodo-lime mx-auto mb-2" />
<div className="text-sm font-bold text-white">Encrypted</div>
<div className="text-xs text-kodo-content-dim">Status</div>
<div className="text-xs text-muted-foreground">Status</div>
</div>
</div>
)}
@ -112,7 +112,7 @@ export const CloudIntegrationView: React.FC = () => {
<div className="flex items-center justify-between">
<div>
<div className="text-sm text-white font-bold">Auto-Sync</div>
<div className="text-xs text-kodo-content-dim">
<div className="text-xs text-muted-foreground">
Automatically upload new projects
</div>
</div>
@ -127,7 +127,7 @@ export const CloudIntegrationView: React.FC = () => {
</div>
<div>
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
<label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
Sync Frequency
</label>
<select className="w-full bg-kodo-ink border border-kodo-steel rounded p-2 text-white outline-none focus:border-kodo-steel">
@ -139,7 +139,7 @@ export const CloudIntegrationView: React.FC = () => {
</div>
<div>
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
<label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
Selective Sync
</label>
<div className="flex gap-2">
@ -165,10 +165,10 @@ export const CloudIntegrationView: React.FC = () => {
<div className="text-4xl font-mono font-bold text-white mb-1">
65.4 GB
</div>
<div className="text-sm text-kodo-content-dim">used of 100 GB</div>
<div className="text-sm text-muted-foreground">used of 100 GB</div>
</div>
<ProgressBar value={65.4} color="cyan" />
<div className="text-xs text-kodo-content-dim flex justify-between">
<div className="text-xs text-muted-foreground flex justify-between">
<span>0 GB</span>
<span>100 GB</span>
</div>

8
apps/web/src/components/settings/data/DataExportModal.tsx
View file

@ -43,19 +43,19 @@ export const DataExportModal: React.FC<DataExportModalProps> = ({
<Database className="w-4 h-4 text-kodo-steel" /> Request Data Export
</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
</button>
</div>
<div className="p-6 space-y-6">
<p className="text-sm text-kodo-content-dim">
<p className="text-sm text-muted-foreground">
In compliance with GDPR/CCPA, you can request a copy of your
personal data. Generating this report usually takes{' '}
<span className="text-white font-bold">24-48 hours</span>.
</p>
<div>
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
<label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
Export Format
</label>
<select
@ -70,7 +70,7 @@ export const DataExportModal: React.FC<DataExportModalProps> = ({
</div>
<div>
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
<label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
Include Data
</label>
<div className="space-y-2">

10
apps/web/src/components/settings/data/DataExportView.tsx
View file

@ -29,7 +29,7 @@ export const DataExportView: React.FC = () => {
<div className="max-w-4xl mx-auto space-y-8 animate-fadeIn pb-20">
<div>
<h2 className="text-2xl font-bold text-white mb-2">YOUR DATA</h2>
<p className="text-kodo-content-dim font-mono text-sm">
<p className="text-muted-foreground font-mono text-sm">
Manage, export, and control your personal information.
</p>
</div>
@ -43,7 +43,7 @@ export const DataExportView: React.FC = () => {
<h3 className="font-bold text-white text-lg">
Request Data Archive
</h3>
<p className="text-kodo-content-dim text-sm mt-1 max-w-xl">
<p className="text-muted-foreground text-sm mt-1 max-w-xl">
You can request a download of all the data Veza has associated
with your account. This includes your profile, uploaded content
metadata, comments, and purchase history.
@ -68,12 +68,12 @@ export const DataExportView: React.FC = () => {
className="flex flex-col md:flex-row items-center justify-between p-4 bg-kodo-ink rounded-lg border border-kodo-steel"
>
<div className="flex items-center gap-4 mb-2 md:mb-0 w-full md:w-auto">
<FileText className="w-5 h-5 text-kodo-content-dim" />
<FileText className="w-5 h-5 text-muted-foreground" />
<div>
<div className="text-white font-bold text-sm">
{item.type}
</div>
<div className="text-xs text-kodo-content-dim flex gap-2">
<div className="text-xs text-muted-foreground flex gap-2">
<span>{item.date}</span>
<span>•</span>
<span>{item.size}</span>
@ -90,7 +90,7 @@ export const DataExportView: React.FC = () => {
Download
</Button>
) : (
<span className="text-xs text-kodo-content-dim bg-kodo-graphite px-4 py-1 rounded">
<span className="text-xs text-muted-foreground bg-kodo-graphite px-4 py-1 rounded">
Expired
</span>
)}

10
apps/web/src/components/settings/integrations/IntegrationsView.tsx
View file

@ -96,7 +96,7 @@ export const IntegrationsView: React.FC = () => {
<div className="space-y-6 animate-fadeIn pb-20">
<div>
<h2 className="text-2xl font-bold text-white mb-2">CONNECTED APPS</h2>
<p className="text-kodo-content-dim font-mono text-sm">
<p className="text-muted-foreground font-mono text-sm">
Supercharge your workflow with external tools.
</p>
</div>
@ -133,10 +133,10 @@ export const IntegrationsView: React.FC = () => {
</span>
)}
{integration.status === 'disconnected' && (
<span className="text-kodo-content-dim">Not Connected</span>
<span className="text-muted-foreground">Not Connected</span>
)}
{integration.lastSync && (
<span className="text-kodo-content-dim">
<span className="text-muted-foreground">
• {integration.lastSync}
</span>
)}
@ -150,12 +150,12 @@ export const IntegrationsView: React.FC = () => {
title="Sync Now"
onClick={() => addToast('Syncing...')}
>
<RefreshCw className="w-4 h-4 text-kodo-content-dim hover:text-white" />
<RefreshCw className="w-4 h-4 text-muted-foreground hover:text-white" />
</Button>
)}
</div>
<p className="text-kodo-content-dim text-sm mb-6 flex-1">
<p className="text-muted-foreground text-sm mb-6 flex-1">
{integration.description}
</p>

4
apps/web/src/components/social/CommentItem.tsx
View file

@ -37,7 +37,7 @@ export const CommentItem: React.FC<CommentItemProps> = ({
<span className="font-bold text-white cursor-pointer hover:underline">
{comment.author.name}
</span>
<span className="text-kodo-content-dim text-xs">{comment.timestamp}</span>
<span className="text-muted-foreground text-xs">{comment.timestamp}</span>
</div>
</div>
<p className="text-kodo-text-main leading-relaxed whitespace-pre-wrap">
@ -45,7 +45,7 @@ export const CommentItem: React.FC<CommentItemProps> = ({
</p>
</div>
<div className="flex items-center gap-4 mt-1 pl-2 text-xs text-kodo-content-dim">
<div className="flex items-center gap-4 mt-1 pl-2 text-xs text-muted-foreground">
<button
onClick={handleLike}
className={`flex items-center gap-1 hover:text-kodo-magenta transition-colors ${liked ? 'text-kodo-magenta' : ''}`}

12
apps/web/src/components/social/CreatePostModal.tsx
View file

@ -48,7 +48,7 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white">Create Post</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
</button>
</div>
@ -84,7 +84,7 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
{/* Suggestions */}
<div className="mt-4 flex flex-wrap gap-2 text-xs">
<span className="text-kodo-content-dim flex items-center gap-1">
<span className="text-muted-foreground flex items-center gap-1">
<Hash className="w-3 h-3" /> Trending:
</span>
{['Synthwave', 'NewGear', 'StudioLife', 'WIP'].map((tag) => (
@ -102,7 +102,7 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="flex gap-2">
<button
className={`p-2 rounded hover:bg-white/10 text-kodo-content-dim hover:text-white ${postType === 'image' ? 'text-kodo-steel' : ''}`}
className={`p-2 rounded hover:bg-white/10 text-muted-foreground hover:text-white ${postType === 'image' ? 'text-kodo-steel' : ''}`}
onClick={() => {
setPostType('image');
toast.info('Image upload simulated');
@ -112,7 +112,7 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
<ImageIcon className="w-5 h-5" />
</button>
<button
className="p-2 rounded hover:bg-white/10 text-kodo-content-dim hover:text-kodo-magenta"
className="p-2 rounded hover:bg-white/10 text-muted-foreground hover:text-kodo-magenta"
onClick={() => {
setPostType('video');
toast.info('Video upload simulated');
@ -122,7 +122,7 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
<Video className="w-5 h-5" />
</button>
<button
className="p-2 rounded hover:bg-white/10 text-kodo-content-dim hover:text-kodo-lime"
className="p-2 rounded hover:bg-white/10 text-muted-foreground hover:text-kodo-lime"
onClick={() => {
setPostType('audio');
toast.info('Audio upload simulated');
@ -132,7 +132,7 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
<Mic2 className="w-5 h-5" />
</button>
<button
className="p-2 rounded hover:bg-white/10 text-kodo-content-dim hover:text-kodo-gold"
className="p-2 rounded hover:bg-white/10 text-muted-foreground hover:text-kodo-gold"
onClick={() => {
setPostType('poll');
toast.info('Poll creator simulated');

14
apps/web/src/components/social/SharePostModal.tsx
View file

@ -36,7 +36,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white">Quote Post</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
</button>
</div>
<div className="p-4">
@ -57,7 +57,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
{post.author.name}
</span>
</div>
<p className="text-xs text-kodo-content-dim line-clamp-2">
<p className="text-xs text-muted-foreground line-clamp-2">
{post.content}
</p>
</div>
@ -91,7 +91,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white">Share Post</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
</button>
</div>
@ -108,7 +108,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
</div>
<div className="text-left">
<div className="text-white font-bold">Repost</div>
<div className="text-xs text-kodo-content-dim">
<div className="text-xs text-muted-foreground">
Instantly share with your followers
</div>
</div>
@ -123,7 +123,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
</div>
<div className="text-left">
<div className="text-white font-bold">Quote</div>
<div className="text-xs text-kodo-content-dim">
<div className="text-xs text-muted-foreground">
Repost with your own thoughts
</div>
</div>
@ -135,7 +135,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
className="w-full flex items-center gap-4 p-4 hover:bg-white/5 rounded-lg transition-colors group"
onClick={handleCopyLink}
>
<div className="w-10 h-10 rounded-full bg-kodo-graphite flex items-center justify-center text-kodo-content-dim group-hover:text-white">
<div className="w-10 h-10 rounded-full bg-kodo-graphite flex items-center justify-center text-muted-foreground group-hover:text-white">
<Link className="w-5 h-5" />
</div>
<div className="text-left">
@ -149,7 +149,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
onClose();
}}
>
<div className="w-10 h-10 rounded-full bg-kodo-graphite flex items-center justify-center text-kodo-content-dim group-hover:text-white">
<div className="w-10 h-10 rounded-full bg-kodo-graphite flex items-center justify-center text-muted-foreground group-hover:text-white">
<Mail className="w-5 h-5" />
</div>
<div className="text-left">

8
apps/web/src/components/social/connections/ConnectionsView.tsx
View file

@ -56,7 +56,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
<h2 className="text-3xl font-display font-bold text-white mb-2 capitalize">
{type}
</h2>
<p className="text-kodo-content-dim font-mono text-sm">
<p className="text-muted-foreground font-mono text-sm">
Managing your network.
</p>
</div>
@ -75,7 +75,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
<Button
variant="ghost"
size="sm"
className={filter === 'all' ? 'text-white' : 'text-kodo-content-dim'}
className={filter === 'all' ? 'text-white' : 'text-muted-foreground'}
onClick={() => setFilter('all')}
>
All
@ -83,7 +83,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
<Button
variant="ghost"
size="sm"
className={filter === 'mutual' ? 'text-white' : 'text-kodo-content-dim'}
className={filter === 'mutual' ? 'text-white' : 'text-muted-foreground'}
onClick={() => setFilter('mutual')}
>
Mutual
@ -91,7 +91,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
<Button
variant="ghost"
size="sm"
className={filter === 'recent' ? 'text-white' : 'text-kodo-content-dim'}
className={filter === 'recent' ? 'text-white' : 'text-muted-foreground'}
onClick={() => setFilter('recent')}
>
Recent

8
apps/web/src/components/social/groups/CreateGroupModal.tsx
View file

@ -51,7 +51,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
<Users className="w-5 h-5 text-kodo-steel" /> Create Community
</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
</button>
</div>
@ -61,7 +61,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
{coverImage ? (
<img src={coverImage} className="w-full h-full object-cover" />
) : (
<div className="text-kodo-content-dim flex flex-col items-center group-hover:text-white">
<div className="text-muted-foreground flex flex-col items-center group-hover:text-white">
<ImageIcon className="w-8 h-8 mb-2" />
<span className="text-xs font-bold uppercase">
Upload Cover Image
@ -86,7 +86,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
/>
<div>
<label className="block text-sm font-medium text-kodo-content-dim mb-2">
<label className="block text-sm font-medium text-muted-foreground mb-2">
Description
</label>
<textarea
@ -111,7 +111,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
<div className="text-sm font-bold text-white">
{isPrivate ? 'Private Group' : 'Public Group'}
</div>
<div className="text-xs text-kodo-content-dim">
<div className="text-xs text-muted-foreground">
{isPrivate ? 'Invite only' : 'Anyone can find and join'}
</div>
</div>

8
apps/web/src/components/social/groups/GroupsView.tsx
View file

@ -97,7 +97,7 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ onOpenGroup }) => {
<h2 className="text-3xl font-display font-bold text-white mb-2">
COMMUNITIES
</h2>
<p className="text-kodo-content-dim font-mono text-sm">
<p className="text-muted-foreground font-mono text-sm">
Connect with producers, labels, and fans.
</p>
</div>
@ -114,13 +114,13 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ onOpenGroup }) => {
<div className="flex bg-kodo-void rounded-lg p-1 border border-kodo-steel">
<button
onClick={() => setActiveTab('my_groups')}
className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold transition-colors ${activeTab === 'my_groups' ? 'bg-kodo-slate text-white' : 'text-kodo-content-dim hover:text-white'}`}
className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold transition-colors ${activeTab === 'my_groups' ? 'bg-kodo-slate text-white' : 'text-muted-foreground hover:text-white'}`}
>
<Users className="w-4 h-4" /> My Groups
</button>
<button
onClick={() => setActiveTab('discover')}
className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold transition-colors ${activeTab === 'discover' ? 'bg-kodo-slate text-white' : 'text-kodo-content-dim hover:text-white'}`}
className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold transition-colors ${activeTab === 'discover' ? 'bg-kodo-slate text-white' : 'text-muted-foreground hover:text-white'}`}
>
<Compass className="w-4 h-4" /> Discover
</button>
@ -152,7 +152,7 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ onOpenGroup }) => {
/>
))
) : (
<div className="col-span-full text-center py-24 text-kodo-content-dim">
<div className="col-span-full text-center py-24 text-muted-foreground">
<Users className="w-16 h-16 mx-auto mb-4 opacity-30" />
<p>No groups found. Try searching or create your own.</p>
</div>

2
apps/web/src/components/ui/FormField.tsx
View file

@ -121,7 +121,7 @@ export const FormField: React.FC<FormFieldProps> = ({
</label>
{children}
{helpText && !error && (
<p className="text-xs text-kodo-content-dim dark:text-kodo-content-dim">{helpText}</p>
<p className="text-xs text-muted-foreground dark:text-muted-foreground">{helpText}</p>
)}
{error && (
<p className="text-xs text-kodo-red dark:text-kodo-red">{error}</p>

8
apps/web/src/components/ui/ImageCropper.tsx
View file

@ -163,8 +163,8 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
{/* Controls */}
<div className="p-8 bg-kodo-ink border-t border-kodo-steel space-y-4">
<div className="flex items-center gap-4">
<span className="text-xs text-kodo-content-dim w-16">Zoom</span>
<ZoomIn className="w-4 h-4 text-kodo-content-dim" />
<span className="text-xs text-muted-foreground w-16">Zoom</span>
<ZoomIn className="w-4 h-4 text-muted-foreground" />
<input
type="range"
value={zoom}
@ -178,8 +178,8 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
</div>
<div className="flex items-center gap-4">
<span className="text-xs text-kodo-content-dim w-16">Rotate</span>
<RotateCw className="w-4 h-4 text-kodo-content-dim" />
<span className="text-xs text-muted-foreground w-16">Rotate</span>
<RotateCw className="w-4 h-4 text-muted-foreground" />
<input
type="range"
value={rotation}

6
apps/web/src/components/ui/LoadingState.tsx
View file

@ -120,11 +120,11 @@ export function LoadingState({
return (
<div className={cn('flex items-center gap-2', className)}>
<Loader2
className={cn('animate-spin text-kodo-content-dim', sizeClasses[size])}
className={cn('animate-spin text-muted-foreground', sizeClasses[size])}
aria-hidden="true"
/>
{displayText && (
<span className="text-sm text-kodo-content-dim dark:text-kodo-content-dim">
<span className="text-sm text-muted-foreground dark:text-muted-foreground">
{displayText}
</span>
)}
@ -156,7 +156,7 @@ export function LoadingState({
return (
<Loader2
className={cn('animate-spin text-kodo-content-dim', sizeClasses[size], className)}
className={cn('animate-spin text-muted-foreground', sizeClasses[size], className)}
aria-label={displayText}
role="status"
/>

2
apps/web/src/components/ui/Toast.tsx
View file

@ -101,7 +101,7 @@ export const Toast: React.FC<ToastProps> = ({ id, type, message, onClose }) => {
<p className="flex-1 text-sm font-medium">{message}</p>
<button
onClick={() => onClose(id)}
className="text-kodo-content-dim hover:text-white transition-colors"
className="text-muted-foreground hover:text-white transition-colors"
>
<X className="w-4 h-4" />
</button>

2
apps/web/src/components/ui/avatar.tsx
View file

@ -160,7 +160,7 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
{src ? (
<img src={src} alt={alt} className="w-full h-full object-cover" />
) : (
<span className="font-bold text-kodo-content-dim">{initials}</span>
<span className="font-bold text-muted-foreground">{initials}</span>
)}
</div>

2
apps/web/src/components/ui/label.tsx
View file

@ -38,7 +38,7 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
<label
ref={ref}
className={cn(
'text-sm font-medium leading-none text-kodo-content-dim peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
'text-sm font-medium leading-none text-muted-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
className,
)}
{...props}

2
apps/web/src/components/ui/lazy-component/LazyErrorFallback.tsx
View file

@ -31,7 +31,7 @@ export function LazyErrorFallback({
<AlertTriangle className="h-8 w-8 text-kodo-red" />
</div>
<h2 className="text-xl font-bold mb-2">Failed to load {pageName}</h2>
<p className="text-kodo-content-dim mb-6 text-sm">
<p className="text-muted-foreground mb-6 text-sm">
{getErrorMessage(error)}
</p>
<div className="flex flex-col gap-3">

2
apps/web/src/components/ui/loading-spinner.tsx
View file

@ -85,7 +85,7 @@ export function LoadingSpinner({
<span className="sr-only">Chargement...</span>
</div>
{text && (
<p className="mt-2 text-sm text-kodo-content-dim dark:text-kodo-content-dim">{text}</p>
<p className="mt-2 text-sm text-muted-foreground dark:text-muted-foreground">{text}</p>
)}
</div>
);

2
apps/web/src/components/ui/progress.tsx
View file

@ -167,7 +167,7 @@ export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
/>
</div>
{(labelLeft || labelRight) && (
<div className="flex justify-between text-xs text-kodo-content-dim mt-1 font-mono">
<div className="flex justify-between text-xs text-muted-foreground mt-1 font-mono">
<span>{labelLeft}</span>
<span>{labelRight}</span>
</div>

4
apps/web/src/components/ui/table.tsx
View file

@ -165,7 +165,7 @@ const TableHead = React.forwardRef<
<th
ref={ref}
className={cn(
'h-12 px-4 text-left align-middle font-bold text-kodo-content-dim uppercase tracking-wider [&:has([role=checkbox])]:pr-0',
'h-12 px-4 text-left align-middle font-bold text-muted-foreground uppercase tracking-wider [&:has([role=checkbox])]:pr-0',
className,
)}
{...props}
@ -209,7 +209,7 @@ const TableCaption = React.forwardRef<
>(({ className, ...props }, ref) => (
<caption
ref={ref}
className={cn('mt-4 text-sm text-kodo-content-dim', className)}
className={cn('mt-4 text-sm text-muted-foreground', className)}
{...props}
/>
));

2
apps/web/src/components/ui/textarea.tsx
View file

@ -74,7 +74,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
return (
<div className="w-full">
{label && (
<label className="block text-sm font-medium text-kodo-content-dim mb-2 font-body">
<label className="block text-sm font-medium text-muted-foreground mb-2 font-body">
{label}
</label>
)}

2
apps/web/src/components/upload/metadata/MetadataEditor.tsx
View file

@ -145,7 +145,7 @@ export const MetadataEditor: React.FC<MetadataEditorProps> = ({
<h3 className="font-bold text-white text-lg">
{currentMeta.title || currentFile.file.name}
</h3>
<p className="text-xs text-kodo-content-dim font-mono">
<p className="text-xs text-muted-foreground font-mono">
{currentMeta.artist || 'Unknown Artist'} • {currentIndex + 1} of{' '}
{files.length}
</p>

4
apps/web/src/features/auth/pages/VerifyEmailPage.tsx
View file

@ -151,7 +151,7 @@ export function VerifyEmailPage() {
<div className="flex justify-center" aria-hidden="true">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
</div>
<p className="text-kodo-content-dim">{message}</p>
<p className="text-muted-foreground">{message}</p>
<span className="sr-only">
Vérification de votre email en cours, veuillez patienter
</span>
@ -175,7 +175,7 @@ export function VerifyEmailPage() {
>
<p className="font-medium">Succès !</p>
<p className="text-sm mt-1">{message}</p>
<p className="text-xs mt-2 text-kodo-content-dim">
<p className="text-xs mt-2 text-muted-foreground">
Vous allez être redirigé vers la page de connexion...
</p>
</div>

8
apps/web/src/features/error/pages/ServerErrorPage.tsx
View file

@ -53,7 +53,7 @@ function ServerErrorPage() {
<div className="text-6xl font-bold text-foreground">
500
</div>
<p className="text-kodo-content-dim dark:text-kodo-content-dim">
<p className="text-muted-foreground dark:text-muted-foreground">
Nous nous excusons pour la gêne occasionnée. Notre équipe
technique a été automatiquement notifiée et travaille à résoudre
le problème.
@ -104,13 +104,13 @@ function ServerErrorPage() {
Besoin d'aide ?
</p>
<div className="space-y-2">
<div className="flex items-center gap-2 text-sm text-kodo-content-dim dark:text-kodo-content-dim">
<div className="flex items-center gap-2 text-sm text-muted-foreground dark:text-muted-foreground">
<CheckCircle className="h-4 w-4 text-success" />
<span>
L'erreur a été automatiquement signalée à notre équipe
</span>
</div>
<div className="flex items-center gap-2 text-sm text-kodo-content-dim dark:text-kodo-content-dim">
<div className="flex items-center gap-2 text-sm text-muted-foreground dark:text-muted-foreground">
<Mail className="h-4 w-4 text-kodo-steel" />
<span>
Contactez le support si le problème persiste après plusieurs
@ -125,7 +125,7 @@ function ServerErrorPage() {
<summary className="text-sm font-medium text-foreground cursor-pointer hover:text-kodo-text-main dark:hover:text-kodo-text-main">
Détails techniques
</summary>
<div className="mt-2 p-4 bg-muted rounded text-xs font-mono text-kodo-content-dim dark:text-kodo-content-dim">
<div className="mt-2 p-4 bg-muted rounded text-xs font-mono text-muted-foreground dark:text-muted-foreground">
<p>Code d'erreur: 500 Internal Server Error</p>
<p>Timestamp: {new Date().toISOString()}</p>
<p>User Agent: {navigator.userAgent}</p>

2
apps/web/src/features/playlists/components/playlist-list/PlaylistListToolbar.tsx
View file

@ -58,7 +58,7 @@ export function PlaylistListToolbar({
'touch-manipulation',
currentView === 'list'
? 'bg-white dark:bg-kodo-steel text-kodo-cyan dark:text-kodo-cyan shadow-sm'
: 'text-kodo-content-dim dark:text-kodo-content-dim',
: 'text-muted-foreground dark:text-muted-foreground',
)}
aria-label="Affichage en liste"
aria-pressed={currentView === 'list'}

2
apps/web/src/features/playlists/pages/PlaylistListPage.tsx
View file

@ -106,7 +106,7 @@ export function PlaylistListPage() {
<div className="space-y-4">
<div className="flex items-center gap-4">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-kodo-content-dim" />
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
type="text"
value={searchQuery}

6
apps/web/src/features/studio/components/cloud-file-browser/FileGridCard.tsx
View file

@ -19,9 +19,9 @@ function FileTypeIcon({ type, size = 'md' }: { type: CloudFileNode['type']; size
if (type === 'audio') return <Music className={cn(cl, 'text-kodo-steel')} />;
if (type === 'image') return <ImageIcon className={cn(cl, 'text-primary')} />;
if (['document', 'archive', 'project'].includes(type)) {
return <File className={cn(cl, 'text-kodo-content-dim')} />;
return <File className={cn(cl, 'text-muted-foreground')} />;
}
return <File className={cn(cl, 'text-kodo-content-dim')} />;
return <File className={cn(cl, 'text-muted-foreground')} />;
}
export function FileGridCard({
@ -93,7 +93,7 @@ export function FileGridCard({
{file.tags?.slice(0, 2).map((t) => (
<span
key={t}
className="text-xs bg-white/10 px-1 rounded text-kodo-content-dim"
className="text-xs bg-white/10 px-1 rounded text-muted-foreground"
>
{t}
</span>

2
apps/web/src/features/studio/components/cloud-file-browser/FileTable.tsx
View file

@ -39,7 +39,7 @@ export function FileTable({
)}
>
<table className="w-full text-left border-collapse">
<thead className="bg-kodo-ink text-xs font-mono text-kodo-content-dim uppercase tracking-wider sticky top-0 z-10">
<thead className="bg-kodo-ink text-xs font-mono text-muted-foreground uppercase tracking-wider sticky top-0 z-10">
<tr>
<th className="p-4 w-10">
<button

4
apps/web/src/features/studio/components/cloud-file-browser/FileTableRow.tsx
View file

@ -117,8 +117,8 @@ export function FileTableRow({
))}
</div>
</td>
<td className="p-4 text-kodo-content-dim font-mono text-xs">{file.size}</td>
<td className="p-4 text-kodo-content-dim text-xs">{file.modified}</td>
<td className="p-4 text-muted-foreground font-mono text-xs">{file.size}</td>
<td className="p-4 text-muted-foreground text-xs">{file.modified}</td>
<td className="p-4 text-right">
<div className="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
{file.type === 'audio' && (

4
apps/web/src/features/studio/components/cloud-file-browser/FileToolbar.tsx
View file

@ -118,7 +118,7 @@ export function FileToolbar({
'px-2 py-1 rounded text-xs border transition-colors whitespace-nowrap',
activeTags.includes(tag)
? 'bg-kodo-cyan/20 border-kodo-cyan text-kodo-cyan'
: 'border-kodo-steel text-kodo-content-dim hover:border-kodo-steel'
: 'border-kodo-steel text-muted-foreground hover:border-kodo-steel'
)}
>
{tag}
@ -178,7 +178,7 @@ export function FileToolbar({
<Stamp className="w-4 h-4" />
</Button>
<div className="bg-kodo-void rounded-lg p-1 border border-kodo-steel flex items-center">
<span className="text-xs text-kodo-content-dim px-2 uppercase font-bold">
<span className="text-xs text-muted-foreground px-2 uppercase font-bold">
Sort:
</span>
<select