From f3182ce6742561482608bec5aa5d93bb3069126e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Michelle?= <andre.michelle@gmail.com>
Date: Sat, 14 Mar 2026 20:37:58 +0100
Subject: [PATCH] vapo design

---
 .../src/ui/components/ParameterLabel.sass     |  2 +-
 .../instruments/VaporisateurDeviceEditor.sass | 27 ++++++++++++++++---
 .../instruments/VaporisateurDeviceEditor.tsx  |  4 +++
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/app/studio/src/ui/components/ParameterLabel.sass b/packages/app/studio/src/ui/components/ParameterLabel.sass
index 7754a7e6..bbf1150e 100644
--- a/packages/app/studio/src/ui/components/ParameterLabel.sass
+++ b/packages/app/studio/src/ui/components/ParameterLabel.sass
@@ -43,5 +43,5 @@ component
     line-height: 18px
 
     &.modifying, .modifying &
-      box-shadow: 0 0 0 0.5px rgba(white, 0.2)
+      box-shadow: 0 0 0 0.5px rgba(white, 0.1)
       background-color: var(--color-black)
\ No newline at end of file
diff --git a/packages/app/studio/src/ui/devices/instruments/VaporisateurDeviceEditor.sass b/packages/app/studio/src/ui/devices/instruments/VaporisateurDeviceEditor.sass
index 060ed68d..98b7b606 100644
--- a/packages/app/studio/src/ui/devices/instruments/VaporisateurDeviceEditor.sass
+++ b/packages/app/studio/src/ui/devices/instruments/VaporisateurDeviceEditor.sass
@@ -16,14 +16,35 @@ component
     height: calc(50% - 4px)
     position: absolute
     pointer-events: none
-    border-radius: 3px
-    outline: 0.5px solid hsla(200, 40%, 70%, 0.12)
-    outline-offset: 1px
+    border-radius: 2px
+    //outline: 1px color-mix(in srgb, var(--color) 10%, transparent) solid
+    background: color-mix(in srgb, var(--color) 7%, transparent)
     z-index: 0
 
     &.unisono-section
       grid-row: 1 / 1
       grid-column: 5 / -1
+      --color: var(--color-orange)
+
+    &.oscillator-section
+      grid-row: 2 / 2
+      grid-column: 3 / -2
+      --color: var(--color-blue)
+
+    &.filter-section
+      grid-row: 3 / 3
+      grid-column: 3 / -1
+      --color: var(--color-green)
+
+    &.lfo-section
+      grid-row: 4 / 4
+      grid-column: 3 / -1
+      --color: var(--color-purple)
+
+    &.env-section
+      grid-row: 5 / 5
+      grid-column: 3 / -2
+      --color: var(--color-yellow)
 
   > div
     > *:first-child
diff --git a/packages/app/studio/src/ui/devices/instruments/VaporisateurDeviceEditor.tsx b/packages/app/studio/src/ui/devices/instruments/VaporisateurDeviceEditor.tsx
index 9521a84a..403caadc 100644
--- a/packages/app/studio/src/ui/devices/instruments/VaporisateurDeviceEditor.tsx
+++ b/packages/app/studio/src/ui/devices/instruments/VaporisateurDeviceEditor.tsx
@@ -171,6 +171,10 @@ export const VaporisateurDeviceEditor = ({lifecycle, service, adapter, deviceHos
                       populateControls={() => (
                           <div className={className}>
                               <div className="label unisono-section"/>
+                              <div className="label oscillator-section"/>
+                              <div className="label filter-section"/>
+                              <div className="label lfo-section"/>
+                              <div className="label env-section"/>
                               <div style={{display: "contents"}}>
                                   <Logo/>
                                   <div/>