# HG changeset patch
# User Chris Cannam <cannam@all-day-breakfast.com>
# Date 1493373112 -3600
# Node ID 7bd5152e2edbaef0c062e9207c1a02aeb88b26b6
# Parent  6d128e43f4d5a186712b7e0ecf3ba30f7caed44b
Some tweaks to colour selection

diff -r 6d128e43f4d5 -r 7bd5152e2edb src/app/waveform/waveform.component.ts
--- a/src/app/waveform/waveform.component.ts	Fri Apr 28 09:23:57 2017 +0100
+++ b/src/app/waveform/waveform.component.ts	Fri Apr 28 10:51:52 2017 +0100
@@ -32,11 +32,28 @@
 type Track = any;
 type Colour = string;
 
+const colours = function* () {
+  const circularColours = [
+    '#0868ac', // "sapphire blue", our waveform / header colour
+    '#c33c54', // "brick red"
+    '#17bebb', // "tiffany blue"
+    '#001021', // "rich black"
+    '#fa8334', // "mango tango"
+    '#034748' // "deep jungle green"
+  ];
+  let index = 0;
+  const nColours = circularColours.length;
+  while (true) {
+    yield circularColours[index = ++index % nColours];
+  }
+}();
+
 @Component({
   selector: 'ugly-waveform',
   templateUrl: './waveform.component.html',
   styleUrls: ['./waveform.component.css']
 })
+
 export class WaveformComponent implements OnInit, AfterViewInit, OnDestroy {
 
   @ViewChild('track') trackDiv: ElementRef;
@@ -48,22 +65,7 @@
       if (this.featureExtractionSubscription) {
         return;
       }
-
-      const colours = function* () {
-        const circularColours = [
-          'black',
-          'red',
-          'green',
-          'purple',
-          'orange'
-        ];
-        let index = 0;
-        const nColours = circularColours.length;
-        while (true) {
-          yield circularColours[index = ++index % nColours];
-        }
-      }();
-
+      
       this.featureExtractionSubscription =
         this.piperService.featuresExtracted$.subscribe(
           features => {
@@ -251,7 +253,8 @@
       });
       this.addLayer(timeAxis, waveTrack, this.timeline.timeContext, true);
       this.cursorLayer = new wavesUI.helpers.CursorLayer({
-        height: height
+        height: height,
+        color: '#c33c54'
       });
       this.addLayer(this.cursorLayer, waveTrack, this.timeline.timeContext);
     }
@@ -557,14 +560,15 @@
       const waveformLayer = new wavesUI.helpers.WaveformLayer(buffer, {
         top: (height - totalWaveHeight) / 2 + waveHeight * ch,
         height: waveHeight,
-        color: 'darkblue',
+        color: '#0868ac',
         channel: ch
       });
       this.addLayer(waveformLayer, waveTrack, this.timeline.timeContext);
     }
 
     this.cursorLayer = new wavesUI.helpers.CursorLayer({
-      height: height
+      height: height,
+      color: '#c33c54'
     });
     this.addLayer(this.cursorLayer, waveTrack, this.timeline.timeContext);
     this.timeline.state = new wavesUI.states.CenteredZoomState(this.timeline);
@@ -646,9 +650,9 @@
           this.timeline.timeContext
         );
         this.highlightLayer = new wavesUI.helpers.HighlightLayer(lineLayer, {
-          color: colour,
           opacity: 0.7,
-          height: height
+          height: height,
+          color: '#c33c54'
         });
         this.addLayer(
           this.highlightLayer,
diff -r 6d128e43f4d5 -r 7bd5152e2edb src/styles.css
--- a/src/styles.css	Fri Apr 28 09:23:57 2017 +0100
+++ b/src/styles.css	Fri Apr 28 10:51:52 2017 +0100
@@ -48,3 +48,11 @@
 html {
   height: 100%;
 }
+
+/* Small change to this colour to fit better with colours we use in
+   visualisations */
+
+.mat-toolbar, .mat-toolbar.mat-primary {
+  background: #0868ac;
+}
+