Added a placeholder grid item on learn/index

Added snapshots for older pages

Author: Salma Alam-Naylor

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContactIndexComponent should create 1`] = `ContactIndexComponentSpec {}`;

apps/fretonator-web/src/app/pages/contact/contact-index/contact-index.component.spec.ts

@@ -36,5 +36,6 @@ describe('ContactIndexComponent', () => {
 
   it('should create', () => {
     expect(component).toBeTruthy();
+    expect(component).toMatchSnapshot();
   });
 });

apps/fretonator-web/src/app/pages/contact/contact-success/__snapshots__/contact-success.component.spec.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContactSuccessComponent should create 1`] = `ContactSuccessComponentSpec {}`;

apps/fretonator-web/src/app/pages/contact/contact-success/contact-success.component.spec.ts

@@ -38,5 +38,6 @@ describe('ContactSuccessComponent', () => {
 
   it('should create', () => {
     expect(component).toBeTruthy();
+    expect(component).toMatchSnapshot();
   });
 });

apps/fretonator-web/src/app/pages/learn/learn-index/learn-index.component.html

@@ -23,6 +23,14 @@ <h2 class="grid__item__title">Patterns</h2>
         <span class="tag">Modes</span>
       </div>
     </a>
+    <div class="grid__item">
+      <h2 class="grid__item__title">More content coming soon!</h2>
+      <p class="grid__item__copy">We're working hard on creating more content for you. If you have any questions about guitar
+        theory, technique or maintenance, or if you'd like to submit some content, let us know via the contact form.</p>
+      <a [routerLink]="['/', 'contact']"
+         [state]="{scrollToTop: true}"
+         class="grid__item__button">Submit a request</a>
+    </div>
   </div>
 
 </div>

apps/fretonator-web/src/app/pages/learn/learn-index/learn-index.component.scss

@@ -62,6 +62,14 @@
   margin-bottom: pxToRem($grid-unit);
 }
 
+.grid__item__button {
+  @include hard_button_base(
+      var(--black),
+      var(--peach),
+      var(--purple)
+  );
+}
+
 .tagRow {
   display: flex;
   flex-direction: row;

apps/fretonator-web/src/styles/_mixins.scss

@@ -78,7 +78,7 @@
 
 @mixin chip_tag(
   $bgColor: var(--background-color-base),
-  $fgColor: var(--foreground-color-base))  {
+  $fgColor: var(--foreground-color-base)) {
 
   border-width: var(--border-width-button);
   border-style: solid;
@@ -101,7 +101,8 @@
 
 @mixin hard_button_base(
   $foregroundColor: var(--offwhite),
-  $backgroundColor: var(--black)) {
+  $backgroundColor: var(--black),
+  $hoverColor: var(--yellow)) {
   border-radius: var(--border-radius-button);
   border: pxToRem(2) solid $foregroundColor;
   text-transform: uppercase;
@@ -123,8 +124,8 @@
   @include focus_accessible();
 
   &:hover {
-    border-color: var(--yellow);
-    color: var(--yellow);
+    border-color: $hoverColor;
+    color: $hoverColor;
   }
 }