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

feat(ui): semantic tokens on library, chat, dashboard, search

Browse source 
PlaylistDetailView: hero border, overlay, sort buttons, table header, row hover → border-border, bg-background/50, hover:bg-muted/50
ChatMessage: action buttons hover, own/other bubbles, attachment preview, context menu, modal → muted/border/foreground
ChatRoom: header bar, channel item hover, input pill → bg-card/90 border-border, hover:bg-muted/50, bg-muted/30
TrackList: play icon and title when not current → text-foreground
SearchPageHeader: title, search container, input, clear button → text-foreground, bg-card/80 border-border, hover:bg-muted/50
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-10 09:53:17 +01:00
parent 3a6d4d50b3
commit 0ce3e83fa4
5 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/web/src/components/dashboard/TrackList.tsx
View file

@ -133,7 +133,7 @@ export const TrackList: React.FC = () => {
</span>
)}
<Play
className={`w-4 h-4 mx-auto fill-current hidden group-hover:block ${isCurrent ? 'text-primary' : 'text-white'}`}
className={`w-4 h-4 mx-auto fill-current hidden group-hover:block ${isCurrent ? 'text-primary' : 'text-foreground'}`}
/>
</div>
@ -150,7 +150,7 @@ export const TrackList: React.FC = () => {
<div className="flex-1 min-w-0">
<h4
className={`font-bold text-sm truncate ${isCurrent ? 'text-primary' : 'text-white'}`}
className={`font-bold text-sm truncate ${isCurrent ? 'text-primary' : 'text-foreground'}`}
>
{track.title}
</h4>

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

@ -102,7 +102,7 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
return (
<div className="animate-fadeIn pb-20">
{/* Header Section */}
<div className="flex flex-col md:flex-row gap-8 items-end mb-8 p-8 bg-card/40 rounded-2xl border-t border-white/5">
<div className="flex flex-col md:flex-row gap-8 items-end mb-8 p-8 bg-card/40 rounded-2xl border-t border-border">
<div className="w-52 h-52 shadow-2xl shadow-kodo-steel/10 rounded-lg overflow-hidden flex-shrink-0 group relative">
<OptimizedImage
src={playlist.cover_url}
@ -166,7 +166,7 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
<Button
variant="ghost"
size="icon"
className="border border-white/10 hover:border-white text-foreground hover:text-foreground"
className="border border-border hover:border-border text-foreground hover:text-foreground"
onClick={() => addToast('Saved to Library')}
aria-label="Ajouter à la bibliothèque"
>
@ -175,7 +175,7 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
<Button
variant="ghost"
size="icon"
className="border border-white/10 hover:border-white text-foreground hover:text-foreground"
className="border border-border hover:border-border text-foreground hover:text-foreground"
onClick={() => setIsEditing(true)}
aria-label="Plus d'options"
>
@ -205,7 +205,7 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
onDragStart={(e) => handleDragStart(e, i)}
onDragOver={(e) => handleDragOver(e, i)}
onDragEnd={handleDragEnd}
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 ? 'opacity-50 bg-primary/10 shadow-lg cursor-grabbing' : ''} ${dragOverIndex === i && draggedIndex !== null && draggedIndex !== i ? 'border-t-2 border-t-primary bg-primary/5' : ''}`}
className={`grid grid-cols-[auto_1fr_auto_auto_auto] gap-4 items-center p-2 rounded-lg hover:bg-muted/50 group transition-colors ${draggedIndex === i ? 'opacity-50 bg-primary/10 shadow-lg cursor-grabbing' : ''} ${dragOverIndex === i && draggedIndex !== null && draggedIndex !== i ? 'border-t-2 border-t-primary bg-primary/5' : ''}`}
>
<div className="w-8 text-center flex justify-center text-muted-foreground group-hover:text-foreground cursor-grab active:cursor-grabbing">
<span className="group-hover:hidden">{i + 1}</span>

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

@ -77,7 +77,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
{isMe && (
<button
onClick={() => setShowEmojiPicker(!showEmojiPicker)}
className="opacity-0 group-hover/bubble:opacity-100 p-1.5 hover:bg-white/10 rounded-full transition-all text-muted-foreground hover:text-white"
className="opacity-0 group-hover/bubble:opacity-100 p-1.5 hover:bg-muted/50 rounded-full transition-all text-muted-foreground hover:text-foreground"
>
<Smile size={14} />
</button>
@ -88,8 +88,8 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
className={cn(
'px-4 py-2.5 rounded-2xl text-sm backdrop-blur-md shadow-lg transition-all',
isMe
? 'bg-primary/10 border border-primary/20 text-white rounded-tr-sm shadow-card-glow-cyan'
: 'bg-white/5 border border-white/10 text-kodo-text-main rounded-tl-sm hover:bg-white/10',
? 'bg-primary/10 border border-primary/20 text-foreground rounded-tr-sm shadow-card-glow-cyan'
: 'bg-muted/30 border border-border text-foreground rounded-tl-sm hover:bg-muted/50',
)}
>
{/* Attachments */}
@ -114,7 +114,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
rel="noopener noreferrer"
className="flex items-center gap-4 p-4 hover:bg-white/5 transition-colors"
>
<div className="w-8 h-8 rounded bg-white/10 flex items-center justify-center">
<div className="w-8 h-8 rounded bg-muted/50 flex items-center justify-center">
<MoreHorizontal size={16} className="text-kodo-steel" />
</div>
<span className="truncate max-w-[150px] text-xs font-mono">
@ -136,7 +136,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
{!isMe && (
<button
onClick={() => setShowEmojiPicker(!showEmojiPicker)}
className="opacity-0 group-hover/bubble:opacity-100 p-1.5 hover:bg-white/10 rounded-full transition-all text-muted-foreground hover:text-white"
className="opacity-0 group-hover/bubble:opacity-100 p-1.5 hover:bg-muted/50 rounded-full transition-all text-muted-foreground hover:text-foreground"
>
<Smile size={14} />
</button>
@ -187,7 +187,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
'flex items-center gap-1 px-1.5 py-0.5 rounded-full text-xs border transition-all animate-scaleIn',
users.includes(user?.id || '')
? 'bg-primary/20 border-primary/40 text-primary shadow-queue-item-current'
: 'bg-white/5 border-white/10 text-muted-foreground hover:bg-white/10 hover:border-white/20',
: 'bg-muted/30 border-border text-muted-foreground hover:bg-muted/50 hover:border-border',
)}
>
<span>{emoji}</span>

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

@ -84,7 +84,7 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
className={cn(
'absolute top-0 left-0 right-0 z-20 px-4 py-2 transition-all duration-[var(--duration-normal)]',
showSearch
? 'bg-kodo-void/90 backdrop-blur-md border-b border-white/10'
? 'bg-card/90 backdrop-blur-md border-b border-border'
: 'bg-transparent pointer-events-none',
)}
>
@ -100,7 +100,7 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
variant="ghost"
size="sm"
onClick={() => setShowSearch(false)}
className="hover:bg-white/10"
className="hover:bg-muted/50"
>
<X className="h-4 w-4" />
</Button>
@ -111,7 +111,7 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
variant="ghost"
size="sm"
onClick={() => setShowSearch(true)}
className="text-muted-foreground/50 hover:text-white hover:bg-white/5 bg-black/20 backdrop-blur-sm rounded-full h-8 px-4 border border-white/5"
className="text-muted-foreground/50 hover:text-foreground hover:bg-muted/50 bg-muted/30 backdrop-blur-sm rounded-full h-8 px-4 border border-border"
>
<Search className="h-3 w-3 mr-2" />
<span className="text-xs font-mono uppercase">Search Log</span>

6
apps/web/src/features/search/components/search-page/SearchPageHeader.tsx
View file

@ -13,7 +13,7 @@ export function SearchPageHeader({
}: SearchPageHeaderProps) {
return (
<div className="mb-12 text-center max-w-3xl mx-auto">
<h1 className="text-display md:text-5xl font-display mb-6 text-white">
<h1 className="text-display md:text-5xl font-display mb-6 text-foreground">
Explore the{' '}
<span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-magenta-500">
Nebula
@ -21,7 +21,7 @@ export function SearchPageHeader({
</h1>
<div className="relative group">
<div className="absolute -inset-1 bg-gradient-to-r from-cyan-500 to-magenta-500 rounded-2xl blur opacity-20 group-hover:opacity-40 transition duration-[var(--duration-slow)]" />
<div className="relative flex items-center bg-black/50 backdrop-blur-xl border border-white/10 rounded-2xl overflow-hidden shadow-2xl">
<div className="relative flex items-center bg-card/80 backdrop-blur-xl border border-border rounded-2xl overflow-hidden shadow-2xl">
<Search className="w-5 h-5 ml-4 text-muted-foreground flex-shrink-0" />
<input
value={query}
@ -35,7 +35,7 @@ export function SearchPageHeader({
<button
type="button"
onClick={onClear}
className="p-2 mr-2 hover:bg-white/10 rounded-full transition-colors text-muted-foreground hover:text-white"
className="p-2 mr-2 hover:bg-muted/50 rounded-full transition-colors text-muted-foreground hover:text-foreground"
aria-label="Clear search"
>
<X className="w-5 h-5" />