WIP. A little custom music server
fix: orange background and song row gap
+10
-9
+6
-6
web/src/components/song-row.tsx
+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
+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
+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
+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);