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

style(commerce,upload,error): elevate Commerce, Upload, Error to SaaS Premium

Browse source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-07 16:07:09 +01:00
parent 1f590bd8f9
commit 9134a98fdb
16 changed files with 126 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
apps/web/src/components/commerce/CartItem.tsx
View file

@ -21,7 +21,7 @@ export const CartItem: React.FC<CartItemProps> = ({ item, onRemove }) => {
return (
<Card
variant="default"
className="flex flex-col md:flex-row items-center gap-4 p-4 group hover:border-kodo-steel/50 transition-all"
className="flex flex-col md:flex-row items-center gap-4 p-4 group hover:border-border/50 transition-all"
>
{/* Thumbnail */}
<div className="w-full md:w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 bg-kodo-graphite">
@ -35,12 +35,12 @@ export const CartItem: React.FC<CartItemProps> = ({ item, onRemove }) => {
{/* Info */}
<div className="flex-1 w-full text-center md:text-left">
<h4 className="font-bold text-white text-lg">{product.title}</h4>
<p className="text-kodo-content-dim text-sm mb-2">{product.author}</p>
<p className="text-muted-foreground text-sm mb-2">{product.author}</p>
<div className="flex items-center justify-center md:justify-start gap-2 text-xs">
<span className="px-2 py-1 bg-kodo-ink border border-kodo-steel rounded flex items-center gap-1">
<Tag className="w-3 h-3 text-kodo-steel" /> {licenseName} License
<Tag className="w-3 h-3 text-muted-foreground" /> {licenseName} License
</span>
<span className="px-2 py-1 bg-kodo-ink border border-kodo-steel rounded uppercase font-bold text-kodo-content-dim">
<span className="px-2 py-1 bg-kodo-ink border border-kodo-steel rounded uppercase font-bold text-muted-foreground">
{product.type}
</span>
</div>
@ -54,7 +54,7 @@ export const CartItem: React.FC<CartItemProps> = ({ item, onRemove }) => {
<Button
variant="ghost"
size="sm"
className="text-kodo-content-dim hover:text-kodo-red hover:bg-kodo-red/10"
className="text-muted-foreground hover:text-destructive hover:bg-destructive/10"
onClick={() => onRemove(item.cartId)}
>
<Trash2 className="w-4 h-4" />

24
apps/web/src/components/commerce/WishlistView.tsx
View file

@ -75,13 +75,13 @@ export const WishlistView: React.FC = () => {
if (wishlist.length === 0) {
return (
<div className="flex flex-col items-center justify-center min-h-[50vh] text-center animate-fadeIn">
<div className="w-24 h-24 bg-kodo-ink rounded-full flex items-center justify-center mb-6 border-2 border-dashed border-kodo-steel">
<Heart className="w-10 h-10 text-kodo-content-dim" />
<div className="w-24 h-24 bg-muted rounded-full flex items-center justify-center mb-6 border-2 border-dashed border-border">
<Heart className="w-10 h-10 text-muted-foreground" />
</div>
<h2 className="text-2xl font-bold text-white mb-2">
Your wishlist is empty
</h2>
<p className="text-kodo-content-dim max-w-sm">
<p className="text-muted-foreground max-w-sm">
Save items you want to listen to later or purchase in the future.
</p>
</div>
@ -90,12 +90,12 @@ export const WishlistView: React.FC = () => {
return (
<div className="animate-fadeIn max-w-6xl mx-auto pb-20">
<div className="flex flex-col md:flex-row justify-between items-end border-b border-kodo-steel/50 pb-6 gap-4 mb-8">
<div className="flex flex-col md:flex-row justify-between items-end border-b border-border/50 pb-6 gap-4 mb-8">
<div>
<h1 className="text-3xl font-display font-bold text-white mb-2">
WISHLIST
</h1>
<p className="text-kodo-content-dim font-mono text-sm">
<p className="text-muted-foreground font-mono text-sm">
{wishlist.length} saved items
</p>
</div>
@ -113,10 +113,10 @@ export const WishlistView: React.FC = () => {
<Card
key={product.id}
variant="default"
className="p-4 group hover:border-kodo-steel/50 transition-all"
className="p-4 group hover:border-border/50 transition-all"
>
<div className="flex gap-4">
<div className="relative w-24 h-24 bg-kodo-graphite rounded-lg overflow-hidden flex-shrink-0">
<div className="relative w-24 h-24 bg-muted rounded-lg overflow-hidden flex-shrink-0">
<img
src={product.coverUrl}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
@ -136,7 +136,7 @@ export const WishlistView: React.FC = () => {
)}
</div>
{product.isHot && (
<div className="absolute top-1 left-1 bg-kodo-gold text-black text-xs font-bold px-1.5 py-0.5 rounded">
<div className="absolute top-1 left-1 bg-warning text-warning-foreground text-xs font-bold px-1.5 py-0.5 rounded">
<Zap className="w-2 h-2 inline" /> HOT
</div>
)}
@ -147,14 +147,14 @@ export const WishlistView: React.FC = () => {
<h3 className="font-bold text-white truncate">
{product.title}
</h3>
<p className="text-xs text-kodo-content-dim truncate">
<p className="text-xs text-muted-foreground truncate">
{product.author}
</p>
<p className="text-xs text-kodo-content-dim mt-1 capitalize">
<p className="text-xs text-muted-foreground mt-1 capitalize">
{product.type}
</p>
</div>
<div className="text-lg font-mono font-bold text-kodo-steel">
<div className="text-lg font-mono font-bold text-muted-foreground">
${product.price}
</div>
</div>
@ -172,7 +172,7 @@ export const WishlistView: React.FC = () => {
<Button
variant="ghost"
size="icon"
className="text-kodo-content-dim hover:text-kodo-red"
className="text-muted-foreground hover:text-destructive"
onClick={() => handleRemove(product.id)}
>
<Trash2 className="w-4 h-4" />

14
apps/web/src/components/commerce/modals/PromoCodeModal.tsx
View file

@ -31,16 +31,16 @@ export const PromoCodeModal: React.FC<PromoCodeModalProps> = ({
return (
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
<div
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
className="absolute inset-0 bg-background/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-sm bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="relative w-full max-w-sm bg-card border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2">
<Tag className="w-4 h-4 text-kodo-steel" /> Add Promo Code
<Tag className="w-4 h-4 text-muted-foreground" /> Add Promo Code
</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-foreground" />
</button>
</div>
@ -53,18 +53,18 @@ export const PromoCodeModal: React.FC<PromoCodeModalProps> = ({
setStatus('idle');
}}
className={
status === 'error' ? 'border-kodo-red focus:border-kodo-red' : ''
status === 'error' ? 'border-destructive focus:border-destructive' : ''
}
/>
{status === 'error' && (
<div className="flex items-center gap-2 text-xs text-kodo-red animate-shake">
<div className="flex items-center gap-2 text-xs text-destructive animate-shake">
<AlertCircle className="w-3 h-3" /> Invalid promo code
</div>
)}
{status === 'success' && (
<div className="flex items-center gap-2 text-xs text-kodo-lime animate-fadeIn">
<div className="flex items-center gap-2 text-xs text-success animate-fadeIn">
<Check className="w-3 h-3" /> Code applied! 20% Off
</div>
)}

24
apps/web/src/components/commerce/modals/RefundRequestModal.tsx
View file

@ -24,32 +24,32 @@ export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({
return (
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
<div
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
className="absolute inset-0 bg-background/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-lg bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-border bg-muted flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2">
<RefreshCcw className="w-4 h-4 text-kodo-orange" /> Request Refund
<RefreshCcw className="w-4 h-4 text-warning" /> Request Refund
</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-4">
<p className="text-sm text-kodo-content-dim">
<p className="text-sm text-muted-foreground">
Refund requests are subject to approval. Please provide details
below for Order{' '}
<span className="font-mono text-white">#{orderId}</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">
Reason
</label>
<select
className="w-full bg-kodo-void border border-kodo-steel rounded-lg px-4 py-2.5 text-white focus:border-kodo-steel outline-none"
className="w-full bg-muted border border-border rounded-lg px-4 py-2.5 text-white focus:border-primary outline-none"
value={reason}
onChange={(e) => setReason(e.target.value)}
>
@ -61,18 +61,18 @@ export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({
</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
</label>
<textarea
className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none text-sm resize-none h-24"
className="w-full bg-muted border border-border rounded-lg p-4 text-white focus:border-primary outline-none text-sm resize-none h-24"
placeholder="Please explain why you are requesting a refund..."
value={details}
onChange={(e) => setDetails(e.target.value)}
/>
</div>
<div className="border-2 border-dashed border-kodo-steel rounded-lg p-6 flex flex-col items-center justify-center text-kodo-content-dim hover:text-white hover:border-kodo-steel cursor-pointer transition-colors">
<div className="border-2 border-dashed border-border rounded-lg p-6 flex flex-col items-center justify-center text-muted-foreground hover:text-foreground hover:border-border cursor-pointer transition-colors">
<UploadCloud className="w-8 h-8 mb-2" />
<span className="text-xs font-bold uppercase">
Upload Evidence (Optional)
@ -80,7 +80,7 @@ export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({
</div>
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
<div className="p-4 border-t border-border bg-muted flex justify-end gap-4">
<Button variant="ghost" onClick={onClose}>
Cancel
</Button>

18
apps/web/src/components/upload/BulkUploadModal.tsx
View file

@ -28,17 +28,17 @@ export const BulkUploadModal: React.FC<BulkUploadModalProps> = ({
return (
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
<div
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
className="absolute inset-0 bg-background/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-3xl bg-kodo-graphite border border-kodo-steel rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[80vh] animate-scaleIn">
<div className="relative w-full max-w-3xl bg-card border border-border rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[80vh] animate-scaleIn">
{/* Header */}
<div className="p-8 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="p-8 border-b border-border bg-muted flex justify-between items-center">
<div>
<h3 className="font-display font-bold text-xl text-white flex items-center gap-2">
<Layers className="w-5 h-5 text-kodo-steel" /> Bulk Upload Manager
</h3>
<p className="text-xs text-kodo-content-dim mt-1">
<p className="text-xs text-muted-foreground mt-1">
{completedCount} / {files.length} files uploaded •{' '}
{files.length - completedCount} remaining
</p>
@ -50,11 +50,11 @@ export const BulkUploadModal: React.FC<BulkUploadModalProps> = ({
{/* Global Progress */}
<div className="px-6 py-2 bg-kodo-slate/30 border-b border-kodo-steel">
<div className="flex justify-between text-[10px] font-bold text-kodo-content-dim uppercase mb-1">
<div className="flex justify-between text-[10px] font-bold text-muted-foreground uppercase mb-1">
<span>Overall Progress</span>
<span>{Math.round(totalProgress)}%</span>
</div>
<div className="h-1 bg-kodo-steel rounded-full overflow-hidden">
<div className="h-1 bg-muted rounded-full overflow-hidden">
<div
className="h-full bg-kodo-cyan transition-all duration-300"
style={{ width: `${totalProgress}%` }}
@ -63,7 +63,7 @@ export const BulkUploadModal: React.FC<BulkUploadModalProps> = ({
</div>
{/* File List */}
<div className="flex-1 overflow-y-auto p-8 space-y-4 bg-kodo-graphite/50">
<div className="flex-1 overflow-y-auto p-8 space-y-4 bg-muted/50">
{files.map((file) => (
<FilePreviewCard
key={file.id}
@ -76,12 +76,12 @@ export const BulkUploadModal: React.FC<BulkUploadModalProps> = ({
</div>
{/* Footer Actions */}
<div className="p-8 border-t border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="p-8 border-t border-border bg-muted flex justify-between items-center">
<div className="flex gap-2">
<Button
variant="ghost"
size="sm"
className="text-kodo-content-dim hover:text-white"
className="text-muted-foreground hover:text-foreground"
onClick={onClose}
>
Cancel All

8
apps/web/src/components/upload/FilePreviewCard.tsx
View file

@ -43,18 +43,18 @@ export const FilePreviewCard: React.FC<FilePreviewCardProps> = ({
const getIcon = () => {
if (file.type.startsWith('image/'))
return <FileImage className="w-6 h-6 text-kodo-magenta" />;
return <FileImage className="w-6 h-6 text-primary" />;
if (file.type.startsWith('audio/'))
return <FileAudio className="w-6 h-6 text-kodo-steel" />;
if (file.type.includes('zip') || file.type.includes('compressed'))
return <FolderArchive className="w-6 h-6 text-kodo-gold" />;
return <FolderArchive className="w-6 h-6 text-warning" />;
return <File className="w-6 h-6 text-kodo-content-dim" />;
};
return (
<Card
variant="glass"
className="p-4 flex items-center gap-4 border-l-4 border-l-kodo-slate hover:border-l-kodo-cyan transition-all"
className="p-4 flex items-center gap-4 border-l-4 border-l-muted hover:border-l-primary transition-all"
>
{/* Thumbnail / Icon */}
<div className="w-12 h-12 rounded-lg bg-black/40 flex items-center justify-center overflow-hidden flex-shrink-0 border border-white/5">
@ -88,7 +88,7 @@ export const FilePreviewCard: React.FC<FilePreviewCardProps> = ({
<CheckCircle className="w-3 h-3" /> Ready
</div>
) : status === 'error' ? (
<div className="flex items-center gap-2 text-xs text-kodo-red font-bold">
<div className="flex items-center gap-2 text-xs text-destructive font-bold">
<AlertCircle className="w-3 h-3" /> Failed
</div>
) : (

12
apps/web/src/components/upload/FileUploadZone.tsx
View file

@ -68,8 +68,8 @@ export const FileUploadZone: React.FC<FileUploadZoneProps> = ({
border-2 border-dashed rounded-xl p-12 flex flex-col items-center justify-center text-center transition-all duration-300 group cursor-pointer
${
isDragging
? 'border-kodo-cyan bg-kodo-cyan/10 scale-[1.02]'
: 'border-kodo-steel/50 bg-kodo-ink/30 hover:bg-kodo-ink/50 hover:border-kodo-steel/50'
? 'border-primary bg-primary/10 scale-[1.02]'
: 'border-border/50 bg-muted/30 hover:bg-muted/50 hover:border-border/50'
}
`}
>
@ -88,7 +88,7 @@ export const FileUploadZone: React.FC<FileUploadZoneProps> = ({
<div
className={`
w-20 h-20 rounded-full flex items-center justify-center mb-6 transition-all duration-300 shadow-lg
${isDragging ? 'bg-kodo-cyan text-black' : 'bg-kodo-slate text-kodo-cyan group-hover:bg-kodo-steel'}
${isDragging ? 'bg-kodo-cyan text-black' : 'bg-muted text-primary group-hover:bg-border'}
`}
>
<UploadCloud className="w-10 h-10" />
@ -97,7 +97,7 @@ export const FileUploadZone: React.FC<FileUploadZoneProps> = ({
<h3 className="text-xl font-display font-bold text-white mb-2">
{isDragging ? 'Drop Files Here' : 'Drag & Drop or Click'}
</h3>
<p className="text-kodo-content-dim mb-6 max-w-sm">
<p className="text-muted-foreground mb-6 max-w-sm">
Upload audio stems, project archives, or sample packs.
</p>
@ -105,13 +105,13 @@ export const FileUploadZone: React.FC<FileUploadZoneProps> = ({
{acceptedFormats.map((fmt) => (
<span
key={fmt}
className="px-2 py-1 bg-black/30 rounded text-[10px] font-mono text-kodo-content-dim border border-white/5 uppercase"
className="px-2 py-1 bg-black/30 rounded text-[10px] font-mono text-muted-foreground border border-white/5 uppercase"
>
{fmt.replace('.', '')}
</span>
))}
</div>
<p className="mt-4 text-[10px] text-kodo-content-dim">
<p className="mt-4 text-[10px] text-muted-foreground">
Max file size: {maxSizeInMB}MB
</p>
</label>

16
apps/web/src/components/upload/UploadProgressBar.tsx
View file

@ -21,20 +21,20 @@ export const UploadProgressBar: React.FC<UploadProgressBarProps> = ({
const isError = status === 'error';
const getColor = () => {
if (isError) return 'bg-kodo-red';
if (isCompleted) return 'bg-kodo-lime';
if (isError) return 'bg-destructive';
if (isCompleted) return 'bg-success';
if (isPaused) return 'bg-kodo-gold';
return 'bg-kodo-cyan';
return 'bg-primary';
};
return (
<div className="w-full flex items-center gap-4">
<div className="flex-1">
<div className="flex justify-between text-[10px] uppercase font-bold text-kodo-content-dim mb-1">
<div className="flex justify-between text-[10px] uppercase font-bold text-muted-foreground mb-1">
<span>{status}</span>
<span>{Math.round(progress)}%</span>
</div>
<div className="h-1.5 bg-kodo-steel/50 rounded-full overflow-hidden">
<div className="h-1.5 bg-muted rounded-full overflow-hidden">
<div
className={`h-full transition-all duration-300 ${getColor()} ${status === 'uploading' ? 'animate-pulse' : ''}`}
style={{ width: `${progress}%` }}
@ -47,7 +47,7 @@ export const UploadProgressBar: React.FC<UploadProgressBarProps> = ({
{isPaused ? (
<button
onClick={onResume}
className="p-1 hover:text-white text-kodo-lime transition-colors"
className="p-1 hover:text-white text-success transition-colors"
title="Resume"
>
<Play className="w-3 h-3 fill-current" />
@ -55,7 +55,7 @@ export const UploadProgressBar: React.FC<UploadProgressBarProps> = ({
) : (
<button
onClick={onPause}
className="p-1 hover:text-white text-kodo-gold transition-colors"
className="p-1 hover:text-white text-warning transition-colors"
title="Pause"
>
<Pause className="w-3 h-3 fill-current" />
@ -63,7 +63,7 @@ export const UploadProgressBar: React.FC<UploadProgressBarProps> = ({
)}
<button
onClick={onCancel}
className="p-1 hover:text-white text-kodo-red transition-colors"
className="p-1 hover:text-white text-destructive transition-colors"
title="Cancel"
>
<X className="w-3 h-3" />

16
apps/web/src/components/upload/metadata/CoverArtUploadModal.tsx
View file

@ -105,25 +105,25 @@ export const CoverArtUploadModal: React.FC<CoverArtUploadModalProps> = ({
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
className="absolute inset-0 bg-background/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-lg bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-border bg-muted flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2">
<ImageIcon className="w-4 h-4 text-kodo-steel" /> Upload Artwork
</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-foreground" />
</button>
</div>
<div className="p-8 text-center">
<div className="w-32 h-32 bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-xl mx-auto mb-6 flex items-center justify-center relative overflow-hidden group">
<div className="w-32 h-32 bg-muted border-2 border-dashed border-border rounded-xl mx-auto mb-6 flex items-center justify-center relative overflow-hidden group">
{currentImage ? (
<img src={currentImage} className="w-full h-full object-cover" />
) : (
<Upload className="w-8 h-8 text-kodo-content-dim" />
<Upload className="w-8 h-8 text-muted-foreground" />
)}
<div className="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span className="text-xs font-bold text-white">Change</span>
@ -132,12 +132,12 @@ export const CoverArtUploadModal: React.FC<CoverArtUploadModalProps> = ({
<div className="space-y-2 mb-8">
<h4 className="text-white font-bold">Drag & Drop or Browse</h4>
<p className="text-kodo-content-dim text-sm">
<p className="text-muted-foreground text-sm">
Recommended: 3000x3000px, JPG or PNG.
<br />
Minimum: 1000x1000px.
</p>
<div className="flex items-center justify-center gap-2 text-kodo-gold text-xs bg-kodo-gold/10 p-2 rounded max-w-xs mx-auto mt-4">
<div className="flex items-center justify-center gap-2 text-warning text-xs bg-warning/10 p-2 rounded max-w-xs mx-auto mt-4">
<AlertTriangle className="w-3 h-3" />
High quality artwork increases plays by 40%
</div>

12
apps/web/src/components/upload/metadata/LyricsEditorModal.tsx
View file

@ -36,16 +36,16 @@ export const LyricsEditorModal: React.FC<LyricsEditorModalProps> = ({
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
className="absolute inset-0 bg-background/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-2xl bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-[85vh]">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="p-4 border-b border-border bg-muted flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2">
<Mic2 className="w-4 h-4 text-kodo-steel" /> Lyrics Editor
</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-foreground" />
</button>
</div>
@ -55,7 +55,7 @@ export const LyricsEditorModal: React.FC<LyricsEditorModalProps> = ({
<label className="flex items-center gap-2 text-sm text-kodo-text-main cursor-pointer">
<input
type="checkbox"
className="rounded border-kodo-steel bg-transparent text-kodo-steel focus:ring-0"
className="rounded border-border bg-transparent text-muted-foreground focus:ring-0"
checked={isSynced}
onChange={(e) => setIsSynced(e.target.checked)}
/>
@ -83,7 +83,7 @@ export const LyricsEditorModal: React.FC<LyricsEditorModalProps> = ({
</div>
<textarea
className="flex-1 w-full bg-kodo-void border border-kodo-steel rounded-lg p-4 text-white font-mono text-sm leading-relaxed resize-none focus:border-kodo-steel outline-none custom-scrollbar"
className="flex-1 w-full bg-muted border border-border rounded-lg p-4 text-white font-mono text-sm leading-relaxed resize-none focus:border-primary outline-none custom-scrollbar"
placeholder="Enter lyrics here...&#10;[00:12.00] First line of the verse&#10;[00:15.50] Second line..."
value={lyrics}
onChange={(e) => setLyrics(e.target.value)}
@ -94,7 +94,7 @@ export const LyricsEditorModal: React.FC<LyricsEditorModalProps> = ({
</p>
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
<div className="p-4 border-t border-border bg-muted flex justify-end gap-4">
<Button variant="ghost" onClick={onClose}>
Cancel
</Button>

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

@ -127,13 +127,13 @@ export const MetadataEditor: React.FC<MetadataEditorProps> = ({
{/* Editor Header / Player */}
<Card
variant="glass"
className="sticky top-20 z-30 shadow-2xl border-kodo-steel/20"
className="sticky top-20 z-30 shadow-2xl border-border/20"
>
<div className="flex items-center gap-4 mb-4">
<div className="flex gap-4 items-center flex-1">
<button
onClick={() => setIsPlaying(!isPlaying)}
className="w-12 h-12 rounded-full bg-kodo-cyan text-black flex items-center justify-center hover:opacity-90 transition-opacity"
className="w-12 h-12 rounded-full bg-primary text-primary-foreground flex items-center justify-center hover:opacity-90 transition-opacity"
>
{isPlaying ? (
<Pause className="w-5 h-5 fill-current" />
@ -191,7 +191,7 @@ export const MetadataEditor: React.FC<MetadataEditorProps> = ({
</Card>
{/* Action Bar */}
<div className="flex justify-between items-center p-4 bg-kodo-ink rounded-xl border border-kodo-steel sticky bottom-4 z-30 shadow-2xl">
<div className="flex justify-between items-center p-4 bg-muted rounded-xl border border-border sticky bottom-4 z-30 shadow-2xl">
<Button variant="ghost" onClick={onBack}>
Back to Upload
</Button>

30
apps/web/src/components/upload/metadata/MetadataForm.tsx
View file

@ -61,7 +61,7 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
{/* Cover Art Area */}
<div className="w-full md:w-64 flex-shrink-0">
<div
className="aspect-square bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-xl overflow-hidden relative group cursor-pointer hover:border-kodo-steel/50 transition-all"
className="aspect-square bg-muted border-2 border-dashed border-border rounded-xl overflow-hidden relative group cursor-pointer hover:border-border/50 transition-all"
onClick={() => setShowCoverModal(true)}
>
{data.coverArtUrl ? (
@ -70,7 +70,7 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
className="w-full h-full object-cover"
/>
) : (
<div className="absolute inset-0 flex flex-col items-center justify-center text-kodo-content-dim group-hover:text-white">
<div className="absolute inset-0 flex flex-col items-center justify-center text-muted-foreground group-hover:text-foreground">
<Music className="w-12 h-12 mb-2" />
<span className="text-xs font-bold uppercase">
Upload Cover
@ -81,7 +81,7 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
<Camera className="w-8 h-8 text-white" />
</div>
</div>
<p className="text-center text-xs text-kodo-content-dim mt-2">
<p className="text-center text-xs text-muted-foreground mt-2">
1000x1000px Min
</p>
</div>
@ -95,8 +95,8 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
onChange={(e) => updateField('title', e.target.value)}
className={
isValid(data.title || '')
? 'border-kodo-steel'
: 'border-kodo-steel'
? 'border-border'
: 'border-border'
} // visual cue logic could go here
/>
@ -139,7 +139,7 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
</div>
</div>
<div className="w-full h-px bg-kodo-steel/50 mb-8"></div>
<div className="w-full h-px bg-border/50 mb-8"></div>
{/* Advanced Details */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
@ -180,15 +180,15 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
Metadata & Assets
</h4>
<div className="bg-kodo-ink rounded-lg p-4 border border-kodo-steel space-y-4">
<div className="bg-muted rounded-lg p-4 border border-border space-y-4">
<div className="flex justify-between items-center">
<span className="text-sm text-kodo-text-main flex items-center gap-2">
<span className="text-sm text-foreground flex items-center gap-2">
<Hash className="w-4 h-4" /> Tags
</span>
<Button
variant="ghost"
size="sm"
className="text-kodo-steel"
className="text-muted-foreground"
onClick={() => setShowTagsModal(true)}
>
{data.tags && data.tags.length > 0
@ -201,7 +201,7 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
{data.tags.map((t) => (
<span
key={t}
className="text-[10px] bg-kodo-slate px-2 py-1 rounded text-kodo-text-main"
className="text-[10px] bg-muted px-2 py-1 rounded text-foreground"
>
#{t}
</span>
@ -209,16 +209,16 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
</div>
)}
<div className="w-full h-px bg-kodo-steel/30"></div>
<div className="w-full h-px bg-border/30"></div>
<div className="flex justify-between items-center">
<span className="text-sm text-kodo-text-main flex items-center gap-2">
<span className="text-sm text-foreground flex items-center gap-2">
<FileText className="w-4 h-4" /> Lyrics
</span>
<Button
variant="ghost"
size="sm"
className={data.lyrics ? 'text-kodo-lime' : 'text-kodo-content-dim'}
className={data.lyrics ? 'text-success' : 'text-muted-foreground'}
onClick={() => setShowLyricsModal(true)}
>
{data.lyrics ? (
@ -233,11 +233,11 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
</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">
Description
</label>
<textarea
className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none min-h-[100px] text-sm"
className="w-full bg-muted border border-border rounded-lg p-4 text-white focus:border-border outline-none min-h-[100px] text-sm"
placeholder="Tell the story behind this track..."
value={data.description || ''}
onChange={(e) => updateField('description', e.target.value)}

24
apps/web/src/components/upload/metadata/TagSuggestionsModal.tsx
View file

@ -55,16 +55,16 @@ export const TagSuggestionsModal: React.FC<TagSuggestionsModalProps> = ({
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
className="absolute inset-0 bg-background/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-lg bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2">
<Hash className="w-4 h-4 text-kodo-magenta" /> Manage Tags
<Hash className="w-4 h-4 text-primary" /> Manage Tags
</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-foreground" />
</button>
</div>
@ -72,7 +72,7 @@ export const TagSuggestionsModal: React.FC<TagSuggestionsModalProps> = ({
<div>
<div className="flex gap-2 mb-3">
<input
className="flex-1 bg-kodo-void border border-kodo-steel rounded-lg px-4 py-2 text-white focus:border-kodo-magenta outline-none"
className="flex-1 bg-muted border border-border rounded-lg px-4 py-2 text-white focus:border-kodo-magenta outline-none"
placeholder="Add a tag..."
value={input}
onChange={(e) => setInput(e.target.value)}
@ -91,28 +91,28 @@ export const TagSuggestionsModal: React.FC<TagSuggestionsModalProps> = ({
{localTags.map((tag) => (
<span
key={tag}
className="px-4 py-1 bg-kodo-magenta/20 text-kodo-magenta border border-kodo-magenta/50 rounded-full text-sm font-bold flex items-center gap-2"
className="px-4 py-1 bg-primary/20 text-primary border border-primary/50 rounded-full text-sm font-bold flex items-center gap-2"
>
#{tag}
<X
className="w-3 h-3 cursor-pointer hover:text-white"
className="w-3 h-3 cursor-pointer hover:text-foreground"
onClick={() => removeTag(tag)}
/>
</span>
))}
{localTags.length === 0 && (
<span className="text-kodo-content-dim text-sm italic">
<span className="text-muted-foreground text-sm italic">
No tags selected
</span>
)}
</div>
<p className="text-right text-xs text-kodo-content-dim mt-1">
<p className="text-right text-xs text-muted-foreground mt-1">
{localTags.length}/10 tags
</p>
</div>
<div>
<h4 className="text-xs font-bold text-kodo-content-dim uppercase tracking-widest mb-3">
<h4 className="text-xs font-bold text-muted-foreground uppercase tracking-widest mb-3">
Popular Suggestions
</h4>
<div className="flex flex-wrap gap-2">
@ -120,7 +120,7 @@ export const TagSuggestionsModal: React.FC<TagSuggestionsModalProps> = ({
<button
key={tag}
onClick={() => addTag(tag)}
className="px-4 py-1 bg-kodo-slate border border-kodo-steel rounded-full text-sm text-kodo-text-main hover:text-white hover:border-white transition-colors flex items-center gap-1"
className="px-4 py-1 bg-muted border border-border rounded-full text-sm text-foreground hover:text-foreground hover:border-foreground transition-colors flex items-center gap-1"
>
<Plus className="w-3 h-3" /> {tag}
</button>
@ -129,7 +129,7 @@ export const TagSuggestionsModal: React.FC<TagSuggestionsModalProps> = ({
</div>
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
<div className="p-4 border-t border-border bg-muted flex justify-end gap-4">
<Button variant="ghost" onClick={onClose}>
Cancel
</Button>

14
apps/web/src/features/error/pages/NotFoundPage.tsx
View file

@ -21,11 +21,11 @@ function NotFoundPage() {
];
return (
<div className="min-h-screen flex items-center justify-center bg-kodo-void dark:bg-kodo-ink p-4">
<div className="min-h-screen flex items-center justify-center bg-background p-4">
<div className="w-full max-w-2xl">
<Card className="text-center">
<CardHeader>
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-kodo-steel/20 dark:bg-kodo-steel">
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
<Search className="h-8 w-8 text-kodo-steel dark:text-kodo-steel" />
</div>
<CardTitle className="text-2xl">Page non trouvée</CardTitle>
@ -34,10 +34,10 @@ function NotFoundPage() {
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="text-6xl font-bold text-kodo-text-main dark:text-kodo-text-main">
<div className="text-6xl font-bold text-foreground">
404
</div>
<p className="text-kodo-content-dim dark:text-kodo-content-dim">
<p className="text-muted-foreground">
Il semble que vous ayez suivi un lien cassé ou tapé une URL
incorrecte. Voici quelques options pour continuer :
</p>
@ -62,7 +62,7 @@ function NotFoundPage() {
{/* Quick Links */}
<div className="border-t pt-4">
<p className="text-sm font-medium text-kodo-text-main dark:text-kodo-text-main mb-3">
<p className="text-sm font-medium text-foreground mb-3">
Liens rapides :
</p>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
@ -88,10 +88,10 @@ function NotFoundPage() {
{/* Helpful Suggestions */}
<div className="border-t pt-4 text-left">
<p className="text-sm font-medium text-kodo-text-main dark:text-kodo-text-main mb-2">
<p className="text-sm font-medium text-foreground mb-2">
Suggestions :
</p>
<ul className="text-sm text-kodo-content-dim dark:text-kodo-content-dim space-y-1 list-disc list-inside">
<ul className="text-sm text-muted-foreground space-y-1 list-disc list-inside">
<li>Vérifiez l'orthographe de l'URL</li>
<li>Utilisez la recherche pour trouver ce que vous cherchez</li>
<li>Consultez votre bibliothèque ou le marketplace</li>

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

@ -37,11 +37,11 @@ function ServerErrorPage() {
};
return (
<div className="min-h-screen flex items-center justify-center bg-kodo-void dark:bg-kodo-ink p-4">
<div className="min-h-screen flex items-center justify-center bg-background p-4">
<div className="w-full max-w-2xl">
<Card className="text-center">
<CardHeader>
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-kodo-red/10 dark:bg-kodo-red/20">
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
<AlertTriangle className="h-8 w-8 text-kodo-red dark:text-kodo-red" />
</div>
<CardTitle className="text-2xl">Erreur serveur</CardTitle>
@ -50,7 +50,7 @@ function ServerErrorPage() {
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="text-6xl font-bold text-kodo-text-main dark:text-kodo-text-main">
<div className="text-6xl font-bold text-foreground">
500
</div>
<p className="text-kodo-content-dim dark:text-kodo-content-dim">
@ -60,14 +60,14 @@ function ServerErrorPage() {
</p>
{/* Status Info */}
<div className="bg-kodo-steel/10 dark:bg-kodo-steel/20 border border-kodo-steel dark:border-kodo-steel rounded-lg p-4">
<div className="bg-muted/50 border border-border rounded-lg p-4">
<div className="flex items-start gap-4 text-left">
<Clock className="h-5 w-5 text-kodo-steel dark:text-kodo-steel mt-0.5" />
<Clock className="h-5 w-5 text-muted-foreground mt-0.5" />
<div>
<p className="text-sm font-medium text-kodo-steel dark:text-kodo-steel">
<p className="text-sm font-medium text-muted-foreground">
Que faire maintenant ?
</p>
<ul className="text-sm text-kodo-steel dark:text-kodo-steel mt-2 space-y-1 list-disc list-inside">
<ul className="text-sm text-muted-foreground mt-2 space-y-1 list-disc list-inside">
<li>Attendez quelques instants et réessayez</li>
<li>Vérifiez votre connexion internet</li>
<li>Si le problème persiste, contactez le support</li>
@ -100,12 +100,12 @@ function ServerErrorPage() {
{/* Help Section */}
<div className="border-t pt-4 text-left">
<p className="text-sm font-medium text-kodo-text-main dark:text-kodo-text-main mb-3">
<p className="text-sm font-medium text-foreground mb-3">
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">
<CheckCircle className="h-4 w-4 text-kodo-lime" />
<CheckCircle className="h-4 w-4 text-success" />
<span>
L'erreur a été automatiquement signalée à notre équipe
</span>
@ -122,10 +122,10 @@ function ServerErrorPage() {
{/* Technical Details (Collapsible) */}
<details className="border-t pt-4 text-left">
<summary className="text-sm font-medium text-kodo-text-main dark:text-kodo-text-main cursor-pointer hover:text-kodo-text-main dark:hover:text-kodo-text-main">
<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-kodo-void dark:bg-kodo-graphite 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-kodo-content-dim dark:text-kodo-content-dim">
<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/upload/components/upload-modal/UploadModal.tsx
View file

@ -77,7 +77,7 @@ export function UploadModal({ open, onClose }: UploadModalProps) {
/>
)}
{success && (
<div className="rounded-lg border bg-kodo-lime/10 border-kodo-lime p-4 flex items-center gap-2 text-kodo-lime">
<div className="rounded-lg border bg-success/10 border-success p-4 flex items-center gap-2 text-success">
<CheckCircle2 className="h-4 w-4 shrink-0" />
<span>Fichier uploadé avec succès !</span>
</div>