bonamin/bellsystems-cp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: Major Overhaul to all subsystems

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-03-07 11:32:18 +02:00
parent 810e81b323
commit c62188fda6
107 changed files with 20414 additions and 929 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/melodies/MelodySettings.jsx
View File

@@ -14,12 +14,7 @@ const DEFAULT_NOTE_ASSIGNMENT_COLORS = [
"#F87171", "#EF4444", "#DC2626", "#B91C1C",
];
const sectionStyle = {
backgroundColor: "var(--bg-card)",
borderColor: "var(--border-primary)",
};
const headingStyle = { color: "var(--text-heading)" };
const labelStyle = { color: "var(--text-secondary)" };
const mutedStyle = { color: "var(--text-muted)" };
export default function MelodySettings() {
@@ -200,8 +195,10 @@ export default function MelodySettings() {
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
{/* --- Languages Section --- */}
<section className="rounded-lg p-6 border" style={sectionStyle}>
<h2 className="text-lg font-semibold mb-4" style={headingStyle}>Available Languages</h2>
<section className="ui-section-card">
<div className="ui-section-card__title-row">
<h2 className="ui-section-card__header-title">Available Languages</h2>
</div>
<div className="space-y-2 mb-4">
{settings.available_languages.map((code) => (
<div
@@ -237,8 +234,10 @@ export default function MelodySettings() {
</section>
{/* --- Quick Colors Section --- */}
<section className="rounded-lg p-6 border" style={sectionStyle}>
<h2 className="text-lg font-semibold mb-4" style={headingStyle}>Quick Selection Colors</h2>
<section className="ui-section-card">
<div className="ui-section-card__title-row">
<h2 className="ui-section-card__header-title">Quick Selection Colors</h2>
</div>
<div className="flex flex-wrap gap-3 mb-4">
{settings.quick_colors.map((color) => (
<div key={color} className="relative group">
@@ -279,8 +278,10 @@ export default function MelodySettings() {
</section>
{/* --- Duration Presets Section --- */}
<section className="rounded-lg p-6 xl:col-span-2 border" style={sectionStyle}>
<h2 className="text-lg font-semibold mb-4" style={headingStyle}>Duration Presets (seconds)</h2>
<section className="ui-section-card xl:col-span-2">
<div className="ui-section-card__title-row">
<h2 className="ui-section-card__header-title">Duration Presets (seconds)</h2>
</div>
<div className="flex flex-wrap gap-2 mb-4">
{settings.duration_values.map((val) => (
<div
@@ -317,8 +318,10 @@ export default function MelodySettings() {
</section>
{/* --- Note Assignment Colors --- */}
<section className="rounded-lg p-6 xl:col-span-2 border" style={sectionStyle}>
<h2 className="text-lg font-semibold mb-2" style={headingStyle}>Note Assignment Color Coding</h2>
<section className="ui-section-card xl:col-span-2">
<div className="ui-section-card__title-row">
<h2 className="ui-section-card__header-title">Note Assignment Color Coding</h2>
</div>
<p className="text-xs mb-4" style={mutedStyle}>
Colors used in Composer, Playback, and View table dots. Click a bell to customize.
</p>