Styled and added content for success page

Author: Salma Alam-Naylor

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

@@ -1 +1,18 @@
-<p>contact-success works!</p>
+<div class="success__container">
+  <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>
+  <hr class="success__divider"/>
+  <h2 class="success__subtitle">Want to get involved?</h2>
+  <p class="success__copy">The Fretonator is open source! If you're a developer and you'd like to contribute to the
+    Fretonator,
+    you can always <a href="https://github.com/ishythefishy/fretonator"
+                      rel="nofollow noopener norefferer"
+                      target="_blank"
+                      class="success__link">fork the
+      repository</a>, do your magic, and send over a
+    pull request.</p>
+  <a [routerLink]="['/']"
+     class="success__cta"
+     (click)="clickLink()">Return to the Fretonator</a>
+</div>

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

@@ -0,0 +1,56 @@
+@import '../../../../styles/mixins';
+@import '../../../../styles/typography';
+
+.success__container {
+  max-width: $screen-med;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: var(--form-container-bg-color);
+  padding: pxToRem($grid-unit * 4);
+
+  @media screen and (min-width: $screen-med) {
+    padding: pxToRem($grid-unit * 6) pxToRem($grid-unit * 16);
+  }
+}
+
+.success__title {
+  @include font_large;
+  color: var(--form-container-color);
+  text-align: left;
+  margin-top: pxToRem($grid-unit * 3);
+  margin-bottom: pxToRem($grid-unit * 3);
+}
+
+.success__subtitle {
+  @include font_medium;
+  color: var(--form-container-color);
+  text-align: left;
+  margin-top: pxToRem($grid-unit * 2);
+  margin-bottom: pxToRem($grid-unit * 2);
+}
+
+.success__copy {
+  @include font_bodyCopy;
+  color: var(--form-container-color);
+  text-align: left;
+  margin-bottom: pxToRem($grid-unit * 2);
+}
+
+.success__link {
+  @include text_link;
+  color: var(--peach);
+}
+
+.success__divider {
+  height: pxToRem(4);
+  background-color: var(--peach);
+  margin-top: pxToRem($grid-unit * 4);
+  margin-bottom: pxToRem($grid-unit * 4);
+}
+
+.success__cta {
+  @include hard_button_base();
+  margin-top: pxToRem($grid-unit * 4);
+  margin-bottom: pxToRem($grid-unit * 4);
+}
+

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

@@ -1,16 +1,17 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } 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 implements OnInit {
+export class ContactSuccessComponent {
 
-  constructor() {
+  constructor(private globalService: GlobalService) {
   }
 
-  ngOnInit(): void {
+  clickLink() {
+    this.globalService.getScrollTarget().scrollIntoView();
   }
-
 }