WIP. A little custom music server
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: orange background and song row gap

+10 -9
+1 -1
web/src/components/app-sidebar.tsx
··· 42 42 ]; 43 43 export function AppSidebar() { 44 44 return ( 45 - <Sidebar className="min-w-[200px]" collapsible="none"> 45 + <Sidebar className="min-w-[200px] h-auto" collapsible="none"> 46 46 <SidebarHeader /> 47 47 <SidebarContent> 48 48 <SidebarGroup>
+6 -6
web/src/components/song-row.tsx
··· 29 29 <button 30 30 onClick={handleClick} 31 31 data-is-current={isCurrent} 32 - className="track-row-grid p-4 gap-(x-4 y-1) group transition-all duration-200 cursor-pointer hover:bg-muted data-[is-current=true]:bg-brand-orange-light w-full text-left" 32 + className="track-row-grid p-4 gap-x-4 gap-y-1 group transition-all duration-200 cursor-pointer hover:bg-muted data-[is-current=true]:bg-primary-foreground w-full text-left" 33 33 > 34 34 <div 35 35 data-is-current={isCurrent} 36 - className="data-[id-current=true]:text-brand-orange grid place-items-center h-full w-6 text-center" 36 + className="data-[id-current=true]:text-primary grid place-items-center h-full w-6 text-center" 37 37 style={{ gridArea: "number" }} 38 38 > 39 39 <div className="w-4 h-4 group-hover:hidden grid place-items-center"> 40 40 {isPaused ? ( 41 - <Pause className="w-4 h-4 text-brand-orange" /> 41 + <Pause className="w-4 h-4 text-primary" /> 42 42 ) : isCurrent ? ( 43 - <AudioLines className="w-4 h-4 text-brand-orange" /> 43 + <AudioLines className="w-4 h-4 text-primary animate-pulse" /> 44 44 ) : ( 45 45 <> 46 46 <span>{props.trackNumber}</span> 47 47 </> 48 48 )} 49 49 </div> 50 - <Play className="w-4 h-4 text-brand-orange hidden group-hover:block" /> 50 + <Play className="w-4 h-4 text-primary hidden group-hover:block" /> 51 51 </div> 52 - <span data-id-current={isCurrent} className="font-semibold data-[id-current=true]:text-brand-orange"> 52 + <span data-id-current={isCurrent} className="font-semibold data-[id-current=true]:text-primary"> 53 53 {props.title} 54 54 </span> 55 55 <span className="text-sm">{props.artists.map((a) => a.name).join(", ")}</span>
+1 -1
web/src/pages/_layout.tsx
··· 15 15 <> 16 16 <meta name="description" content={data.description} /> 17 17 <link rel="icon" type="image/png" href={data.icon} /> 18 - <div className="font-['Geist'] pb-36 w-full overflow-x-hidden min-h-screen antialiased h-auto"> 18 + <div className="font-['Geist'] pb-36 w-full overflow-x-hidden min-h-screen flex flex-col antialiased h-auto"> 19 19 <Providers> 20 20 <SidebarProvider> 21 21 <AppSidebar />
+1 -1
web/src/pages/album/[id].tsx
··· 114 114 const album = yield* fetchAlbum(id); 115 115 116 116 return ( 117 - <div className="grid grid-cols-1 lg:grid-cols-[1fr_4fr] max-w-6xl w-full gap-x-8 px-8 py-12"> 117 + <div className="grid grid-cols-1 lg:grid-cols-[1fr_4fr] max-w-6xl w-full gap-x-8 px-8 py-12 mx-auto"> 118 118 {/* Left section*/} 119 119 <div className="relative"> 120 120 <div className="flex flex-col gap-5 sticky top-12">
+1
web/src/styles.css
··· 81 81 --color-popover-foreground: var(--popover-foreground); 82 82 --color-primary: var(--primary); 83 83 --color-primary-foreground: var(--primary-foreground); 84 + --color-primary-background: var(--primary-foreground); 84 85 --color-secondary: var(--secondary); 85 86 --color-secondary-foreground: var(--secondary-foreground); 86 87 --color-muted: var(--muted);