Added cta to click notes on fretboard, unskipped all tests

Salma Alam-Naylor · Salma Alam-Naylor · commit 0a2392838d2f · 2020-06-09T20:40:00.000+01:00
diff --git a/apps/fretonator-web/src/app/common/footer/footer.component.scss b/apps/fretonator-web/src/app/common/footer/footer.component.scss
@@ -16,6 +16,7 @@
 .footer__thanksCopy {
   @include font_bodyCopy();
   color: var(--offwhite);
+  text-align: center;
 }
 
 .footer__creditsTitle {
@@ -24,6 +25,7 @@
   margin-bottom: pxToRem($grid-unit);
   color: var(--peach);
   font-weight: var(--font-weight-bold);
+  text-align: center;
 }
 
 .footer__creditsList {
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html
@@ -54,6 +54,13 @@
   </div>
 </div>
 
+<h4 class="fretonator__playCta">
+  <span class="fretonator__playCtaIcon">
+    <app-speaker-svg></app-speaker-svg>
+  </span>
+  Tap notes on the fretboard for sound!
+</h4>
+
 <div class="infoContainer">
   <app-scale-map [mode]="mode"
                  [scale]="scale"
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss
@@ -1,6 +1,7 @@
 @import "../../../styles/vars";
 @import "../../../styles/functions";
 @import "../../../styles/mixins";
+@import "../../../styles/typography";
 
 .fretboard__container {
   margin-top: pxToRem($grid-unit * 1);
@@ -256,3 +257,20 @@
     display: none;
   }
 }
+
+.fretonator__playCta {
+  @include font_bodyCopy();
+  font-size: pxToRem(14);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: pxToRem($grid-unit * 4);
+  color: var(--grey);
+}
+
+.fretonator__playCtaIcon {
+  display: flex;
+  height: pxToRem($grid-unit * 3);
+  width: pxToRem($grid-unit * 3);
+  margin-right: pxToRem($grid-unit);
+}
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.spec.ts b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.spec.ts
@@ -3,21 +3,23 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FretonatorComponent } from './fretonator.component';
 import { FretonatorModule } from './fretonator.module';
 import { Component } from '@angular/core';
-import { dIonianFretMappings } from '../fret-map/fret-map.service.testConstants';
 
 describe('FretonatorComponent', () => {
-
   @Component({
     selector: 'app-fretonator-spec',
     template: `
-      <app-fretonator></app-fretonator>
-    `,
+      <app-fretonator [scale]="['C', 'D', 'E']"
+                      [fretMap]="[
+                      { string: 'A', fret: 0, displayName: 'A', degree: 'dominant' },
+                      { string: 'A', fret: 2, displayName: 'B', degree: 'submediant' }]">
+      </app-fretonator>
+    `
   })
   class FretonatorComponentSpec {
   }
 
-  let component: FretonatorComponent;
-  let fixture: ComponentFixture<FretonatorComponent>;
+  let component: FretonatorComponentSpec;
+  let fixture: ComponentFixture<FretonatorComponentSpec>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -27,13 +29,12 @@ describe('FretonatorComponent', () => {
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(FretonatorComponent);
+    fixture = TestBed.createComponent(FretonatorComponentSpec);
     component = fixture.componentInstance;
-    component.fretMap = dIonianFretMappings;
     fixture.detectChanges();
   });
 
-  xit('should create', () => {
+  it('should create', () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.module.ts b/apps/fretonator-web/src/app/common/fretonator/fretonator.module.ts
@@ -6,6 +6,7 @@ import { ChordMapModule } from './chord-map/chord-map.module';
 import { IntervalMapModule } from './interval-map/interval-map.module';
 import { ScaleMapModule } from './scale-map/scale-map.module';
 import { IsTheoreticalScalePipe } from './is-theoretical-scale.pipe';
+import { SpeakerModule } from '../svgs/speaker/speaker.module';
 
 @NgModule({
   declarations: [
@@ -17,7 +18,8 @@ import { IsTheoreticalScalePipe } from './is-theoretical-scale.pipe';
     CommonModule,
     ChordMapModule,
     IntervalMapModule,
-    ScaleMapModule
+    ScaleMapModule,
+    SpeakerModule
   ],
   exports: [
     FretonatorComponent
diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html
@@ -44,10 +44,7 @@ <h2 class="infoBlock__title">About Theoretical Scales
             aria-label="Theoretical Scales Info Close"
             type="button"
             (click)="toggleTheoreticalScaleInfo()">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
-        <path fill="#474350" fill-rule="evenodd"
-              d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z"></path>
-      </svg>
+    <app-cross-svg></app-cross-svg>
     </button>
   </h2>
   <p class="infoBlock__copy">A theoretical scale or <em>impossible key</em> is a key whose key signature has at least
@@ -69,10 +66,7 @@ <h2 class="infoBlock__title">About Scale Degrees
             aria-label="Scale Degrees Info Close"
             type="button"
             (click)="toggleScaleMapInfo()">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
-        <path fill="#474350" fill-rule="evenodd"
-              d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z"></path>
-      </svg>
+      <app-cross-svg></app-cross-svg>
     </button>
   </h2>
   <p class="infoBlock__copy">
diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.scss b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.scss
@@ -138,15 +138,12 @@
   background-color: transparent;
   height: pxToRem(44);
   width: pxToRem(44);
+  padding: pxToRem($grid-unit);
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-
-  svg {
-    height: 50%;
-    width: 50%;
-  }
+  color: var(--grey);
 }
 
 .infoBlock__copy {
diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.module.ts b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.module.ts
@@ -5,6 +5,7 @@ import { DisplayScaleDegreesPipe } from './display-scale-degrees.pipe';
 import { GetEnharmonicEquivalentPipe } from './get-enharmonic-equivalent.pipe';
 import { RouterModule } from '@angular/router';
 import { GetEnharmonicRouterLinkPipe } from './get-enharmonic-router-link.pipe';
+import { CrossModule } from '../../svgs/cross/cross.module';
 
 
 @NgModule({
@@ -14,7 +15,8 @@ import { GetEnharmonicRouterLinkPipe } from './get-enharmonic-router-link.pipe';
   ],
   imports: [
     CommonModule,
-    RouterModule
+    RouterModule,
+    CrossModule
   ]
 })
 export class ScaleMapModule { }
diff --git a/apps/fretonator-web/src/app/common/header/__snapshots__/header.component.spec.ts.snap b/apps/fretonator-web/src/app/common/header/__snapshots__/header.component.spec.ts.snap
@@ -20,7 +20,6 @@ exports[`HeaderComponent should match snapshot 1`] = `
         >
           <path
             d="M302.39 1410.89v42.7h61.43v15.05h-61.43v49.53h-17.5v-122.5h86.45v15.22zM499.93 1518.17l-26.42-37.63c-3.27.24-5.84.35-7.7.35h-30.28v37.28H418v-122.5h47.78q23.79 0 37.45 11.37t13.65 31.33q0 14.18-7 24.15T490 1477l29 41.17zm-9.27-59.33q8.74-7.17 8.75-20.47t-8.75-20.37q-8.76-7.1-25.38-7.09h-29.75V1466h29.75q16.62 0 25.38-7.16zM658.74 1502.94v15.23h-88.9v-122.5h86.45v15.22h-68.95v37.63h61.43v14.87h-61.43v39.55zM739.79 1410.89h-42v-15.22h101.32v15.22h-42v107.28h-17.32zM861 1511.43a60.22 60.22 0 01-23.36-22.49 64.65 64.65 0 010-64A60.29 60.29 0 01861 1402.4a72.43 72.43 0 0166.68 0 59.84 59.84 0 0123.32 22.4 65.59 65.59 0 010 64.23 59.77 59.77 0 01-23.27 22.4 72.35 72.35 0 01-66.68 0zm57.67-13.56a45 45 0 0017-16.89 49.73 49.73 0 000-48.13 44.94 44.94 0 00-17-16.88 48.09 48.09 0 00-24.24-6.13A49 49 0 00870 1416a44.51 44.51 0 00-17.15 16.88 49.66 49.66 0 000 48.13 44.6 44.6 0 0017.15 16.86 49.1 49.1 0 0024.41 6.12 48.19 48.19 0 0024.28-6.12zM1116.21 1395.67v122.5h-14.35l-73.5-91.35v91.35h-17.5v-122.5h14.35l73.5 91.35v-91.35zM1256.49 1487.54h-65.1l-13.48 30.63h-18l55.47-122.5h17.33l55.65 122.5H1270zm-6.13-14l-26.42-60-26.43 60zM1343.06 1410.89h-42v-15.22h101.32v15.22h-42v107.28h-17.32zM1464.3 1511.43a60.17 60.17 0 01-23.37-22.49 64.71 64.71 0 010-64 60.24 60.24 0 0123.37-22.49 72.41 72.41 0 0166.67 0 59.8 59.8 0 0123.28 22.4 65.59 65.59 0 010 64.23 59.73 59.73 0 01-23.28 22.4 72.33 72.33 0 01-66.67 0zm57.66-13.56a45 45 0 0017-16.89 49.66 49.66 0 000-48.13 44.94 44.94 0 00-17-16.88 48.09 48.09 0 00-24.24-6.13 49 49 0 00-24.41 6.13 44.58 44.58 0 00-17.15 16.88 49.73 49.73 0 000 48.13 44.67 44.67 0 0017.15 16.89 49.13 49.13 0 0024.41 6.12 48.19 48.19 0 0024.28-6.12zM1696 1518.17l-26.42-37.63c-3.27.24-5.84.35-7.7.35h-30.28v37.28h-17.5v-122.5h47.78q23.79 0 37.45 11.37t13.65 31.33q0 14.18-7 24.15t-20 14.52l29 41.13zm-9.27-59.33q8.74-7.17 8.75-20.47t-8.75-20.39q-8.76-7.1-25.38-7.09h-29.75V1466h29.75q16.65 0 25.41-7.16zM1080.78 1060.28L1134 968a14.91 14.91 0 002-7.49V487.93a7.5 7.5 0 00-7.5-7.5h-54.18a7.5 7.5 0 00-7.5 7.5v568.61a7.5 7.5 0 0013.96 3.74zM1229.85 480.43h-54.19a7.5 7.5 0 00-7.5 7.5v392.72a7.5 7.5 0 0014 3.75l53.18-92.27a15 15 0 002-7.49V487.93a7.5 7.5 0 00-7.49-7.5zM925.71 480.43h-54.18a7.5 7.5 0 00-7.5 7.5v472.59a14.91 14.91 0 002 7.49l53.18 92.27a7.5 7.5 0 0014-3.74V487.93a7.5 7.5 0 00-7.5-7.5zM1363.08 480.43h-86a7.5 7.5 0 00-7.5 7.5v216.84a7.5 7.5 0 0014 3.74l105.53-183.09a30 30 0 00-26.03-44.99zM764.66 792.13l53.18 92.27a7.5 7.5 0 0014-3.75V487.93a7.5 7.5 0 00-7.5-7.5h-54.19a7.5 7.5 0 00-7.5 7.5v296.71a15 15 0 002.01 7.49zM1027.09 480.43h-54.18a7.5 7.5 0 00-7.5 7.5v648.48a15 15 0 002 7.49l6.6 11.44a30 30 0 0052 0l6.6-11.44a15 15 0 002-7.49V487.93a7.5 7.5 0 00-7.52-7.5zM730.46 487.93a7.5 7.5 0 00-7.5-7.5h-86a30 30 0 00-26 45l105.5 183.08a7.5 7.5 0 0014-3.74z"
-            fill="#f9f9f9"
           />
         </svg>
       </app-logo-with-text>
diff --git a/apps/fretonator-web/src/app/common/header/header.component.scss b/apps/fretonator-web/src/app/common/header/header.component.scss
@@ -21,6 +21,7 @@
   cursor: pointer;
   margin-left: auto;
   margin-right: auto;
+  color: var(--offwhite);
 
   @include focus_accessible();
 
diff --git a/apps/fretonator-web/src/app/common/header/header.module.ts b/apps/fretonator-web/src/app/common/header/header.module.ts
@@ -2,8 +2,8 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HeaderComponent } from './header.component';
 import { RouterModule } from '@angular/router';
-import { LogoWithTextModule } from '../logo-with-text/logo-with-text.module';
-import { LogoWithTextComponent } from '../logo-with-text/logo-with-text.component';
+import { LogoWithTextModule } from '../svgs/logo-with-text/logo-with-text.module';
+import { LogoWithTextComponent } from '../svgs/logo-with-text/logo-with-text.component';
 
 @NgModule({
   declarations: [HeaderComponent],
diff --git a/apps/fretonator-web/src/app/common/svgs/cross/cross.component.html b/apps/fretonator-web/src/app/common/svgs/cross/cross.component.html
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" class="svg">
+  <path fill-rule="evenodd"
+        d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z"></path>
+</svg>
diff --git a/apps/fretonator-web/src/app/common/svgs/cross/cross.component.scss b/apps/fretonator-web/src/app/common/svgs/cross/cross.component.scss
@@ -0,0 +1,6 @@
+.svg {
+  flex: 1;
+  height: 100%;
+  width: 100%;
+  fill: currentColor;
+}
diff --git a/apps/fretonator-web/src/app/common/svgs/cross/cross.component.spec.ts b/apps/fretonator-web/src/app/common/svgs/cross/cross.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CrossComponent } from './cross.component';
+
+describe('CrossComponent', () => {
+  let component: CrossComponent;
+  let fixture: ComponentFixture<CrossComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CrossComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CrossComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/fretonator-web/src/app/common/svgs/cross/cross.component.ts b/apps/fretonator-web/src/app/common/svgs/cross/cross.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-cross-svg',
+  templateUrl: './cross.component.html',
+  styleUrls: ['./cross.component.scss']
+})
+export class CrossComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/apps/fretonator-web/src/app/common/svgs/cross/cross.module.ts b/apps/fretonator-web/src/app/common/svgs/cross/cross.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CrossComponent } from './cross.component';
+
+
+
+@NgModule({
+  declarations: [CrossComponent],
+  exports: [
+    CrossComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class CrossModule { }
diff --git a/apps/fretonator-web/src/app/common/svgs/logo-with-text/logo-with-text.component.html b/apps/fretonator-web/src/app/common/svgs/logo-with-text/logo-with-text.component.html
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000" class="svg">
-  <path fill="#f9f9f9"
+  <path
     d="M302.39 1410.89v42.7h61.43v15.05h-61.43v49.53h-17.5v-122.5h86.45v15.22zM499.93 1518.17l-26.42-37.63c-3.27.24-5.84.35-7.7.35h-30.28v37.28H418v-122.5h47.78q23.79 0 37.45 11.37t13.65 31.33q0 14.18-7 24.15T490 1477l29 41.17zm-9.27-59.33q8.74-7.17 8.75-20.47t-8.75-20.37q-8.76-7.1-25.38-7.09h-29.75V1466h29.75q16.62 0 25.38-7.16zM658.74 1502.94v15.23h-88.9v-122.5h86.45v15.22h-68.95v37.63h61.43v14.87h-61.43v39.55zM739.79 1410.89h-42v-15.22h101.32v15.22h-42v107.28h-17.32zM861 1511.43a60.22 60.22 0 01-23.36-22.49 64.65 64.65 0 010-64A60.29 60.29 0 01861 1402.4a72.43 72.43 0 0166.68 0 59.84 59.84 0 0123.32 22.4 65.59 65.59 0 010 64.23 59.77 59.77 0 01-23.27 22.4 72.35 72.35 0 01-66.68 0zm57.67-13.56a45 45 0 0017-16.89 49.73 49.73 0 000-48.13 44.94 44.94 0 00-17-16.88 48.09 48.09 0 00-24.24-6.13A49 49 0 00870 1416a44.51 44.51 0 00-17.15 16.88 49.66 49.66 0 000 48.13 44.6 44.6 0 0017.15 16.86 49.1 49.1 0 0024.41 6.12 48.19 48.19 0 0024.28-6.12zM1116.21 1395.67v122.5h-14.35l-73.5-91.35v91.35h-17.5v-122.5h14.35l73.5 91.35v-91.35zM1256.49 1487.54h-65.1l-13.48 30.63h-18l55.47-122.5h17.33l55.65 122.5H1270zm-6.13-14l-26.42-60-26.43 60zM1343.06 1410.89h-42v-15.22h101.32v15.22h-42v107.28h-17.32zM1464.3 1511.43a60.17 60.17 0 01-23.37-22.49 64.71 64.71 0 010-64 60.24 60.24 0 0123.37-22.49 72.41 72.41 0 0166.67 0 59.8 59.8 0 0123.28 22.4 65.59 65.59 0 010 64.23 59.73 59.73 0 01-23.28 22.4 72.33 72.33 0 01-66.67 0zm57.66-13.56a45 45 0 0017-16.89 49.66 49.66 0 000-48.13 44.94 44.94 0 00-17-16.88 48.09 48.09 0 00-24.24-6.13 49 49 0 00-24.41 6.13 44.58 44.58 0 00-17.15 16.88 49.73 49.73 0 000 48.13 44.67 44.67 0 0017.15 16.89 49.13 49.13 0 0024.41 6.12 48.19 48.19 0 0024.28-6.12zM1696 1518.17l-26.42-37.63c-3.27.24-5.84.35-7.7.35h-30.28v37.28h-17.5v-122.5h47.78q23.79 0 37.45 11.37t13.65 31.33q0 14.18-7 24.15t-20 14.52l29 41.13zm-9.27-59.33q8.74-7.17 8.75-20.47t-8.75-20.39q-8.76-7.1-25.38-7.09h-29.75V1466h29.75q16.65 0 25.41-7.16zM1080.78 1060.28L1134 968a14.91 14.91 0 002-7.49V487.93a7.5 7.5 0 00-7.5-7.5h-54.18a7.5 7.5 0 00-7.5 7.5v568.61a7.5 7.5 0 0013.96 3.74zM1229.85 480.43h-54.19a7.5 7.5 0 00-7.5 7.5v392.72a7.5 7.5 0 0014 3.75l53.18-92.27a15 15 0 002-7.49V487.93a7.5 7.5 0 00-7.49-7.5zM925.71 480.43h-54.18a7.5 7.5 0 00-7.5 7.5v472.59a14.91 14.91 0 002 7.49l53.18 92.27a7.5 7.5 0 0014-3.74V487.93a7.5 7.5 0 00-7.5-7.5zM1363.08 480.43h-86a7.5 7.5 0 00-7.5 7.5v216.84a7.5 7.5 0 0014 3.74l105.53-183.09a30 30 0 00-26.03-44.99zM764.66 792.13l53.18 92.27a7.5 7.5 0 0014-3.75V487.93a7.5 7.5 0 00-7.5-7.5h-54.19a7.5 7.5 0 00-7.5 7.5v296.71a15 15 0 002.01 7.49zM1027.09 480.43h-54.18a7.5 7.5 0 00-7.5 7.5v648.48a15 15 0 002 7.49l6.6 11.44a30 30 0 0052 0l6.6-11.44a15 15 0 002-7.49V487.93a7.5 7.5 0 00-7.52-7.5zM730.46 487.93a7.5 7.5 0 00-7.5-7.5h-86a30 30 0 00-26 45l105.5 183.08a7.5 7.5 0 0014-3.74z"></path>
 </svg>
diff --git a/apps/fretonator-web/src/app/common/svgs/logo-with-text/logo-with-text.component.scss b/apps/fretonator-web/src/app/common/svgs/logo-with-text/logo-with-text.component.scss
@@ -2,4 +2,5 @@
   flex: 1;
   height: 100%;
   width: 100%;
+  fill: currentColor;
 }
diff --git a/apps/fretonator-web/src/app/common/svgs/logo-with-text/logo-with-text.component.spec.ts b/apps/fretonator-web/src/app/common/svgs/logo-with-text/logo-with-text.component.spec.ts
diff --git a/apps/fretonator-web/src/app/common/svgs/logo-with-text/logo-with-text.component.ts b/apps/fretonator-web/src/app/common/svgs/logo-with-text/logo-with-text.component.ts
diff --git a/apps/fretonator-web/src/app/common/svgs/logo-with-text/logo-with-text.module.ts b/apps/fretonator-web/src/app/common/svgs/logo-with-text/logo-with-text.module.ts
diff --git a/apps/fretonator-web/src/app/common/svgs/speaker/speaker.component.html b/apps/fretonator-web/src/app/common/svgs/speaker/speaker.component.html
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" role="img" class="svg"
+     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+  <path d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zm233.32-51.08c-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 78.98-39.55 152.09-105.82 195.58-11.17 7.32-14.29 22.34-6.95 33.5 7.04 10.71 21.93 14.56 33.51 6.95C528.27 439.58 576 351.33 576 256S528.27 72.43 448.35 19.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z"></path>
+</svg>
diff --git a/apps/fretonator-web/src/app/common/svgs/speaker/speaker.component.scss b/apps/fretonator-web/src/app/common/svgs/speaker/speaker.component.scss
@@ -0,0 +1,6 @@
+.svg {
+  flex: 1;
+  height: 100%;
+  width: 100%;
+  fill: currentColor;
+}
diff --git a/apps/fretonator-web/src/app/common/svgs/speaker/speaker.component.spec.ts b/apps/fretonator-web/src/app/common/svgs/speaker/speaker.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SpeakerComponent } from './speaker.component';
+
+describe('SpeakerComponent', () => {
+  let component: SpeakerComponent;
+  let fixture: ComponentFixture<SpeakerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SpeakerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SpeakerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/fretonator-web/src/app/common/svgs/speaker/speaker.component.ts b/apps/fretonator-web/src/app/common/svgs/speaker/speaker.component.ts
@@ -0,0 +1,9 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-speaker-svg',
+  templateUrl: './speaker.component.html',
+  styleUrls: ['./speaker.component.scss']
+})
+export class SpeakerComponent {
+}
diff --git a/apps/fretonator-web/src/app/common/svgs/speaker/speaker.module.ts b/apps/fretonator-web/src/app/common/svgs/speaker/speaker.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SpeakerComponent } from './speaker.component';
+
+
+
+@NgModule({
+  declarations: [SpeakerComponent],
+  exports: [
+    SpeakerComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class SpeakerModule { }
diff --git a/apps/fretonator-web/src/app/common/video-loader/video-loader.component.spec.ts b/apps/fretonator-web/src/app/common/video-loader/video-loader.component.spec.ts
diff --git a/apps/fretonator-web/src/app/common/video-loader/video-server/video-server.component.spec.ts b/apps/fretonator-web/src/app/common/video-loader/video-server/video-server.component.spec.ts
diff --git a/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap b/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap
diff --git a/apps/fretonator-web/src/app/pages/not-found/not-found-index/__snapshots__/not-found-index.component.spec.ts.snap b/apps/fretonator-web/src/app/pages/not-found/not-found-index/__snapshots__/not-found-index.component.spec.ts.snap
diff --git a/apps/fretonator-web/src/app/pages/not-found/not-found.module.ts b/apps/fretonator-web/src/app/pages/not-found/not-found.module.ts

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@`
`16`	`16`	`.footer__thanksCopy {`
`17`	`17`	`@include font_bodyCopy();`
`18`	`18`	`color: var(--offwhite);`
	`19`	`+ text-align: center;`
`19`	`20`	`}`
`20`	`21`
`21`	`22`	`.footer__creditsTitle {`
`@@ -24,6 +25,7 @@`
`24`	`25`	`margin-bottom: pxToRem($grid-unit);`
`25`	`26`	`color: var(--peach);`
`26`	`27`	`font-weight: var(--font-weight-bold);`
	`28`	`+ text-align: center;`
`27`	`29`	`}`
`28`	`30`
`29`	`31`	`.footer__creditsList {`
Original file line number	Diff line number	Diff line change
@@ -20,7 +20,6 @@ exports[`HeaderComponent should match snapshot 1`] = `
`20`	`20`	`>`
`21`	`21`	`<path`
`22`	`22`	d="M302.39 1410.89v42.7h61.43v15.05h-61.43v49.53h-17.5v-122.5h86.45v15.22zM499.93 1518.17l-26.42-37.63c-3.27.24-5.84.35-7.7.35h-30.28v37.28H418v-122.5h47.78q23.79 0 37.45 11.37t13.65 31.33q0 14.18-7 24.15T490 1477l29 41.17zm-9.27-59.33q8.74-7.17 8.75-20.47t-8.75-20.37q-8.76-7.1-25.38-7.09h-29.75V1466h29.75q16.62 0 25.38-7.16zM658.74 1502.94v15.23h-88.9v-122.5h86.45v15.22h-68.95v37.63h61.43v14.87h-61.43v39.55zM739.79 1410.89h-42v-15.22h101.32v15.22h-42v107.28h-17.32zM861 1511.43a60.22 60.22 0 01-23.36-22.49 64.65 64.65 0 010-64A60.29 60.29 0 01861 1402.4a72.43 72.43 0 0166.68 0 59.84 59.84 0 0123.32 22.4 65.59 65.59 0 010 64.23 59.77 59.77 0 01-23.27 22.4 72.35 72.35 0 01-66.68 0zm57.67-13.56a45 45 0 0017-16.89 49.73 49.73 0 000-48.13 44.94 44.94 0 00-17-16.88 48.09 48.09 0 00-24.24-6.13A49 49 0 00870 1416a44.51 44.51 0 00-17.15 16.88 49.66 49.66 0 000 48.13 44.6 44.6 0 0017.15 16.86 49.1 49.1 0 0024.41 6.12 48.19 48.19 0 0024.28-6.12zM1116.21 1395.67v122.5h-14.35l-73.5-91.35v91.35h-17.5v-122.5h14.35l73.5 91.35v-91.35zM1256.49 1487.54h-65.1l-13.48 30.63h-18l55.47-122.5h17.33l55.65 122.5H1270zm-6.13-14l-26.42-60-26.43 60zM1343.06 1410.89h-42v-15.22h101.32v15.22h-42v107.28h-17.32zM1464.3 1511.43a60.17 60.17 0 01-23.37-22.49 64.71 64.71 0 010-64 60.24 60.24 0 0123.37-22.49 72.41 72.41 0 0166.67 0 59.8 59.8 0 0123.28 22.4 65.59 65.59 0 010 64.23 59.73 59.73 0 01-23.28 22.4 72.33 72.33 0 01-66.67 0zm57.66-13.56a45 45 0 0017-16.89 49.66 49.66 0 000-48.13 44.94 44.94 0 00-17-16.88 48.09 48.09 0 00-24.24-6.13 49 49 0 00-24.41 6.13 44.58 44.58 0 00-17.15 16.88 49.73 49.73 0 000 48.13 44.67 44.67 0 0017.15 16.89 49.13 49.13 0 0024.41 6.12 48.19 48.19 0 0024.28-6.12zM1696 1518.17l-26.42-37.63c-3.27.24-5.84.35-7.7.35h-30.28v37.28h-17.5v-122.5h47.78q23.79 0 37.45 11.37t13.65 31.33q0 14.18-7 24.15t-20 14.52l29 41.13zm-9.27-59.33q8.74-7.17 8.75-20.47t-8.75-20.39q-8.76-7.1-25.38-7.09h-29.75V1466h29.75q16.65 0 25.41-7.16zM1080.78 1060.28L1134 968a14.91 14.91 0 002-7.49V487.93a7.5 7.5 0 00-7.5-7.5h-54.18a7.5 7.5 0 00-7.5 7.5v568.61a7.5 7.5 0 0013.96 3.74zM1229.85 480.43h-54.19a7.5 7.5 0 00-7.5 7.5v392.72a7.5 7.5 0 0014 3.75l53.18-92.27a15 15 0 002-7.49V487.93a7.5 7.5 0 00-7.49-7.5zM925.71 480.43h-54.18a7.5 7.5 0 00-7.5 7.5v472.59a14.91 14.91 0 002 7.49l53.18 92.27a7.5 7.5 0 0014-3.74V487.93a7.5 7.5 0 00-7.5-7.5zM1363.08 480.43h-86a7.5 7.5 0 00-7.5 7.5v216.84a7.5 7.5 0 0014 3.74l105.53-183.09a30 30 0 00-26.03-44.99zM764.66 792.13l53.18 92.27a7.5 7.5 0 0014-3.75V487.93a7.5 7.5 0 00-7.5-7.5h-54.19a7.5 7.5 0 00-7.5 7.5v296.71a15 15 0 002.01 7.49zM1027.09 480.43h-54.18a7.5 7.5 0 00-7.5 7.5v648.48a15 15 0 002 7.49l6.6 11.44a30 30 0 0052 0l6.6-11.44a15 15 0 002-7.49V487.93a7.5 7.5 0 00-7.52-7.5zM730.46 487.93a7.5 7.5 0 00-7.5-7.5h-86a30 30 0 00-26 45l105.5 183.08a7.5 7.5 0 0014-3.74z"
`23`		`- fill="#f9f9f9"`
`24`	`23`	`/>`
`25`	`24`	`</svg>`
`26`	`25`	`</app-logo-with-text>`