changed some colours and the order of certain buttons

2026-02-22 16:00:08 +02:00
parent ef31852fd8
commit 8abb65ac8d
3 changed files with 122 additions and 92 deletions
--- a/frontend/src/layout/Sidebar.jsx
+++ b/frontend/src/layout/Sidebar.jsx
@@ -8,8 +8,8 @@ const navItems = [
    label: "Melodies",
    permission: "melodies",
    children: [
-      { to: "/melodies", label: "Editor" },
-      { to: "/melodies/builder", label: "Builder" },
+      { to: "/melodies", label: "Main Editor" },
+      { to: "/melodies/builder", label: "Archetypes" },
      { to: "/melodies/settings", label: "Settings" },
    ],
  },
--- a/frontend/src/melodies/MelodyDetail.jsx
+++ b/frontend/src/melodies/MelodyDetail.jsx
@@ -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>
--- a/frontend/src/melodies/MelodyForm.jsx
+++ b/frontend/src/melodies/MelodyForm.jsx
@@ -5,6 +5,7 @@ import TranslationModal from "./TranslationModal";
 import SelectBuiltMelodyModal from "./builder/SelectBuiltMelodyModal";
 import BuildOnTheFlyModal from "./builder/BuildOnTheFlyModal";
 import SpeedCalculatorModal from "./SpeedCalculatorModal";
+import PlaybackModal from "./PlaybackModal";
 import {
  getLocalizedValue,
  getLanguageName,
@@ -86,6 +87,7 @@ export default function MelodyForm() {
  const [showSelectBuilt, setShowSelectBuilt] = useState(false);
  const [showBuildOnTheFly, setShowBuildOnTheFly] = useState(false);
  const [showSpeedCalc, setShowSpeedCalc] = useState(false);
+  const [showPlayback, setShowPlayback] = useState(false);
  const [builtMelody, setBuiltMelody] = useState(null);
  const [assignedBinaryName, setAssignedBinaryName] = useState(null);

@@ -270,65 +272,45 @@ export default function MelodyForm() {
        <h1 className="text-2xl font-bold" style={headingStyle}>
          {isEdit ? "Edit Melody" : "Add Melody"}
        </h1>
-        <div className="flex gap-3">
-          {isEdit && (
+        <div className="flex items-center gap-2">
+          {isEdit ? (
+            <>
+              <button
+                type="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
                type="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)" }}
+                style={{ backgroundColor: "var(--btn-neutral)", color: "var(--text-white)" }}
              >
                Speed Calculator
              </button>
-          )}
-          <button
-            type="button"
-            onClick={() => navigate(isEdit ? `/melodies/${id}` : "/melodies")}
-            className="px-4 py-2 text-sm rounded-md transition-colors"
-            style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)" }}
-          >
-            Cancel
-          </button>
-          {!isEdit ? (
+              <div className="w-px h-6 mx-1" style={{ backgroundColor: "var(--border-primary)" }} />
+              {melodyStatus === "draft" ? (
                <>
                  <button
                    type="submit"
                    form="melody-form"
                    disabled={saving || uploading}
                    className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)", border: "1px solid var(--border-primary)" }}
+                    style={{ backgroundColor: "var(--btn-neutral)", color: "var(--text-white)" }}
                  >
-                {saving ? "Saving..." : "Save as Draft"}
-              </button>
-              <button
-                type="button"
-                disabled={saving || uploading}
-                onClick={() => handleSave(true)}
-                className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
-              >
-                {uploading ? "Uploading files..." : "Publish Melody"}
-              </button>
-            </>
-          ) : melodyStatus === "draft" ? (
-            <>
-              <button
-                type="submit"
-                form="melody-form"
-                disabled={saving || uploading}
-                className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)", border: "1px solid var(--border-primary)" }}
-              >
-                {saving ? "Saving..." : "Update Draft"}
+                    {saving ? "Saving..." : "Update Melody"}
                  </button>
                  <button
                    type="button"
                    disabled={saving || uploading}
                    onClick={handlePublishAction}
                    className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                style={{ backgroundColor: "#16a34a", color: "#fff" }}
+                    style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
                  >
-                {uploading ? "Uploading files..." : "Publish"}
+                    {uploading ? "Uploading..." : "Publish"}
                  </button>
                </>
              ) : (
@@ -338,21 +320,61 @@ export default function MelodyForm() {
                    form="melody-form"
                    disabled={saving || uploading}
                    className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
+                    style={{ backgroundColor: "var(--btn-neutral)", color: "var(--text-white)" }}
                  >
-                {uploading ? "Uploading files..." : saving ? "Saving..." : "Update Melody"}
+                    {uploading ? "Uploading..." : saving ? "Saving..." : "Update Melody"}
                  </button>
                  <button
                    type="button"
                    disabled={saving || uploading}
                    onClick={handleUnpublishAction}
                    className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                style={{ backgroundColor: "#ea580c", color: "#fff" }}
+                    style={{ backgroundColor: "var(--danger-btn)", color: "var(--text-white)" }}
                  >
                    Unpublish
                  </button>
                </>
              )}
+              <button
+                type="button"
+                onClick={() => navigate(`/melodies/${id}`)}
+                className="px-4 py-2 text-sm rounded-md transition-colors"
+                style={{ backgroundColor: "var(--btn-neutral)", color: "var(--text-white)" }}
+              >
+                Cancel
+              </button>
+            </>
+          ) : (
+            <>
+              <button
+                type="button"
+                onClick={() => navigate("/melodies")}
+                className="px-4 py-2 text-sm rounded-md transition-colors"
+                style={{ backgroundColor: "var(--btn-neutral)", color: "var(--text-white)" }}
+              >
+                Cancel
+              </button>
+              <div className="w-px h-6 mx-1" style={{ backgroundColor: "var(--border-primary)" }} />
+              <button
+                type="submit"
+                form="melody-form"
+                disabled={saving || uploading}
+                className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                style={{ backgroundColor: "var(--btn-neutral)", color: "var(--text-white)" }}
+              >
+                {saving ? "Saving..." : "Save Draft"}
+              </button>
+              <button
+                type="button"
+                disabled={saving || uploading}
+                onClick={() => handleSave(true)}
+                className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
+              >
+                {uploading ? "Uploading..." : "Publish Melody"}
+              </button>
+            </>
+          )}
        </div>
      </div>

@@ -634,6 +656,13 @@ export default function MelodyForm() {

      {isEdit && (
        <>
+          <PlaybackModal
+            open={showPlayback}
+            melody={{ id, information, default_settings: settings, type, url, uid, pid }}
+            builtMelody={builtMelody}
+            archetypeCsv={information.archetype_csv || null}
+            onClose={() => setShowPlayback(false)}
+          />
          <SpeedCalculatorModal
            open={showSpeedCalc}
            melody={{ id, information, default_settings: settings, type, url, uid, pid }}