Scroll to top of thanks page and contact page

Author: Salma Alam-Naylor

apps/fretonator-web/src/app/common/footer/footer.component.html

@@ -58,7 +58,7 @@ <h6 class="footer__sectionTitle">Who made this?</h6>
         the Fretonator is to crowdsource feedback and ideas to create the ultimate guitar learning hub that's simple,
         easy and enjoyable to use.</p>
       <a [routerLink]="['/', 'contact']"
-         (click)="onLinkClick()"
+         (click)="onClick()"
          class="footer__copy footer__copy--right footer__copy--link">Submit your feedback</a>
       <p class="footer__copy footer__copy--right">The Fretonator is free and always will be!</p>
       <a href="https://www.buymeacoffee.com/fretonator"

apps/fretonator-web/src/app/common/footer/footer.component.ts

@@ -12,7 +12,7 @@ export class FooterComponent {
   constructor(private globalService: GlobalService) {
   }
 
-  onLinkClick() {
+  onClick() {
     this.globalService.getScrollTarget().scrollIntoView();
   }
 }

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

@@ -11,7 +11,7 @@ import { FormErrorMessages } from '../../../util/constants'
   templateUrl: './contact-index.component.html',
   styleUrls: ['./contact-index.component.scss']
 })
-export class ContactIndexComponent implements OnInit, AfterViewInit {
+export class ContactIndexComponent implements AfterViewInit {
   @ViewChild('scrollTarget') scrollTarget: ElementRef<HTMLElement>;
   formName = 'Contact';
   formSubmitError = false;
@@ -47,11 +47,9 @@ export class ContactIndexComponent implements OnInit, AfterViewInit {
               private globalService: GlobalService) {
   }
 
-  ngOnInit(): void {
-  }
-
   ngAfterViewInit(): void {
     this.globalService.setScrollTarget(this.scrollTarget.nativeElement);
+    this.globalService.getScrollTarget().scrollIntoView();
   }
 
   onSubmit() {

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

@@ -1,4 +1,4 @@
-<div class="success__container">
+<div class="success__container" #scrollTarget>
   <h1 class="success__title">You are amazing! <span role="img" aria-label="raising hands emoji">🙌🏼️</span></h1>
   <p class="success__copy">I can't thank you enough for your feedback. I will endeavour to reply to all messages when I
     can.</p>
@@ -14,5 +14,5 @@ <h2 class="success__subtitle">Want to get involved?</h2>
     pull request.</p>
   <a [routerLink]="['/']"
      class="success__cta"
-     (click)="clickLink()">Return to the Fretonator</a>
+     (click)="onClick()">Return to the Fretonator</a>
 </div>

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

@@ -1,17 +1,23 @@
-import { Component } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { GlobalService } from '../../../global.service';
 
 @Component({
   selector: 'app-contact-success',
   templateUrl: './contact-success.component.html',
   styleUrls: ['./contact-success.component.scss']
 })
-export class ContactSuccessComponent {
+export class ContactSuccessComponent implements AfterViewInit {
+  @ViewChild('scrollTarget') scrollTarget: ElementRef<HTMLElement>;
 
   constructor(private globalService: GlobalService) {
   }
 
-  clickLink() {
+  ngAfterViewInit(): void {
+    this.globalService.setScrollTarget(this.scrollTarget.nativeElement);
+    this.globalService.getScrollTarget().scrollIntoView();
+  }
+
+  onClick() {
     this.globalService.getScrollTarget().scrollIntoView();
   }
 }

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

@@ -40,4 +40,5 @@
   cursor: pointer;
   margin-left: auto;
   margin-right: auto;
+  color: var(--offwhite);
 }

apps/fretonator-web/src/app/util/constants.ts

@@ -649,7 +649,7 @@ export const FormErrorMessages = {
   },
   message: {
     required: 'Go on, give me some feedback!',
-    minLength: 'Keep typing, you\'re doing great.',
+    minLength: 'Keep typing, you\'re doing great. (Give me at least 30 characters please!)',
     general: 'Oops! There\'s something wrong with the message field.'
   }
 };