ui(colors): Replace red tones with monochrome

source/tokensequence.py

@@ -32,12 +32,13 @@ def token_sequence_to_image(token_sequence):
     image_height = max_pitch - min_pitch + 1
     image_width = int(16 * 4)
 
-    color = (150, 15, 15)
+    color = (12, 12, 12)
 
     # Indicate that this bar was used for composition.
     image = Image.new("RGB", (image_width, image_height), color)
 
-    colors = [(0, 0, 0), (255, 255, 255), (255, 0, 0), (0, 255, 0), (0, 0, 255), (255, 255, 0), (255, 0, 255), (0, 255, 255)]
+    # colors = [(0, 0, 0), (255, 255, 255), (255, 0, 0), (0, 255, 0), (0, 0, 255), (255, 255, 0), (255, 0, 255), (0, 255, 255)]
+    colors = [(248, 249, 250), (233, 236, 239), (173, 181, 189), (52, 58, 64)]
 
     instrument_to_color_index = {}
 

source/ui/src/lib/Notes.svelte

@@ -74,7 +74,7 @@ const keyDown = (e: KeyboardEvent): void => {
 
 {#if $audioBlob}
   <section transition:fade>
-    <img class="visualisation" src={$notesImage} alt="" bind:this={visualisation} />
+    <img class="notes" src={$notesImage} alt="" bind:this={visualisation} />
     <div
       bind:this={player}
       class="player"
@@ -114,9 +114,10 @@ section {
   transform: translateX(-50%);
   cursor: pointer;
 }
-.visualisation {
+.notes {
   width: min(100%, 512px);
   margin: auto;
+  box-shadow: 0 0 5px 0.1px hsl(210, 10%, 20%);
 }
 
 audio {