this repo has no description
Adapt song list styling for dark mode
+21
-21
+21
-21
components/SongList.tsx
+21
-21
components/SongList.tsx
···
124
124
function SongCard({ song, onEdit, onDelete, isDeleting }: { song: Song; onEdit: (song: Song) => void; onDelete: (song: Song) => void; isDeleting: boolean }) {
125
125
const [open, setOpen] = useState(false);
126
126
return (
127
-
<div className="border rounded p-4 bg-white shadow">
127
+
<div className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
128
128
<div className="flex justify-between items-center">
129
129
<div className="flex-1 cursor-pointer" onClick={() => setOpen((v) => !v)}>
130
-
<div className="font-bold">{song.title}</div>
131
-
<div className="text-xs text-gray-500">ISWC: {song.iswc || "-"}</div>
130
+
<div className="font-bold text-zinc-900 dark:text-zinc-100">{song.title}</div>
131
+
<div className="text-xs text-zinc-600 dark:text-zinc-400">ISWC: {song.iswc || "-"}</div>
132
132
</div>
133
133
<div className="flex items-center gap-2">
134
134
<button
···
151
151
>
152
152
{isDeleting ? "Deleting..." : "Delete"}
153
153
</button>
154
-
<span className="cursor-pointer" onClick={() => setOpen((v) => !v)}>{open ? "▲" : "▼"}</span>
154
+
<span className="cursor-pointer text-zinc-700 dark:text-zinc-300" onClick={() => setOpen((v) => !v)}>{open ? "▲" : "▼"}</span>
155
155
</div>
156
156
</div>
157
157
{open && (
158
-
<div className="mt-2 text-sm">
159
-
<div className="font-semibold mb-2">Interested Parties:</div>
158
+
<div className="mt-2 text-sm text-zinc-700 dark:text-zinc-200">
159
+
<div className="font-semibold mb-2 text-zinc-900 dark:text-zinc-100">Interested Parties:</div>
160
160
<div className="overflow-x-auto">
161
-
<table className="min-w-full border text-xs">
162
-
<thead className="bg-gray-100">
161
+
<table className="min-w-full border border-zinc-200 text-xs dark:border-zinc-700">
162
+
<thead className="bg-zinc-100 dark:bg-zinc-800">
163
163
<tr>
164
-
<th className="px-2 py-1 border">Name</th>
165
-
<th className="px-2 py-1 border">Role</th>
166
-
<th className="px-2 py-1 border">IPI</th>
167
-
<th className="px-2 py-1 border">Collecting Society</th>
168
-
<th className="px-2 py-1 border text-right">Performance %</th>
169
-
<th className="px-2 py-1 border text-right">Mechanical %</th>
164
+
<th className="px-2 py-1 border border-zinc-200 dark:border-zinc-700">Name</th>
165
+
<th className="px-2 py-1 border border-zinc-200 dark:border-zinc-700">Role</th>
166
+
<th className="px-2 py-1 border border-zinc-200 dark:border-zinc-700">IPI</th>
167
+
<th className="px-2 py-1 border border-zinc-200 dark:border-zinc-700">Collecting Society</th>
168
+
<th className="px-2 py-1 border border-zinc-200 dark:border-zinc-700 text-right">Performance %</th>
169
+
<th className="px-2 py-1 border border-zinc-200 dark:border-zinc-700 text-right">Mechanical %</th>
170
170
</tr>
171
171
</thead>
172
172
<tbody>
173
173
{song.interestedParties.map((p, i) => (
174
-
<tr key={i} className="even:bg-gray-50">
175
-
<td className="px-2 py-1 border">{p.name}</td>
176
-
<td className="px-2 py-1 border">{p.role || ""}</td>
177
-
<td className="px-2 py-1 border">{p.ipi || ""}</td>
178
-
<td className="px-2 py-1 border">{p.collectingSociety || ""}</td>
179
-
<td className="px-2 py-1 border text-right">{formatPercentage(p.performanceRoyaltiesPercentage)}</td>
180
-
<td className="px-2 py-1 border text-right">{formatPercentage(p.mechanicalRoyaltiesPercentage)}</td>
174
+
<tr key={i} className="even:bg-zinc-50 dark:even:bg-zinc-800/40">
175
+
<td className="px-2 py-1 border border-zinc-200 dark:border-zinc-700">{p.name}</td>
176
+
<td className="px-2 py-1 border border-zinc-200 dark:border-zinc-700">{p.role || ""}</td>
177
+
<td className="px-2 py-1 border border-zinc-200 dark:border-zinc-700">{p.ipi || ""}</td>
178
+
<td className="px-2 py-1 border border-zinc-200 dark:border-zinc-700">{p.collectingSociety || ""}</td>
179
+
<td className="px-2 py-1 border border-zinc-200 dark:border-zinc-700 text-right">{formatPercentage(p.performanceRoyaltiesPercentage)}</td>
180
+
<td className="px-2 py-1 border border-zinc-200 dark:border-zinc-700 text-right">{formatPercentage(p.mechanicalRoyaltiesPercentage)}</td>
181
181
</tr>
182
182
))}
183
183
</tbody>