1. Add scrollTarget behaviour to theoretical switch button

2. Change colour of youtube video loader bg

Author: Salma Alam-Naylor

apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html

@@ -65,7 +65,7 @@ <h2 class="infoBlock__title">About Theoretical Scales
     of {{modeMap[0].displayName | getEnharmonicEquivalent }} to make
     the notes easier to read. (It'll sound exactly the same!)</p>
   <a class="actionButton"
-     (click)="toggleTheoreticalScaleInfo()"
+     (click)="linkClick()"
      [routerLink]="note | getEnharmonicRouterLink: noteExtenderString: mode"
   >Switch to {{modeMap[0].displayName | getEnharmonicEquivalent }}</a>
 

apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { Mode, ModeMap } from '../../../util/types';
 import { NotePlaybackService } from '../../playback/note-playback.service';
+import { GlobalService } from '../../../global.service';
 
 enum ScaleDegreesToggleText {
   hidden = 'What is this?',
@@ -30,7 +31,8 @@ export class ScaleMapComponent {
   scaleDegreesToggleText = ScaleDegreesToggleText.hidden;
   theoreticalScalesToggleText = TheoreticalScalesToggleText.hidden;
 
-  constructor(public playbackService: NotePlaybackService) {
+  constructor(public playbackService: NotePlaybackService,
+              private globalService: GlobalService) {
   }
 
   toggleScaleMapInfo() {
@@ -43,6 +45,11 @@ export class ScaleMapComponent {
     this.theoreticalScalesToggleText = this.showTheoreticalScalesInfo ? TheoreticalScalesToggleText.visible : TheoreticalScalesToggleText.hidden;
   }
 
+  linkClick() {
+    this.toggleTheoreticalScaleInfo();
+    this.globalService.getScrollTarget().scrollIntoView();
+  }
+
   playScale(modeMap: ModeMap) {
     this.playbackService.playMode(modeMap);
   }

apps/fretonator-web/src/app/common/video-loader/video-loader.component.scss

@@ -34,7 +34,7 @@
   height: 0;
   padding-bottom: percentage(9/16);
   overflow: hidden;
-  background-color: var(--purple);
+  background-color: var(--black);
   position: relative;
 }
 

apps/fretonator-web/src/app/common/video-loader/video-server/video-server.component.scss

@@ -11,10 +11,11 @@
 
 .videoServer__title {
   @include font_large;
+  color: var(--offwhite);
   margin-bottom: pxToRem($grid-unit * 4);
 }
 
 .videoServer__link {
-  color: var(--black);
+  color: var(--offwhite);
   font-size: pxToRem(26);
 }

apps/fretonator-web/src/app/common/video-loader/video-server/video-server.component.ts

@@ -1,17 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-video-server',
   templateUrl: './video-server.component.html',
   styleUrls: ['./video-server.component.scss']
 })
-export class VideoServerComponent implements OnInit {
+export class VideoServerComponent {
   @Input() youTubeId: string;
-
-  constructor() {
-  }
-
-  ngOnInit(): void {
-  }
-
 }