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

consistency: auto-migrate Tailwind default colors (Batch 4, 114 instances)

Browse source
This commit is contained in:
senke 2026-01-16 01:56:34 +01:00
parent c0b8be0c77
commit 226e970da2
10 changed files with 103 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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-gray-400 font-mono text-sm">
<p className="text-kodo-content-dim 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-gray-400 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-kodo-content-dim 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-gray-400 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-kodo-content-dim 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-20 text-gray-500">
<div className="col-span-full text-center py-20 text-kodo-content-dim">
<Users className="w-16 h-16 mx-auto mb-4 opacity-30" />
<p>No groups found. Try searching or create your own.</p>
</div>

14
apps/web/src/components/studio/AIToolsView.tsx
View file

@ -91,16 +91,16 @@ export const AIToolsView: React.FC = () => {
className={`p-4 rounded-xl border text-left transition-all group ${activeTool === tool.id ? 'bg-kodo-cyan/10 border-kodo-cyan' : 'bg-kodo-graphite border-kodo-steel hover:bg-white/5'}`}
>
<div
className={`w-10 h-10 rounded-lg flex items-center justify-center mb-3 ${activeTool === tool.id ? 'bg-kodo-cyan text-black' : 'bg-kodo-ink text-gray-400 group-hover:text-white'}`}
className={`w-10 h-10 rounded-lg flex items-center justify-center mb-3 ${activeTool === tool.id ? 'bg-kodo-cyan text-black' : 'bg-kodo-ink text-kodo-content-dim group-hover:text-white'}`}
>
{tool.icon}
</div>
<div
className={`font-bold text-sm ${activeTool === tool.id ? 'text-white' : 'text-gray-300'}`}
className={`font-bold text-sm ${activeTool === tool.id ? 'text-white' : 'text-kodo-text-main'}`}
>
{tool.label}
</div>
<div className="text-[10px] text-gray-500 mt-1 leading-tight">
<div className="text-[10px] text-kodo-content-dim mt-1 leading-tight">
{tool.desc}
</div>
</button>
@ -115,7 +115,7 @@ export const AIToolsView: React.FC = () => {
{!isProcessing && !result && (
<div className="w-full max-w-md">
<FileUpload onUpload={handleUpload} />
<p className="text-center text-xs text-gray-500 mt-4">
<p className="text-center text-xs text-kodo-content-dim mt-4">
Supported formats: WAV, MP3, FLAC, AIFF. Max 100MB.
</p>
</div>
@ -127,7 +127,7 @@ export const AIToolsView: React.FC = () => {
<h3 className="text-xl font-bold text-white animate-pulse">
Processing Audio...
</h3>
<p className="text-gray-400 text-sm">
<p className="text-kodo-content-dim text-sm">
Separating frequencies and analyzing waveforms.
</p>
<UploadProgressBar progress={progress} status="processing" />
@ -140,7 +140,7 @@ export const AIToolsView: React.FC = () => {
<CheckCircle className="w-6 h-6 text-kodo-lime" />
<div>
<h3 className="font-bold text-white">Analysis Complete</h3>
<p className="text-xs text-gray-300">{result.fileName}</p>
<p className="text-xs text-kodo-text-main">{result.fileName}</p>
</div>
<Button
variant="ghost"
@ -152,7 +152,7 @@ export const AIToolsView: React.FC = () => {
</Button>
</div>
<h4 className="text-sm font-bold text-gray-400 uppercase mb-4 tracking-wider">
<h4 className="text-sm font-bold text-kodo-content-dim uppercase mb-4 tracking-wider">
Output Files
</h4>
<div className="grid grid-cols-1 gap-3">

36
apps/web/src/components/studio/CloudFileBrowser.tsx
View file

@ -180,12 +180,12 @@ export const CloudFileBrowser: React.FC = () => {
{/* Tag Filter */}
<div className="flex items-center gap-2 overflow-x-auto no-scrollbar pb-2 sm:pb-0">
<Filter className="w-4 h-4 text-gray-500 shrink-0" />
<Filter className="w-4 h-4 text-kodo-content-dim shrink-0" />
{availableTags.slice(0, 5).map((tag) => (
<button
key={tag}
onClick={() => toggleTag(tag)}
className={`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-gray-400 hover:border-gray-400'}`}
className={`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'}`}
>
{tag}
</button>
@ -244,7 +244,7 @@ export const CloudFileBrowser: React.FC = () => {
<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-gray-500 px-2 uppercase font-bold">
<span className="text-xs text-kodo-content-dim px-2 uppercase font-bold">
Sort:
</span>
<select
@ -261,7 +261,7 @@ export const CloudFileBrowser: React.FC = () => {
onClick={() =>
setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')
}
className="ml-2 p-1 hover:text-white text-gray-400"
className="ml-2 p-1 hover:text-white text-kodo-content-dim"
>
{sortOrder === 'asc' ? (
<ArrowUp className="w-3 h-3" />
@ -274,13 +274,13 @@ export const CloudFileBrowser: React.FC = () => {
<div className="bg-kodo-void p-1 rounded-lg border border-kodo-steel flex">
<button
onClick={() => setViewMode('list')}
className={`p-2 rounded ${viewMode === 'list' ? 'bg-kodo-slate text-white' : 'text-gray-400 hover:text-white'}`}
className={`p-2 rounded ${viewMode === 'list' ? 'bg-kodo-slate text-white' : 'text-kodo-content-dim hover:text-white'}`}
>
<List className="w-4 h-4" />
</button>
<button
onClick={() => setViewMode('grid')}
className={`p-2 rounded ${viewMode === 'grid' ? 'bg-kodo-slate text-white' : 'text-gray-400 hover:text-white'}`}
className={`p-2 rounded ${viewMode === 'grid' ? 'bg-kodo-slate text-white' : 'text-kodo-content-dim hover:text-white'}`}
>
<LayoutGrid className="w-4 h-4" />
</button>
@ -294,7 +294,7 @@ export const CloudFileBrowser: React.FC = () => {
{viewMode === 'list' ? (
<div className="bg-kodo-graphite border border-kodo-steel rounded-xl overflow-hidden">
<table className="w-full text-left border-collapse">
<thead className="bg-kodo-ink text-xs font-mono text-gray-500 uppercase tracking-wider sticky top-0 z-10">
<thead className="bg-kodo-ink text-xs font-mono text-kodo-content-dim uppercase tracking-wider sticky top-0 z-10">
<tr>
<th className="p-4 w-10">
<div
@ -340,7 +340,7 @@ export const CloudFileBrowser: React.FC = () => {
<td className="p-4">
<div
onClick={() => toggleSelection(file.id)}
className="cursor-pointer text-gray-500 hover:text-white"
className="cursor-pointer text-kodo-content-dim hover:text-white"
>
{selectedFiles.includes(file.id) ? (
<CheckSquare className="w-4 h-4 text-kodo-cyan" />
@ -365,8 +365,8 @@ export const CloudFileBrowser: React.FC = () => {
)}
{['document', 'archive', 'project'].includes(
file.type,
) && <File className="w-5 h-5 text-gray-400" />}
<span className="font-medium text-gray-200 group-hover:text-white transition-colors">
) && <File className="w-5 h-5 text-kodo-content-dim" />}
<span className="font-medium text-kodo-text-main group-hover:text-white transition-colors">
{file.name}
</span>
</div>
@ -376,17 +376,17 @@ export const CloudFileBrowser: React.FC = () => {
{file.tags?.map((t) => (
<span
key={t}
className="text-[10px] bg-kodo-slate px-1.5 py-0.5 rounded text-gray-400 border border-kodo-steel"
className="text-[10px] bg-kodo-slate px-1.5 py-0.5 rounded text-kodo-content-dim border border-kodo-steel"
>
{t}
</span>
))}
</div>
</td>
<td className="p-4 text-gray-400 font-mono text-xs">
<td className="p-4 text-kodo-content-dim font-mono text-xs">
{file.size}
</td>
<td className="p-4 text-gray-400 text-xs">
<td className="p-4 text-kodo-content-dim text-xs">
{file.modified}
</td>
<td className="p-4 text-right">
@ -400,10 +400,10 @@ export const CloudFileBrowser: React.FC = () => {
<Wand2 className="w-4 h-4" />
</button>
)}
<button className="p-1.5 hover:bg-white/10 rounded text-gray-400 hover:text-white">
<button className="p-1.5 hover:bg-white/10 rounded text-kodo-content-dim hover:text-white">
<Share2 className="w-4 h-4" />
</button>
<button className="p-1.5 hover:bg-white/10 rounded text-gray-400 hover:text-white">
<button className="p-1.5 hover:bg-white/10 rounded text-kodo-content-dim hover:text-white">
<MoreVertical className="w-4 h-4" />
</button>
</div>
@ -432,7 +432,7 @@ export const CloudFileBrowser: React.FC = () => {
{selectedFiles.includes(file.id) ? (
<CheckSquare className="w-4 h-4 text-kodo-cyan" />
) : (
<Square className="w-4 h-4 text-gray-400 hover:text-white" />
<Square className="w-4 h-4 text-kodo-content-dim hover:text-white" />
)}
</div>
@ -447,7 +447,7 @@ export const CloudFileBrowser: React.FC = () => {
<ImageIcon className="w-8 h-8 text-kodo-magenta" />
)}
{['document', 'archive', 'project'].includes(file.type) && (
<File className="w-8 h-8 text-gray-400" />
<File className="w-8 h-8 text-kodo-content-dim" />
)}
</div>
<div className="w-full">
@ -461,7 +461,7 @@ export const CloudFileBrowser: React.FC = () => {
{file.tags?.slice(0, 2).map((t) => (
<span
key={t}
className="text-[8px] bg-white/10 px-1 rounded text-gray-400"
className="text-[8px] bg-white/10 px-1 rounded text-kodo-content-dim"
>
{t}
</span>

14
apps/web/src/components/studio/CloudSettingsView.tsx
View file

@ -21,24 +21,24 @@ export const CloudSettingsView: React.FC = () => {
<div className="text-5xl font-display font-bold text-white mb-2">
65.4 GB
</div>
<div className="text-sm text-gray-400">used of 100 GB (Pro Plan)</div>
<div className="text-sm text-kodo-content-dim">used of 100 GB (Pro Plan)</div>
</div>
<ProgressBar value={65.4} color="cyan" />
<div className="grid grid-cols-3 gap-4 mt-8 text-center">
<div className="p-3 bg-kodo-ink rounded border border-kodo-steel/50">
<div className="text-xs text-gray-500 uppercase font-bold">
<div className="text-xs text-kodo-content-dim uppercase font-bold">
Audio
</div>
<div className="text-lg font-bold text-white">45 GB</div>
</div>
<div className="p-3 bg-kodo-ink rounded border border-kodo-steel/50">
<div className="text-xs text-gray-500 uppercase font-bold">
<div className="text-xs text-kodo-content-dim uppercase font-bold">
Projects
</div>
<div className="text-lg font-bold text-white">15 GB</div>
</div>
<div className="p-3 bg-kodo-ink rounded border border-kodo-steel/50">
<div className="text-xs text-gray-500 uppercase font-bold">
<div className="text-xs text-kodo-content-dim uppercase font-bold">
Other
</div>
<div className="text-lg font-bold text-white">5.4 GB</div>
@ -59,7 +59,7 @@ export const CloudSettingsView: React.FC = () => {
<div className="space-y-6">
<div>
<label className="block text-sm font-bold text-gray-400 mb-2 flex items-center gap-2">
<label className="block text-sm font-bold text-kodo-content-dim mb-2 flex items-center gap-2">
<Clock className="w-4 h-4" /> Trash Retention Policy
</label>
<select
@ -72,13 +72,13 @@ export const CloudSettingsView: React.FC = () => {
<option value="90">90 Days</option>
<option value="forever">Never Delete</option>
</select>
<p className="text-xs text-gray-500 mt-1">
<p className="text-xs text-kodo-content-dim mt-1">
Deleted files are permanently removed after this period.
</p>
</div>
<div>
<label className="block text-sm font-bold text-gray-400 mb-2 flex items-center gap-2">
<label className="block text-sm font-bold text-kodo-content-dim mb-2 flex items-center gap-2">
<MapPin className="w-4 h-4" /> Storage Region
</label>
<select

18
apps/web/src/components/studio/ConnectivityView.tsx
View file

@ -51,7 +51,7 @@ export const ConnectivityView: React.FC = () => {
<Folder className="w-5 h-5 text-kodo-gold" /> Directory Mount
(WebDAV)
</h3>
<p className="text-sm text-gray-400 mt-1">
<p className="text-sm text-kodo-content-dim mt-1">
Access your Cloud Studio files directly from your OS file explorer
or DAW.
</p>
@ -63,11 +63,11 @@ export const ConnectivityView: React.FC = () => {
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 bg-kodo-ink p-6 rounded-xl border border-kodo-steel">
<div>
<label className="block text-xs font-bold text-gray-500 uppercase mb-2">
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
Server URL
</label>
<div className="flex gap-2">
<div className="flex-1 bg-kodo-graphite border border-kodo-steel rounded px-3 py-2 text-sm text-gray-300 font-mono truncate">
<div className="flex-1 bg-kodo-graphite border border-kodo-steel rounded px-3 py-2 text-sm text-kodo-text-main font-mono truncate">
https://webdav.veza.io/u/cyber_producer
</div>
<Button
@ -83,11 +83,11 @@ export const ConnectivityView: React.FC = () => {
</div>
</div>
<div>
<label className="block text-xs font-bold text-gray-500 uppercase mb-2">
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
Username
</label>
<div className="flex gap-2">
<div className="flex-1 bg-kodo-graphite border border-kodo-steel rounded px-3 py-2 text-sm text-gray-300 font-mono">
<div className="flex-1 bg-kodo-graphite border border-kodo-steel rounded px-3 py-2 text-sm text-kodo-text-main font-mono">
cyber_producer
</div>
<Button
@ -101,7 +101,7 @@ export const ConnectivityView: React.FC = () => {
</div>
</div>
<div className="md:col-span-2">
<label className="block text-xs font-bold text-gray-500 uppercase mb-2">
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
Mount Password
</label>
<div className="flex gap-2">
@ -112,7 +112,7 @@ export const ConnectivityView: React.FC = () => {
Generate New
</Button>
</div>
<p className="text-[10px] text-gray-500 mt-2">
<p className="text-[10px] text-kodo-content-dim mt-2">
Use this specific password for mounting. Do not use your account
login password.
</p>
@ -127,7 +127,7 @@ export const ConnectivityView: React.FC = () => {
<h3 className="text-xl font-bold text-white flex items-center gap-2">
<Globe className="w-5 h-5 text-kodo-cyan" /> Storage Webhooks
</h3>
<p className="text-sm text-gray-400 mt-1">
<p className="text-sm text-kodo-content-dim mt-1">
Trigger actions in external apps when files change.
</p>
</div>
@ -159,7 +159,7 @@ export const ConnectivityView: React.FC = () => {
<div className="text-sm font-mono text-white truncate">
{hook.url}
</div>
<div className="text-xs text-gray-500 mt-1 flex gap-2">
<div className="text-xs text-kodo-content-dim mt-1 flex gap-2">
{hook.events.map((ev) => (
<span key={ev} className="bg-white/5 px-1 rounded">
{ev}

30
apps/web/src/components/studio/GoLiveView.tsx
View file

@ -50,20 +50,20 @@ export const GoLiveView: React.FC = () => {
<div>
<h1 className="text-3xl font-display font-bold text-white mb-2 flex items-center gap-3">
<Radio
className={`w-8 h-8 ${isLive ? 'text-kodo-red animate-pulse' : 'text-gray-500'}`}
className={`w-8 h-8 ${isLive ? 'text-kodo-red animate-pulse' : 'text-kodo-content-dim'}`}
/>
BROADCAST STUDIO
</h1>
<p className="text-gray-400 font-mono text-sm">
<p className="text-kodo-content-dim font-mono text-sm">
Configure your stream and go live.
</p>
</div>
<div className="flex gap-3">
<div
className={`px-4 py-2 rounded-lg border flex items-center gap-2 font-bold ${isLive ? 'bg-kodo-red text-white border-kodo-red' : 'bg-kodo-ink text-gray-500 border-kodo-steel'}`}
className={`px-4 py-2 rounded-lg border flex items-center gap-2 font-bold ${isLive ? 'bg-kodo-red text-white border-kodo-red' : 'bg-kodo-ink text-kodo-content-dim border-kodo-steel'}`}
>
<div
className={`w-3 h-3 rounded-full ${isLive ? 'bg-white animate-pulse' : 'bg-gray-600'}`}
className={`w-3 h-3 rounded-full ${isLive ? 'bg-white animate-pulse' : 'bg-kodo-steel'}`}
></div>
{isLive ? 'LIVE' : 'OFFLINE'}
</div>
@ -94,15 +94,15 @@ export const GoLiveView: React.FC = () => {
{/* Preview Player */}
<div className="aspect-video bg-black rounded-xl overflow-hidden border border-kodo-steel relative group">
{isLive ? (
<div className="w-full h-full flex items-center justify-center bg-gray-900">
<div className="w-full h-full flex items-center justify-center bg-kodo-ink">
{/* Mock live feed */}
<div className="text-center animate-pulse">
<Radio className="w-16 h-16 text-kodo-red mx-auto mb-4" />
<p className="text-gray-400">Receiving Stream Data...</p>
<p className="text-kodo-content-dim">Receiving Stream Data...</p>
</div>
</div>
) : (
<div className="w-full h-full flex items-col items-center justify-center bg-kodo-ink/50 text-gray-500">
<div className="w-full h-full flex items-col items-center justify-center bg-kodo-ink/50 text-kodo-content-dim">
<div className="text-center">
<Monitor className="w-16 h-16 mx-auto mb-4 opacity-50" />
<p>Stream Offline</p>
@ -125,7 +125,7 @@ export const GoLiveView: React.FC = () => {
onChange={(e) => setTitle(e.target.value)}
/>
<div>
<label className="block text-sm font-medium text-gray-400 mb-2">
<label className="block text-sm font-medium text-kodo-content-dim mb-2">
Category
</label>
<select
@ -165,12 +165,12 @@ export const GoLiveView: React.FC = () => {
<div className="space-y-4">
<div>
<label className="block text-xs font-bold text-gray-500 uppercase mb-2">
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
Server URL
</label>
<div className="flex gap-2">
<input
className="flex-1 bg-kodo-ink border border-kodo-steel rounded px-3 py-2 text-sm text-gray-300 font-mono"
className="flex-1 bg-kodo-ink border border-kodo-steel rounded px-3 py-2 text-sm text-kodo-text-main font-mono"
value={serverUrl}
readOnly
/>
@ -186,12 +186,12 @@ export const GoLiveView: React.FC = () => {
</div>
<div>
<label className="block text-xs font-bold text-gray-500 uppercase mb-2">
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
Stream Key
</label>
<div className="flex gap-2">
<input
className="flex-1 bg-kodo-ink border border-kodo-steel rounded px-3 py-2 text-sm text-gray-300 font-mono"
className="flex-1 bg-kodo-ink border border-kodo-steel rounded px-3 py-2 text-sm text-kodo-text-main font-mono"
value={
streamKeyVisible ? streamKey : '•••••••••••••••••••••••••'
}
@ -230,7 +230,7 @@ export const GoLiveView: React.FC = () => {
<h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider">
Quick Instructions
</h3>
<ol className="text-sm text-gray-400 space-y-2 list-decimal pl-4">
<ol className="text-sm text-kodo-content-dim space-y-2 list-decimal pl-4">
<li>Open OBS or Streamlabs.</li>
<li>Go to Settings {'>'} Stream.</li>
<li>Select "Custom" service.</li>
@ -241,10 +241,10 @@ export const GoLiveView: React.FC = () => {
<div className="bg-kodo-ink p-4 rounded-xl border border-kodo-steel">
<div className="flex items-center justify-between mb-2">
<span className="text-sm text-gray-300">Microphone</span>
<span className="text-sm text-kodo-text-main">Microphone</span>
<Mic className="w-4 h-4 text-kodo-lime" />
</div>
<div className="w-full bg-gray-800 h-2 rounded-full overflow-hidden">
<div className="w-full bg-kodo-graphite h-2 rounded-full overflow-hidden">
<div className="h-full bg-kodo-lime w-[60%] animate-pulse"></div>
</div>
</div>

24
apps/web/src/components/studio/ProjectsManager.tsx
View file

@ -158,7 +158,7 @@ export const ProjectsManager: React.FC = () => {
<h2 className="text-2xl font-display font-bold text-white mb-2">
ACTIVE PROJECTS
</h2>
<p className="text-gray-400 font-mono text-sm">
<p className="text-kodo-content-dim font-mono text-sm">
Track progress across all your workstations.
</p>
</div>
@ -184,7 +184,7 @@ export const ProjectsManager: React.FC = () => {
{['All', 'Ableton', 'FL Studio', 'Logic Pro'].map((daw) => (
<button
key={daw}
className={`px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider transition-colors border ${filter === daw ? 'bg-kodo-cyan text-black border-kodo-cyan' : 'bg-kodo-slate text-gray-400 border-transparent hover:border-gray-500'}`}
className={`px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider transition-colors border ${filter === daw ? 'bg-kodo-cyan text-black border-kodo-cyan' : 'bg-kodo-slate text-kodo-content-dim border-transparent hover:border-kodo-steel'}`}
onClick={() => setFilter(daw)}
>
{daw}
@ -196,7 +196,7 @@ export const ProjectsManager: React.FC = () => {
<button className="p-1.5 rounded bg-kodo-slate text-white">
<LayoutGrid className="w-4 h-4" />
</button>
<button className="p-1.5 rounded text-gray-500 hover:text-white">
<button className="p-1.5 rounded text-kodo-content-dim hover:text-white">
<List className="w-4 h-4" />
</button>
</div>
@ -234,26 +234,26 @@ export const ProjectsManager: React.FC = () => {
addToast('Options menu');
}}
>
<MoreVertical className="w-4 h-4 text-gray-500 hover:text-white" />
<MoreVertical className="w-4 h-4 text-kodo-content-dim hover:text-white" />
</div>
</div>
<h3 className="text-xl font-bold text-white mb-1 group-hover:text-kodo-cyan transition-colors truncate">
{project.name}
</h3>
<p className="text-xs text-gray-500 mb-4 font-mono">
<p className="text-xs text-kodo-content-dim mb-4 font-mono">
Last edited {project.modified}
</p>
<div className="grid grid-cols-2 gap-2 mb-4">
<div className="bg-white/5 p-2 rounded text-center border border-white/5">
<div className="text-[10px] text-gray-400 uppercase font-bold">
<div className="text-[10px] text-kodo-content-dim uppercase font-bold">
BPM
</div>
<div className="font-bold text-white">{project.bpm}</div>
</div>
<div className="bg-white/5 p-2 rounded text-center border border-white/5">
<div className="text-[10px] text-gray-400 uppercase font-bold">
<div className="text-[10px] text-kodo-content-dim uppercase font-bold">
Key
</div>
<div className="font-bold text-white">{project.key}</div>
@ -262,7 +262,7 @@ export const ProjectsManager: React.FC = () => {
<div className="mb-4">
<div className="flex justify-between text-xs mb-1">
<span className="text-gray-400 font-bold">
<span className="text-kodo-content-dim font-bold">
{project.status}
</span>
<span className="text-kodo-cyan">{project.progress}%</span>
@ -275,9 +275,9 @@ export const ProjectsManager: React.FC = () => {
</div>
</div>
<div className="flex justify-between items-center pt-4 border-t border-gray-800">
<div className="flex justify-between items-center pt-4 border-t border-kodo-steel">
<div className="flex -space-x-2">
<div className="w-6 h-6 rounded-full bg-gray-600 border border-black"></div>
<div className="w-6 h-6 rounded-full bg-kodo-steel border border-black"></div>
{project.collaborators > 0 && (
<div className="w-6 h-6 rounded-full bg-kodo-ink border border-black flex items-center justify-center text-[10px] text-white">
+{project.collaborators}
@ -293,7 +293,7 @@ export const ProjectsManager: React.FC = () => {
{/* Add New Placeholder */}
<div
className="border-2 border-dashed border-kodo-steel rounded-xl flex flex-col items-center justify-center p-8 hover:bg-kodo-slate/20 transition-colors cursor-pointer text-gray-500 hover:text-kodo-cyan hover:border-kodo-cyan min-h-[250px]"
className="border-2 border-dashed border-kodo-steel rounded-xl flex flex-col items-center justify-center p-8 hover:bg-kodo-slate/20 transition-colors cursor-pointer text-kodo-content-dim hover:text-kodo-cyan hover:border-kodo-cyan min-h-[250px]"
onClick={() => setShowCreateModal(true)}
>
<div className="w-16 h-16 bg-kodo-ink rounded-full flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
@ -305,7 +305,7 @@ export const ProjectsManager: React.FC = () => {
)}
{filteredProjects.length === 0 && !loading && (
<div className="text-center py-20 text-gray-500">
<div className="text-center py-20 text-kodo-content-dim">
<AlertCircle className="w-12 h-12 mx-auto mb-2 opacity-30" />
<p>No projects found matching your filters.</p>
</div>

8
apps/web/src/components/studio/projects/CreateProjectModal.tsx
View file

@ -44,7 +44,7 @@ export const CreateProjectModal: React.FC<CreateProjectModalProps> = ({
<Layers className="w-5 h-5 text-kodo-cyan" /> New Project
</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-gray-400 hover:text-white" />
<X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
</button>
</div>
@ -58,7 +58,7 @@ export const CreateProjectModal: React.FC<CreateProjectModalProps> = ({
/>
<div>
<label className="block text-xs font-bold text-gray-400 uppercase mb-2">
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
Primary Workstation (DAW)
</label>
<div className="grid grid-cols-3 gap-3">
@ -66,7 +66,7 @@ export const CreateProjectModal: React.FC<CreateProjectModalProps> = ({
<button
key={daw}
onClick={() => setFormData({ ...formData, daw })}
className={`p-3 rounded-lg border text-sm font-bold transition-all ${formData.daw === daw ? 'bg-kodo-cyan/10 border-kodo-cyan text-white' : 'bg-kodo-void border-kodo-steel text-gray-500 hover:border-gray-400'}`}
className={`p-3 rounded-lg border text-sm font-bold transition-all ${formData.daw === daw ? 'bg-kodo-cyan/10 border-kodo-cyan text-white' : 'bg-kodo-void border-kodo-steel text-kodo-content-dim hover:border-kodo-steel'}`}
>
{daw}
</button>
@ -95,7 +95,7 @@ export const CreateProjectModal: React.FC<CreateProjectModalProps> = ({
</div>
<div>
<label className="block text-xs font-bold text-gray-400 uppercase mb-2">
<label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
Description
</label>
<textarea

36
apps/web/src/components/studio/projects/ProjectDetailView.tsx
View file

@ -100,7 +100,7 @@ export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
}
/>
</div>
<div className="flex items-center gap-4 text-sm text-gray-400 font-mono">
<div className="flex items-center gap-4 text-sm text-kodo-content-dim font-mono">
<span>{project.bpm} BPM</span>
<span>{project.key}</span>
<span>Updated {project.modified}</span>
@ -131,7 +131,7 @@ export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
<button
key={tab}
onClick={() => setActiveTab(tab as any)}
className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === tab ? 'border-kodo-cyan text-white' : 'border-transparent text-gray-500 hover:text-gray-300'}`}
className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === tab ? 'border-kodo-cyan text-white' : 'border-transparent text-kodo-content-dim hover:text-kodo-text-main'}`}
>
{tab}
</button>
@ -146,7 +146,7 @@ export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
<Card variant="default">
<h3 className="font-bold text-white mb-4">Project Status</h3>
<div className="space-y-4">
<div className="flex justify-between text-sm text-gray-400 mb-1">
<div className="flex justify-between text-sm text-kodo-content-dim mb-1">
<span>Completion</span>
<span className="text-white">{project.progress}%</span>
</div>
@ -159,7 +159,7 @@ export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
<div className="flex gap-4 pt-2">
<div className="flex-1 bg-kodo-ink p-3 rounded border border-kodo-steel">
<div className="text-xs text-gray-500 uppercase">
<div className="text-xs text-kodo-content-dim uppercase">
Status
</div>
<div className="text-sm font-bold text-white">
@ -167,7 +167,7 @@ export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
</div>
</div>
<div className="flex-1 bg-kodo-ink p-3 rounded border border-kodo-steel">
<div className="text-xs text-gray-500 uppercase">
<div className="text-xs text-kodo-content-dim uppercase">
Version
</div>
<div className="text-sm font-bold text-white">v1.4.2</div>
@ -190,11 +190,11 @@ export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
<div className="absolute left-0 top-1 w-5 h-5 bg-kodo-graphite border border-kodo-cyan rounded-full flex items-center justify-center">
<div className="w-2 h-2 bg-kodo-cyan rounded-full"></div>
</div>
<div className="text-sm text-gray-300">
<div className="text-sm text-kodo-text-main">
<span className="font-bold text-white">You</span>{' '}
uploaded a new bounce.
</div>
<div className="text-xs text-gray-500">2 hours ago</div>
<div className="text-xs text-kodo-content-dim">2 hours ago</div>
</div>
))}
</div>
@ -221,7 +221,7 @@ export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
className="flex items-center justify-between p-3 bg-kodo-ink rounded-lg border border-transparent hover:border-kodo-steel transition-all group"
>
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-kodo-slate rounded flex items-center justify-center text-gray-400">
<div className="w-10 h-10 bg-kodo-slate rounded flex items-center justify-center text-kodo-content-dim">
{file.type === 'audio' ? (
<FileAudio className="w-5 h-5" />
) : (
@ -232,7 +232,7 @@ export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
<div className="font-bold text-sm text-white">
{file.name}
</div>
<div className="text-xs text-gray-500">
<div className="text-xs text-kodo-content-dim">
{file.size} • {file.date}
</div>
</div>
@ -304,7 +304,7 @@ export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
<h3 className="font-bold text-white mb-4 text-kodo-red flex items-center gap-2">
<Trash2 className="w-4 h-4" /> Danger Zone
</h3>
<p className="text-sm text-gray-400 mb-4">
<p className="text-sm text-kodo-content-dim mb-4">
Permanently delete this project and all associated files.
</p>
<Button
@ -326,9 +326,9 @@ export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
<Users className="w-4 h-4 text-kodo-gold" /> Collaborators
</h3>
<div className="flex -space-x-3 mb-4">
<div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-gray-700"></div>
<div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-gray-600"></div>
<div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-kodo-ink flex items-center justify-center text-xs text-gray-400 font-bold">
<div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-kodo-steel"></div>
<div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-kodo-steel"></div>
<div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-kodo-ink flex items-center justify-center text-xs text-kodo-content-dim font-bold">
+2
</div>
</div>
@ -348,15 +348,15 @@ export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
<div className="space-y-2">
<div className="flex justify-between items-center text-sm p-2 bg-white/5 rounded">
<span className="text-white">v1.4 (Current)</span>
<span className="text-xs text-gray-500">2h ago</span>
<span className="text-xs text-kodo-content-dim">2h ago</span>
</div>
<div className="flex justify-between items-center text-sm p-2 hover:bg-white/5 rounded cursor-pointer text-gray-400">
<div className="flex justify-between items-center text-sm p-2 hover:bg-white/5 rounded cursor-pointer text-kodo-content-dim">
<span>v1.3</span>
<span className="text-xs text-gray-600">1d ago</span>
<span className="text-xs text-kodo-content-dim">1d ago</span>
</div>
<div className="flex justify-between items-center text-sm p-2 hover:bg-white/5 rounded cursor-pointer text-gray-400">
<div className="flex justify-between items-center text-sm p-2 hover:bg-white/5 rounded cursor-pointer text-kodo-content-dim">
<span>v1.2</span>
<span className="text-xs text-gray-600">3d ago</span>
<span className="text-xs text-kodo-content-dim">3d ago</span>
</div>
</div>
</Card>

18
apps/web/src/components/ui/DataList.tsx
View file

@ -128,7 +128,7 @@ export function DataList<T>({
{Array.from({ length: 3 }).map((_, index) => (
<div
key={index}
className="animate-pulse bg-gray-200 dark:bg-gray-700 rounded h-16"
className="animate-pulse bg-kodo-slate dark:bg-kodo-steel rounded h-16"
/>
))}
</div>
@ -138,7 +138,7 @@ export function DataList<T>({
if (error) {
return (
<div className={cn('text-center py-8', className)}>
<p className="text-red-500 dark:text-red-400">{error}</p>
<p className="text-kodo-red dark:text-kodo-red">{error}</p>
</div>
);
}
@ -146,7 +146,7 @@ export function DataList<T>({
if (items.length === 0) {
return (
<div className={cn('text-center py-8', className)}>
<p className="text-gray-500 dark:text-gray-400">{emptyMessage}</p>
<p className="text-kodo-content-dim dark:text-kodo-content-dim">{emptyMessage}</p>
</div>
);
}
@ -255,23 +255,23 @@ export const Modal: React.FC<ModalProps> = ({
{/* Modal */}
<div
className={cn(
'relative bg-white dark:bg-gray-800 rounded-lg shadow-xl',
'relative bg-white dark:bg-kodo-graphite rounded-lg shadow-xl',
'w-full mx-4',
sizeClasses[size],
)}
>
{/* Header */}
{(title || showCloseButton) && (
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
<div className="flex items-center justify-between p-6 border-b border-kodo-steel dark:border-kodo-steel">
{title && (
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
<h2 className="text-lg font-semibold text-kodo-text-main dark:text-white">
{title}
</h2>
)}
{showCloseButton && (
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
className="text-kodo-content-dim hover:text-kodo-content-dim dark:hover:text-kodo-text-main"
>
<svg
className="w-6 h-6"
@ -383,8 +383,8 @@ export const Dropdown: React.FC<DropdownProps> = ({
{/* Dropdown */}
<div
className={cn(
'absolute z-20 mt-1 bg-white dark:bg-gray-800 rounded-md shadow-lg',
'border border-gray-200 dark:border-gray-700',
'absolute z-20 mt-1 bg-white dark:bg-kodo-graphite rounded-md shadow-lg',
'border border-kodo-steel dark:border-kodo-steel',
align === 'right' ? 'right-0' : 'left-0',
className,
)}