Adding Back button to fan pages

src/app/booking/booking.page.html

@@ -1,4 +1,6 @@
 <ion-content>
+    <button class="back-button" (click)="back()"> <ion-icon name="close-outline"></ion-icon> </button>
+
     <div class="content-container">
         <div class="heading-holder">
             <h2 class="main-header"> # Booking </h2>

src/app/booking/booking.page.scss

@@ -4,6 +4,26 @@
     margin-bottom: 2.3rem;
 }
 
+.back-button {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    width: 40px;
+    height: 40px;
+    background: rgba(white, 0.5);
+    border: 0px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+
+    ion-icon {
+        color: white;
+        font-size: 20px;
+    }
+}
+
 .main-header {
     background: linear-gradient(90deg, lighten($brand-red, 0%), lighten($brand-red, 10%) 50%);
     -webkit-background-clip: text;

src/app/booking/booking.page.ts

@@ -4,6 +4,7 @@ import * as faker from 'faker';
 import * as moment from 'moment';
 import { Router } from '@angular/router';
 import { ChatPage } from '../chat/chat.page';
+import { Location } from '@angular/common';
 
 @Component({
     selector: 'app-booking',
@@ -79,9 +80,14 @@ export class BookingPage implements OnInit {
 
     constructor(
         private router: Router,
-        private modalController: ModalController
+        private modalController: ModalController,
+        private location: Location
     ) { }
 
+    back() {
+        this.location.back();
+    }
+
     getFormattedDateTime(dateTime: Date) {
         return moment(dateTime).format('DD MMM');
     }

src/app/collections/collections.page.html

@@ -1,5 +1,7 @@
 <ion-content>
 
+    <button class="back-button" (click)="back()"> <ion-icon name="close-outline"></ion-icon> </button>
+
     <ion-button (click)="showGrid = !showGrid"
     class="grid-button">
         <ion-icon *ngIf="!showGrid" name="apps-outline"></ion-icon>

src/app/collections/collections.page.scss

@@ -1,7 +1,7 @@
 @import '../colors';
 
 .collections {
-    height: calc(100vh - 56px);
+    height: 100vh;
     background-image: url('../../assets/collections/museum_background.png');
     background-position: center;
     background-size: 100% 100%;
@@ -105,7 +105,7 @@ ion-slides {
         border-radius: 7px;
         overflow: hidden;
         padding: 15px;
-        top: 60vh;
+        top: 65vh;
         box-shadow: 0px 0px 5px inset dimgray;
 
         h5 {
@@ -126,7 +126,7 @@ ion-slides {
     img {        
         position: absolute;
         left: 40vw;
-        bottom: 50vh;
+        bottom: 42.5vh;
         object-fit: contain;
         object-position: bottom;
 
@@ -157,4 +157,24 @@ ion-slides {
         opacity: 1;
         transform: translateY(0vh);
     }
+}
+
+.back-button {
+    position: fixed;
+    top: 15px;
+    right: 15px;
+    width: 40px;
+    height: 40px;
+    background: rgba(white, 0.5);
+    border: 0px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+
+    ion-icon {
+        color: white;
+        font-size: 20px;
+    }
 }

src/app/collections/collections.page.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { IonSlides } from '@ionic/angular';
+import { Location } from '@angular/common';
 
 @Component({
     selector: 'app-collections',
@@ -29,7 +30,13 @@ export class CollectionsPage implements OnInit {
 
     showGrid: boolean = false;
 
-    constructor() { }
+    constructor(
+        private location: Location
+    ) { }
+
+    back() {
+        this.location.back();
+    }
 
     ngOnInit() {
         this.collections = [{

src/app/quiz/quiz.page.html

@@ -1,6 +1,8 @@
 <ion-content>
     <img class="dotted-bg" src="https://www.searchpng.com/wp-content/uploads/2019/02/Polka-dot-Color-Pattern-PNG-Image.png">
 
+    <button class="back-button" (click)="back()"> <ion-icon name="close-outline"></ion-icon> </button>
+
     <ng-container *ngIf="!showReport">
         <section class="visual-timer">
             <p class="time"> {{ secondsPerQuestion }} </p>

src/app/quiz/quiz.page.scss

@@ -12,6 +12,26 @@
     background-position: top;
 }
 
+.back-button {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    width: 40px;
+    height: 40px;
+    background: rgba(white, 0.5);
+    border: 0px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+
+    ion-icon {
+        color: white;
+        font-size: 20px;
+    }
+}
+
 .visual-timer {
     display: flex;
     width: 80%;

src/app/shop/shop.page.html

@@ -1,4 +1,7 @@
 <ion-content>
+
+    <button class="back-button" (click)="back()"> <ion-icon name="close-outline"></ion-icon> </button>
+
     <section class="upfold">        
         <h5> Just for you </h5>
 

src/app/shop/shop.page.scss

@@ -1,5 +1,26 @@
 @import '../colors';
 
+
+.back-button {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    width: 40px;
+    height: 40px;
+    background: rgba(white, 0.5);
+    border: 0px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+
+    ion-icon {
+        color: white;
+        font-size: 20px;
+    }
+}
+
 .upfold {
     height: 50vh;
     background-color: rgba($blue-grey, 0.1);

src/app/shop/shop.page.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
 
 @Component({
     selector: 'app-shop',
@@ -12,7 +13,13 @@ export class ShopPage implements OnInit {
         image: string
     }> = [];
 
-    constructor() { }
+    constructor(
+        private location: Location
+    ) { }
+
+    back() {
+        this.location.back();
+    }
 
     ngOnInit() {