Add a 'learn more' button to mode patterns block on home

Author: Salma Alam-Naylor

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

@@ -231,5 +231,4 @@
 .actionButton {
   @include hard_button_base();
   margin-left: auto;
-  margin-right: auto;
 }

apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html

@@ -18,4 +18,7 @@ <h4 class="similarModes__title">Did you know?</h4>
     from
     any starting note, anywhere on the fretboard.</p>
   <p class="similarModes__copy">These patterns always appear in the same order, one after the other.</p>
+  <a [routerLink]="['/', 'learn', 'patterns']"
+     [state]="{scrollToTop: true}"
+     class="similarModes__cta">Learn more</a>
 </div>

apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss

@@ -38,3 +38,8 @@
     margin-bottom: 0;
   }
 }
+
+.similarModes__cta {
+  @include hard_button_base;
+  margin-left: auto;
+}

apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SimilarModesComponent } from './similar-modes.component';
 import { ChipsModule } from '../../chips/chips.module';
+import { RouterModule } from '@angular/router';
 
 
 @NgModule({
@@ -11,7 +12,8 @@ import { ChipsModule } from '../../chips/chips.module';
   ],
   imports: [
     CommonModule,
-    ChipsModule
+    ChipsModule,
+    RouterModule
   ]
 })
 export class SimilarModesModule {

apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap

@@ -1624,6 +1624,12 @@ exports[`HomeIndexComponent should create 1`] = `
                 >
                   These patterns always appear in the same order, one after the other.
                 </p>
+                <a
+                  class="similarModes__cta"
+                  href="/learn/patterns"
+                >
+                  Learn more
+                </a>
               </div>
             </app-similar-modes>
           </div>