changed some colours and the order of certain buttons

This commit is contained in:
2026-02-22 16:00:08 +02:00
parent ef31852fd8
commit 8abb65ac8d
3 changed files with 122 additions and 92 deletions

View File

@@ -201,13 +201,35 @@ export default function MelodyDetail() {
</div>
</div>
{canEdit && (
<div className="flex gap-2">
<div className="flex items-center gap-2">
<button
onClick={() => setShowPlayback(true)}
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
>
Playback
</button>
<button
onClick={() => setShowSpeedCalc(true)}
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{ backgroundColor: "var(--btn-neutral)", color: "var(--text-white)" }}
>
Speed Calculator
</button>
<div className="w-px h-6 mx-1" style={{ backgroundColor: "var(--border-primary)" }} />
<button
onClick={() => navigate(`/melodies/${id}/edit`)}
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{ backgroundColor: "var(--text-link)", color: "var(--text-white)" }}
>
Edit
</button>
{melody.status === "draft" ? (
<button
onClick={handlePublish}
disabled={actionLoading}
className="px-4 py-2 text-sm rounded-md transition-colors disabled:opacity-50"
style={{ backgroundColor: "#16a34a", color: "#fff" }}
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
>
{actionLoading ? "Publishing..." : "Publish"}
</button>
@@ -216,36 +238,15 @@ export default function MelodyDetail() {
onClick={() => setShowUnpublish(true)}
disabled={actionLoading}
className="px-4 py-2 text-sm rounded-md transition-colors disabled:opacity-50"
style={{ backgroundColor: "#ea580c", color: "#fff" }}
style={{ backgroundColor: "var(--danger-btn)", color: "var(--text-white)" }}
>
Unpublish
</button>
)}
<button
onClick={() => setShowPlayback(true)}
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)", border: "1px solid var(--border-primary)" }}
>
Playback
</button>
<button
onClick={() => setShowSpeedCalc(true)}
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)", border: "1px solid var(--border-primary)" }}
>
Speed Calculator
</button>
<button
onClick={() => navigate(`/melodies/${id}/edit`)}
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{ backgroundColor: "var(--text-link)", color: "var(--text-white)" }}
>
Edit
</button>
<button
onClick={() => setShowDelete(true)}
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{ backgroundColor: "var(--danger-btn)", color: "var(--text-white)" }}
style={{ backgroundColor: "var(--danger)", color: "var(--text-white)" }}
>
Delete
</button>