From a568b8762ce0257648aece8c36b0d34a5a08f23e Mon Sep 17 00:00:00 2001
From: Martin Markov <martin.markov28@gmail.com>
Date: Sun, 11 Oct 2020 18:13:42 +0200
Subject: [PATCH 001/141] Added edit highlight functionality

---
 package-lock.json                             |  5 ++
 package.json                                  |  1 +
 .../project/details/details.component.html    | 11 ++-
 .../project/details/details.component.scss    |  5 +-
 .../project/details/details.component.ts      | 86 +++++++++++--------
 .../modal-highlight-delete.component.html     | 18 +---
 .../modal-highlight-delete.component.scss     | 32 +++----
 .../modal-highlight-edit.component.html       | 15 ++++
 .../modal-highlight-edit.component.scss       |  9 ++
 .../modal-highlight-edit.component.ts         | 20 +++++
 .../modal-highlight-form.component.html}      |  0
 .../modal-highlight-form.component.scss}      |  0
 .../modal-highlight-form.component.ts}        | 34 +++++---
 src/app/modules/project/project.module.ts     | 10 ++-
 src/app/utils/format-date.pipe.ts             | 11 +++
 15 files changed, 171 insertions(+), 86 deletions(-)
 create mode 100644 src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.html
 create mode 100644 src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss
 create mode 100644 src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.ts
 rename src/app/modules/project/{modal-highlight/modal-highlight.component.html => modal-highlight-form/modal-highlight-form.component.html} (100%)
 rename src/app/modules/project/{modal-highlight/modal-highlight.component.scss => modal-highlight-form/modal-highlight-form.component.scss} (100%)
 rename src/app/modules/project/{modal-highlight/modal-highlight.component.ts => modal-highlight-form/modal-highlight-form.component.ts} (76%)
 create mode 100644 src/app/utils/format-date.pipe.ts

diff --git a/package-lock.json b/package-lock.json
index 820eefbc..221db494 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9328,6 +9328,11 @@
         }
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
diff --git a/package.json b/package.json
index 98eefedc..ea7ea18c 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@webcomponents/webcomponentsjs": "^2.0.0",
     "bootstrap": "^4.4.1",
     "dotenv": "^5.0.0",
+    "moment": "^2.29.1",
     "ngx-bootstrap": "^5.6.1",
     "ngx-quill": "^11.0.0",
     "oidc-client": "^1.10.1",
diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html
index 01e651c5..dc971376 100644
--- a/src/app/modules/project/details/details.component.html
+++ b/src/app/modules/project/details/details.component.html
@@ -55,7 +55,7 @@ <h3>Collaborators</h3>
           </ul>
         </div>
       </div>
-      <div class="col-6">
+      <div class="col-9">
         <div id="title-wrapper">
           <h1 class="project-title">{{ project.name }}</h1>
 
@@ -101,12 +101,19 @@ <h1 class="project-title">{{ project.name }}</h1>
 
         <div id="project-share-buttons">
           <ng-container *ngIf="displayHighlightButton">
-            <button class="primary ml-2" (click)="onClickHighlightButton()">Highlight Project</button>
+            <div class="project-highlighted-div">
+              <button class="primary ml-2" (click)="onClickHighlightButton()">Highlight Project</button>
+            </div>
+
+            <div *ngIf="isProjectHighlighted" class="project-highlighted-div">
+              <button class="primary ml-2" (click)="onClickEditHighlightButton()">Edit Highlight</button>
+            </div>
 
             <div *ngIf="isProjectHighlighted" class="project-highlighted-div">
               <button class="primary ml-2" (click)="onClickDeleteHighlightButton()">Delete Highlight</button>
             </div>
           </ng-container>
+          
           <ng-container *ngIf="displayEmbedButton">
             <app-embed-button></app-embed-button>
           </ng-container>
diff --git a/src/app/modules/project/details/details.component.scss b/src/app/modules/project/details/details.component.scss
index a9cd53d6..30633081 100644
--- a/src/app/modules/project/details/details.component.scss
+++ b/src/app/modules/project/details/details.component.scss
@@ -91,11 +91,8 @@
   max-width: 800px;
 }
 
-.project-highlighted-div {
-  float: left;
-}
-
 #project-share-buttons {
+  display: flex;
   margin-top: 60px;
 
   button:first-child {
diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 105a9a58..dfd2da6b 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -24,7 +24,7 @@ import { AuthService } from 'src/app/services/auth.service';
 import { HighlightService } from 'src/app/services/highlight.service';
 import { HighlightAdd } from 'src/app/models/resources/highlight-add';
 import { BsModalService, ModalOptions } from 'ngx-bootstrap/modal';
-import { ModalHighlightComponent, HighlightFormResult } from 'src/app/modules/project/modal-highlight/modal-highlight.component';
+import { ModalHighlightFormComponent, HighlightFormResult } from 'src/app/modules/project/modal-highlight-form/modal-highlight-form.component';
 import { AlertConfig } from 'src/app/models/internal/alert-config';
 import { AlertType } from 'src/app/models/internal/alert-type';
 import { AlertService } from 'src/app/services/alert.service';
@@ -37,6 +37,8 @@ import { Highlight } from 'src/app/models/domain/hightlight';
 import { ModalDeleteGenericComponent } from 'src/app/components/modals/modal-delete-generic/modal-delete-generic.component';
 import { scopes } from 'src/app/models/domain/scopes';
 import { SEOService } from 'src/app/services/seo.service';
+import { ModalHighlightEditComponent } from 'src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component';
+import { HighlightUpdate } from 'src/app/models/resources/highlight-update';
 
 /**
  * Overview of a single project
@@ -148,7 +150,7 @@ export class DetailsComponent implements OnInit {
       this.alertService.pushAlert(alertConfig);
       return;
     }
-    const modalRef = this.modalService.show(ModalHighlightComponent);
+    const modalRef = this.modalService.show(ModalHighlightFormComponent);
 
     modalRef.content.confirm
       .pipe(
@@ -185,27 +187,55 @@ export class DetailsComponent implements OnInit {
    * Method to delete a highlight.
    */
   public onClickDeleteHighlightButton(): void {
-    if (this.project == null || this.project.id === 0) {
-      return;
-    }
-    this.highlightByProjectIdService.getHighlightsByProjectId(this.project.id).subscribe(
-      (results: Highlight[]) => {
-        if (results == null) {
-          return;
-        }
-        results.forEach(highlight => {
-          if (highlight.startDate != null && highlight.endDate != null) {
-            highlight.startDate = this.formatTimestamps(highlight.startDate);
-            highlight.endDate = this.formatTimestamps(highlight.endDate);
-          } else {
-            highlight.startDate = 'Never Ending';
-            highlight.endDate = 'Never Ending';
-          }
+    this.highlightByProjectIdService
+    .getHighlightsByProjectId(this.project.id)
+    .subscribe((results: Highlight[]) => {
+      const options = { initialState: { highlights: results }, class: "modal-lg" };
+      this.modalService.show(ModalHighlightDeleteComponent, options);
+    });
+  }
+
+  /**
+   * Method to first open a modal to select project highlight to edit and then the highlight modal form
+   */
+  public onClickEditHighlightButton(): void {
+    this.highlightByProjectIdService
+      .getHighlightsByProjectId(this.project.id)
+      .subscribe((results: Highlight[]) => {
+        const options = { initialState: { highlights: results }, class: "modal-lg" };
+        const modalHighlightEditRef = this.modalService.show(ModalHighlightEditComponent, options);
+
+        return modalHighlightEditRef.content.selectHighlightToEdit.subscribe(highlight => {
+          const formModalRef = this.modalService.show(ModalHighlightFormComponent, { initialState: { highlight } });
+          
+          formModalRef.content.confirm.pipe(
+            switchMap((highlightFormResult: HighlightFormResult) => {
+              const highlightAddResource: HighlightUpdate = {
+                projectId: this.project.id,
+                startDate: highlightFormResult.startDate,
+                description: highlightFormResult.description,
+                endDate: highlightFormResult.endDate
+              };
+    
+              if (highlightFormResult.indeterminate) {
+                highlightAddResource.startDate = null;
+                highlightAddResource.endDate = null;
+              }
+    
+              return this.highlightService.put(highlight.id, highlightAddResource);
+            })
+          ).subscribe(() => {
+            const alertConfig: AlertConfig = {
+              type: AlertType.success,
+              mainMessage: 'Highlight was successfully updated',
+              dismissible: true,
+              timeout: this.alertService.defaultTimeout
+            };
+            this.alertService.pushAlert(alertConfig);
+            this.isProjectHighlighted = true;
+          });
         });
-        const initialState = { highlights: results };
-        this.modalService.show(ModalHighlightDeleteComponent, { initialState });
-      }
-    );
+      });
   }
 
   /**
@@ -316,16 +346,4 @@ export class DetailsComponent implements OnInit {
     }
     this.displayEmbedButton = this.project.user.id === this.currentUser.id;
   }
-
-  private formatTimestamps(highlightTimestamp: string): string {
-    const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-    const dayOfTheWeek = days[new Date(highlightTimestamp).getDay()];
-    const dateStamp = new Date(highlightTimestamp).getUTCDate() + '-' + (new Date(highlightTimestamp).getUTCMonth() + 1)
-      + '-' + new Date(highlightTimestamp).getUTCFullYear();
-    const timeStamp = new Date(highlightTimestamp).getUTCHours() + ':' + ('0' + new Date(highlightTimestamp).getUTCMinutes()).slice(-2);
-    const timeZone = 'GMT';
-    return dayOfTheWeek + ', ' + dateStamp + ', ' + timeStamp + ' ' + timeZone;
-  }
-
-
 }
diff --git a/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.html b/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.html
index 457b0d3a..f0697d9a 100644
--- a/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.html
+++ b/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.html
@@ -23,25 +23,15 @@ <h2>Delete highlight</h2>
         <div class="highlight-form__checkbox">
           <form [formGroup]="deleteHighlightForm" class="highlight-form">
             <div *ngFor="let highlight of highlights">
-              <div *ngIf="highlight.isNeverEnding; else displayDateTimes">
                 <div class="highlight-wrapper">
-                  <input type="checkbox" id="neverEndingCheckbox" [formControlName]="highlight.id" class="" />
-                  <label for="neverEndingCheckbox"><strong>Never Ending</strong></label>
-
-                </div>
-              </div>
-              <ng-template #displayDateTimes>
-                <div class="highlight-wrapper">
-                  <input type="checkbox" id="checkbox" [formControlName]="highlight.id" class="" />
-                  <label for="checkbox">
+                  <input type="checkbox" id="highlight-{{highlight.id}}" [formControlName]="highlight.id" class="" />
+                  <label for="highlight-{{highlight.id}}">
                     <div class="row no-gutters">
-                      <div class="col-6"><strong>Start date:</strong>{{highlight.startDate}}</div>
-                      <div class="col-6"><strong>End date:</strong>{{highlight.endDate}}</div>
+                      <div class="col-6"><strong>Start date:</strong>{{highlight.startDate | formatDate}}</div>
+                      <div class="col-6"><strong>End date:</strong>{{highlight.endDate | formatDate}}</div>
                     </div>
                   </label>
-
                 </div>
-              </ng-template>
             </div>
           </form>
         </div>
diff --git a/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.scss b/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.scss
index 52d5ca15..df515cef 100644
--- a/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.scss
+++ b/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.scss
@@ -17,7 +17,7 @@
 
 @import "assets/styles/variables";
 
-.modal-body{
+.modal-body {
   position: unset;
 
   h2 {
@@ -27,21 +27,21 @@
 
 .modal-delete-container {
   background: #f8f8f8;
-  width: 700px;
   border-radius: 6px;
   border: none;
   outline: none;
   box-shadow: $box-shadow;
   padding: 15px;
   color: $light-mode-grey-primary;
-  button.close{
+  button.close {
     border: none;
     background: none;
     display: flex;
     float: right;
-    &:focus, &:active{
-      border:none;
-      outline:none;
+    &:focus,
+    &:active {
+      border: none;
+      outline: none;
     }
   }
 }
@@ -70,15 +70,16 @@
     display: flex;
     align-items: center;
     margin-top: 10px;
-    input[type="checkbox"] {
-      border: solid 1px $light-mode-grey-primary;
-      margin-right: 15px;
-    }
-
-    h4 {
-      margin: 0;
-    }
   }
+ 
+  h4 {
+    margin: 0;
+  }
+}
+
+input[type="checkbox"] {
+  border: solid 1px $light-mode-grey-primary;
+  margin-right: 15px;
 }
 
 .modal-buttons {
@@ -95,7 +96,8 @@
   align-items: center;
   margin-bottom: 10px;
 
-  #neverEndingCheckbox, #checkbox {
+  #neverEndingCheckbox,
+  #checkbox {
     width: 16px;
     height: 16px;
     margin-right: 10px;
diff --git a/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.html b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.html
new file mode 100644
index 00000000..6e849ca9
--- /dev/null
+++ b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.html
@@ -0,0 +1,15 @@
+<div class="modal-highlight-edit-container">
+  <h2 class="text-center m-3">Select a highlight to edit</h2>
+  <div class="list-group">
+    <div *ngFor="let highlight of highlights">
+        <div class="highlight-wrapper">
+          <div class="list-group-item list-group-item-action" (click)="selectHighlight(highlight)">
+            <div class="row no-gutters">
+              <div class="col-6"><strong>Start date:</strong><span class="date">{{highlight.startDate | formatDate}}</span></div>
+              <div class="col-6"><strong>End date:</strong><span class="date">{{highlight.endDate | formatDate}}</span></div>
+            </div>
+          </div>
+        </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss
new file mode 100644
index 00000000..6cbae4ee
--- /dev/null
+++ b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss
@@ -0,0 +1,9 @@
+.modal-highlight-edit-container {
+  .list-group-item-action {
+    cursor: pointer;
+
+    .date {
+      padding-left: 10px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.ts b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.ts
new file mode 100644
index 00000000..74bfab92
--- /dev/null
+++ b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.ts
@@ -0,0 +1,20 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import { Highlight } from 'src/app/models/domain/hightlight';
+
+@Component({
+  selector: 'app-modal-highlight-edit',
+  templateUrl: './modal-highlight-edit.component.html',
+  styleUrls: ['./modal-highlight-edit.component.scss']
+})
+export class ModalHighlightEditComponent {
+  @Input() highlights: Highlight[];
+  @Output() selectHighlightToEdit = new EventEmitter();
+
+  constructor(public bsModalRef: BsModalRef) {}
+
+  selectHighlight(selectedHighlight: Highlight) {
+    this.selectHighlightToEdit.emit(selectedHighlight);
+    this.bsModalRef.hide();
+  }
+}
diff --git a/src/app/modules/project/modal-highlight/modal-highlight.component.html b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
similarity index 100%
rename from src/app/modules/project/modal-highlight/modal-highlight.component.html
rename to src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
diff --git a/src/app/modules/project/modal-highlight/modal-highlight.component.scss b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.scss
similarity index 100%
rename from src/app/modules/project/modal-highlight/modal-highlight.component.scss
rename to src/app/modules/project/modal-highlight-form/modal-highlight-form.component.scss
diff --git a/src/app/modules/project/modal-highlight/modal-highlight.component.ts b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
similarity index 76%
rename from src/app/modules/project/modal-highlight/modal-highlight.component.ts
rename to src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
index 4872d6c1..fb7bb435 100644
--- a/src/app/modules/project/modal-highlight/modal-highlight.component.ts
+++ b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
@@ -16,9 +16,11 @@
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  *
  */
-import { Component, Output, EventEmitter } from '@angular/core';
+import { Component, Output, EventEmitter, Input, OnInit } from '@angular/core';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { FormBuilder, FormGroup } from '@angular/forms';
+import { Highlight } from 'src/app/models/domain/hightlight';
+import * as moment from 'moment';
 
 export interface HighlightFormResult {
   startDate?: Date;
@@ -31,32 +33,36 @@ export interface HighlightFormResult {
  * Pop-up modal with duration settings for highlighting a project.
  */
 @Component({
-  selector: 'app-modal-highlight',
-  templateUrl: './modal-highlight.component.html',
-  styleUrls: ['./modal-highlight.component.scss']
+  selector: 'app-modal-highlight-form',
+  templateUrl: './modal-highlight-form.component.html',
+  styleUrls: ['./modal-highlight-form.component.scss']
 })
-export class ModalHighlightComponent {
-
+export class ModalHighlightFormComponent implements OnInit {
+  @Input() highlight: Highlight;
   @Output() confirm = new EventEmitter();
 
   public highlightProjectForm: FormGroup;
   public dateFieldsEnabled = true;
   public validationErrorMessage: string = null;
 
-  constructor(
-    public bsModalRef: BsModalRef,
-    private formBuilder: FormBuilder,
-  ) {
+  constructor(public bsModalRef: BsModalRef, private formBuilder: FormBuilder) { }
+
+  ngOnInit() {
     this.highlightProjectForm = this.formBuilder.group({
-      startDate: [null],
-      endDate: [null],
-      description: [null],
-      indeterminate: [false],
+      startDate: [this.highlight?.startDate ? moment(this.highlight?.startDate).format("YYYY-MM-DD") : null],
+      endDate: [this.highlight?.endDate ? moment(this.highlight?.endDate).format("YYYY-MM-DD") : null],
+      description: [this.highlight?.description],
+      indeterminate: [this.highlight?.startDate === null && this.highlight?.endDate === null],
     });
 
     this.highlightProjectForm.get('indeterminate').valueChanges.subscribe(value => {
       this.onChangeCheckbox(value);
     });
+
+    if (this.highlightProjectForm.get('indeterminate').value === true) {
+      this.highlightProjectForm.get('startDate').disable();
+      this.highlightProjectForm.get('endDate').disable();
+    }
   }
 
   /**
diff --git a/src/app/modules/project/project.module.ts b/src/app/modules/project/project.module.ts
index a7c90403..228942c5 100644
--- a/src/app/modules/project/project.module.ts
+++ b/src/app/modules/project/project.module.ts
@@ -27,11 +27,12 @@ import { EmbedComponent } from './embed/embed.component';
 import { PaginationModule } from 'ngx-bootstrap/pagination';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalHighlightDeleteComponent } from 'src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component';
-import { ModalHighlightComponent } from 'src/app/modules/project/modal-highlight/modal-highlight.component';
+import { ModalHighlightFormComponent } from 'src/app/modules/project/modal-highlight-form/modal-highlight-form.component';
 import { SharedModule } from './../shared/shared.module';
 import { QuillModule } from 'ngx-quill';
 import { Meta } from '@angular/platform-browser';
-
+import { ModalHighlightEditComponent } from './modal-highlight-edit/modal-highlight-edit.component';
+import { FormatDatePipe } from 'src/app/utils/format-date.pipe';
 
 @NgModule({
   declarations: [
@@ -41,7 +42,10 @@ import { Meta } from '@angular/platform-browser';
     EmbedButtonComponent,
     EmbedComponent,
     ModalHighlightDeleteComponent,
-    ModalHighlightComponent],
+    ModalHighlightFormComponent,
+    ModalHighlightEditComponent,
+    FormatDatePipe
+  ],
   imports: [
     CommonModule,
     FormsModule,
diff --git a/src/app/utils/format-date.pipe.ts b/src/app/utils/format-date.pipe.ts
new file mode 100644
index 00000000..f0666201
--- /dev/null
+++ b/src/app/utils/format-date.pipe.ts
@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import * as moment from 'moment';
+
+@Pipe({
+  name: 'formatDate'
+})
+export class FormatDatePipe implements PipeTransform {
+  public transform(date: string): string {
+    return date ? moment(date).format('dddd, DD-MM-YYYY') : 'Never ending';
+  }
+}

From c3b130413ff24139ec05b05072f80efa0b8ae765 Mon Sep 17 00:00:00 2001
From: Martin Markov <martin.markov28@gmail.com>
Date: Sun, 11 Oct 2020 18:15:40 +0200
Subject: [PATCH 002/141] Added missing empty line

---
 .../modal-highlight-edit/modal-highlight-edit.component.scss    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss
index 6cbae4ee..a6aceba2 100644
--- a/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss
+++ b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss
@@ -6,4 +6,4 @@
       padding-left: 10px;
     }
   }
-}
\ No newline at end of file
+}

From 48a03880acc3e31f775cd70dbdf9afe3b7df7c63 Mon Sep 17 00:00:00 2001
From: Martin Markov <martin.markov28@gmail.com>
Date: Sun, 11 Oct 2020 18:19:01 +0200
Subject: [PATCH 003/141] Updated the changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e0acf50f..78ea7493 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added update highlight functionality - [#294](https://github.com/DigitalExcellence/dex-frontend/issues/294)
+
 ### Changed
 
 ### Deprecated

From ccca0bdf7c515db07cfa6182e3b3a10f00d7a8b8 Mon Sep 17 00:00:00 2001
From: Martin Markov <martin.markov28@gmail.com>
Date: Sun, 11 Oct 2020 18:34:23 +0200
Subject: [PATCH 004/141] Fixed linting issues

---
 src/app/modules/project/details/details.component.ts   | 10 +++++-----
 .../modal-highlight-form.component.ts                  |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index dfd2da6b..d437adb7 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -190,7 +190,7 @@ export class DetailsComponent implements OnInit {
     this.highlightByProjectIdService
     .getHighlightsByProjectId(this.project.id)
     .subscribe((results: Highlight[]) => {
-      const options = { initialState: { highlights: results }, class: "modal-lg" };
+      const options = { initialState: { highlights: results }, class: 'modal-lg' };
       this.modalService.show(ModalHighlightDeleteComponent, options);
     });
   }
@@ -202,12 +202,12 @@ export class DetailsComponent implements OnInit {
     this.highlightByProjectIdService
       .getHighlightsByProjectId(this.project.id)
       .subscribe((results: Highlight[]) => {
-        const options = { initialState: { highlights: results }, class: "modal-lg" };
+        const options = { initialState: { highlights: results }, class: 'modal-lg' };
         const modalHighlightEditRef = this.modalService.show(ModalHighlightEditComponent, options);
 
         return modalHighlightEditRef.content.selectHighlightToEdit.subscribe(highlight => {
           const formModalRef = this.modalService.show(ModalHighlightFormComponent, { initialState: { highlight } });
-          
+
           formModalRef.content.confirm.pipe(
             switchMap((highlightFormResult: HighlightFormResult) => {
               const highlightAddResource: HighlightUpdate = {
@@ -216,12 +216,12 @@ export class DetailsComponent implements OnInit {
                 description: highlightFormResult.description,
                 endDate: highlightFormResult.endDate
               };
-    
+
               if (highlightFormResult.indeterminate) {
                 highlightAddResource.startDate = null;
                 highlightAddResource.endDate = null;
               }
-    
+
               return this.highlightService.put(highlight.id, highlightAddResource);
             })
           ).subscribe(() => {
diff --git a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
index fb7bb435..c987a782 100644
--- a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
+++ b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
@@ -49,8 +49,8 @@ export class ModalHighlightFormComponent implements OnInit {
 
   ngOnInit() {
     this.highlightProjectForm = this.formBuilder.group({
-      startDate: [this.highlight?.startDate ? moment(this.highlight?.startDate).format("YYYY-MM-DD") : null],
-      endDate: [this.highlight?.endDate ? moment(this.highlight?.endDate).format("YYYY-MM-DD") : null],
+      startDate: [this.highlight?.startDate ? moment(this.highlight?.startDate).format('YYYY-MM-DD') : null],
+      endDate: [this.highlight?.endDate ? moment(this.highlight?.endDate).format('YYYY-MM-DD') : null],
       description: [this.highlight?.description],
       indeterminate: [this.highlight?.startDate === null && this.highlight?.endDate === null],
     });

From 0ce5cfc665105fde65fa8d9a083697bfe04fb6f6 Mon Sep 17 00:00:00 2001
From: Ruben <rubenfricke@gmail.com>
Date: Tue, 27 Oct 2020 14:59:50 +0100
Subject: [PATCH 005/141] Added CallToAction model

---
 src/app/models/domain/call-to-action.ts | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 src/app/models/domain/call-to-action.ts

diff --git a/src/app/models/domain/call-to-action.ts b/src/app/models/domain/call-to-action.ts
new file mode 100644
index 00000000..a8bf755d
--- /dev/null
+++ b/src/app/models/domain/call-to-action.ts
@@ -0,0 +1,22 @@
+/*
+ *  Digital Excellence Copyright (C) 2020 Brend Smits
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Lesser General Public License as published
+ *   by the Free Software Foundation version 3 of the License.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty
+ *   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ *   See the GNU Lesser General Public License for more details.
+ *
+ *   You can find a copy of the GNU Lesser General Public License
+ *   along with this program, in the LICENSE.md file in the root project directory.
+ *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
+ */
+
+export interface CallToAction {
+    id: number;
+    name: string;
+    redirectUrl: string;
+}

From 5f070ed246dbfae5e79b6ed5cb36c34a22fd8cc5 Mon Sep 17 00:00:00 2001
From: Devon Cavis <d.cavis@student.fontys.nl>
Date: Fri, 30 Oct 2020 14:18:51 +0100
Subject: [PATCH 006/141] Added cta-dropdown current value detection

---
 .../project/add/manual/manual.component.html  | 26 +++++++++++++++++++
 .../project/add/manual/manual.component.ts    | 18 +++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/src/app/modules/project/add/manual/manual.component.html b/src/app/modules/project/add/manual/manual.component.html
index f0482ba1..0bc6ed43 100644
--- a/src/app/modules/project/add/manual/manual.component.html
+++ b/src/app/modules/project/add/manual/manual.component.html
@@ -68,6 +68,32 @@ <h3>Description*</h3>
       </div>
     </form>
 
+    <form [formGroup]="newCallToActionForm" class="project-form">
+
+      <div class="row">
+        <div class="col-12">
+          <h3>Call to action</h3>
+        </div>
+        <div class="col-6">
+          <div>
+            <h3>Text</h3>
+            <select ng-model='nrSelect' class='form-control' (change)="selectChangeHandler($event)">                                                                
+              <option value='None'>None</option>
+              <option value='Test'>Test</option>
+            </select>
+            <p><span>You selected: </span><b>{{selectedCallToAction}}</b></p>
+          </div>
+        </div>
+
+        <div class="col-6">
+          <div>
+            <h3>Link</h3>
+            <input [disabled]="true" placeholder="Link to your contact info" formControlName="uri" />
+          </div>
+        </div>
+      </div>
+    </form>
+
     <form [formGroup]="newCollaboratorForm" class="project-form">
       <div class="row">
         <div class="col-12">
diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts
index 74a03ab4..100ea71d 100644
--- a/src/app/modules/project/add/manual/manual.component.ts
+++ b/src/app/modules/project/add/manual/manual.component.ts
@@ -44,8 +44,14 @@ export class ManualComponent implements OnInit {
    * Formgroup for entering project details.
    */
   public newProjectForm: FormGroup;
+  public newCallToActionForm: FormGroup;
   public newCollaboratorForm: FormGroup;
 
+  /**
+   * Projects selected call to action
+   */
+  public selectedCallToAction = 'None';
+
   /**
    * Project's collaborators.
    */
@@ -61,6 +67,11 @@ export class ManualComponent implements OnInit {
    */
   public modulesConfigration = QuillUtils.getDefaultModulesConfiguration();
 
+  selectChangeHandler (event: any) {
+    // Allow the frontend to check if it needs to activate the link input
+    this.selectedCallToAction = event.target.value;
+  }
+
   constructor(
     private router: Router,
     private formBuilder: FormBuilder,
@@ -75,6 +86,11 @@ export class ManualComponent implements OnInit {
       description: [null],
     });
 
+    this.newCallToActionForm = this.formBuilder.group({
+      name: [null, Validators.required],
+      redirectUrl: [null, Validators.required],
+    });
+
     this.newCollaboratorForm = this.formBuilder.group({
       fullName: [null, Validators.required],
       role: [null, Validators.required],
@@ -103,6 +119,8 @@ export class ManualComponent implements OnInit {
     this.seoService.updateDescription('Create a new project in DeX');
   }
 
+
+
   /**
    * Method which triggers when the submit button is pressed.
    * Creates a new project.

From 037ebcbb26e194109c77a326602764e3c4200b94 Mon Sep 17 00:00:00 2001
From: Ruben <rubenfricke@gmail.com>
Date: Fri, 30 Oct 2020 14:24:40 +0100
Subject: [PATCH 007/141] Show options in select input form model list

---
 .../project/add/manual/manual.component.html      |  4 ++--
 .../project/add/manual/manual.component.ts        | 15 +++++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/app/modules/project/add/manual/manual.component.html b/src/app/modules/project/add/manual/manual.component.html
index 0bc6ed43..82b0d46c 100644
--- a/src/app/modules/project/add/manual/manual.component.html
+++ b/src/app/modules/project/add/manual/manual.component.html
@@ -77,9 +77,9 @@ <h3>Call to action</h3>
         <div class="col-6">
           <div>
             <h3>Text</h3>
-            <select ng-model='nrSelect' class='form-control' (change)="selectChangeHandler($event)">                                                                
+            <select ng-model='nrSelect' class='form-control' (change)="selectChangeHandler($event)">
               <option value='None'>None</option>
-              <option value='Test'>Test</option>
+              <option *ngFor="let action of callToActions" [ngValue]="action.id">{{action.name}}</option>
             </select>
             <p><span>You selected: </span><b>{{selectedCallToAction}}</b></p>
           </div>
diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts
index 100ea71d..315c2ff4 100644
--- a/src/app/modules/project/add/manual/manual.component.ts
+++ b/src/app/modules/project/add/manual/manual.component.ts
@@ -30,6 +30,7 @@ import { QuillUtils } from 'src/app/utils/quill.utils';
 import { SEOService} from 'src/app/services/seo.service';
 // Import showdown for markdown to html conversion.
 import * as showdown from 'showdown';
+import { CallToAction } from 'src/app/models/domain/call-to-action';
 
 /**
  * Component for manually adding a project.
@@ -67,6 +68,8 @@ export class ManualComponent implements OnInit {
    */
   public modulesConfigration = QuillUtils.getDefaultModulesConfiguration();
 
+  public callToActions: CallToAction[] = [];
+
   selectChangeHandler (event: any) {
     // Allow the frontend to check if it needs to activate the link input
     this.selectedCallToAction = event.target.value;
@@ -79,6 +82,18 @@ export class ManualComponent implements OnInit {
     private wizardService: WizardService,
     private alertService: AlertService,
     private seoService: SEOService) {
+    this.callToActions.push({
+        id: 1,
+        name: 'testname',
+        redirectUrl: 'google.nl',
+    });
+
+    this.callToActions.push({
+        id: 2,
+        name: 'testname2',
+        redirectUrl: 'google.be',
+    })
+
     this.newProjectForm = this.formBuilder.group({
       name: [null, Validators.required],
       uri: [null, Validators.required],

From 3997393dcbef13b1ffbdb102d1c065844104d461 Mon Sep 17 00:00:00 2001
From: Ruben <rubenfricke@gmail.com>
Date: Fri, 30 Oct 2020 14:31:45 +0100
Subject: [PATCH 008/141] Remove browser error

---
 src/app/modules/project/add/manual/manual.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/modules/project/add/manual/manual.component.html b/src/app/modules/project/add/manual/manual.component.html
index 82b0d46c..876667fc 100644
--- a/src/app/modules/project/add/manual/manual.component.html
+++ b/src/app/modules/project/add/manual/manual.component.html
@@ -88,7 +88,7 @@ <h3>Text</h3>
         <div class="col-6">
           <div>
             <h3>Link</h3>
-            <input [disabled]="true" placeholder="Link to your contact info" formControlName="uri" />
+            <input [disabled]="true" placeholder="Link to your contact info"/>
           </div>
         </div>
       </div>

From 13e7cd1051655c6f58ad6ad96b8faa9a898fa377 Mon Sep 17 00:00:00 2001
From: Martin Markov <martin.markov28@gmail.com>
Date: Sun, 11 Oct 2020 18:13:42 +0200
Subject: [PATCH 009/141] Added edit highlight functionality

---
 package-lock.json                             |  5 ++
 package.json                                  |  1 +
 .../project/details/details.component.html    | 11 ++-
 .../project/details/details.component.scss    |  5 +-
 .../project/details/details.component.ts      | 86 +++++++++++--------
 .../modal-highlight-delete.component.html     | 18 +---
 .../modal-highlight-delete.component.scss     | 32 +++----
 .../modal-highlight-edit.component.html       | 15 ++++
 .../modal-highlight-edit.component.scss       |  9 ++
 .../modal-highlight-edit.component.ts         | 20 +++++
 .../modal-highlight-form.component.html}      |  0
 .../modal-highlight-form.component.scss}      |  0
 .../modal-highlight-form.component.ts}        | 34 +++++---
 src/app/modules/project/project.module.ts     | 10 ++-
 src/app/utils/format-date.pipe.ts             | 11 +++
 15 files changed, 171 insertions(+), 86 deletions(-)
 create mode 100644 src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.html
 create mode 100644 src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss
 create mode 100644 src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.ts
 rename src/app/modules/project/{modal-highlight/modal-highlight.component.html => modal-highlight-form/modal-highlight-form.component.html} (100%)
 rename src/app/modules/project/{modal-highlight/modal-highlight.component.scss => modal-highlight-form/modal-highlight-form.component.scss} (100%)
 rename src/app/modules/project/{modal-highlight/modal-highlight.component.ts => modal-highlight-form/modal-highlight-form.component.ts} (76%)
 create mode 100644 src/app/utils/format-date.pipe.ts

diff --git a/package-lock.json b/package-lock.json
index 2e71c05b..5c343c68 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9093,6 +9093,11 @@
         }
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
diff --git a/package.json b/package.json
index bbd7b054..d50c9306 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "dotenv": "^5.0.0",
     "ngx-bootstrap": "^5.6.2",
     "ngx-quill": "^11.1.0",
+    "moment": "^2.29.1",
     "oidc-client": "^1.10.1",
     "quill": "^1.3.7",
     "quill-markdown-shortcuts": "0.0.10",
diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html
index bd933f7a..b48e8932 100644
--- a/src/app/modules/project/details/details.component.html
+++ b/src/app/modules/project/details/details.component.html
@@ -55,7 +55,7 @@ <h3>Collaborators</h3>
           </ul>
         </div>
       </div>
-      <div class="col-6">
+      <div class="col-9">
         <div id="title-wrapper">
           <h1 class="project-title">{{ project.name }}</h1>
 
@@ -101,12 +101,19 @@ <h1 class="project-title">{{ project.name }}</h1>
 
         <div id="project-share-buttons">
           <ng-container *ngIf="displayHighlightButton">
-            <button class="primary ml-2" (click)="onClickHighlightButton()">Highlight Project</button>
+            <div class="project-highlighted-div">
+              <button class="primary ml-2" (click)="onClickHighlightButton()">Highlight Project</button>
+            </div>
+
+            <div *ngIf="isProjectHighlighted" class="project-highlighted-div">
+              <button class="primary ml-2" (click)="onClickEditHighlightButton()">Edit Highlight</button>
+            </div>
 
             <div *ngIf="isProjectHighlighted" class="project-highlighted-div">
               <button class="primary ml-2" (click)="onClickDeleteHighlightButton()">Delete Highlight</button>
             </div>
           </ng-container>
+          
           <ng-container *ngIf="displayEmbedButton">
             <app-embed-button></app-embed-button>
           </ng-container>
diff --git a/src/app/modules/project/details/details.component.scss b/src/app/modules/project/details/details.component.scss
index a9cd53d6..30633081 100644
--- a/src/app/modules/project/details/details.component.scss
+++ b/src/app/modules/project/details/details.component.scss
@@ -91,11 +91,8 @@
   max-width: 800px;
 }
 
-.project-highlighted-div {
-  float: left;
-}
-
 #project-share-buttons {
+  display: flex;
   margin-top: 60px;
 
   button:first-child {
diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 6e12639a..e0fa5860 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -24,7 +24,7 @@ import { AuthService } from 'src/app/services/auth.service';
 import { HighlightService } from 'src/app/services/highlight.service';
 import { HighlightAdd } from 'src/app/models/resources/highlight-add';
 import { BsModalService, ModalOptions } from 'ngx-bootstrap/modal';
-import { ModalHighlightComponent, HighlightFormResult } from 'src/app/modules/project/modal-highlight/modal-highlight.component';
+import { ModalHighlightFormComponent, HighlightFormResult } from 'src/app/modules/project/modal-highlight-form/modal-highlight-form.component';
 import { AlertConfig } from 'src/app/models/internal/alert-config';
 import { AlertType } from 'src/app/models/internal/alert-type';
 import { AlertService } from 'src/app/services/alert.service';
@@ -37,6 +37,8 @@ import { Highlight } from 'src/app/models/domain/highlight';
 import { ModalDeleteGenericComponent } from 'src/app/components/modals/modal-delete-generic/modal-delete-generic.component';
 import { scopes } from 'src/app/models/domain/scopes';
 import { SEOService } from 'src/app/services/seo.service';
+import { ModalHighlightEditComponent } from 'src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component';
+import { HighlightUpdate } from 'src/app/models/resources/highlight-update';
 
 /**
  * Overview of a single project
@@ -148,7 +150,7 @@ export class DetailsComponent implements OnInit {
       this.alertService.pushAlert(alertConfig);
       return;
     }
-    const modalRef = this.modalService.show(ModalHighlightComponent);
+    const modalRef = this.modalService.show(ModalHighlightFormComponent);
 
     modalRef.content.confirm
       .pipe(
@@ -185,27 +187,55 @@ export class DetailsComponent implements OnInit {
    * Method to delete a highlight.
    */
   public onClickDeleteHighlightButton(): void {
-    if (this.project == null || this.project.id === 0) {
-      return;
-    }
-    this.highlightByProjectIdService.getHighlightsByProjectId(this.project.id).subscribe(
-      (results: Highlight[]) => {
-        if (results == null) {
-          return;
-        }
-        results.forEach(highlight => {
-          if (highlight.startDate != null && highlight.endDate != null) {
-            highlight.startDate = this.formatTimestamps(highlight.startDate);
-            highlight.endDate = this.formatTimestamps(highlight.endDate);
-          } else {
-            highlight.startDate = 'Never Ending';
-            highlight.endDate = 'Never Ending';
-          }
+    this.highlightByProjectIdService
+    .getHighlightsByProjectId(this.project.id)
+    .subscribe((results: Highlight[]) => {
+      const options = { initialState: { highlights: results }, class: "modal-lg" };
+      this.modalService.show(ModalHighlightDeleteComponent, options);
+    });
+  }
+
+  /**
+   * Method to first open a modal to select project highlight to edit and then the highlight modal form
+   */
+  public onClickEditHighlightButton(): void {
+    this.highlightByProjectIdService
+      .getHighlightsByProjectId(this.project.id)
+      .subscribe((results: Highlight[]) => {
+        const options = { initialState: { highlights: results }, class: "modal-lg" };
+        const modalHighlightEditRef = this.modalService.show(ModalHighlightEditComponent, options);
+
+        return modalHighlightEditRef.content.selectHighlightToEdit.subscribe(highlight => {
+          const formModalRef = this.modalService.show(ModalHighlightFormComponent, { initialState: { highlight } });
+          
+          formModalRef.content.confirm.pipe(
+            switchMap((highlightFormResult: HighlightFormResult) => {
+              const highlightAddResource: HighlightUpdate = {
+                projectId: this.project.id,
+                startDate: highlightFormResult.startDate,
+                description: highlightFormResult.description,
+                endDate: highlightFormResult.endDate
+              };
+    
+              if (highlightFormResult.indeterminate) {
+                highlightAddResource.startDate = null;
+                highlightAddResource.endDate = null;
+              }
+    
+              return this.highlightService.put(highlight.id, highlightAddResource);
+            })
+          ).subscribe(() => {
+            const alertConfig: AlertConfig = {
+              type: AlertType.success,
+              mainMessage: 'Highlight was successfully updated',
+              dismissible: true,
+              timeout: this.alertService.defaultTimeout
+            };
+            this.alertService.pushAlert(alertConfig);
+            this.isProjectHighlighted = true;
+          });
         });
-        const initialState = { highlights: results };
-        this.modalService.show(ModalHighlightDeleteComponent, { initialState });
-      }
-    );
+      });
   }
 
   /**
@@ -316,16 +346,4 @@ export class DetailsComponent implements OnInit {
     }
     this.displayEmbedButton = this.project.user.id === this.currentUser.id;
   }
-
-  private formatTimestamps(highlightTimestamp: string): string {
-    const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-    const dayOfTheWeek = days[new Date(highlightTimestamp).getDay()];
-    const dateStamp = new Date(highlightTimestamp).getUTCDate() + '-' + (new Date(highlightTimestamp).getUTCMonth() + 1)
-      + '-' + new Date(highlightTimestamp).getUTCFullYear();
-    const timeStamp = new Date(highlightTimestamp).getUTCHours() + ':' + ('0' + new Date(highlightTimestamp).getUTCMinutes()).slice(-2);
-    const timeZone = 'GMT';
-    return dayOfTheWeek + ', ' + dateStamp + ', ' + timeStamp + ' ' + timeZone;
-  }
-
-
 }
diff --git a/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.html b/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.html
index 457b0d3a..f0697d9a 100644
--- a/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.html
+++ b/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.html
@@ -23,25 +23,15 @@ <h2>Delete highlight</h2>
         <div class="highlight-form__checkbox">
           <form [formGroup]="deleteHighlightForm" class="highlight-form">
             <div *ngFor="let highlight of highlights">
-              <div *ngIf="highlight.isNeverEnding; else displayDateTimes">
                 <div class="highlight-wrapper">
-                  <input type="checkbox" id="neverEndingCheckbox" [formControlName]="highlight.id" class="" />
-                  <label for="neverEndingCheckbox"><strong>Never Ending</strong></label>
-
-                </div>
-              </div>
-              <ng-template #displayDateTimes>
-                <div class="highlight-wrapper">
-                  <input type="checkbox" id="checkbox" [formControlName]="highlight.id" class="" />
-                  <label for="checkbox">
+                  <input type="checkbox" id="highlight-{{highlight.id}}" [formControlName]="highlight.id" class="" />
+                  <label for="highlight-{{highlight.id}}">
                     <div class="row no-gutters">
-                      <div class="col-6"><strong>Start date:</strong>{{highlight.startDate}}</div>
-                      <div class="col-6"><strong>End date:</strong>{{highlight.endDate}}</div>
+                      <div class="col-6"><strong>Start date:</strong>{{highlight.startDate | formatDate}}</div>
+                      <div class="col-6"><strong>End date:</strong>{{highlight.endDate | formatDate}}</div>
                     </div>
                   </label>
-
                 </div>
-              </ng-template>
             </div>
           </form>
         </div>
diff --git a/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.scss b/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.scss
index 52d5ca15..df515cef 100644
--- a/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.scss
+++ b/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.scss
@@ -17,7 +17,7 @@
 
 @import "assets/styles/variables";
 
-.modal-body{
+.modal-body {
   position: unset;
 
   h2 {
@@ -27,21 +27,21 @@
 
 .modal-delete-container {
   background: #f8f8f8;
-  width: 700px;
   border-radius: 6px;
   border: none;
   outline: none;
   box-shadow: $box-shadow;
   padding: 15px;
   color: $light-mode-grey-primary;
-  button.close{
+  button.close {
     border: none;
     background: none;
     display: flex;
     float: right;
-    &:focus, &:active{
-      border:none;
-      outline:none;
+    &:focus,
+    &:active {
+      border: none;
+      outline: none;
     }
   }
 }
@@ -70,15 +70,16 @@
     display: flex;
     align-items: center;
     margin-top: 10px;
-    input[type="checkbox"] {
-      border: solid 1px $light-mode-grey-primary;
-      margin-right: 15px;
-    }
-
-    h4 {
-      margin: 0;
-    }
   }
+ 
+  h4 {
+    margin: 0;
+  }
+}
+
+input[type="checkbox"] {
+  border: solid 1px $light-mode-grey-primary;
+  margin-right: 15px;
 }
 
 .modal-buttons {
@@ -95,7 +96,8 @@
   align-items: center;
   margin-bottom: 10px;
 
-  #neverEndingCheckbox, #checkbox {
+  #neverEndingCheckbox,
+  #checkbox {
     width: 16px;
     height: 16px;
     margin-right: 10px;
diff --git a/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.html b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.html
new file mode 100644
index 00000000..6e849ca9
--- /dev/null
+++ b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.html
@@ -0,0 +1,15 @@
+<div class="modal-highlight-edit-container">
+  <h2 class="text-center m-3">Select a highlight to edit</h2>
+  <div class="list-group">
+    <div *ngFor="let highlight of highlights">
+        <div class="highlight-wrapper">
+          <div class="list-group-item list-group-item-action" (click)="selectHighlight(highlight)">
+            <div class="row no-gutters">
+              <div class="col-6"><strong>Start date:</strong><span class="date">{{highlight.startDate | formatDate}}</span></div>
+              <div class="col-6"><strong>End date:</strong><span class="date">{{highlight.endDate | formatDate}}</span></div>
+            </div>
+          </div>
+        </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss
new file mode 100644
index 00000000..6cbae4ee
--- /dev/null
+++ b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss
@@ -0,0 +1,9 @@
+.modal-highlight-edit-container {
+  .list-group-item-action {
+    cursor: pointer;
+
+    .date {
+      padding-left: 10px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.ts b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.ts
new file mode 100644
index 00000000..74bfab92
--- /dev/null
+++ b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.ts
@@ -0,0 +1,20 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import { Highlight } from 'src/app/models/domain/hightlight';
+
+@Component({
+  selector: 'app-modal-highlight-edit',
+  templateUrl: './modal-highlight-edit.component.html',
+  styleUrls: ['./modal-highlight-edit.component.scss']
+})
+export class ModalHighlightEditComponent {
+  @Input() highlights: Highlight[];
+  @Output() selectHighlightToEdit = new EventEmitter();
+
+  constructor(public bsModalRef: BsModalRef) {}
+
+  selectHighlight(selectedHighlight: Highlight) {
+    this.selectHighlightToEdit.emit(selectedHighlight);
+    this.bsModalRef.hide();
+  }
+}
diff --git a/src/app/modules/project/modal-highlight/modal-highlight.component.html b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
similarity index 100%
rename from src/app/modules/project/modal-highlight/modal-highlight.component.html
rename to src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
diff --git a/src/app/modules/project/modal-highlight/modal-highlight.component.scss b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.scss
similarity index 100%
rename from src/app/modules/project/modal-highlight/modal-highlight.component.scss
rename to src/app/modules/project/modal-highlight-form/modal-highlight-form.component.scss
diff --git a/src/app/modules/project/modal-highlight/modal-highlight.component.ts b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
similarity index 76%
rename from src/app/modules/project/modal-highlight/modal-highlight.component.ts
rename to src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
index 4872d6c1..fb7bb435 100644
--- a/src/app/modules/project/modal-highlight/modal-highlight.component.ts
+++ b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
@@ -16,9 +16,11 @@
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  *
  */
-import { Component, Output, EventEmitter } from '@angular/core';
+import { Component, Output, EventEmitter, Input, OnInit } from '@angular/core';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { FormBuilder, FormGroup } from '@angular/forms';
+import { Highlight } from 'src/app/models/domain/hightlight';
+import * as moment from 'moment';
 
 export interface HighlightFormResult {
   startDate?: Date;
@@ -31,32 +33,36 @@ export interface HighlightFormResult {
  * Pop-up modal with duration settings for highlighting a project.
  */
 @Component({
-  selector: 'app-modal-highlight',
-  templateUrl: './modal-highlight.component.html',
-  styleUrls: ['./modal-highlight.component.scss']
+  selector: 'app-modal-highlight-form',
+  templateUrl: './modal-highlight-form.component.html',
+  styleUrls: ['./modal-highlight-form.component.scss']
 })
-export class ModalHighlightComponent {
-
+export class ModalHighlightFormComponent implements OnInit {
+  @Input() highlight: Highlight;
   @Output() confirm = new EventEmitter();
 
   public highlightProjectForm: FormGroup;
   public dateFieldsEnabled = true;
   public validationErrorMessage: string = null;
 
-  constructor(
-    public bsModalRef: BsModalRef,
-    private formBuilder: FormBuilder,
-  ) {
+  constructor(public bsModalRef: BsModalRef, private formBuilder: FormBuilder) { }
+
+  ngOnInit() {
     this.highlightProjectForm = this.formBuilder.group({
-      startDate: [null],
-      endDate: [null],
-      description: [null],
-      indeterminate: [false],
+      startDate: [this.highlight?.startDate ? moment(this.highlight?.startDate).format("YYYY-MM-DD") : null],
+      endDate: [this.highlight?.endDate ? moment(this.highlight?.endDate).format("YYYY-MM-DD") : null],
+      description: [this.highlight?.description],
+      indeterminate: [this.highlight?.startDate === null && this.highlight?.endDate === null],
     });
 
     this.highlightProjectForm.get('indeterminate').valueChanges.subscribe(value => {
       this.onChangeCheckbox(value);
     });
+
+    if (this.highlightProjectForm.get('indeterminate').value === true) {
+      this.highlightProjectForm.get('startDate').disable();
+      this.highlightProjectForm.get('endDate').disable();
+    }
   }
 
   /**
diff --git a/src/app/modules/project/project.module.ts b/src/app/modules/project/project.module.ts
index a7c90403..228942c5 100644
--- a/src/app/modules/project/project.module.ts
+++ b/src/app/modules/project/project.module.ts
@@ -27,11 +27,12 @@ import { EmbedComponent } from './embed/embed.component';
 import { PaginationModule } from 'ngx-bootstrap/pagination';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalHighlightDeleteComponent } from 'src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component';
-import { ModalHighlightComponent } from 'src/app/modules/project/modal-highlight/modal-highlight.component';
+import { ModalHighlightFormComponent } from 'src/app/modules/project/modal-highlight-form/modal-highlight-form.component';
 import { SharedModule } from './../shared/shared.module';
 import { QuillModule } from 'ngx-quill';
 import { Meta } from '@angular/platform-browser';
-
+import { ModalHighlightEditComponent } from './modal-highlight-edit/modal-highlight-edit.component';
+import { FormatDatePipe } from 'src/app/utils/format-date.pipe';
 
 @NgModule({
   declarations: [
@@ -41,7 +42,10 @@ import { Meta } from '@angular/platform-browser';
     EmbedButtonComponent,
     EmbedComponent,
     ModalHighlightDeleteComponent,
-    ModalHighlightComponent],
+    ModalHighlightFormComponent,
+    ModalHighlightEditComponent,
+    FormatDatePipe
+  ],
   imports: [
     CommonModule,
     FormsModule,
diff --git a/src/app/utils/format-date.pipe.ts b/src/app/utils/format-date.pipe.ts
new file mode 100644
index 00000000..f0666201
--- /dev/null
+++ b/src/app/utils/format-date.pipe.ts
@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import * as moment from 'moment';
+
+@Pipe({
+  name: 'formatDate'
+})
+export class FormatDatePipe implements PipeTransform {
+  public transform(date: string): string {
+    return date ? moment(date).format('dddd, DD-MM-YYYY') : 'Never ending';
+  }
+}

From 95cd9ba7475b08de4a73fe53ca991a1737eb0973 Mon Sep 17 00:00:00 2001
From: Martin Markov <martin.markov28@gmail.com>
Date: Sun, 11 Oct 2020 18:15:40 +0200
Subject: [PATCH 010/141] Added missing empty line

---
 .../modal-highlight-edit/modal-highlight-edit.component.scss    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss
index 6cbae4ee..a6aceba2 100644
--- a/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss
+++ b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss
@@ -6,4 +6,4 @@
       padding-left: 10px;
     }
   }
-}
\ No newline at end of file
+}

From 797e66cfad33e41e8158e8c5b934703a56b50956 Mon Sep 17 00:00:00 2001
From: Martin Markov <martin.markov28@gmail.com>
Date: Sun, 11 Oct 2020 18:19:01 +0200
Subject: [PATCH 011/141] Updated the changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e0acf50f..78ea7493 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added update highlight functionality - [#294](https://github.com/DigitalExcellence/dex-frontend/issues/294)
+
 ### Changed
 
 ### Deprecated

From a38ecca8ba66d0eef1da811fc699e54e740f305c Mon Sep 17 00:00:00 2001
From: Martin Markov <martin.markov28@gmail.com>
Date: Sun, 11 Oct 2020 18:34:23 +0200
Subject: [PATCH 012/141] Fixed linting issues

---
 src/app/modules/project/details/details.component.ts   | 10 +++++-----
 .../modal-highlight-form.component.ts                  |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index e0fa5860..13e7fce2 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -190,7 +190,7 @@ export class DetailsComponent implements OnInit {
     this.highlightByProjectIdService
     .getHighlightsByProjectId(this.project.id)
     .subscribe((results: Highlight[]) => {
-      const options = { initialState: { highlights: results }, class: "modal-lg" };
+      const options = { initialState: { highlights: results }, class: 'modal-lg' };
       this.modalService.show(ModalHighlightDeleteComponent, options);
     });
   }
@@ -202,12 +202,12 @@ export class DetailsComponent implements OnInit {
     this.highlightByProjectIdService
       .getHighlightsByProjectId(this.project.id)
       .subscribe((results: Highlight[]) => {
-        const options = { initialState: { highlights: results }, class: "modal-lg" };
+        const options = { initialState: { highlights: results }, class: 'modal-lg' };
         const modalHighlightEditRef = this.modalService.show(ModalHighlightEditComponent, options);
 
         return modalHighlightEditRef.content.selectHighlightToEdit.subscribe(highlight => {
           const formModalRef = this.modalService.show(ModalHighlightFormComponent, { initialState: { highlight } });
-          
+
           formModalRef.content.confirm.pipe(
             switchMap((highlightFormResult: HighlightFormResult) => {
               const highlightAddResource: HighlightUpdate = {
@@ -216,12 +216,12 @@ export class DetailsComponent implements OnInit {
                 description: highlightFormResult.description,
                 endDate: highlightFormResult.endDate
               };
-    
+
               if (highlightFormResult.indeterminate) {
                 highlightAddResource.startDate = null;
                 highlightAddResource.endDate = null;
               }
-    
+
               return this.highlightService.put(highlight.id, highlightAddResource);
             })
           ).subscribe(() => {
diff --git a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
index fb7bb435..c987a782 100644
--- a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
+++ b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
@@ -49,8 +49,8 @@ export class ModalHighlightFormComponent implements OnInit {
 
   ngOnInit() {
     this.highlightProjectForm = this.formBuilder.group({
-      startDate: [this.highlight?.startDate ? moment(this.highlight?.startDate).format("YYYY-MM-DD") : null],
-      endDate: [this.highlight?.endDate ? moment(this.highlight?.endDate).format("YYYY-MM-DD") : null],
+      startDate: [this.highlight?.startDate ? moment(this.highlight?.startDate).format('YYYY-MM-DD') : null],
+      endDate: [this.highlight?.endDate ? moment(this.highlight?.endDate).format('YYYY-MM-DD') : null],
       description: [this.highlight?.description],
       indeterminate: [this.highlight?.startDate === null && this.highlight?.endDate === null],
     });

From 0556992d376003702f2b57809171110ae4aa7201 Mon Sep 17 00:00:00 2001
From: Ruben <rubenfricke@gmail.com>
Date: Thu, 5 Nov 2020 09:11:59 +0100
Subject: [PATCH 013/141] Updated API Config for call to action route

---
 src/app/config/api-config.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/config/api-config.ts b/src/app/config/api-config.ts
index faff60fa..6709416d 100644
--- a/src/app/config/api-config.ts
+++ b/src/app/config/api-config.ts
@@ -26,6 +26,7 @@ export interface ApiConfig {
   internalSearchRoute: string;
   externalSearchRoute: string;
   wizardRoute: string;
+  callToActionRoute: string;
 }
 
 export const API_CONFIG: ApiConfig = {
@@ -36,5 +37,6 @@ export const API_CONFIG: ApiConfig = {
   internalSearchRoute: 'search/internal',
   externalSearchRoute: 'search/external',
   embeddedProjectRoute: 'embed',
-  wizardRoute: 'wizard'
+  wizardRoute: 'wizard',
+  callToActionRoute: 'callToAction'
 };

From 8f7990a299061bde48962905a9f57ec091418a2e Mon Sep 17 00:00:00 2001
From: Ruben <rubenfricke@gmail.com>
Date: Thu, 5 Nov 2020 09:13:01 +0100
Subject: [PATCH 014/141] Created CallToActionAdd resource

---
 src/app/models/resources/calltoaction-add.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/app/models/resources/calltoaction-add.ts

diff --git a/src/app/models/resources/calltoaction-add.ts b/src/app/models/resources/calltoaction-add.ts
new file mode 100644
index 00000000..eff80845
--- /dev/null
+++ b/src/app/models/resources/calltoaction-add.ts
@@ -0,0 +1,20 @@
+/*
+ *  Digital Excellence Copyright (C) 2020 Brend Smits
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Lesser General Public License as published
+ *   by the Free Software Foundation version 3 of the License.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty
+ *   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ *   See the GNU Lesser General Public License for more details.
+ *
+ *   You can find a copy of the GNU Lesser General Public License
+ *   along with this program, in the LICENSE.md file in the root project directory.
+ *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
+ */
+
+export interface CallToActionAdd {
+
+}

From b276281f8f437b1ea831f7f24e0a7a18a123e817 Mon Sep 17 00:00:00 2001
From: Ruben <rubenfricke@gmail.com>
Date: Thu, 5 Nov 2020 09:13:13 +0100
Subject: [PATCH 015/141] Created CallToActionUpdate resource

---
 .../models/resources/calltoaction-update.ts   | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/app/models/resources/calltoaction-update.ts

diff --git a/src/app/models/resources/calltoaction-update.ts b/src/app/models/resources/calltoaction-update.ts
new file mode 100644
index 00000000..7686f554
--- /dev/null
+++ b/src/app/models/resources/calltoaction-update.ts
@@ -0,0 +1,20 @@
+/*
+ *  Digital Excellence Copyright (C) 2020 Brend Smits
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Lesser General Public License as published
+ *   by the Free Software Foundation version 3 of the License.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty
+ *   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ *   See the GNU Lesser General Public License for more details.
+ *
+ *   You can find a copy of the GNU Lesser General Public License
+ *   along with this program, in the LICENSE.md file in the root project directory.
+ *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
+ */
+
+export interface CallToActionUpdate {
+
+}

From 60c6d8ee094aaaee49768e6e40ee4954994c830f Mon Sep 17 00:00:00 2001
From: Ruben <rubenfricke@gmail.com>
Date: Thu, 5 Nov 2020 09:13:33 +0100
Subject: [PATCH 016/141] Created basic Call to action service

---
 src/app/services/call-to-action.service.ts | 33 ++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/app/services/call-to-action.service.ts

diff --git a/src/app/services/call-to-action.service.ts b/src/app/services/call-to-action.service.ts
new file mode 100644
index 00000000..a5136f05
--- /dev/null
+++ b/src/app/services/call-to-action.service.ts
@@ -0,0 +1,33 @@
+/*
+ *  Digital Excellence Copyright (C) 2020 Brend Smits
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Lesser General Public License as published
+ *   by the Free Software Foundation version 3 of the License.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty
+ *   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ *   See the GNU Lesser General Public License for more details.
+ *
+ *   You can find a copy of the GNU Lesser General Public License
+ *   along with this program, in the LICENSE.md file in the root project directory.
+ *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
+ */
+
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { API_CONFIG } from '../config/api-config';
+import { CallToAction } from '../models/domain/call-to-action';
+import { CallToActionAdd } from '../models/resources/calltoaction-add';
+import { CallToActionUpdate } from '../models/resources/calltoaction-update';
+import { HttpBaseService } from './http-base.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CallToActionService extends HttpBaseService<CallToAction, CallToActionAdd, CallToActionUpdate> {
+    constructor(http: HttpClient) {
+      super(http, API_CONFIG.url + API_CONFIG.callToActionRoute);
+    }
+  }

From 318138faa3e6efd2178b26b1b7eaac751912fe9c Mon Sep 17 00:00:00 2001
From: Ruben <rubenfricke@gmail.com>
Date: Thu, 5 Nov 2020 09:15:48 +0100
Subject: [PATCH 017/141] Filled call to action resources

---
 src/app/models/resources/calltoaction-add.ts    | 3 ++-
 src/app/models/resources/calltoaction-update.ts | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app/models/resources/calltoaction-add.ts b/src/app/models/resources/calltoaction-add.ts
index eff80845..b0955bf4 100644
--- a/src/app/models/resources/calltoaction-add.ts
+++ b/src/app/models/resources/calltoaction-add.ts
@@ -16,5 +16,6 @@
  */
 
 export interface CallToActionAdd {
-
+    name: string;
+    redirectUrl: string;
 }
diff --git a/src/app/models/resources/calltoaction-update.ts b/src/app/models/resources/calltoaction-update.ts
index 7686f554..c3b70c1c 100644
--- a/src/app/models/resources/calltoaction-update.ts
+++ b/src/app/models/resources/calltoaction-update.ts
@@ -16,5 +16,7 @@
  */
 
 export interface CallToActionUpdate {
-
+    id: number;
+    name: string;
+    redirectUrl: string;
 }

From f759de5da441c5f6cae5889b833b20b61602bcbb Mon Sep 17 00:00:00 2001
From: Devon Cavis <devon.cavis@live.nl>
Date: Thu, 5 Nov 2020 09:17:53 +0100
Subject: [PATCH 018/141] Fixed disabling of Call to action link when no CTA is
 selected

---
 src/app/modules/project/add/manual/manual.component.html | 2 +-
 src/app/modules/project/add/manual/manual.component.ts   | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/modules/project/add/manual/manual.component.html b/src/app/modules/project/add/manual/manual.component.html
index 876667fc..23d44787 100644
--- a/src/app/modules/project/add/manual/manual.component.html
+++ b/src/app/modules/project/add/manual/manual.component.html
@@ -88,7 +88,7 @@ <h3>Text</h3>
         <div class="col-6">
           <div>
             <h3>Link</h3>
-            <input [disabled]="true" placeholder="Link to your contact info"/>
+            <input [disabled]="selectedCallToAction === 0" placeholder="Link to your contact info"/>
           </div>
         </div>
       </div>
diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts
index 315c2ff4..65d31576 100644
--- a/src/app/modules/project/add/manual/manual.component.ts
+++ b/src/app/modules/project/add/manual/manual.component.ts
@@ -51,7 +51,7 @@ export class ManualComponent implements OnInit {
   /**
    * Projects selected call to action
    */
-  public selectedCallToAction = 'None';
+  public selectedCallToAction = 0;
 
   /**
    * Project's collaborators.
@@ -72,7 +72,7 @@ export class ManualComponent implements OnInit {
 
   selectChangeHandler (event: any) {
     // Allow the frontend to check if it needs to activate the link input
-    this.selectedCallToAction = event.target.value;
+    this.selectedCallToAction = event.target.selectedIndex;
   }
 
   constructor(
@@ -92,7 +92,7 @@ export class ManualComponent implements OnInit {
         id: 2,
         name: 'testname2',
         redirectUrl: 'google.be',
-    })
+    });
 
     this.newProjectForm = this.formBuilder.group({
       name: [null, Validators.required],

From d69f79a0617756db66ac53ed84ac6b36c4d6c095 Mon Sep 17 00:00:00 2001
From: Ruben <rubenfricke@gmail.com>
Date: Thu, 5 Nov 2020 09:34:14 +0100
Subject: [PATCH 019/141] Implemented call to action service

---
 .../project/add/manual/manual.component.ts    | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts
index 65d31576..20c75524 100644
--- a/src/app/modules/project/add/manual/manual.component.ts
+++ b/src/app/modules/project/add/manual/manual.component.ts
@@ -31,6 +31,7 @@ import { SEOService} from 'src/app/services/seo.service';
 // Import showdown for markdown to html conversion.
 import * as showdown from 'showdown';
 import { CallToAction } from 'src/app/models/domain/call-to-action';
+import { CallToActionService } from 'src/app/services/call-to-action.service';
 
 /**
  * Component for manually adding a project.
@@ -75,24 +76,16 @@ export class ManualComponent implements OnInit {
     this.selectedCallToAction = event.target.selectedIndex;
   }
 
+  public callToActionsLoading = true;
+
   constructor(
     private router: Router,
     private formBuilder: FormBuilder,
     private projectService: ProjectService,
     private wizardService: WizardService,
     private alertService: AlertService,
-    private seoService: SEOService) {
-    this.callToActions.push({
-        id: 1,
-        name: 'testname',
-        redirectUrl: 'google.nl',
-    });
-
-    this.callToActions.push({
-        id: 2,
-        name: 'testname2',
-        redirectUrl: 'google.be',
-    });
+    private seoService: SEOService,
+    private callToActionService: CallToActionService) {
 
     this.newProjectForm = this.formBuilder.group({
       name: [null, Validators.required],
@@ -129,6 +122,14 @@ export class ManualComponent implements OnInit {
       this.fillFormWithProject(project);
     });
 
+    // Retrieve the available call to actions
+    this.callToActionService
+    .getAll()
+    .pipe(finalize(() => (this.callToActionsLoading = false)))
+    .subscribe((result) => {
+        this.callToActions = result;
+    });
+
     // Updates meta and title tags
     this.seoService.updateTitle('Add new project');
     this.seoService.updateDescription('Create a new project in DeX');

From 84c7da0d5991f443360c561c60ee0bad8c377855 Mon Sep 17 00:00:00 2001
From: Devon Cavis <devon.cavis@live.nl>
Date: Thu, 5 Nov 2020 09:39:07 +0100
Subject: [PATCH 020/141] Improved styling of Call to action selection dropdown

---
 src/app/modules/project/add/manual/manual.component.html | 1 -
 src/app/modules/project/add/manual/manual.component.scss | 5 +++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/project/add/manual/manual.component.html b/src/app/modules/project/add/manual/manual.component.html
index 23d44787..22ed2a8f 100644
--- a/src/app/modules/project/add/manual/manual.component.html
+++ b/src/app/modules/project/add/manual/manual.component.html
@@ -81,7 +81,6 @@ <h3>Text</h3>
               <option value='None'>None</option>
               <option *ngFor="let action of callToActions" [ngValue]="action.id">{{action.name}}</option>
             </select>
-            <p><span>You selected: </span><b>{{selectedCallToAction}}</b></p>
           </div>
         </div>
 
diff --git a/src/app/modules/project/add/manual/manual.component.scss b/src/app/modules/project/add/manual/manual.component.scss
index 73057378..31da427e 100644
--- a/src/app/modules/project/add/manual/manual.component.scss
+++ b/src/app/modules/project/add/manual/manual.component.scss
@@ -39,6 +39,11 @@
     outline: auto #e4e4e4;
   }
 
+  select {
+    height: 45px;
+    box-shadow: 0px 3px 6px #0000001a;
+  }
+
   .form-footnote {
     margin-top: -15px;
   }

From ccb8cb0208b0266f4eb2bf522bd0761843f6f28b Mon Sep 17 00:00:00 2001
From: Ruben <rubenfricke@gmail.com>
Date: Thu, 5 Nov 2020 09:55:55 +0100
Subject: [PATCH 021/141] Updated project service models

---
 src/app/models/domain/project.ts           | 2 ++
 src/app/models/resources/project-add.ts    | 2 ++
 src/app/models/resources/project-update.ts | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/src/app/models/domain/project.ts b/src/app/models/domain/project.ts
index 77331a2b..c47d2e44 100644
--- a/src/app/models/domain/project.ts
+++ b/src/app/models/domain/project.ts
@@ -17,6 +17,7 @@
 
 import { User } from './user';
 import { Collaborator } from './collaborator';
+import { CallToAction } from './call-to-action';
 
 export interface Project {
   id: number;
@@ -28,4 +29,5 @@ export interface Project {
   updated: Date;
   uri?: string;
   collaborators?: Collaborator[];
+  callToAction?: CallToAction;
 }
diff --git a/src/app/models/resources/project-add.ts b/src/app/models/resources/project-add.ts
index 86f83386..ecb3abbb 100644
--- a/src/app/models/resources/project-add.ts
+++ b/src/app/models/resources/project-add.ts
@@ -15,6 +15,7 @@
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  */
 
+import { CallToAction } from '../domain/call-to-action';
 import { CollaboratorAdd } from './collaborator-add';
 export interface ProjectAdd {
   userId: number;
@@ -23,4 +24,5 @@ export interface ProjectAdd {
   shortDescription: string;
   description?: string;
   url: string;
+  callToAction: CallToAction;
 }
diff --git a/src/app/models/resources/project-update.ts b/src/app/models/resources/project-update.ts
index ca9bd09b..08a107e9 100644
--- a/src/app/models/resources/project-update.ts
+++ b/src/app/models/resources/project-update.ts
@@ -15,6 +15,7 @@
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  */
 
+import { CallToAction } from '../domain/call-to-action';
 import { CollaboratorUpdate } from './collaborator-update';
 
 export interface ProjectUpdate {
@@ -25,4 +26,5 @@ export interface ProjectUpdate {
   shortDescription: string;
   description: string;
   url: string;
+  callToAction: CallToAction;
 }

From 7888bad63106869aa8da21f13509ec6fa16e7f5f Mon Sep 17 00:00:00 2001
From: Devon Cavis <devon.cavis@live.nl>
Date: Thu, 5 Nov 2020 09:58:12 +0100
Subject: [PATCH 022/141] Remove unnecessary code, added some temporary testing
 code

---
 .../project/add/manual/manual.component.html  |  4 ++--
 .../project/add/manual/manual.component.ts    | 19 +++++++++++++------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/app/modules/project/add/manual/manual.component.html b/src/app/modules/project/add/manual/manual.component.html
index 22ed2a8f..cd4aad22 100644
--- a/src/app/modules/project/add/manual/manual.component.html
+++ b/src/app/modules/project/add/manual/manual.component.html
@@ -77,9 +77,9 @@ <h3>Call to action</h3>
         <div class="col-6">
           <div>
             <h3>Text</h3>
-            <select ng-model='nrSelect' class='form-control' (change)="selectChangeHandler($event)">
+            <select class='form-control' (change)="selectChangeHandler($event)">
               <option value='None'>None</option>
-              <option *ngFor="let action of callToActions" [ngValue]="action.id">{{action.name}}</option>
+              <option *ngFor="let action of callToActions" [ngValue]="action">{{action.name}}</option>
             </select>
           </div>
         </div>
diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts
index 20c75524..b4c9f631 100644
--- a/src/app/modules/project/add/manual/manual.component.ts
+++ b/src/app/modules/project/add/manual/manual.component.ts
@@ -74,6 +74,7 @@ export class ManualComponent implements OnInit {
   selectChangeHandler (event: any) {
     // Allow the frontend to check if it needs to activate the link input
     this.selectedCallToAction = event.target.selectedIndex;
+    console.log(event.target);
   }
 
   public callToActionsLoading = true;
@@ -123,12 +124,18 @@ export class ManualComponent implements OnInit {
     });
 
     // Retrieve the available call to actions
-    this.callToActionService
-    .getAll()
-    .pipe(finalize(() => (this.callToActionsLoading = false)))
-    .subscribe((result) => {
-        this.callToActions = result;
-    });
+    // this.callToActionService
+    // .getAll()
+    // .pipe(finalize(() => (this.callToActionsLoading = false)))
+    // .subscribe((result) => {
+    //     this.callToActions = result;
+    // });
+
+    this.callToActions.push({
+      id: 2,
+      name: 'testname2',
+      redirectUrl: 'google.be',
+      });
 
     // Updates meta and title tags
     this.seoService.updateTitle('Add new project');

From 09cfd1659d6c3d0f92fdd11e32edd6e1fd812a54 Mon Sep 17 00:00:00 2001
From: Ruben <rubenfricke@gmail.com>
Date: Thu, 5 Nov 2020 10:39:35 +0100
Subject: [PATCH 023/141] Fixed storing selected call to action

---
 src/app/modules/project/add/add.module.ts     | 15 +++---
 .../project/add/manual/manual.component.html  |  5 +-
 .../project/add/manual/manual.component.ts    | 49 ++++++++++---------
 3 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/app/modules/project/add/add.module.ts b/src/app/modules/project/add/add.module.ts
index 4b303adf..89b5bbda 100644
--- a/src/app/modules/project/add/add.module.ts
+++ b/src/app/modules/project/add/add.module.ts
@@ -17,7 +17,7 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AddRoutingModule } from './add-routing.module';
 import { ManualComponent } from './manual/manual.component';
 import { SourceComponent } from './source/source.component';
@@ -28,11 +28,12 @@ import { QuillModule } from 'ngx-quill';
     SourceComponent,
     ManualComponent
   ],
-  imports: [
-    CommonModule,
-    AddRoutingModule,
-    ReactiveFormsModule,
-    QuillModule
-  ],
+    imports: [
+        CommonModule,
+        AddRoutingModule,
+        ReactiveFormsModule,
+        QuillModule,
+        FormsModule
+    ],
 })
 export class AddModule { }
diff --git a/src/app/modules/project/add/manual/manual.component.html b/src/app/modules/project/add/manual/manual.component.html
index cd4aad22..cddf6537 100644
--- a/src/app/modules/project/add/manual/manual.component.html
+++ b/src/app/modules/project/add/manual/manual.component.html
@@ -77,8 +77,7 @@ <h3>Call to action</h3>
         <div class="col-6">
           <div>
             <h3>Text</h3>
-            <select class='form-control' (change)="selectChangeHandler($event)">
-              <option value='None'>None</option>
+            <select [(ngModel)]="selectedCallToAction" class='form-control' [ngModelOptions]="{standalone: true}">
               <option *ngFor="let action of callToActions" [ngValue]="action">{{action.name}}</option>
             </select>
           </div>
@@ -87,7 +86,7 @@ <h3>Text</h3>
         <div class="col-6">
           <div>
             <h3>Link</h3>
-            <input [disabled]="selectedCallToAction === 0" placeholder="Link to your contact info"/>
+            <input [(ngModel)]="selectedCallToAction.redirectUrl" [ngModelOptions]="{standalone: true}" [disabled]="selectedCallToAction.id <= 0" placeholder="Link to your contact info"/>
           </div>
         </div>
       </div>
diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts
index b4c9f631..bb03db16 100644
--- a/src/app/modules/project/add/manual/manual.component.ts
+++ b/src/app/modules/project/add/manual/manual.component.ts
@@ -52,7 +52,11 @@ export class ManualComponent implements OnInit {
   /**
    * Projects selected call to action
    */
-  public selectedCallToAction = 0;
+  public selectedCallToAction: CallToAction = {
+    id: 0,
+    name: 'None',
+    redirectUrl: '',
+  };
 
   /**
    * Project's collaborators.
@@ -71,12 +75,6 @@ export class ManualComponent implements OnInit {
 
   public callToActions: CallToAction[] = [];
 
-  selectChangeHandler (event: any) {
-    // Allow the frontend to check if it needs to activate the link input
-    this.selectedCallToAction = event.target.selectedIndex;
-    console.log(event.target);
-  }
-
   public callToActionsLoading = true;
 
   constructor(
@@ -123,27 +121,26 @@ export class ManualComponent implements OnInit {
       this.fillFormWithProject(project);
     });
 
-    // Retrieve the available call to actions
-    // this.callToActionService
-    // .getAll()
-    // .pipe(finalize(() => (this.callToActionsLoading = false)))
-    // .subscribe((result) => {
-    //     this.callToActions = result;
-    // });
-
-    this.callToActions.push({
-      id: 2,
-      name: 'testname2',
-      redirectUrl: 'google.be',
-      });
+    /**
+     * Retrieve the available call to actions
+     */
+    this.callToActionService
+    .getAll()
+    .pipe(finalize(() => (this.callToActionsLoading = false)))
+    .subscribe((result) => {
+        this.callToActions = result;
+    });
+
+    /**
+     * Add the none option to the dropdown
+     */
+    this.callToActions.unshift(this.selectedCallToAction);
 
     // Updates meta and title tags
     this.seoService.updateTitle('Add new project');
     this.seoService.updateDescription('Create a new project in DeX');
   }
 
-
-
   /**
    * Method which triggers when the submit button is pressed.
    * Creates a new project.
@@ -165,6 +162,14 @@ export class ManualComponent implements OnInit {
     const newProject: ProjectAdd = this.newProjectForm.value;
     newProject.collaborators = this.collaborators;
 
+    /*
+    * Whenever a call to action is selected, this value
+    * should be sent to to the API.
+     */
+    if(this.selectedCallToAction.id > 0){
+      newProject.callToAction = this.selectedCallToAction;
+    }
+
     this.projectService
       .post(newProject)
       .pipe(finalize(() => (this.submitEnabled = false)))

From 804f1e56dc5af8c5a2950b7c247277adb1de5fd4 Mon Sep 17 00:00:00 2001
From: Devon Cavis <d.cavis@student.fontys.nl>
Date: Fri, 6 Nov 2020 11:58:19 +0100
Subject: [PATCH 024/141] Added Call to action button to project details page

This includes the check of whether or not there is a call to action set for that specific project.
---
 .../project/add/manual/manual.component.ts    |  2 +-
 .../project/details/details.component.html    |  4 ++++
 .../project/details/details.component.ts      | 19 +++++++++++++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts
index bb03db16..28e1c168 100644
--- a/src/app/modules/project/add/manual/manual.component.ts
+++ b/src/app/modules/project/add/manual/manual.component.ts
@@ -166,7 +166,7 @@ export class ManualComponent implements OnInit {
     * Whenever a call to action is selected, this value
     * should be sent to to the API.
      */
-    if(this.selectedCallToAction.id > 0){
+    if (this.selectedCallToAction.id > 0) {
       newProject.callToAction = this.selectedCallToAction;
     }
 
diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html
index bd933f7a..4faa6391 100644
--- a/src/app/modules/project/details/details.component.html
+++ b/src/app/modules/project/details/details.component.html
@@ -99,6 +99,10 @@ <h1 class="project-title">{{ project.name }}</h1>
           <quill-view class="dex-quill-viewer" [content]="project.description" format="html"></quill-view>
         </p>
 
+        <ng-container *ngIf="displayCallToActionButton">
+          <button class="primary ml-2" (click)="onClickCallToActionButton()">{{project.callToAction.name}}</button>
+        </ng-container>
+
         <div id="project-share-buttons">
           <ng-container *ngIf="displayHighlightButton">
             <button class="primary ml-2" (click)="onClickHighlightButton()">Highlight Project</button>
diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 6e12639a..19885408 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -56,6 +56,7 @@ export class DetailsComponent implements OnInit {
 
   public displayEditButton = false;
   public displayDeleteProjectButton = false;
+  public displayCallToActionButton = false;
   public displayHighlightButton = false;
   public displayEmbedButton = false;
 
@@ -109,6 +110,7 @@ export class DetailsComponent implements OnInit {
           const desc = (this.project.shortDescription) ? this.project.shortDescription : this.project.description;
           this.determineDisplayEditProjectButton();
           this.determineDisplayDeleteProjectButton();
+          this.determineDisplayCallToActionButton();
           this.determineDisplayEmbedButton();
           this.determineDisplayHighlightButton();
 
@@ -131,6 +133,10 @@ export class DetailsComponent implements OnInit {
     }
   }
 
+  public onClickCallToActionButton(): void {
+    window.open(this.project.callToAction.redirectUrl, '_blank');
+  }
+
   /**
    * Highlight a project by calling the API
    * When Indeterminate checkbox is checked start date and end date fields are disabled and will be null,
@@ -287,6 +293,19 @@ export class DetailsComponent implements OnInit {
     this.displayDeleteProjectButton = this.project.user.id === this.currentUser.id;
   }
 
+  /**
+   * Method to display the project's call to action button based on whether or not the project has a set call to action.
+   */
+  private determineDisplayCallToActionButton(): void {
+    if (this.project != null && this.project.callToAction != null) {
+      this.displayCallToActionButton = true;
+      return;
+    } else {
+      this.displayCallToActionButton = false;
+      return;
+    }
+  }
+
   /**
    * Method to display the highlight buttons based on the current user.
    * If the user either has the HighlightWrite scope.

From d07aaa54f18f326396f88a30dc4e9433490d41f9 Mon Sep 17 00:00:00 2001
From: Ruben <rubenfricke@gmail.com>
Date: Mon, 30 Nov 2020 10:23:00 +0100
Subject: [PATCH 025/141] Added call to action option model

---
 .../models/domain/call-to-action-option.ts    | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 src/app/models/domain/call-to-action-option.ts

diff --git a/src/app/models/domain/call-to-action-option.ts b/src/app/models/domain/call-to-action-option.ts
new file mode 100644
index 00000000..3c66b9b3
--- /dev/null
+++ b/src/app/models/domain/call-to-action-option.ts
@@ -0,0 +1,22 @@
+/*
+ *  Digital Excellence Copyright (C) 2020 Brend Smits
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Lesser General Public License as published
+ *   by the Free Software Foundation version 3 of the License.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty
+ *   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ *   See the GNU Lesser General Public License for more details.
+ *
+ *   You can find a copy of the GNU Lesser General Public License
+ *   along with this program, in the LICENSE.md file in the root project directory.
+ *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
+ */
+
+export interface CallToActionOption {
+    id: number;
+    type: string;
+    value: string;
+}

From 9c700c4106b7dba857e71140551634727ee716c0 Mon Sep 17 00:00:00 2001
From: Ruben <rubenfricke@gmail.com>
Date: Mon, 30 Nov 2020 10:49:41 +0100
Subject: [PATCH 026/141] Retrieve call to action options

---
 src/app/config/api-config.ts                  |  4 +--
 .../project/add/manual/manual.component.html  |  7 ++--
 .../project/add/manual/manual.component.ts    | 36 ++++++++++---------
 ...ce.ts => call-to-action-option.service.ts} |  6 ++--
 4 files changed, 28 insertions(+), 25 deletions(-)
 rename src/app/services/{call-to-action.service.ts => call-to-action-option.service.ts} (81%)

diff --git a/src/app/config/api-config.ts b/src/app/config/api-config.ts
index 6709416d..4a0e0c42 100644
--- a/src/app/config/api-config.ts
+++ b/src/app/config/api-config.ts
@@ -26,7 +26,7 @@ export interface ApiConfig {
   internalSearchRoute: string;
   externalSearchRoute: string;
   wizardRoute: string;
-  callToActionRoute: string;
+  callToActionOptionRoute: string;
 }
 
 export const API_CONFIG: ApiConfig = {
@@ -38,5 +38,5 @@ export const API_CONFIG: ApiConfig = {
   externalSearchRoute: 'search/external',
   embeddedProjectRoute: 'embed',
   wizardRoute: 'wizard',
-  callToActionRoute: 'callToAction'
+  callToActionOptionRoute: 'callToActionOption'
 };
diff --git a/src/app/modules/project/add/manual/manual.component.html b/src/app/modules/project/add/manual/manual.component.html
index cddf6537..6031362d 100644
--- a/src/app/modules/project/add/manual/manual.component.html
+++ b/src/app/modules/project/add/manual/manual.component.html
@@ -17,7 +17,6 @@
 
  -->
 
-
 <div class="row">
   <div class="offset-2 col-8">
     <h1>Add new project</h1>
@@ -77,8 +76,8 @@ <h3>Call to action</h3>
         <div class="col-6">
           <div>
             <h3>Text</h3>
-            <select [(ngModel)]="selectedCallToAction" class='form-control' [ngModelOptions]="{standalone: true}">
-              <option *ngFor="let action of callToActions" [ngValue]="action">{{action.name}}</option>
+            <select [(ngModel)]="selectedCallToActionOption" class='form-control' [ngModelOptions]="{standalone: true}">
+              <option *ngFor="let action of callToActionOptions" [ngValue]="action">{{action.value}}</option>
             </select>
           </div>
         </div>
@@ -86,7 +85,7 @@ <h3>Text</h3>
         <div class="col-6">
           <div>
             <h3>Link</h3>
-            <input [(ngModel)]="selectedCallToAction.redirectUrl" [ngModelOptions]="{standalone: true}" [disabled]="selectedCallToAction.id <= 0" placeholder="Link to your contact info"/>
+            <input [disabled]="selectedCallToActionOption.id <= 0" placeholder="Link to your contact info"/>
           </div>
         </div>
       </div>
diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts
index 28e1c168..54763c3a 100644
--- a/src/app/modules/project/add/manual/manual.component.ts
+++ b/src/app/modules/project/add/manual/manual.component.ts
@@ -14,6 +14,7 @@
  *   along with this program, in the LICENSE.md file in the root project directory.
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  */
+
 import { AlertType } from 'src/app/models/internal/alert-type';
 import { AlertConfig } from 'src/app/models/internal/alert-config';
 import { AlertService } from 'src/app/services/alert.service';
@@ -31,7 +32,8 @@ import { SEOService} from 'src/app/services/seo.service';
 // Import showdown for markdown to html conversion.
 import * as showdown from 'showdown';
 import { CallToAction } from 'src/app/models/domain/call-to-action';
-import { CallToActionService } from 'src/app/services/call-to-action.service';
+import { CallToActionOptionService } from 'src/app/services/call-to-action-option.service';
+import { CallToActionOption } from 'src/app/models/domain/call-to-action-option';
 
 /**
  * Component for manually adding a project.
@@ -52,10 +54,10 @@ export class ManualComponent implements OnInit {
   /**
    * Projects selected call to action
    */
-  public selectedCallToAction: CallToAction = {
+  public selectedCallToActionOption: CallToActionOption = {
     id: 0,
-    name: 'None',
-    redirectUrl: '',
+    type: 'title',
+    value: 'None',
   };
 
   /**
@@ -74,6 +76,8 @@ export class ManualComponent implements OnInit {
   public modulesConfigration = QuillUtils.getDefaultModulesConfiguration();
 
   public callToActions: CallToAction[] = [];
+  public callToActionOptions: CallToActionOption[] = [];
+
 
   public callToActionsLoading = true;
 
@@ -84,7 +88,7 @@ export class ManualComponent implements OnInit {
     private wizardService: WizardService,
     private alertService: AlertService,
     private seoService: SEOService,
-    private callToActionService: CallToActionService) {
+    private callToActionOptionService: CallToActionOptionService) {
 
     this.newProjectForm = this.formBuilder.group({
       name: [null, Validators.required],
@@ -94,8 +98,8 @@ export class ManualComponent implements OnInit {
     });
 
     this.newCallToActionForm = this.formBuilder.group({
-      name: [null, Validators.required],
-      redirectUrl: [null, Validators.required],
+      type: [null, Validators.required],
+      value: [null, Validators.required],
     });
 
     this.newCollaboratorForm = this.formBuilder.group({
@@ -124,17 +128,17 @@ export class ManualComponent implements OnInit {
     /**
      * Retrieve the available call to actions
      */
-    this.callToActionService
+    this.callToActionOptionService
     .getAll()
     .pipe(finalize(() => (this.callToActionsLoading = false)))
     .subscribe((result) => {
-        this.callToActions = result;
-    });
+        this.callToActionOptions = result;
 
-    /**
-     * Add the none option to the dropdown
-     */
-    this.callToActions.unshift(this.selectedCallToAction);
+        /**
+         * Add the none option to the dropdown
+         */
+        this.callToActionOptions.unshift(this.selectedCallToActionOption);
+    });
 
     // Updates meta and title tags
     this.seoService.updateTitle('Add new project');
@@ -166,8 +170,8 @@ export class ManualComponent implements OnInit {
     * Whenever a call to action is selected, this value
     * should be sent to to the API.
      */
-    if (this.selectedCallToAction.id > 0) {
-      newProject.callToAction = this.selectedCallToAction;
+    if (this.selectedCallToActionOption.id > 0) {
+    //   newProject.callToAction = this.selectedCallToAction;
     }
 
     this.projectService
diff --git a/src/app/services/call-to-action.service.ts b/src/app/services/call-to-action-option.service.ts
similarity index 81%
rename from src/app/services/call-to-action.service.ts
rename to src/app/services/call-to-action-option.service.ts
index a5136f05..54b0fde1 100644
--- a/src/app/services/call-to-action.service.ts
+++ b/src/app/services/call-to-action-option.service.ts
@@ -18,7 +18,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { API_CONFIG } from '../config/api-config';
-import { CallToAction } from '../models/domain/call-to-action';
+import { CallToActionOption } from '../models/domain/call-to-action-option';
 import { CallToActionAdd } from '../models/resources/calltoaction-add';
 import { CallToActionUpdate } from '../models/resources/calltoaction-update';
 import { HttpBaseService } from './http-base.service';
@@ -26,8 +26,8 @@ import { HttpBaseService } from './http-base.service';
 @Injectable({
   providedIn: 'root'
 })
-export class CallToActionService extends HttpBaseService<CallToAction, CallToActionAdd, CallToActionUpdate> {
+export class CallToActionOptionService extends HttpBaseService<CallToActionOption, CallToActionAdd, CallToActionUpdate> {
     constructor(http: HttpClient) {
-      super(http, API_CONFIG.url + API_CONFIG.callToActionRoute);
+      super(http, API_CONFIG.url + API_CONFIG.callToActionOptionRoute);
     }
   }

From 35af8cbd9aefe8d1c9de7877842dd8fbb8045c16 Mon Sep 17 00:00:00 2001
From: Ruben <rubenfricke@gmail.com>
Date: Mon, 30 Nov 2020 11:33:35 +0100
Subject: [PATCH 027/141] Resolved naming errors

---
 src/app/models/domain/call-to-action.ts         |  4 ++--
 .../project/add/manual/manual.component.html    |  2 +-
 .../project/add/manual/manual.component.ts      | 17 +++++++++++++----
 .../project/details/details.component.html      |  4 ++--
 .../project/details/details.component.ts        |  2 +-
 5 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/app/models/domain/call-to-action.ts b/src/app/models/domain/call-to-action.ts
index a8bf755d..71173846 100644
--- a/src/app/models/domain/call-to-action.ts
+++ b/src/app/models/domain/call-to-action.ts
@@ -17,6 +17,6 @@
 
 export interface CallToAction {
     id: number;
-    name: string;
-    redirectUrl: string;
+    optionValue: string;
+    value: string;
 }
diff --git a/src/app/modules/project/add/manual/manual.component.html b/src/app/modules/project/add/manual/manual.component.html
index 6031362d..941153fc 100644
--- a/src/app/modules/project/add/manual/manual.component.html
+++ b/src/app/modules/project/add/manual/manual.component.html
@@ -85,7 +85,7 @@ <h3>Text</h3>
         <div class="col-6">
           <div>
             <h3>Link</h3>
-            <input [disabled]="selectedCallToActionOption.id <= 0" placeholder="Link to your contact info"/>
+            <input [(ngModel)]="callToActionRedirectUrl" [ngModelOptions]="{standalone: true}" [disabled]="selectedCallToActionOption.id <= 0" placeholder="Link to your contact info"/>
           </div>
         </div>
       </div>
diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts
index 54763c3a..a0d3b96e 100644
--- a/src/app/modules/project/add/manual/manual.component.ts
+++ b/src/app/modules/project/add/manual/manual.component.ts
@@ -31,9 +31,9 @@ import { QuillUtils } from 'src/app/utils/quill.utils';
 import { SEOService} from 'src/app/services/seo.service';
 // Import showdown for markdown to html conversion.
 import * as showdown from 'showdown';
-import { CallToAction } from 'src/app/models/domain/call-to-action';
 import { CallToActionOptionService } from 'src/app/services/call-to-action-option.service';
 import { CallToActionOption } from 'src/app/models/domain/call-to-action-option';
+import { CallToAction } from 'src/app/models/domain/call-to-action';
 
 /**
  * Component for manually adding a project.
@@ -60,6 +60,11 @@ export class ManualComponent implements OnInit {
     value: 'None',
   };
 
+  /**
+   * The specified redirect url from the call to action
+   */
+  public callToActionRedirectUrl: string;
+
   /**
    * Project's collaborators.
    */
@@ -75,10 +80,11 @@ export class ManualComponent implements OnInit {
    */
   public modulesConfigration = QuillUtils.getDefaultModulesConfiguration();
 
-  public callToActions: CallToAction[] = [];
+  /**
+   * The available call to action options to select from
+   */
   public callToActionOptions: CallToActionOption[] = [];
 
-
   public callToActionsLoading = true;
 
   constructor(
@@ -138,6 +144,8 @@ export class ManualComponent implements OnInit {
          * Add the none option to the dropdown
          */
         this.callToActionOptions.unshift(this.selectedCallToActionOption);
+
+        this.callToActionOptions.map(o => o.value = o.value.charAt(0).toUpperCase() + o.value.slice(1));
     });
 
     // Updates meta and title tags
@@ -171,7 +179,8 @@ export class ManualComponent implements OnInit {
     * should be sent to to the API.
      */
     if (this.selectedCallToActionOption.id > 0) {
-    //   newProject.callToAction = this.selectedCallToAction;
+       let callToActionToSubmit = { optionValue: this.selectedCallToActionOption.value, value: this.callToActionRedirectUrl } as CallToAction;
+       newProject.callToAction = callToActionToSubmit;
     }
 
     this.projectService
diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html
index 4faa6391..79c4cd38 100644
--- a/src/app/modules/project/details/details.component.html
+++ b/src/app/modules/project/details/details.component.html
@@ -100,7 +100,7 @@ <h1 class="project-title">{{ project.name }}</h1>
         </p>
 
         <ng-container *ngIf="displayCallToActionButton">
-          <button class="primary ml-2" (click)="onClickCallToActionButton()">{{project.callToAction.name}}</button>
+          <button class="primary ml-2" (click)="onClickCallToActionButton()">{{project.callToAction.value}}</button>
         </ng-container>
 
         <div id="project-share-buttons">
@@ -128,4 +128,4 @@ <h1>Project details</h1>
       </div>
     </div>
   </ng-template>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 19885408..e676774e 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -134,7 +134,7 @@ export class DetailsComponent implements OnInit {
   }
 
   public onClickCallToActionButton(): void {
-    window.open(this.project.callToAction.redirectUrl, '_blank');
+    window.open(this.project.callToAction.value, '_blank');
   }
 
   /**

From 69925e41c7928a5a7786085e3c54b59569336927 Mon Sep 17 00:00:00 2001
From: Ruben <rubenfricke@gmail.com>
Date: Mon, 30 Nov 2020 11:37:46 +0100
Subject: [PATCH 028/141] Show correct value on call to action button

---
 src/app/modules/project/details/details.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html
index 79c4cd38..cfa5a057 100644
--- a/src/app/modules/project/details/details.component.html
+++ b/src/app/modules/project/details/details.component.html
@@ -100,7 +100,7 @@ <h1 class="project-title">{{ project.name }}</h1>
         </p>
 
         <ng-container *ngIf="displayCallToActionButton">
-          <button class="primary ml-2" (click)="onClickCallToActionButton()">{{project.callToAction.value}}</button>
+          <button class="primary ml-2" (click)="onClickCallToActionButton()">{{project.callToAction.optionValue}}</button>
         </ng-container>
 
         <div id="project-share-buttons">

From 4a61d42fc7d28ea650cbf8c228d817f624862b2b Mon Sep 17 00:00:00 2001
From: Ruben <rubenfricke@gmail.com>
Date: Mon, 30 Nov 2020 11:48:40 +0100
Subject: [PATCH 029/141] Updated call to action option service models

---
 src/app/models/resources/calltoaction-add.ts      | 6 +++---
 src/app/models/resources/calltoaction-update.ts   | 6 +++---
 src/app/services/call-to-action-option.service.ts | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/models/resources/calltoaction-add.ts b/src/app/models/resources/calltoaction-add.ts
index b0955bf4..a4ede41d 100644
--- a/src/app/models/resources/calltoaction-add.ts
+++ b/src/app/models/resources/calltoaction-add.ts
@@ -15,7 +15,7 @@
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  */
 
-export interface CallToActionAdd {
-    name: string;
-    redirectUrl: string;
+export interface CallToActionOptionAdd {
+    type: string;
+    value: string;
 }
diff --git a/src/app/models/resources/calltoaction-update.ts b/src/app/models/resources/calltoaction-update.ts
index c3b70c1c..2907f78c 100644
--- a/src/app/models/resources/calltoaction-update.ts
+++ b/src/app/models/resources/calltoaction-update.ts
@@ -15,8 +15,8 @@
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  */
 
-export interface CallToActionUpdate {
+export interface CallToActionOptionUpdate {
     id: number;
-    name: string;
-    redirectUrl: string;
+    type: string;
+    value: string;
 }
diff --git a/src/app/services/call-to-action-option.service.ts b/src/app/services/call-to-action-option.service.ts
index 54b0fde1..3ad61e69 100644
--- a/src/app/services/call-to-action-option.service.ts
+++ b/src/app/services/call-to-action-option.service.ts
@@ -19,14 +19,14 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { API_CONFIG } from '../config/api-config';
 import { CallToActionOption } from '../models/domain/call-to-action-option';
-import { CallToActionAdd } from '../models/resources/calltoaction-add';
-import { CallToActionUpdate } from '../models/resources/calltoaction-update';
+import { CallToActionOptionAdd } from '../models/resources/calltoaction-add';
+import { CallToActionOptionUpdate } from '../models/resources/calltoaction-update';
 import { HttpBaseService } from './http-base.service';
 
 @Injectable({
   providedIn: 'root'
 })
-export class CallToActionOptionService extends HttpBaseService<CallToActionOption, CallToActionAdd, CallToActionUpdate> {
+export class CallToActionOptionService extends HttpBaseService<CallToActionOption, CallToActionOptionAdd, CallToActionOptionUpdate> {
     constructor(http: HttpClient) {
       super(http, API_CONFIG.url + API_CONFIG.callToActionOptionRoute);
     }

From d42a9566ac83fbd73014ddc7807eef3947433d25 Mon Sep 17 00:00:00 2001
From: Ruben <rubenfricke@gmail.com>
Date: Mon, 30 Nov 2020 13:44:44 +0100
Subject: [PATCH 030/141] Filtered for title options

---
 src/app/modules/project/add/manual/manual.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts
index a0d3b96e..73dccd32 100644
--- a/src/app/modules/project/add/manual/manual.component.ts
+++ b/src/app/modules/project/add/manual/manual.component.ts
@@ -138,7 +138,7 @@ export class ManualComponent implements OnInit {
     .getAll()
     .pipe(finalize(() => (this.callToActionsLoading = false)))
     .subscribe((result) => {
-        this.callToActionOptions = result;
+        this.callToActionOptions = result.filter(o => o.type === 'title');
 
         /**
          * Add the none option to the dropdown

From 2aae702cd8c91e296e58ad29c94fdcabcf103df4 Mon Sep 17 00:00:00 2001
From: Martin Markov <martin.markov28@gmail.com>
Date: Tue, 1 Dec 2020 10:15:14 +0100
Subject: [PATCH 031/141] Implemented the new designs

---
 package-lock.json                             |  26 ++++
 package.json                                  |   5 +-
 src/app/app.module.ts                         |   4 +-
 .../project/details/details.component.html    |  12 +-
 .../project/details/details.component.ts      |  29 +++--
 .../highlights-modal.component.html           |  36 ++++++
 .../highlights-modal.component.scss           |  29 +++++
 .../highlights-modal.component.ts             |  49 ++++++++
 .../modal-highlight-delete.component.html     |  47 -------
 .../modal-highlight-delete.component.scss     | 118 ------------------
 .../modal-highlight-delete.component.ts       | 103 ---------------
 .../modal-highlight-edit.component.html       |  15 ---
 .../modal-highlight-edit.component.scss       |   9 --
 .../modal-highlight-edit.component.ts         |  20 ---
 .../modal-highlight-form.component.html       |  26 ++--
 .../modal-highlight-form.component.scss       |  22 +++-
 .../modal-highlight-form.component.ts         |  48 ++++++-
 src/app/modules/project/project.module.ts     |  17 +--
 src/app/utils/format-date.pipe.ts             |   2 +-
 src/assets/images/dark-trash.svg              |   7 ++
 src/assets/images/plus-button.png             | Bin 0 -> 711 bytes
 21 files changed, 263 insertions(+), 361 deletions(-)
 create mode 100644 src/app/modules/project/highlights-modal/highlights-modal.component.html
 create mode 100644 src/app/modules/project/highlights-modal/highlights-modal.component.scss
 create mode 100644 src/app/modules/project/highlights-modal/highlights-modal.component.ts
 delete mode 100644 src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.html
 delete mode 100644 src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.scss
 delete mode 100644 src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.ts
 delete mode 100644 src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.html
 delete mode 100644 src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss
 delete mode 100644 src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.ts
 create mode 100644 src/assets/images/dark-trash.svg
 create mode 100644 src/assets/images/plus-button.png

diff --git a/package-lock.json b/package-lock.json
index 5c343c68..6adf16c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2854,6 +2854,32 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fortawesome/angular-fontawesome": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.6.1.tgz",
+      "integrity": "sha512-ARQjtRuT+ZskzJDJKPwuiGO3+7nS0iyNLU/uHVJHfG4LwGJxwVIGldwg1SU957sra0Z0OtWEajHMhiS4vB9LwQ=="
+    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.32",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz",
+      "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.32",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz",
+      "integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",
+      "integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      }
+    },
     "@istanbuljs/schema": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz",
diff --git a/package.json b/package.json
index d50c9306..15fcd550 100644
--- a/package.json
+++ b/package.json
@@ -23,13 +23,16 @@
     "@angular/platform-browser": "~9.1.12",
     "@angular/platform-browser-dynamic": "~9.1.12",
     "@angular/router": "~9.1.12",
+    "@fortawesome/angular-fontawesome": "^0.6.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@sentry/browser": "^5.24.2",
     "@webcomponents/webcomponentsjs": "^2.4.4",
     "bootstrap": "^4.5.2",
     "dotenv": "^5.0.0",
+    "moment": "^2.29.1",
     "ngx-bootstrap": "^5.6.2",
     "ngx-quill": "^11.1.0",
-    "moment": "^2.29.1",
     "oidc-client": "^1.10.1",
     "quill": "^1.3.7",
     "quill-markdown-shortcuts": "0.0.10",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 43247797..436491a1 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -38,6 +38,7 @@ import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-poli
 import { ModalDeleteGenericComponent } from './components/modals/modal-delete-generic/modal-delete-generic.component';
 import { StripHtmlPipe } from './utils/striptags.pipe';
 import { QuillModule } from 'ngx-quill';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @NgModule({
   declarations: [
@@ -62,7 +63,8 @@ import { QuillModule } from 'ngx-quill';
     BrowserAnimationsModule,
     HttpClientModule,
     SharedModule,
-    QuillModule.forRoot()
+    QuillModule.forRoot(),
+    FontAwesomeModule
   ],
   providers: [
     {
diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html
index 3f0ef8c6..e583ca77 100644
--- a/src/app/modules/project/details/details.component.html
+++ b/src/app/modules/project/details/details.component.html
@@ -102,19 +102,9 @@ <h1 class="project-title">{{ project.name }}</h1>
         </div>
 
         <div id="project-share-buttons">
-          <ng-container *ngIf="displayHighlightButton">
             <div class="project-highlighted-div">
-              <button class="primary ml-2" (click)="onClickHighlightButton()">Highlight Project</button>
+              <button class="primary ml-2" (click)="onClickEditHighlightButton()">Project highlights</button>
             </div>
-
-            <div *ngIf="isProjectHighlighted" class="project-highlighted-div">
-              <button class="primary ml-2" (click)="onClickEditHighlightButton()">Edit Highlight</button>
-            </div>
-
-            <div *ngIf="isProjectHighlighted" class="project-highlighted-div">
-              <button class="primary ml-2" (click)="onClickDeleteHighlightButton()">Delete Highlight</button>
-            </div>
-          </ng-container>
           
           <ng-container *ngIf="displayEmbedButton">
             <app-embed-button [projectId]=project.id></app-embed-button>
diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 5cec3204..2f7aee10 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -30,16 +30,15 @@ import { AlertService } from 'src/app/services/alert.service';
 import { User } from 'src/app/models/domain/user';
 import { Observable, EMPTY } from 'rxjs';
 import { HighlightByProjectIdService } from 'src/app/services/highlightid.service';
-import { ModalHighlightDeleteComponent } from 'src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component';
 import { Highlight } from 'src/app/models/domain/highlight';
 import { ModalDeleteGenericComponent } from 'src/app/components/modals/modal-delete-generic/modal-delete-generic.component';
 import { scopes } from 'src/app/models/domain/scopes';
 import { SEOService } from 'src/app/services/seo.service';
-import { ModalHighlightEditComponent } from 'src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component';
 import { HighlightUpdate } from 'src/app/models/resources/highlight-update';
 import { SafeUrl } from '@angular/platform-browser';
 import { finalize, switchMap } from 'rxjs/operators';
 import { FileRetrieverService } from 'src/app/services/file-retriever.service';
+import { HighlightsModalComponent } from '../highlights-modal/highlights-modal.component';
 
 /**
  * Overview of a single project
@@ -183,18 +182,10 @@ export class DetailsComponent implements OnInit {
         this.alertService.pushAlert(alertConfig);
         this.isProjectHighlighted = true;
       });
-  }
 
-  /**
-   * Method to delete a highlight.
-   */
-  public onClickDeleteHighlightButton(): void {
-    this.highlightByProjectIdService
-      .getHighlightsByProjectId(this.project.id)
-      .subscribe((results: Highlight[]) => {
-        const options = { initialState: { highlights: results }, class: 'modal-lg' };
-        this.modalService.show(ModalHighlightDeleteComponent, options);
-      });
+    modalRef.content.goBack.subscribe(() => {
+      this.onClickEditHighlightButton();
+    });
   }
 
   /**
@@ -205,9 +196,9 @@ export class DetailsComponent implements OnInit {
       .getHighlightsByProjectId(this.project.id)
       .subscribe((results: Highlight[]) => {
         const options = { initialState: { highlights: results }, class: 'modal-lg' };
-        const modalHighlightEditRef = this.modalService.show(ModalHighlightEditComponent, options);
+        const highlightsModalComponentRef = this.modalService.show(HighlightsModalComponent, options);
 
-        return modalHighlightEditRef.content.selectHighlightToEdit.subscribe(highlight => {
+        highlightsModalComponentRef.content.selectHighlightToEdit.subscribe(highlight => {
           const formModalRef = this.modalService.show(ModalHighlightFormComponent, { initialState: { highlight } });
 
           formModalRef.content.confirm.pipe(
@@ -236,6 +227,14 @@ export class DetailsComponent implements OnInit {
             this.alertService.pushAlert(alertConfig);
             this.isProjectHighlighted = true;
           });
+
+          formModalRef.content.goBack.subscribe(() => {
+            this.onClickEditHighlightButton();
+          });
+        });
+
+        highlightsModalComponentRef.content.selectAddHighlight.subscribe(() => {
+          this.onClickHighlightButton();
         });
       });
   }
diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.html b/src/app/modules/project/highlights-modal/highlights-modal.component.html
new file mode 100644
index 00000000..aba22da6
--- /dev/null
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.html
@@ -0,0 +1,36 @@
+<div class="highligts-modal-container">
+  <h2 class="text-center mb-4">Project highlights</h2>
+  <div class="row no-gutters heading-row">
+    <div class="col-md-2 col-5"><strong>Start date</strong></div>
+    <div class="col-md-2 col-5"><strong>End date</strong></div>
+    <div class="col-md-8 d-none d-sm-flex"><strong>Description</strong></div>
+  </div>
+  <div class="list-group">
+    <div *ngFor="let highlight of highlights">
+      <div class="highlight-wrapper">
+        <div class="row no-gutters border-top border-bottom">
+          <div class="col-md-2 col-5 py-2" (click)=selectHighlight(highlight)><span
+              class="date">{{highlight.startDate | formatDate}}</span></div>
+          <div class="col-md-2 col-5 py-2" (click)=selectHighlight(highlight)><span
+              class="date">{{highlight.endDate | formatDate}}</span></div>
+          <div class="col-2 py-2 d-sm-none delete">
+            <img src="assets/images/dark-trash.svg" loading="lazy" (click)="deleteHighlight(highlight)">
+          </div>
+          <div class="col-md-6 d-sm-flex py-2 text-truncate" (click)=selectHighlight(highlight)>
+            {{highlight.description}}</div>
+          <div class="col-md-2 py-2 pr-3 d-none d-sm-inline-block text-right delete">
+            <img alt="Delete highlight" src="assets/images/dark-trash.svg" loading="lazy"
+              (click)="deleteHighlight(highlight)">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="add-project-highlight text-center border-top-0 list-group-item list-group-item-action"
+      (click)=addHighlight()>
+      <div class="add-button d-inline-block">
+        <img alt="Add highlight" src="assets/images/plus-button.png" loading="lazy">
+        <span class="ml-3">Add highlight</span>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.scss b/src/app/modules/project/highlights-modal/highlights-modal.component.scss
new file mode 100644
index 00000000..7877f7c1
--- /dev/null
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.scss
@@ -0,0 +1,29 @@
+.highligts-modal-container {
+  padding: 35px;
+
+  .heading-row {
+    padding: 0.75rem 0;
+  }
+
+  .highlight-wrapper:hover {
+    background-color: #f8f9fa;
+    cursor: pointer;
+  }
+
+  .list-group-item {
+    border-left: none;
+    border-right: none;
+    cursor: pointer;
+  }
+
+  .delete img:hover {
+    opacity: 0.7;
+  }
+
+  .add-button {
+    span {
+      vertical-align: bottom;
+      line-height: 30px;
+    }
+  }
+}
diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.ts b/src/app/modules/project/highlights-modal/highlights-modal.component.ts
new file mode 100644
index 00000000..623f9fc4
--- /dev/null
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.ts
@@ -0,0 +1,49 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import { Highlight } from '../../../models/domain/highlight';
+import { HighlightService } from 'src/app/services/highlight.service';
+import { AlertService } from 'src/app/services/alert.service';
+import { AlertType } from 'src/app/models/internal/alert-type';
+import { AlertConfig } from 'src/app/models/internal/alert-config';
+
+@Component({
+  selector: 'app-highlights-modal',
+  templateUrl: './highlights-modal.component.html',
+  styleUrls: ['./highlights-modal.component.scss']
+})
+export class HighlightsModalComponent {
+  @Input() highlights: Highlight[];
+  @Output() selectHighlightToEdit = new EventEmitter();
+  @Output() selectAddHighlight = new EventEmitter();
+
+  constructor(
+    private bsModalRef: BsModalRef,
+    private highlightService: HighlightService,
+    private alertService: AlertService
+  ) { }
+
+  selectHighlight(selectedHighlight: Highlight) {
+    this.selectHighlightToEdit.emit(selectedHighlight);
+    this.bsModalRef.hide();
+  }
+
+  deleteHighlight(selectedHighlight: Highlight) {
+    this.highlightService.delete(selectedHighlight.id)
+      .subscribe(() => {
+        const alertConfig: AlertConfig = {
+          type: AlertType.success,
+          mainMessage: 'The highlight was succesfully deleted',
+          dismissible: true,
+          timeout: this.alertService.defaultTimeout
+        };
+
+        this.alertService.pushAlert(alertConfig);
+        this.bsModalRef.hide();
+      });
+  }
+
+  addHighlight() {
+    this.selectAddHighlight.emit();
+    this.bsModalRef.hide();
+  }
+}
diff --git a/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.html b/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.html
deleted file mode 100644
index f0697d9a..00000000
--- a/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!--
-  Digital Excellence Copyright (C) 2020 Brend Smits
-   This program is free software: you can redistribute it and/or modify
-   it under the terms of the GNU Lesser General Public License as published
-   by the Free Software Foundation version 3 of the License.
-   This program is distributed in the hope that it will be useful,
-   but WITHOUT ANY WARRANTY; without even the implied warranty
-   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
-   See the GNU Lesser General Public License for more details.
-   You can find a copy of the GNU Lesser General Public License
-   along with this program, in the LICENSE.md file in the root project directory.
-   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
- -->
-
-<div class="modal-delete-container">
-  <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
-    <span aria-hidden="true">&times;</span>
-  </button>
-  <div class="modal-body">
-    <h2>Delete highlight</h2>
-    <div class="row">
-      <div class="col-12">
-        <div class="highlight-form__checkbox">
-          <form [formGroup]="deleteHighlightForm" class="highlight-form">
-            <div *ngFor="let highlight of highlights">
-                <div class="highlight-wrapper">
-                  <input type="checkbox" id="highlight-{{highlight.id}}" [formControlName]="highlight.id" class="" />
-                  <label for="highlight-{{highlight.id}}">
-                    <div class="row no-gutters">
-                      <div class="col-6"><strong>Start date:</strong>{{highlight.startDate | formatDate}}</div>
-                      <div class="col-6"><strong>End date:</strong>{{highlight.endDate | formatDate}}</div>
-                    </div>
-                  </label>
-                </div>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-12 modal-buttons">
-      <button type="button" class="cancel" (click)="onClickDeny()">Cancel</button>
-      <button type="button" class="primary" (click)="onClickConfirm()">Delete</button>
-    </div>
-  </div>
-</div>
diff --git a/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.scss b/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.scss
deleted file mode 100644
index df515cef..00000000
--- a/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-/*
- *  Digital Excellence Copyright (C) 2020 Brend Smits
- *
- *   This program is free software: you can redistribute it and/or modify
- *   it under the terms of the GNU Lesser General Public License as published
- *   by the Free Software Foundation version 3 of the License.
- *
- *   This program is distributed in the hope that it will be useful,
- *   but WITHOUT ANY WARRANTY; without even the implied warranty
- *   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
- *   See the GNU Lesser General Public License for more details.
- *
- *   You can find a copy of the GNU Lesser General Public License
- *   along with this program, in the LICENSE.md file in the root project directory.
- *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
- */
-
-@import "assets/styles/variables";
-
-.modal-body {
-  position: unset;
-
-  h2 {
-    margin-bottom: 20px;
-  }
-}
-
-.modal-delete-container {
-  background: #f8f8f8;
-  border-radius: 6px;
-  border: none;
-  outline: none;
-  box-shadow: $box-shadow;
-  padding: 15px;
-  color: $light-mode-grey-primary;
-  button.close {
-    border: none;
-    background: none;
-    display: flex;
-    float: right;
-    &:focus,
-    &:active {
-      border: none;
-      outline: none;
-    }
-  }
-}
-
-.delete-form {
-  margin-top: 20px;
-  input[type="date"] {
-    border: none;
-    border-radius: 6px;
-    box-shadow: $box-shadow;
-    height: 45px;
-    width: 100%;
-    margin-bottom: 25px;
-    padding: 0 15px;
-    &:focus {
-      outline: none;
-      border: 1px solid $light-mode-grey-primary;
-    }
-  }
-
-  p.date-error-message {
-    color: $accent-color-red-primary;
-  }
-
-  &__checkbox {
-    display: flex;
-    align-items: center;
-    margin-top: 10px;
-  }
- 
-  h4 {
-    margin: 0;
-  }
-}
-
-input[type="checkbox"] {
-  border: solid 1px $light-mode-grey-primary;
-  margin-right: 15px;
-}
-
-.modal-buttons {
-  display: flex;
-  justify-content: flex-end;
-
-  button:nth-child(1) {
-    margin-right: 15px;
-  }
-}
-
-.highlight-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-
-  #neverEndingCheckbox,
-  #checkbox {
-    width: 16px;
-    height: 16px;
-    margin-right: 10px;
-  }
-
-  label {
-    margin-bottom: 0px;
-    width: 100%;
-  }
-
-  .date-spacing {
-    margin-left: 15px;
-  }
-
-  strong {
-    margin-right: 10px;
-  }
-}
diff --git a/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.ts b/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.ts
deleted file mode 100644
index 9d040690..00000000
--- a/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { AlertService } from './../../../services/alert.service';
-/*
- *  Digital Excellence Copyright (C) 2020 Brend Smits
- *
- *   This program is free software: you can redistribute it and/or modify
- *   it under the terms of the GNU Lesser General Public License as published
- *   by the Free Software Foundation version 3 of the License.
- *
- *   This program is distributed in the hope that it will be useful,
- *   but WITHOUT ANY WARRANTY; without even the implied warranty
- *   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
- *   See the GNU Lesser General Public License for more details.
- *
- *   You can find a copy of the GNU Lesser General Public License
- *   along with this program, in the LICENSE.md file in the root project directory.
- *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
- */
-
-import { Component, Output, EventEmitter, OnInit } from '@angular/core';
-import { BsModalRef } from 'ngx-bootstrap/modal';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { Highlight } from 'src/app/models/domain/highlight';
-import { HighlightService } from 'src/app/services/highlight.service';
-import { AlertType } from 'src/app/models/internal/alert-type';
-import { AlertConfig } from 'src/app/models/internal/alert-config';
-
-/**
- * Pop-up modal where you can select a highlight that
- * you want to delete.
- */
-@Component({
-  selector: 'app-modal-highlight-delete',
-  templateUrl: './modal-highlight-delete.component.html',
-  styleUrls: ['./modal-highlight-delete.component.scss']
-})
-export class ModalHighlightDeleteComponent implements OnInit {
-
-  @Output() confirm = new EventEmitter();
-
-  public deleteHighlightForm: FormGroup;
-  public highlights: Highlight[];
-  public isNeverEnding = false;
-  public defaultTimeStamp = 'Thu, 01 Jan 1970 00:00:00 GMT';
-
-  constructor(
-    public bsModalRef: BsModalRef,
-    private formBuilder: FormBuilder,
-    private highlightService: HighlightService,
-    private alertService: AlertService
-  ) { }
-
-  ngOnInit(): void {
-    this.deleteHighlightForm = this.formBuilder.group(this.generateFormFields());
-    if (this.highlights == null) {
-      return;
-    }
-    this.highlights.forEach(highlight => {
-      if (highlight.startDate === this.defaultTimeStamp && highlight.endDate === this.defaultTimeStamp) {
-        highlight.isNeverEnding = true;
-      }
-    });
-  }
-
-  /**
-   * Method to dynamically create the form fields
-   */
-  public generateFormFields(): Object {
-    const empObj = {};
-    for (const highlight of this.highlights) {
-      empObj[highlight.id.toString()] = '';
-    }
-    return empObj;
-  }
-
-  /**
-   * Method which triggers when the confirm button is clicked. On confirm values are checked.
-   * Error message is shown if there is no field selected.
-   */
-  public onClickConfirm(): void {
-    for (const key of Object.keys(this.deleteHighlightForm.value)) {
-      const value = this.deleteHighlightForm.value[key];
-      if (value != null && value !== '') {
-        this.highlightService.delete(+key).subscribe();
-      }
-    }
-    const alertConfig: AlertConfig = {
-      type: AlertType.success,
-      mainMessage: 'The highlight was succesfully deleted',
-      dismissible: true,
-      timeout: this.alertService.defaultTimeout
-    };
-    this.alertService.pushAlert(alertConfig);
-    this.confirm.emit();
-    this.bsModalRef.hide();
-  }
-
-  /**
-   * Method which triggers when the deny button is clicked.
-   */
-  public onClickDeny(): void {
-    this.bsModalRef.hide();
-  }
-}
diff --git a/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.html b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.html
deleted file mode 100644
index 6e849ca9..00000000
--- a/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="modal-highlight-edit-container">
-  <h2 class="text-center m-3">Select a highlight to edit</h2>
-  <div class="list-group">
-    <div *ngFor="let highlight of highlights">
-        <div class="highlight-wrapper">
-          <div class="list-group-item list-group-item-action" (click)="selectHighlight(highlight)">
-            <div class="row no-gutters">
-              <div class="col-6"><strong>Start date:</strong><span class="date">{{highlight.startDate | formatDate}}</span></div>
-              <div class="col-6"><strong>End date:</strong><span class="date">{{highlight.endDate | formatDate}}</span></div>
-            </div>
-          </div>
-        </div>
-    </div>
-  </div>
-</div>
diff --git a/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss
deleted file mode 100644
index a6aceba2..00000000
--- a/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.modal-highlight-edit-container {
-  .list-group-item-action {
-    cursor: pointer;
-
-    .date {
-      padding-left: 10px;
-    }
-  }
-}
diff --git a/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.ts b/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.ts
deleted file mode 100644
index 74bfab92..00000000
--- a/src/app/modules/project/modal-highlight-edit/modal-highlight-edit.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { BsModalRef } from 'ngx-bootstrap/modal';
-import { Highlight } from 'src/app/models/domain/hightlight';
-
-@Component({
-  selector: 'app-modal-highlight-edit',
-  templateUrl: './modal-highlight-edit.component.html',
-  styleUrls: ['./modal-highlight-edit.component.scss']
-})
-export class ModalHighlightEditComponent {
-  @Input() highlights: Highlight[];
-  @Output() selectHighlightToEdit = new EventEmitter();
-
-  constructor(public bsModalRef: BsModalRef) {}
-
-  selectHighlight(selectedHighlight: Highlight) {
-    this.selectHighlightToEdit.emit(selectedHighlight);
-    this.bsModalRef.hide();
-  }
-}
diff --git a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
index 199a6cd5..c164e91a 100644
--- a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
+++ b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
@@ -22,7 +22,10 @@
     <span aria-hidden="true">&times;</span>
   </button>
   <div class="modal-body">
-    <h2>Highlight project</h2>
+    <h2>
+      <fa-icon [icon]=faChevronLeft class="back-button" (click)=onClickBack()></fa-icon>
+      Highlight project
+    </h2>
     <form [formGroup]="highlightProjectForm" class="highlight-form">
       <div class="row">
         <div class="col-6">
@@ -40,7 +43,8 @@ <h3>End Date</h3>
         <div class="col-12">
           <div>
             <h3>Highlight description</h3>
-            <input type="text" placeholder="Highlight description" formControlName="description">
+            <textarea type="text" placeholder="Highlight description" formControlName="description" class="description">
+            </textarea>
           </div>
         </div>
         <div class="col-12" *ngIf="validationErrorMessage != null">
@@ -57,12 +61,20 @@ <h4>Never-ending</h4>
         </div>
       </div>
     </form>
-    <div class="row">
-      <div class="col-12 modal-buttons">
-        <button type="button" class="cancel" (click)="onClickDeny()">Cancel</button>
-        <button type="button" class="primary" (click)="onClickConfirm()">Save</button>
+    <div class="row mt-3">
+      <div class="col-sm-5 d-none d-sm-flex">
+        <button *ngIf="canDelete" type="button" class="cancel" (click)="onClickDelete()">
+          Delete highlight
+          <fa-icon [icon]=faTrashAlt></fa-icon>
+        </button>
+      </div>
+      <div class="col-2 d-sm-none">
+        <fa-icon *ngIf="canDelete" [icon]=faTrash (click)="onClickDelete()" size="2x" [classes]="['mobile-trash']"></fa-icon>
+      </div>
+      <div class="col-10 col-sm-7 text-right">
+        <button type="button" class="cancel mr-3" (click)="onClickDeny()">Cancel</button>
+        <button type="button" class="primary" (click)="onClickConfirm()">Save <fa-icon [icon]=faSave></fa-icon></button>
       </div>
     </div>
-
   </div>
 </div>
\ No newline at end of file
diff --git a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.scss b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.scss
index f4193c0a..0e9901e1 100644
--- a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.scss
+++ b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.scss
@@ -42,13 +42,18 @@
       outline: none;
     }
   }
+  
+  @include media-breakpoint-down(md) {
+    width: 100%;
+  }
 }
 
 .highlight-form {
   margin-top: 20px;
-    
-    input[type="text"],
-    input[type="date"] {
+
+  textarea.description,
+  input[type="text"],
+  input[type="date"] {
     border: none;
     border-radius: 6px;
     box-shadow: 0 3px 6px #0000001a;
@@ -61,6 +66,12 @@
       border: 1px solid #707070;
     }
   }
+  textarea.description {
+    resize: none;
+    height: 90px;
+    padding: 5px 15px;
+  }
+  
 
   p.validation-error-message {
     color: $accent-color-red-primary;
@@ -89,3 +100,8 @@
     margin-right: 15px;
   }
 }
+
+.back-button {
+  color: $accent-color-red-primary;
+  cursor: pointer;
+}
diff --git a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
index c987a782..9b891020 100644
--- a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
+++ b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
@@ -19,8 +19,13 @@
 import { Component, Output, EventEmitter, Input, OnInit } from '@angular/core';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { Highlight } from 'src/app/models/domain/hightlight';
+import { Highlight } from '../../../models/domain/highlight';
+import { HighlightService } from 'src/app/services/highlight.service';
 import * as moment from 'moment';
+import { faSave, faTrash, faTrashAlt, faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+import { AlertConfig } from 'src/app/models/internal/alert-config';
+import { AlertService } from 'src/app/services/alert.service';
+import { AlertType } from 'src/app/models/internal/alert-type';
 
 export interface HighlightFormResult {
   startDate?: Date;
@@ -40,12 +45,23 @@ export interface HighlightFormResult {
 export class ModalHighlightFormComponent implements OnInit {
   @Input() highlight: Highlight;
   @Output() confirm = new EventEmitter();
+  @Output() goBack = new EventEmitter();
 
   public highlightProjectForm: FormGroup;
   public dateFieldsEnabled = true;
   public validationErrorMessage: string = null;
+  public faSave = faSave;
+  public faTrash = faTrash;
+  public faTrashAlt = faTrashAlt;
+  public faChevronLeft = faChevronLeft;
+  public canDelete = false;
 
-  constructor(public bsModalRef: BsModalRef, private formBuilder: FormBuilder) { }
+  constructor(
+    public bsModalRef: BsModalRef,
+    private formBuilder: FormBuilder,
+    private highlightService: HighlightService,
+    private alertService: AlertService
+  ) { }
 
   ngOnInit() {
     this.highlightProjectForm = this.formBuilder.group({
@@ -63,6 +79,8 @@ export class ModalHighlightFormComponent implements OnInit {
       this.highlightProjectForm.get('startDate').disable();
       this.highlightProjectForm.get('endDate').disable();
     }
+
+    this.canDelete = !!this.highlight;
   }
 
   /**
@@ -77,8 +95,8 @@ export class ModalHighlightFormComponent implements OnInit {
       this.highlightProjectForm.get('startDate').enable();
       this.highlightProjectForm.get('endDate').enable();
     }
-
   }
+
   /**
    * Method which triggers when the confirm button is clicked. On confirm highlight form values are checked.
    * Error message is shown if the form fields are empty.
@@ -114,4 +132,28 @@ export class ModalHighlightFormComponent implements OnInit {
   public onClickDeny(): void {
     this.bsModalRef.hide();
   }
+
+  public onClickBack(): void {
+    this.goBack.emit();
+    this.bsModalRef.hide();
+  }
+
+  public onClickDelete(): void {
+    if (!this.canDelete) {
+      return;
+    }
+
+    this.highlightService.delete(this.highlight.id)
+      .subscribe(() => {
+        const alertConfig: AlertConfig = {
+          type: AlertType.success,
+          mainMessage: 'The highlight was succesfully deleted',
+          dismissible: true,
+          timeout: this.alertService.defaultTimeout
+        };
+
+        this.alertService.pushAlert(alertConfig);
+        this.bsModalRef.hide();
+      });
+  }
 }
diff --git a/src/app/modules/project/project.module.ts b/src/app/modules/project/project.module.ts
index 1e5b9ca5..7ccf1b3d 100644
--- a/src/app/modules/project/project.module.ts
+++ b/src/app/modules/project/project.module.ts
@@ -26,7 +26,6 @@ import { EmbedButtonComponent } from './embed-button/embed-button.component';
 import { EmbedComponent } from './embed/embed.component';
 import { PaginationModule } from 'ngx-bootstrap/pagination';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { ModalHighlightDeleteComponent } from 'src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component';
 import { ModalHighlightFormComponent } from 'src/app/modules/project/modal-highlight-form/modal-highlight-form.component';
 import { SharedModule } from './../shared/shared.module';
 import { QuillModule } from 'ngx-quill';
@@ -34,8 +33,9 @@ import { SafeHtmlPipe } from 'src/app/utils/safeHtml.pipe';
 import { FileUploaderComponent } from 'src/app/components/file-uploader/file-uploader.component';
 import { DndDirective } from 'src/app/components/file-uploader/DndDirective';
 import { Meta } from '@angular/platform-browser';
-import { ModalHighlightEditComponent } from './modal-highlight-edit/modal-highlight-edit.component';
 import { FormatDatePipe } from 'src/app/utils/format-date.pipe';
+import { HighlightsModalComponent } from './highlights-modal/highlights-modal.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @NgModule({
   declarations: [
@@ -44,10 +44,12 @@ import { FormatDatePipe } from 'src/app/utils/format-date.pipe';
     EditComponent,
     EmbedButtonComponent,
     EmbedComponent,
-    ModalHighlightDeleteComponent,
     ModalHighlightFormComponent,
-    ModalHighlightEditComponent,
-    FormatDatePipe
+    FormatDatePipe,
+    DndDirective,
+    FileUploaderComponent,
+    SafeHtmlPipe,
+    HighlightsModalComponent
   ],
   imports: [
     CommonModule,
@@ -58,10 +60,11 @@ import { FormatDatePipe } from 'src/app/utils/format-date.pipe';
     AccordionModule.forRoot(),
     PaginationModule.forRoot(),
     BsDropdownModule.forRoot(),
-    QuillModule
+    QuillModule,
+    FontAwesomeModule
   ],
   exports: [
-      FileUploaderComponent
+    FileUploaderComponent
   ],
   providers: [Meta]
 })
diff --git a/src/app/utils/format-date.pipe.ts b/src/app/utils/format-date.pipe.ts
index f0666201..8e5e6308 100644
--- a/src/app/utils/format-date.pipe.ts
+++ b/src/app/utils/format-date.pipe.ts
@@ -6,6 +6,6 @@ import * as moment from 'moment';
 })
 export class FormatDatePipe implements PipeTransform {
   public transform(date: string): string {
-    return date ? moment(date).format('dddd, DD-MM-YYYY') : 'Never ending';
+    return date ? moment(date).format('DD-MM-YYYY') : 'Never ending';
   }
 }
diff --git a/src/assets/images/dark-trash.svg b/src/assets/images/dark-trash.svg
new file mode 100644
index 00000000..79fd3b45
--- /dev/null
+++ b/src/assets/images/dark-trash.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.307" height="20.962" viewBox="0 0 16.307 20.962">
+  <g id="trash" transform="translate(0)">
+    <path id="Path_128" data-name="Path 128" d="M126.73,1.265h3.5v.589H131.5V1.183A1.184,1.184,0,0,0,130.317,0h-3.67a1.184,1.184,0,0,0-1.182,1.183v.672h1.265Zm0,0" transform="translate(-120.328 0)" fill="#A9A9A9"/>
+    <path id="Path_129" data-name="Path 129" d="M52.925,167.75H41.048a.557.557,0,0,0-.555.6l.993,12.278a1.319,1.319,0,0,0,1.314,1.213h8.374a1.319,1.319,0,0,0,1.314-1.214l.993-12.278a.557.557,0,0,0-.555-.6Zm-9,12.784h-.04a.633.633,0,0,1-.631-.594l-.622-10.08a.633.633,0,0,1,1.263-.078l.622,10.08a.633.633,0,0,1-.592.67Zm3.7-.631a.633.633,0,0,1-1.265,0v-10.08a.633.633,0,1,1,1.265,0Zm3.716-10.043-.594,10.08a.633.633,0,0,1-.631.6h-.038a.633.633,0,0,1-.594-.669l.594-10.08a.633.633,0,0,1,1.263.075Zm0,0" transform="translate(-38.832 -160.882)" fill="#A9A9A9"/>
+    <path id="Path_130" data-name="Path 130" d="M16.28,78.007l-.415-1.245a.8.8,0,0,0-.763-.55H1.206a.8.8,0,0,0-.763.55L.028,78.007a.523.523,0,0,0,.5.687H15.785a.515.515,0,0,0,.276-.08.521.521,0,0,0,.219-.607Zm0,0" transform="translate(0 -73.091)" fill="#A9A9A9"/>
+  </g>
+</svg>
diff --git a/src/assets/images/plus-button.png b/src/assets/images/plus-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..d5a85904516188edb01c0866d34ebed7cf8b51e7
GIT binary patch
literal 711
zcmV;&0yzDNP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800004b3#c}2nYxW
zd<bNS0007hNkl<ZSVzrQJ!n%=6h7a5<~?1s0kH`kOlJoR&L*$8io{J*(73o-1P5_Q
z3a(0BoFmxM%?^%2UplymkRT3D4KArg=nJSMDY-}P%a8ee$xUBP@A7!>o}cf2=iKwo
z0Zq6L)An4g-bjE%l0h+IijjJ%#Z)3t2}~s>xow$7KAdyhNlas$Q2CA>6M{1gN{^H6
z-Um}oN~}e<oRXj3NC4i6k7R}jt2&PRWx<>^P4Q|JBSQf+>E;~*Egi>sN0+H!nOGhM
zVgSHF%3hM-9U__w#Q8rXu3#)*+H?v%q3V8V($0G);Jod|wL)0zW}?GD;IxmTuP+=O
z0Q;%<IsuOYrhTY6W?qYK?q=1d2S8ml7#{WiZE*vO>WVf2ti*F5+}H7b{=s89cjK0)
z(kOqYpHJ@Ts1p;viEiws(Mr5SEo~wSKYc;wm21sH_~#cLJiMuEf~*k2_;L4ol7)Du
zs~rRYNO>F6(67J-0YHTT<y71OkeCGn%$!F#l_&vp*$;q9I3u#qBXVYbfyBi~=Ue^j
z=bnA8Rmpw%%>P_W1?;aRc--md-#X(&hVEBCexS<h=f1kL2M|OE)HOWX`!;aW-|x4m
z{^gS&1I1I2gi}<(K(FD<3(+h~abzQp+5e1A#qZbyk&0&lWTvV(no0u=iPCT7f+~4e
zHSOt&7p)NNc3;@j6}S3AHRW8;wK|bJQ^hh78`_k%4R~!iu@g85rivigzHNCM#0i9>
zhxTr^d`GitU9KKCF;&8yHO0EtXx5ETb<AYQtZvh)x*ckW?9{_)e^RNi)N2h}3MAEN
t4nU1=?Hf~MW><~qLh`n08P25R`CqkHV$b2Cw!8oU002ovPDHLkV1h?pNK^m-

literal 0
HcmV?d00001


From edfa8cae690ace480d12f4ce8dfb09b461d00d12 Mon Sep 17 00:00:00 2001
From: Martin Markov <martin.markov28@gmail.com>
Date: Tue, 1 Dec 2020 10:43:52 +0100
Subject: [PATCH 032/141] Added missing alt for img

---
 .../project/highlights-modal/highlights-modal.component.html    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.html b/src/app/modules/project/highlights-modal/highlights-modal.component.html
index aba22da6..fdfaff38 100644
--- a/src/app/modules/project/highlights-modal/highlights-modal.component.html
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.html
@@ -14,7 +14,7 @@ <h2 class="text-center mb-4">Project highlights</h2>
           <div class="col-md-2 col-5 py-2" (click)=selectHighlight(highlight)><span
               class="date">{{highlight.endDate | formatDate}}</span></div>
           <div class="col-2 py-2 d-sm-none delete">
-            <img src="assets/images/dark-trash.svg" loading="lazy" (click)="deleteHighlight(highlight)">
+            <img alt="Delete highlight" src="assets/images/dark-trash.svg" loading="lazy" (click)="deleteHighlight(highlight)">
           </div>
           <div class="col-md-6 d-sm-flex py-2 text-truncate" (click)=selectHighlight(highlight)>
             {{highlight.description}}</div>

From 2a2619007d77c1f6b61a27c1d4031776bb0bfe46 Mon Sep 17 00:00:00 2001
From: liekevdvoort <49523639+liekevdvoort@users.noreply.github.com>
Date: Tue, 1 Dec 2020 13:12:34 +0100
Subject: [PATCH 033/141] project highlights details popup styling improvement

---
 .../project/details/details.component.scss    |  9 ++++
 .../project/details/details.component.ts      |  5 +-
 .../modal-highlight-form.component.html       | 19 ++++----
 .../modal-highlight-form.component.scss       | 46 +++++++++++++++----
 4 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/src/app/modules/project/details/details.component.scss b/src/app/modules/project/details/details.component.scss
index 8906e4a7..45bf1078 100644
--- a/src/app/modules/project/details/details.component.scss
+++ b/src/app/modules/project/details/details.component.scss
@@ -18,6 +18,15 @@
  */
 @import "assets/styles/variables";
 
+.highlight-form-modal {
+  max-width: 600px;
+  margin-top: 60px;
+  margin-bottom: 30px;
+  .modal-content {
+    border: none;
+  }
+}
+
 .project-icon {
   display: flex;
   place-content: center;
diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 2f7aee10..7a535d9c 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -15,7 +15,7 @@
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  */
 import { environment } from 'src/environments/environment';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Project } from 'src/app/models/domain/project';
 import { ProjectService } from 'src/app/services/project.service';
@@ -47,6 +47,7 @@ import { HighlightsModalComponent } from '../highlights-modal/highlights-modal.c
   selector: 'app-details',
   templateUrl: './details.component.html',
   styleUrls: ['./details.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class DetailsComponent implements OnInit {
   /**
@@ -200,7 +201,7 @@ export class DetailsComponent implements OnInit {
 
         highlightsModalComponentRef.content.selectHighlightToEdit.subscribe(highlight => {
           const formModalRef = this.modalService.show(ModalHighlightFormComponent, { initialState: { highlight } });
-
+          formModalRef.setClass('highlight-form-modal')
           formModalRef.content.confirm.pipe(
             switchMap((highlightFormResult: HighlightFormResult) => {
               const highlightAddResource: HighlightUpdate = {
diff --git a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
index c164e91a..bea7a116 100644
--- a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
+++ b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
@@ -18,9 +18,6 @@
  -->
 
 <div class="modal-highlight-container">
-  <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
-    <span aria-hidden="true">&times;</span>
-  </button>
   <div class="modal-body">
     <h2>
       <fa-icon [icon]=faChevronLeft class="back-button" (click)=onClickBack()></fa-icon>
@@ -28,13 +25,13 @@ <h2>
     </h2>
     <form [formGroup]="highlightProjectForm" class="highlight-form">
       <div class="row">
-        <div class="col-6">
+        <div class="col-md-6">
           <div>
             <h3>Start Date</h3>
             <input type="date" formControlName="startDate" [disabled]="dateFieldsEnabled" />
           </div>
         </div>
-        <div class="col-6">
+        <div class="col-md-6">
           <div>
             <h3>End Date</h3>
             <input type="date" formControlName="endDate" [disabled]="dateFieldsEnabled" />
@@ -55,8 +52,10 @@ <h3>Highlight description</h3>
       <div class="row">
         <div class="col-12">
           <div class="highlight-form__checkbox">
-            <input type="checkbox" formControlName="indeterminate" />
-            <h4>Never-ending</h4>
+            <label>
+              <input type="checkbox" formControlName="indeterminate" />
+              <p>Never-ending</p>
+            </label>
           </div>
         </div>
       </div>
@@ -68,11 +67,11 @@ <h4>Never-ending</h4>
           <fa-icon [icon]=faTrashAlt></fa-icon>
         </button>
       </div>
-      <div class="col-2 d-sm-none">
+      <div class="col-2 d-sm-none trash-icon">
         <fa-icon *ngIf="canDelete" [icon]=faTrash (click)="onClickDelete()" size="2x" [classes]="['mobile-trash']"></fa-icon>
       </div>
-      <div class="col-10 col-sm-7 text-right">
-        <button type="button" class="cancel mr-3" (click)="onClickDeny()">Cancel</button>
+      <div class="col-10 buttons-bottom col-sm-7 text-right">
+        <button type="button" class="cancel" (click)="onClickDeny()">Cancel</button>
         <button type="button" class="primary" (click)="onClickConfirm()">Save <fa-icon [icon]=faSave></fa-icon></button>
       </div>
     </div>
diff --git a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.scss b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.scss
index 0e9901e1..13fc56d3 100644
--- a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.scss
+++ b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.scss
@@ -21,9 +21,14 @@
 .modal-body {
   position: unset;
 }
+h3 {
+  margin-top: 20px;
+  margin-bottom: 12px;
+}
+
 
 .modal-highlight-container {
-  background: #f8f8f8;
+  background: #fff;
   width: 600px;
   border-radius: 6px;
   border: none;
@@ -47,29 +52,38 @@
     width: 100%;
   }
 }
+input, textarea {
+  background-color: $light-mode-grey-quaternary;
+  border: none!important;
+}
 
 .highlight-form {
   margin-top: 20px;
-
+  label{
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
   textarea.description,
   input[type="text"],
   input[type="date"] {
     border: none;
     border-radius: 6px;
-    box-shadow: 0 3px 6px #0000001a;
     height: 45px;
     width: 100%;
-    margin-bottom: 25px;
-    padding: 0 15px;
+    margin-bottom: 10px;
+    padding: 0 20px;
     &:focus {
       outline: none;
       border: 1px solid #707070;
     }
   }
   textarea.description {
-    resize: none;
+    resize: vertical;
+    max-height: 300px;
+    min-height: 90px;
     height: 90px;
-    padding: 5px 15px;
+    padding: 10px 15px;
   }
   
 
@@ -80,13 +94,14 @@
   &__checkbox {
     display: flex;
     align-items: center;
+    margin-bottom: 15px;
 
     input[type="checkbox"] {
       border: solid 1px #707070;
       margin-right: 15px;
     }
 
-    h4 {
+    p {
       margin: 0;
     }
   }
@@ -104,4 +119,19 @@
 .back-button {
   color: $accent-color-red-primary;
   cursor: pointer;
+  margin-right: 8px;
 }
+
+.trash-icon{
+  display: flex;
+  align-items: center;
+  color: $light-mode-grey-secondary;
+  cursor: pointer;
+}
+
+.buttons-bottom{
+  gap: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
\ No newline at end of file

From 73afb042b924bf5108ea72fe626073e9e58c6190 Mon Sep 17 00:00:00 2001
From: liekevdvoort <49523639+liekevdvoort@users.noreply.github.com>
Date: Tue, 1 Dec 2020 13:20:50 +0100
Subject: [PATCH 034/141] Change to correct icon

---
 .../highlights-modal/highlights-modal.component.html       | 7 +++----
 .../project/highlights-modal/highlights-modal.component.ts | 3 +++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.html b/src/app/modules/project/highlights-modal/highlights-modal.component.html
index fdfaff38..abfa60ca 100644
--- a/src/app/modules/project/highlights-modal/highlights-modal.component.html
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.html
@@ -1,5 +1,5 @@
 <div class="highligts-modal-container">
-  <h2 class="text-center mb-4">Project highlights</h2>
+  <h2 class="mb-4">Project highlights</h2>
   <div class="row no-gutters heading-row">
     <div class="col-md-2 col-5"><strong>Start date</strong></div>
     <div class="col-md-2 col-5"><strong>End date</strong></div>
@@ -14,13 +14,12 @@ <h2 class="text-center mb-4">Project highlights</h2>
           <div class="col-md-2 col-5 py-2" (click)=selectHighlight(highlight)><span
               class="date">{{highlight.endDate | formatDate}}</span></div>
           <div class="col-2 py-2 d-sm-none delete">
-            <img alt="Delete highlight" src="assets/images/dark-trash.svg" loading="lazy" (click)="deleteHighlight(highlight)">
+            <fa-icon [icon]=faTrash (click)="deleteHighlight(highlight)"></fa-icon>
           </div>
           <div class="col-md-6 d-sm-flex py-2 text-truncate" (click)=selectHighlight(highlight)>
             {{highlight.description}}</div>
           <div class="col-md-2 py-2 pr-3 d-none d-sm-inline-block text-right delete">
-            <img alt="Delete highlight" src="assets/images/dark-trash.svg" loading="lazy"
-              (click)="deleteHighlight(highlight)">
+            <fa-icon [icon]=faTrash  (click)="deleteHighlight(highlight)" ></fa-icon>
           </div>
         </div>
       </div>
diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.ts b/src/app/modules/project/highlights-modal/highlights-modal.component.ts
index 623f9fc4..b495ac2b 100644
--- a/src/app/modules/project/highlights-modal/highlights-modal.component.ts
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.ts
@@ -5,6 +5,7 @@ import { HighlightService } from 'src/app/services/highlight.service';
 import { AlertService } from 'src/app/services/alert.service';
 import { AlertType } from 'src/app/models/internal/alert-type';
 import { AlertConfig } from 'src/app/models/internal/alert-config';
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-highlights-modal',
@@ -16,6 +17,8 @@ export class HighlightsModalComponent {
   @Output() selectHighlightToEdit = new EventEmitter();
   @Output() selectAddHighlight = new EventEmitter();
 
+  public faTrash = faTrash;
+
   constructor(
     private bsModalRef: BsModalRef,
     private highlightService: HighlightService,

From 22901d9b38a3fc6b1f751cd6b0a47aabb1809b0b Mon Sep 17 00:00:00 2001
From: liekevdvoort <49523639+liekevdvoort@users.noreply.github.com>
Date: Tue, 1 Dec 2020 13:22:31 +0100
Subject: [PATCH 035/141] missing semicolon

---
 src/app/modules/project/details/details.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 7a535d9c..1fa6bbb0 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -201,7 +201,7 @@ export class DetailsComponent implements OnInit {
 
         highlightsModalComponentRef.content.selectHighlightToEdit.subscribe(highlight => {
           const formModalRef = this.modalService.show(ModalHighlightFormComponent, { initialState: { highlight } });
-          formModalRef.setClass('highlight-form-modal')
+          formModalRef.setClass('highlight-form-modal');
           formModalRef.content.confirm.pipe(
             switchMap((highlightFormResult: HighlightFormResult) => {
               const highlightAddResource: HighlightUpdate = {

From 54a37dcd90bf8204f5d8bf16d6e1d1c6ca84ce91 Mon Sep 17 00:00:00 2001
From: liekevdvoort <49523639+liekevdvoort@users.noreply.github.com>
Date: Tue, 1 Dec 2020 13:31:46 +0100
Subject: [PATCH 036/141] styling improvements first modal

---
 .../highlights-modal.component.html           |  4 ++--
 .../highlights-modal.component.scss           | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.html b/src/app/modules/project/highlights-modal/highlights-modal.component.html
index abfa60ca..227d212b 100644
--- a/src/app/modules/project/highlights-modal/highlights-modal.component.html
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.html
@@ -14,12 +14,12 @@ <h2 class="mb-4">Project highlights</h2>
           <div class="col-md-2 col-5 py-2" (click)=selectHighlight(highlight)><span
               class="date">{{highlight.endDate | formatDate}}</span></div>
           <div class="col-2 py-2 d-sm-none delete">
-            <fa-icon [icon]=faTrash (click)="deleteHighlight(highlight)"></fa-icon>
+            <fa-icon class='trash-icon' [icon]=faTrash (click)="deleteHighlight(highlight)"></fa-icon>
           </div>
           <div class="col-md-6 d-sm-flex py-2 text-truncate" (click)=selectHighlight(highlight)>
             {{highlight.description}}</div>
           <div class="col-md-2 py-2 pr-3 d-none d-sm-inline-block text-right delete">
-            <fa-icon [icon]=faTrash  (click)="deleteHighlight(highlight)" ></fa-icon>
+            <fa-icon class='trash-icon' [icon]=faTrash  (click)="deleteHighlight(highlight)" ></fa-icon>
           </div>
         </div>
       </div>
diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.scss b/src/app/modules/project/highlights-modal/highlights-modal.component.scss
index 7877f7c1..96833a31 100644
--- a/src/app/modules/project/highlights-modal/highlights-modal.component.scss
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.scss
@@ -1,9 +1,18 @@
+@import "assets/styles/variables";
+
 .highligts-modal-container {
   padding: 35px;
 
   .heading-row {
     padding: 0.75rem 0;
   }
+  .highlight-wrapper{
+    .row{
+      height: 54px;
+      display: flex;
+      align-items: center;
+    }
+  }
 
   .highlight-wrapper:hover {
     background-color: #f8f9fa;
@@ -21,9 +30,19 @@
   }
 
   .add-button {
+    display: flex!important;
+    justify-content: center;
+    align-items: center;
     span {
       vertical-align: bottom;
       line-height: 30px;
     }
+    img{
+      height: 25px;
+      width: auto;
+    }
+  }
+  .trash-icon{
+    color: $light-mode-grey-secondary;
   }
 }

From 4e1628953931d089af063c9ed33aab33a6cd8408 Mon Sep 17 00:00:00 2001
From: Julia <j.slaats@student.fontys.nl>
Date: Tue, 1 Dec 2020 14:17:36 +0100
Subject: [PATCH 037/141] Added some animations

- Scale on highlights
- Rotate search icon (overview & home)
- scale on add project button
---
 src/app/components/home/home.component.scss   | 21 ++++++++++++++-----
 .../top-highlight-cards.component.scss        |  5 +++++
 .../project/overview/overview.component.scss  |  4 ++++
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss
index 4f0667a1..31d85563 100644
--- a/src/app/components/home/home.component.scss
+++ b/src/app/components/home/home.component.scss
@@ -45,6 +45,7 @@ h1 {
     border-radius: 6px;
     opacity: 1;
     font-family: lato, sans-serif;
+    transition: .3s ease-in;
 
     &::placeholder {
       color: $light-mode-grey-primary;
@@ -53,6 +54,7 @@ h1 {
     &:focus {
       border: none;
       outline: none;
+      transform: scale(1.05);
     }
   }
 
@@ -70,6 +72,10 @@ h1 {
 
     img {
       width: 25px;
+      transition: 0.7s ease-out;
+      &:hover {
+        transform: rotate(-270deg);
+      }
     }
   }
 }
@@ -77,15 +83,15 @@ h1 {
 //share
 .share {
   margin: 180px 0;
-  
-   // add margin bottom on mobile
-   @include media-breakpoint-down(lg) {
+
+  // add margin bottom on mobile
+  @include media-breakpoint-down(lg) {
     .image-wrapper {
       margin-bottom: 50px;
     }
-   }
+  }
 
-  .image-wrapper{
+  .image-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -111,10 +117,15 @@ h1 {
 
   button {
     margin-top: 20px;
+    transition: 0.3s ease;
 
     &:focus {
       border: none;
       outline: none;
     }
+
+    &:hover {
+      transform: scale(1.05);
+    }
   }
 }
diff --git a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss
index b4194424..56dd0b6a 100644
--- a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss
+++ b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss
@@ -41,6 +41,11 @@
       border: none;
       cursor: pointer;
       height: 100%;
+      transition: .3s ease;
+
+      &:hover{
+        transform: scale(1.05);
+      }
     }
 
     .card-title {
diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index 58770ad7..f6d892c6 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -88,6 +88,10 @@
 
      img {
        width: 25px;
+       transition: .7s ease;
+       &:hover{
+         transform: rotate(-270deg)
+       }
      }
    }
  }

From 899f05fb4236a75ec415a01afc9cef92ad59f285 Mon Sep 17 00:00:00 2001
From: Julia <j.slaats@student.fontys.nl>
Date: Tue, 1 Dec 2020 14:39:41 +0100
Subject: [PATCH 038/141] Added some more animations

- scale buttons on login page
- move up
---
 src/app/components/app-layout/app-layout.component.scss | 6 ++++++
 src/app/modules/account/login/login.component.scss      | 7 +++++++
 2 files changed, 13 insertions(+)

diff --git a/src/app/components/app-layout/app-layout.component.scss b/src/app/components/app-layout/app-layout.component.scss
index 87049d47..0de7e492 100644
--- a/src/app/components/app-layout/app-layout.component.scss
+++ b/src/app/components/app-layout/app-layout.component.scss
@@ -231,6 +231,12 @@
     letter-spacing: 0px;
     color: #fff;
     text-transform: capitalize;
+    transition: .3s ease-in;
+
+    &:hover{
+      height: 64px;
+      padding-bottom: 15px;
+    }
   }
 
   // Move button to the bottom left and make it vertical
diff --git a/src/app/modules/account/login/login.component.scss b/src/app/modules/account/login/login.component.scss
index 4629f15f..52adf3f6 100644
--- a/src/app/modules/account/login/login.component.scss
+++ b/src/app/modules/account/login/login.component.scss
@@ -122,11 +122,15 @@ span {
 button {
   margin: 30px 4px 0 4px;
   width: calc(100% - 8px);
+  transition: .3s ease;
 
   &:focus {
     border: none;
     outline: none;
   }
+  &:hover{
+    transform: scale(0.95)
+  }
 }
 
 // Styling for temporary disabled message, can be removed when sign in method is implemented
@@ -140,6 +144,9 @@ button {
 
 button:disabled {
   background-color: $light-mode-grey-primary;
+  &:hover{
+    transform: none;
+  }
 }
 // End of temporary styling
 

From fae7e41f894f8bddb32e158fc1e0eff95a1f3adf Mon Sep 17 00:00:00 2001
From: Julia <j.slaats@student.fontys.nl>
Date: Tue, 1 Dec 2020 15:01:58 +0100
Subject: [PATCH 039/141] Changed transition to specific properties

---
 src/app/components/app-layout/app-layout.component.scss       | 2 +-
 src/app/components/home/home.component.scss                   | 4 ++--
 src/app/modules/account/login/login.component.scss            | 2 +-
 .../top-highlight-cards/top-highlight-cards.component.scss    | 2 +-
 src/app/modules/project/overview/overview.component.scss      | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/components/app-layout/app-layout.component.scss b/src/app/components/app-layout/app-layout.component.scss
index 0de7e492..d3446a09 100644
--- a/src/app/components/app-layout/app-layout.component.scss
+++ b/src/app/components/app-layout/app-layout.component.scss
@@ -231,7 +231,7 @@
     letter-spacing: 0px;
     color: #fff;
     text-transform: capitalize;
-    transition: .3s ease-in;
+    transition: height .3s ease-in, padding .3s ease-in;
 
     &:hover{
       height: 64px;
diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss
index 31d85563..209e3925 100644
--- a/src/app/components/home/home.component.scss
+++ b/src/app/components/home/home.component.scss
@@ -45,7 +45,7 @@ h1 {
     border-radius: 6px;
     opacity: 1;
     font-family: lato, sans-serif;
-    transition: .3s ease-in;
+    transition: transform .3s ease-in;
 
     &::placeholder {
       color: $light-mode-grey-primary;
@@ -72,7 +72,7 @@ h1 {
 
     img {
       width: 25px;
-      transition: 0.7s ease-out;
+      transition: transform 0.7s ease-out;
       &:hover {
         transform: rotate(-270deg);
       }
diff --git a/src/app/modules/account/login/login.component.scss b/src/app/modules/account/login/login.component.scss
index 52adf3f6..8aa6178b 100644
--- a/src/app/modules/account/login/login.component.scss
+++ b/src/app/modules/account/login/login.component.scss
@@ -122,7 +122,7 @@ span {
 button {
   margin: 30px 4px 0 4px;
   width: calc(100% - 8px);
-  transition: .3s ease;
+  transition: transform .3s ease;
 
   &:focus {
     border: none;
diff --git a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss
index 56dd0b6a..93dd5fc9 100644
--- a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss
+++ b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss
@@ -41,7 +41,7 @@
       border: none;
       cursor: pointer;
       height: 100%;
-      transition: .3s ease;
+      transition: transform .3s ease;
 
       &:hover{
         transform: scale(1.05);
diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index f6d892c6..299795f3 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -88,7 +88,7 @@
 
      img {
        width: 25px;
-       transition: .7s ease;
+       transition: transform .7s ease;
        &:hover{
          transform: rotate(-270deg)
        }

From 8a5db2c710a19a55e322bdc0a6574ab56460b043 Mon Sep 17 00:00:00 2001
From: Julia <j.slaats@student.fontys.nl>
Date: Tue, 1 Dec 2020 15:04:26 +0100
Subject: [PATCH 040/141] fixed disappearing svg on login page

---
 .../images/illustrations/undraw_Access_account_re_8spm.svg      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/images/illustrations/undraw_Access_account_re_8spm.svg b/src/assets/images/illustrations/undraw_Access_account_re_8spm.svg
index d9609bf0..22557058 100644
--- a/src/assets/images/illustrations/undraw_Access_account_re_8spm.svg
+++ b/src/assets/images/illustrations/undraw_Access_account_re_8spm.svg
@@ -1 +1 @@
-<svg id="a87032b8-5b37-4b7e-a4d9-4dbfbe394641" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="744.84799" height="747.07702" viewBox="0 0 744.84799 747.07702"><path id="fa3b9e12-7275-481e-bee9-64fd9595a50d" data-name="Path 1" d="M299.205,705.80851l-6.56-25.872a335.96693,335.96693,0,0,0-35.643-12.788l-.828,12.024-3.358-13.247c-15.021-4.29394-25.24-6.183-25.24-6.183s13.8,52.489,42.754,92.617l33.734,5.926-26.207,3.779a135.92592,135.92592,0,0,0,11.719,12.422c42.115,39.092,89.024,57.028,104.773,40.06s-5.625-62.412-47.74-101.5c-13.056-12.119-29.457-21.844-45.875-29.5Z" transform="translate(-227.576 -76.46149)" fill="#f2f2f2"/><path id="bde08021-c30f-4979-a9d8-cb90b72b5ca2" data-name="Path 2" d="M361.591,677.70647l7.758-25.538a335.93951,335.93951,0,0,0-23.9-29.371l-6.924,9.865,3.972-13.076c-10.641-11.436-18.412-18.335-18.412-18.335s-15.315,52.067-11.275,101.384l25.815,22.51-24.392-10.312a135.91879,135.91879,0,0,0,3.614,16.694c15.846,55.234,46.731,94.835,68.983,88.451s27.446-56.335,11.6-111.569c-4.912-17.123-13.926-33.926-24.023-48.965Z" transform="translate(-227.576 -76.46149)" fill="#f2f2f2"/><path id="b3ac2088-de9b-4f7f-bc99-0ed9705c1a9d" data-name="Path 22" d="M747.327,253.4445h-4.092v-112.1a64.883,64.883,0,0,0-64.883-64.883H440.845a64.883,64.883,0,0,0-64.883,64.883v615a64.883,64.883,0,0,0,64.883,64.883H678.352a64.883,64.883,0,0,0,64.882-64.883v-423.105h4.092Z" transform="translate(-227.576 -76.46149)" fill="#e6e6e6"/><path id="b2715b96-3117-487c-acc0-20904544b5b7" data-name="Path 23" d="M680.97,93.3355h-31a23.02,23.02,0,0,1-21.316,31.714H492.589a23.02,23.02,0,0,1-21.314-31.714H442.319a48.454,48.454,0,0,0-48.454,48.454v614.107a48.454,48.454,0,0,0,48.454,48.454H680.97a48.454,48.454,0,0,0,48.454-48.454h0V141.7885a48.454,48.454,0,0,0-48.454-48.453Z" transform="translate(-227.576 -76.46149)" fill="#fff"/><path id="b06d66ec-6c84-45dd-8c27-1263a6253192" data-name="Path 6" d="M531.234,337.96451a24.437,24.437,0,0,1,12.23-21.174,24.45,24.45,0,1,0,0,42.345A24.43391,24.43391,0,0,1,531.234,337.96451Z" transform="translate(-227.576 -76.46149)" fill="#ccc"/><path id="e73810fe-4cf4-40cc-8c7c-ca544ce30bd4" data-name="Path 7" d="M561.971,337.96451a24.43594,24.43594,0,0,1,12.23-21.174,24.45,24.45,0,1,0,0,42.345A24.43391,24.43391,0,0,1,561.971,337.96451Z" transform="translate(-227.576 -76.46149)" fill="#ccc"/><circle id="a4813fcf-056e-4514-bb8b-e6506f49341f" data-name="Ellipse 1" cx="364.43401" cy="261.50202" r="24.45" fill="#e85b3f"/><path id="bbe451c3-febc-41ba-8083-4c8307a2e73e" data-name="Path 8" d="M632.872,414.3305h-142.5a5.123,5.123,0,0,1-5.117-5.117v-142.5a5.123,5.123,0,0,1,5.117-5.117h142.5a5.123,5.123,0,0,1,5.117,5.117v142.5A5.123,5.123,0,0,1,632.872,414.3305Zm-142.5-150.686a3.073,3.073,0,0,0-3.07,3.07v142.5a3.073,3.073,0,0,0,3.07,3.07h142.5a3.073,3.073,0,0,0,3.07-3.07v-142.5a3.073,3.073,0,0,0-3.07-3.07Z" transform="translate(-227.576 -76.46149)" fill="#ccc"/><rect id="bb28937d-932f-4fdf-befe-f406e51091fe" data-name="Rectangle 1" x="218.56201" y="447.10197" width="218.552" height="2.047" fill="#ccc"/><circle id="fcef55fc-4968-45b2-93bb-1a1080c85fc7" data-name="Ellipse 2" cx="225.46401" cy="427.41999" r="6.902" fill="#e85b3f"/><rect id="ff33d889-4c74-4b91-85ef-b4882cc8fe76" data-name="Rectangle 2" x="218.56201" y="516.11803" width="218.552" height="2.047" fill="#ccc"/><circle id="e8fa0310-b872-4adf-aedd-0c6eda09f3b8" data-name="Ellipse 3" cx="225.46401" cy="496.43702" r="6.902" fill="#e85b3f"/><path d="M660.69043,671.17188H591.62207a4.50493,4.50493,0,0,1-4.5-4.5v-24.208a4.50492,4.50492,0,0,1,4.5-4.5h69.06836a4.50491,4.50491,0,0,1,4.5,4.5v24.208A4.50492,4.50492,0,0,1,660.69043,671.17188Z" transform="translate(-227.576 -76.46149)" fill="#e85b3f"/><circle id="e12ee00d-aa4a-4413-a013-11d20b7f97f7" data-name="Ellipse 7" cx="247.97799" cy="427.41999" r="6.902" fill="#e85b3f"/><circle id="f58f497e-6949-45c8-be5f-eee2aa0f6586" data-name="Ellipse 8" cx="270.492" cy="427.41999" r="6.902" fill="#e85b3f"/><circle id="b4d4939a-c6e6-4f4d-ba6c-e8b05485017d" data-name="Ellipse 9" cx="247.97799" cy="496.43702" r="6.902" fill="#e85b3f"/><circle id="aff120b1-519b-4e96-ac87-836aa55663de" data-name="Ellipse 10" cx="270.492" cy="496.43702" r="6.902" fill="#e85b3f"/><path id="f1094013-1297-477a-ac57-08eac07c4bd5" data-name="Path 88" d="M969.642,823.53851H251.656c-1.537,0-2.782-.546-2.782-1.218s1.245-1.219,2.782-1.219H969.642c1.536,0,2.782.546,2.782,1.219S971.178,823.53851,969.642,823.53851Z" transform="translate(-227.576 -76.46149)" fill="#3f3d56"/><path d="M792.25256,565.92292a10.09371,10.09371,0,0,1,1.41075.78731l44.8523-19.14319,1.60093-11.81526,17.92157-.10956-1.05873,27.0982-59.19987,15.65584a10.60791,10.60791,0,0,1-.44749,1.20835,10.2346,10.2346,0,1,1-5.07946-13.68169Z" transform="translate(-227.576 -76.46149)" fill="#ffb8b8"/><polygon points="636.98 735.021 624.72 735.021 618.888 687.733 636.982 687.734 636.98 735.021" fill="#ffb8b8"/><path d="M615.96281,731.51778h23.64387a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H601.076a0,0,0,0,1,0,0v0A14.88686,14.88686,0,0,1,615.96281,731.51778Z" fill="#2f2e41"/><polygon points="684.66 731.557 672.459 732.759 662.018 686.271 680.025 684.497 684.66 731.557" fill="#ffb8b8"/><path d="M891.68576,806.12757h23.64387a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H876.7989a0,0,0,0,1,0,0v0A14.88686,14.88686,0,0,1,891.68576,806.12757Z" transform="translate(-303.00873 15.2906) rotate(-5.62529)" fill="#2f2e41"/><circle cx="640.3925" cy="384.57375" r="24.56103" fill="#ffb8b8"/><path d="M849.55636,801.91945a4.47086,4.47086,0,0,1-4.415-3.69726c-6.34571-35.22559-27.08789-150.40528-27.584-153.59571a1.42684,1.42684,0,0,1-.01562-.22168v-8.58789a1.489,1.489,0,0,1,.27929-.87207l2.74024-3.83789a1.47845,1.47845,0,0,1,1.14355-.625c15.62207-.73242,66.78418-2.8789,69.25586.209h0c2.48242,3.10351,1.60547,12.50683,1.4043,14.36035l.00977.19336,22.98535,146.99512a4.51238,4.51238,0,0,1-3.71485,5.13476l-14.35644,2.36524a4.52127,4.52127,0,0,1-5.02539-3.09278c-4.44043-14.18847-19.3291-61.918-24.48926-80.38672a.49922.49922,0,0,0-.98047.13868c.25781,17.60546.88086,62.52343,1.0957,78.0371l.02344,1.6709a4.51811,4.51811,0,0,1-4.09277,4.53614l-13.84375,1.25781C849.83565,801.91359,849.695,801.91945,849.55636,801.91945Z" transform="translate(-227.576 -76.46149)" fill="#2f2e41"/><path id="ae7af94f-88d7-4204-9f07-e3651de85c05" data-name="Path 99" d="M852.38089,495.2538c-4.28634,2.548-6.85116,7.23043-8.32276,11.9951a113.681,113.681,0,0,0-4.88444,27.15943l-1.55553,27.60021-19.25508,73.1699c16.68871,14.1207,26.31542,10.91153,48.78049-.63879s25.03222,3.85117,25.03222,3.85117l4.49236-62.25839,6.41837-68.03232a30.16418,30.16418,0,0,0-4.86143-4.67415,49.65848,49.65848,0,0,0-42.44229-8.99538Z" transform="translate(-227.576 -76.46149)" fill="#e85b3f"/><path d="M846.12661,580.70047a10.52561,10.52561,0,0,1,1.50061.70389l44.34832-22.1972.736-12.02551,18.2938-1.26127.98041,27.4126L852.7199,592.93235a10.4958,10.4958,0,1,1-6.59329-12.23188Z" transform="translate(-227.576 -76.46149)" fill="#ffb8b8"/><path id="a6768b0e-63d0-4b31-8462-9b2e0b00f0fd" data-name="Path 101" d="M902.76552,508.41151c10.91151,3.85117,12.83354,45.57369,12.83354,45.57369-12.8367-7.06036-28.24139,4.49318-28.24139,4.49318s-3.20916-10.91154-7.06034-25.03223a24.52987,24.52987,0,0,1,5.13436-23.10625S891.854,504.558,902.76552,508.41151Z" transform="translate(-227.576 -76.46149)" fill="#e85b3f"/><path id="bfd7963f-0cf8-4885-9d3a-2c00bccda2e3" data-name="Path 102" d="M889.99122,467.53052c-3.06-2.44837-7.23517,2.00173-7.23517,2.00173l-2.4484-22.03349s-15.30095,1.8329-25.0935-.61161-11.32255,8.87513-11.32255,8.87513a78.57978,78.57978,0,0,1-.30582-13.77092c.61158-5.50838,8.56838-11.01675,22.6451-14.68932S887.6518,439.543,887.6518,439.543C897.44542,444.43877,893.05121,469.97891,889.99122,467.53052Z" transform="translate(-227.576 -76.46149)" fill="#2f2e41"/></svg>
\ No newline at end of file
+<svg id="a87032b8-5b37-4b7e-a4d9-4dbfbe394641" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="744.84799" height="747.07702" viewBox="0 0 744.84799 747.07702"><path id="fa3b9e12-7275-481e-bee9-64fd9595a50d" data-name="Path 1" d="M299.205,705.80851l-6.56-25.872a335.96693,335.96693,0,0,0-35.643-12.788l-.828,12.024-3.358-13.247c-15.021-4.29394-25.24-6.183-25.24-6.183s13.8,52.489,42.754,92.617l33.734,5.926-26.207,3.779a135.92592,135.92592,0,0,0,11.719,12.422c42.115,39.092,89.024,57.028,104.773,40.06s-5.625-62.412-47.74-101.5c-13.056-12.119-29.457-21.844-45.875-29.5Z" transform="translate(-227.576 -76.46149)" fill="#f2f2f2"/><path id="bde08021-c30f-4979-a9d8-cb90b72b5ca2" data-name="Path 2" d="M361.591,677.70647l7.758-25.538a335.93951,335.93951,0,0,0-23.9-29.371l-6.924,9.865,3.972-13.076c-10.641-11.436-18.412-18.335-18.412-18.335s-15.315,52.067-11.275,101.384l25.815,22.51-24.392-10.312a135.91879,135.91879,0,0,0,3.614,16.694c15.846,55.234,46.731,94.835,68.983,88.451s27.446-56.335,11.6-111.569c-4.912-17.123-13.926-33.926-24.023-48.965Z" transform="translate(-227.576 -76.46149)" fill="#f2f2f2"/><path id="b3ac2088-de9b-4f7f-bc99-0ed9705c1a9d" data-name="Path 22" d="M747.327,253.4445h-4.092v-112.1a64.883,64.883,0,0,0-64.883-64.883H440.845a64.883,64.883,0,0,0-64.883,64.883v615a64.883,64.883,0,0,0,64.883,64.883H678.352a64.883,64.883,0,0,0,64.882-64.883v-423.105h4.092Z" transform="translate(-227.576 -76.46149)" fill="#3F3D56"/><path id="b2715b96-3117-487c-acc0-20904544b5b7" data-name="Path 23" d="M680.97,93.3355h-31a23.02,23.02,0,0,1-21.316,31.714H492.589a23.02,23.02,0,0,1-21.314-31.714H442.319a48.454,48.454,0,0,0-48.454,48.454v614.107a48.454,48.454,0,0,0,48.454,48.454H680.97a48.454,48.454,0,0,0,48.454-48.454h0V141.7885a48.454,48.454,0,0,0-48.454-48.453Z" transform="translate(-227.576 -76.46149)" fill="#fff"/><path id="b06d66ec-6c84-45dd-8c27-1263a6253192" data-name="Path 6" d="M531.234,337.96451a24.437,24.437,0,0,1,12.23-21.174,24.45,24.45,0,1,0,0,42.345A24.43391,24.43391,0,0,1,531.234,337.96451Z" transform="translate(-227.576 -76.46149)" fill="#ccc"/><path id="e73810fe-4cf4-40cc-8c7c-ca544ce30bd4" data-name="Path 7" d="M561.971,337.96451a24.43594,24.43594,0,0,1,12.23-21.174,24.45,24.45,0,1,0,0,42.345A24.43391,24.43391,0,0,1,561.971,337.96451Z" transform="translate(-227.576 -76.46149)" fill="#ccc"/><circle id="a4813fcf-056e-4514-bb8b-e6506f49341f" data-name="Ellipse 1" cx="364.43401" cy="261.50202" r="24.45" fill="#e85b3f"/><path id="bbe451c3-febc-41ba-8083-4c8307a2e73e" data-name="Path 8" d="M632.872,414.3305h-142.5a5.123,5.123,0,0,1-5.117-5.117v-142.5a5.123,5.123,0,0,1,5.117-5.117h142.5a5.123,5.123,0,0,1,5.117,5.117v142.5A5.123,5.123,0,0,1,632.872,414.3305Zm-142.5-150.686a3.073,3.073,0,0,0-3.07,3.07v142.5a3.073,3.073,0,0,0,3.07,3.07h142.5a3.073,3.073,0,0,0,3.07-3.07v-142.5a3.073,3.073,0,0,0-3.07-3.07Z" transform="translate(-227.576 -76.46149)" fill="#ccc"/><rect id="bb28937d-932f-4fdf-befe-f406e51091fe" data-name="Rectangle 1" x="218.56201" y="447.10197" width="218.552" height="2.047" fill="#ccc"/><circle id="fcef55fc-4968-45b2-93bb-1a1080c85fc7" data-name="Ellipse 2" cx="225.46401" cy="427.41999" r="6.902" fill="#e85b3f"/><rect id="ff33d889-4c74-4b91-85ef-b4882cc8fe76" data-name="Rectangle 2" x="218.56201" y="516.11803" width="218.552" height="2.047" fill="#ccc"/><circle id="e8fa0310-b872-4adf-aedd-0c6eda09f3b8" data-name="Ellipse 3" cx="225.46401" cy="496.43702" r="6.902" fill="#e85b3f"/><path d="M660.69043,671.17188H591.62207a4.50493,4.50493,0,0,1-4.5-4.5v-24.208a4.50492,4.50492,0,0,1,4.5-4.5h69.06836a4.50491,4.50491,0,0,1,4.5,4.5v24.208A4.50492,4.50492,0,0,1,660.69043,671.17188Z" transform="translate(-227.576 -76.46149)" fill="#e85b3f"/><circle id="e12ee00d-aa4a-4413-a013-11d20b7f97f7" data-name="Ellipse 7" cx="247.97799" cy="427.41999" r="6.902" fill="#e85b3f"/><circle id="f58f497e-6949-45c8-be5f-eee2aa0f6586" data-name="Ellipse 8" cx="270.492" cy="427.41999" r="6.902" fill="#e85b3f"/><circle id="b4d4939a-c6e6-4f4d-ba6c-e8b05485017d" data-name="Ellipse 9" cx="247.97799" cy="496.43702" r="6.902" fill="#e85b3f"/><circle id="aff120b1-519b-4e96-ac87-836aa55663de" data-name="Ellipse 10" cx="270.492" cy="496.43702" r="6.902" fill="#e85b3f"/><path id="f1094013-1297-477a-ac57-08eac07c4bd5" data-name="Path 88" d="M969.642,823.53851H251.656c-1.537,0-2.782-.546-2.782-1.218s1.245-1.219,2.782-1.219H969.642c1.536,0,2.782.546,2.782,1.219S971.178,823.53851,969.642,823.53851Z" transform="translate(-227.576 -76.46149)" fill="#3f3d56"/><path d="M792.25256,565.92292a10.09371,10.09371,0,0,1,1.41075.78731l44.8523-19.14319,1.60093-11.81526,17.92157-.10956-1.05873,27.0982-59.19987,15.65584a10.60791,10.60791,0,0,1-.44749,1.20835,10.2346,10.2346,0,1,1-5.07946-13.68169Z" transform="translate(-227.576 -76.46149)" fill="#ffb8b8"/><polygon points="636.98 735.021 624.72 735.021 618.888 687.733 636.982 687.734 636.98 735.021" fill="#ffb8b8"/><path d="M615.96281,731.51778h23.64387a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H601.076a0,0,0,0,1,0,0v0A14.88686,14.88686,0,0,1,615.96281,731.51778Z" fill="#2f2e41"/><polygon points="684.66 731.557 672.459 732.759 662.018 686.271 680.025 684.497 684.66 731.557" fill="#ffb8b8"/><path d="M891.68576,806.12757h23.64387a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H876.7989a0,0,0,0,1,0,0v0A14.88686,14.88686,0,0,1,891.68576,806.12757Z" transform="translate(-303.00873 15.2906) rotate(-5.62529)" fill="#2f2e41"/><circle cx="640.3925" cy="384.57375" r="24.56103" fill="#ffb8b8"/><path d="M849.55636,801.91945a4.47086,4.47086,0,0,1-4.415-3.69726c-6.34571-35.22559-27.08789-150.40528-27.584-153.59571a1.42684,1.42684,0,0,1-.01562-.22168v-8.58789a1.489,1.489,0,0,1,.27929-.87207l2.74024-3.83789a1.47845,1.47845,0,0,1,1.14355-.625c15.62207-.73242,66.78418-2.8789,69.25586.209h0c2.48242,3.10351,1.60547,12.50683,1.4043,14.36035l.00977.19336,22.98535,146.99512a4.51238,4.51238,0,0,1-3.71485,5.13476l-14.35644,2.36524a4.52127,4.52127,0,0,1-5.02539-3.09278c-4.44043-14.18847-19.3291-61.918-24.48926-80.38672a.49922.49922,0,0,0-.98047.13868c.25781,17.60546.88086,62.52343,1.0957,78.0371l.02344,1.6709a4.51811,4.51811,0,0,1-4.09277,4.53614l-13.84375,1.25781C849.83565,801.91359,849.695,801.91945,849.55636,801.91945Z" transform="translate(-227.576 -76.46149)" fill="#2f2e41"/><path id="ae7af94f-88d7-4204-9f07-e3651de85c05" data-name="Path 99" d="M852.38089,495.2538c-4.28634,2.548-6.85116,7.23043-8.32276,11.9951a113.681,113.681,0,0,0-4.88444,27.15943l-1.55553,27.60021-19.25508,73.1699c16.68871,14.1207,26.31542,10.91153,48.78049-.63879s25.03222,3.85117,25.03222,3.85117l4.49236-62.25839,6.41837-68.03232a30.16418,30.16418,0,0,0-4.86143-4.67415,49.65848,49.65848,0,0,0-42.44229-8.99538Z" transform="translate(-227.576 -76.46149)" fill="#e85b3f"/><path d="M846.12661,580.70047a10.52561,10.52561,0,0,1,1.50061.70389l44.34832-22.1972.736-12.02551,18.2938-1.26127.98041,27.4126L852.7199,592.93235a10.4958,10.4958,0,1,1-6.59329-12.23188Z" transform="translate(-227.576 -76.46149)" fill="#ffb8b8"/><path id="a6768b0e-63d0-4b31-8462-9b2e0b00f0fd" data-name="Path 101" d="M902.76552,508.41151c10.91151,3.85117,12.83354,45.57369,12.83354,45.57369-12.8367-7.06036-28.24139,4.49318-28.24139,4.49318s-3.20916-10.91154-7.06034-25.03223a24.52987,24.52987,0,0,1,5.13436-23.10625S891.854,504.558,902.76552,508.41151Z" transform="translate(-227.576 -76.46149)" fill="#e85b3f"/><path id="bfd7963f-0cf8-4885-9d3a-2c00bccda2e3" data-name="Path 102" d="M889.99122,467.53052c-3.06-2.44837-7.23517,2.00173-7.23517,2.00173l-2.4484-22.03349s-15.30095,1.8329-25.0935-.61161-11.32255,8.87513-11.32255,8.87513a78.57978,78.57978,0,0,1-.30582-13.77092c.61158-5.50838,8.56838-11.01675,22.6451-14.68932S887.6518,439.543,887.6518,439.543C897.44542,444.43877,893.05121,469.97891,889.99122,467.53052Z" transform="translate(-227.576 -76.46149)" fill="#2f2e41"/></svg>
\ No newline at end of file

From a3f2a32eb12558af823245e44b4be51ac1acf856 Mon Sep 17 00:00:00 2001
From: liekevdvoort <49523639+liekevdvoort@users.noreply.github.com>
Date: Tue, 1 Dec 2020 17:33:17 +0100
Subject: [PATCH 041/141] Responsive improvement

---
 .../highlights-modal/highlights-modal.component.scss  | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.scss b/src/app/modules/project/highlights-modal/highlights-modal.component.scss
index 96833a31..44ec0a0e 100644
--- a/src/app/modules/project/highlights-modal/highlights-modal.component.scss
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.scss
@@ -6,9 +6,9 @@
   .heading-row {
     padding: 0.75rem 0;
   }
-  .highlight-wrapper{
-    .row{
-      height: 54px;
+  .highlight-wrapper {
+    .row {
+      min-height: 54px;
       display: flex;
       align-items: center;
     }
@@ -25,6 +25,11 @@
     cursor: pointer;
   }
 
+  .delete {
+    padding-right: 10px;
+    display: flex;
+    justify-content: flex-end;
+  }
   .delete img:hover {
     opacity: 0.7;
   }

From e2c6226df788d65d2dd132cfc24d55bdc627c287 Mon Sep 17 00:00:00 2001
From: liekevdvoort <49523639+liekevdvoort@users.noreply.github.com>
Date: Tue, 1 Dec 2020 17:40:02 +0100
Subject: [PATCH 042/141] Fix trash icon show and hide

---
 .../project/highlights-modal/highlights-modal.component.html  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.html b/src/app/modules/project/highlights-modal/highlights-modal.component.html
index 227d212b..5dd66d73 100644
--- a/src/app/modules/project/highlights-modal/highlights-modal.component.html
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.html
@@ -13,12 +13,12 @@ <h2 class="mb-4">Project highlights</h2>
               class="date">{{highlight.startDate | formatDate}}</span></div>
           <div class="col-md-2 col-5 py-2" (click)=selectHighlight(highlight)><span
               class="date">{{highlight.endDate | formatDate}}</span></div>
-          <div class="col-2 py-2 d-sm-none delete">
+          <div class="col-2 py-2 d-md-none delete">
             <fa-icon class='trash-icon' [icon]=faTrash (click)="deleteHighlight(highlight)"></fa-icon>
           </div>
           <div class="col-md-6 d-sm-flex py-2 text-truncate" (click)=selectHighlight(highlight)>
             {{highlight.description}}</div>
-          <div class="col-md-2 py-2 pr-3 d-none d-sm-inline-block text-right delete">
+          <div class="col-md-2 py-2 pr-3 d-none d-md-inline-block text-right delete">
             <fa-icon class='trash-icon' [icon]=faTrash  (click)="deleteHighlight(highlight)" ></fa-icon>
           </div>
         </div>

From 492890f384732d8b525dd3516adf114a7dd0f561 Mon Sep 17 00:00:00 2001
From: liekevdvoort <49523639+liekevdvoort@users.noreply.github.com>
Date: Tue, 1 Dec 2020 17:49:17 +0100
Subject: [PATCH 043/141] Margin top and bottom consitency with project detail
 and other modal

---
 src/app/modules/project/details/details.component.scss | 7 +++++++
 src/app/modules/project/details/details.component.ts   | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/project/details/details.component.scss b/src/app/modules/project/details/details.component.scss
index 45bf1078..9513b5c3 100644
--- a/src/app/modules/project/details/details.component.scss
+++ b/src/app/modules/project/details/details.component.scss
@@ -26,6 +26,13 @@
     border: none;
   }
 }
+.highlight-modal {
+  margin-top: 60px;
+  margin-bottom: 30px;
+  .modal-content {
+    border: none;
+  }
+}
 
 .project-icon {
   display: flex;
diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 1fa6bbb0..72b957ae 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -196,7 +196,7 @@ export class DetailsComponent implements OnInit {
     this.highlightByProjectIdService
       .getHighlightsByProjectId(this.project.id)
       .subscribe((results: Highlight[]) => {
-        const options = { initialState: { highlights: results }, class: 'modal-lg' };
+        const options = { initialState: { highlights: results }, class: 'modal-lg highlight-modal' };
         const highlightsModalComponentRef = this.modalService.show(HighlightsModalComponent, options);
 
         highlightsModalComponentRef.content.selectHighlightToEdit.subscribe(highlight => {

From 080ad60ff020af6bcec9350ffdf155103b84a2d8 Mon Sep 17 00:00:00 2001
From: liekevdvoort <49523639+liekevdvoort@users.noreply.github.com>
Date: Tue, 1 Dec 2020 17:57:17 +0100
Subject: [PATCH 044/141] make modal width more consistent

---
 .../modules/project/details/details.component.scss    | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/app/modules/project/details/details.component.scss b/src/app/modules/project/details/details.component.scss
index 9513b5c3..f2c140df 100644
--- a/src/app/modules/project/details/details.component.scss
+++ b/src/app/modules/project/details/details.component.scss
@@ -19,16 +19,17 @@
 @import "assets/styles/variables";
 
 .highlight-form-modal {
-  max-width: 600px;
-  margin-top: 60px;
-  margin-bottom: 30px;
+  max-width: 90vw;
+  width: 600px;
+  margin: 60px auto 30px auto;
   .modal-content {
     border: none;
   }
 }
 .highlight-modal {
-  margin-top: 60px;
-  margin-bottom: 30px;
+  max-width: 90vw;
+  width: 800px;
+  margin: 60px auto 30px auto;
   .modal-content {
     border: none;
   }

From 4edd63dbb81913fa5f9e959422aa84832f944233 Mon Sep 17 00:00:00 2001
From: Martin Markov <martin.markov28@gmail.com>
Date: Tue, 1 Dec 2020 19:21:07 +0100
Subject: [PATCH 045/141] Handled the cases when highlights are not present and
 added comments where needed

---
 .../project/details/details.component.ts      | 105 ++++++++++--------
 .../highlights-modal.component.html           |  15 +--
 .../highlights-modal.component.ts             |  16 ++-
 .../modal-highlight-form.component.html       |   2 +-
 .../modal-highlight-form.component.ts         |   7 ++
 5 files changed, 89 insertions(+), 56 deletions(-)

diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 72b957ae..a78ab357 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -140,7 +140,7 @@ export class DetailsComponent implements OnInit {
    * When Indeterminate checkbox is checked start date and end date fields are disabled and will be null,
    * resulting in an infinite highlight.
    */
-  public onClickHighlightButton(): void {
+  public onClickHighlightButton(canGoBack?: Boolean): void {
     if (this.project == null || this.project.id === 0) {
       const alertConfig: AlertConfig = {
         type: AlertType.danger,
@@ -152,7 +152,8 @@ export class DetailsComponent implements OnInit {
       this.alertService.pushAlert(alertConfig);
       return;
     }
-    const modalRef = this.modalService.show(ModalHighlightFormComponent);
+
+    const modalRef = this.modalService.show(ModalHighlightFormComponent, { initialState: { canGoBack } });
 
     modalRef.content.confirm
       .pipe(
@@ -195,49 +196,14 @@ export class DetailsComponent implements OnInit {
   public onClickEditHighlightButton(): void {
     this.highlightByProjectIdService
       .getHighlightsByProjectId(this.project.id)
-      .subscribe((results: Highlight[]) => {
-        const options = { initialState: { highlights: results }, class: 'modal-lg highlight-modal' };
-        const highlightsModalComponentRef = this.modalService.show(HighlightsModalComponent, options);
-
-        highlightsModalComponentRef.content.selectHighlightToEdit.subscribe(highlight => {
-          const formModalRef = this.modalService.show(ModalHighlightFormComponent, { initialState: { highlight } });
-          formModalRef.setClass('highlight-form-modal');
-          formModalRef.content.confirm.pipe(
-            switchMap((highlightFormResult: HighlightFormResult) => {
-              const highlightAddResource: HighlightUpdate = {
-                projectId: this.project.id,
-                startDate: highlightFormResult.startDate,
-                description: highlightFormResult.description,
-                endDate: highlightFormResult.endDate
-              };
-
-              if (highlightFormResult.indeterminate) {
-                highlightAddResource.startDate = null;
-                highlightAddResource.endDate = null;
-              }
-
-              return this.highlightService.put(highlight.id, highlightAddResource);
-            })
-          ).subscribe(() => {
-            const alertConfig: AlertConfig = {
-              type: AlertType.success,
-              mainMessage: 'Highlight was successfully updated',
-              dismissible: true,
-              timeout: this.alertService.defaultTimeout
-            };
-            this.alertService.pushAlert(alertConfig);
-            this.isProjectHighlighted = true;
-          });
-
-          formModalRef.content.goBack.subscribe(() => {
-            this.onClickEditHighlightButton();
-          });
-        });
-
-        highlightsModalComponentRef.content.selectAddHighlight.subscribe(() => {
-          this.onClickHighlightButton();
-        });
-      });
+      .subscribe(
+        highlights => this.handleHighlightResponse(highlights),
+        err => {
+          if (err.status === 404) {
+            this.onClickHighlightButton(false);
+          }
+        }
+      );
   }
 
   /**
@@ -356,4 +322,53 @@ export class DetailsComponent implements OnInit {
     }
     this.displayEmbedButton = this.project.user.id === this.currentUser.id;
   }
+
+  /**
+   * Method for opening the highlight-modal-form
+   * @param highlights the array of highlights to be displayed in the modals
+   */
+  private handleHighlightResponse(highlights: Highlight[]) {
+    const options = { initialState: { highlights }, class: 'modal-lg highlight-modal' };
+    const highlightsModalComponentRef = this.modalService.show(HighlightsModalComponent, options);
+
+    highlightsModalComponentRef.content.selectHighlightToEdit.subscribe(highlight => {
+      const formModalRef = this.modalService.show(ModalHighlightFormComponent, { initialState: { highlight, canGoBack: true } });
+
+      formModalRef.setClass('highlight-form-modal');
+      formModalRef.content.confirm.pipe(
+        switchMap((highlightFormResult: HighlightFormResult) => {
+          const highlightAddResource: HighlightUpdate = {
+            projectId: this.project.id,
+            startDate: highlightFormResult.startDate,
+            description: highlightFormResult.description,
+            endDate: highlightFormResult.endDate
+          };
+
+          if (highlightFormResult.indeterminate) {
+            highlightAddResource.startDate = null;
+            highlightAddResource.endDate = null;
+          }
+
+          return this.highlightService.put(highlight.id, highlightAddResource);
+        })
+      ).subscribe(() => {
+        const alertConfig: AlertConfig = {
+          type: AlertType.success,
+          mainMessage: 'Highlight was successfully updated',
+          dismissible: true,
+          timeout: this.alertService.defaultTimeout
+        };
+        this.alertService.pushAlert(alertConfig);
+        this.isProjectHighlighted = true;
+      });
+
+      formModalRef.content.goBack.subscribe(() => {
+        this.onClickEditHighlightButton();
+      });
+    });
+
+    highlightsModalComponentRef.content.selectAddHighlight.subscribe(() => {
+      this.onClickHighlightButton(true);
+    });
+  }
 }
diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.html b/src/app/modules/project/highlights-modal/highlights-modal.component.html
index 5dd66d73..2ca49aa2 100644
--- a/src/app/modules/project/highlights-modal/highlights-modal.component.html
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.html
@@ -9,23 +9,24 @@ <h2 class="mb-4">Project highlights</h2>
     <div *ngFor="let highlight of highlights">
       <div class="highlight-wrapper">
         <div class="row no-gutters border-top border-bottom">
-          <div class="col-md-2 col-5 py-2" (click)=selectHighlight(highlight)><span
+          <div class="col-md-2 col-5 py-2" (click)=onSelectHighlight(highlight)><span
               class="date">{{highlight.startDate | formatDate}}</span></div>
-          <div class="col-md-2 col-5 py-2" (click)=selectHighlight(highlight)><span
+          <div class="col-md-2 col-5 py-2" (click)=onSelectHighlight(highlight)><span
               class="date">{{highlight.endDate | formatDate}}</span></div>
           <div class="col-2 py-2 d-md-none delete">
-            <fa-icon class='trash-icon' [icon]=faTrash (click)="deleteHighlight(highlight)"></fa-icon>
+            <fa-icon class='trash-icon' [icon]=faTrash (click)="onDeleteHighlight(highlight)"></fa-icon>
+          </div>
+          <div class="col-md-6 d-sm-flex py-2 text-truncate" (click)=onSelectHighlight(highlight)>
+            {{highlight.description}}
           </div>
-          <div class="col-md-6 d-sm-flex py-2 text-truncate" (click)=selectHighlight(highlight)>
-            {{highlight.description}}</div>
           <div class="col-md-2 py-2 pr-3 d-none d-md-inline-block text-right delete">
-            <fa-icon class='trash-icon' [icon]=faTrash  (click)="deleteHighlight(highlight)" ></fa-icon>
+            <fa-icon class='trash-icon' [icon]=faTrash  (click)="onDeleteHighlight(highlight)" ></fa-icon>
           </div>
         </div>
       </div>
     </div>
     <div class="add-project-highlight text-center border-top-0 list-group-item list-group-item-action"
-      (click)=addHighlight()>
+      (click)=onAddHighlight()>
       <div class="add-button d-inline-block">
         <img alt="Add highlight" src="assets/images/plus-button.png" loading="lazy">
         <span class="ml-3">Add highlight</span>
diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.ts b/src/app/modules/project/highlights-modal/highlights-modal.component.ts
index b495ac2b..721e5b62 100644
--- a/src/app/modules/project/highlights-modal/highlights-modal.component.ts
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.ts
@@ -25,12 +25,19 @@ export class HighlightsModalComponent {
     private alertService: AlertService
   ) { }
 
-  selectHighlight(selectedHighlight: Highlight) {
+  /**
+   * Method which is triggered when a highlight is clicked
+   */
+  onSelectHighlight(selectedHighlight: Highlight) {
     this.selectHighlightToEdit.emit(selectedHighlight);
     this.bsModalRef.hide();
   }
 
-  deleteHighlight(selectedHighlight: Highlight) {
+
+  /**
+   * Method which is triggered when the delete button of a highlight is clicked
+   */
+  onDeleteHighlight(selectedHighlight: Highlight) {
     this.highlightService.delete(selectedHighlight.id)
       .subscribe(() => {
         const alertConfig: AlertConfig = {
@@ -45,7 +52,10 @@ export class HighlightsModalComponent {
       });
   }
 
-  addHighlight() {
+  /**
+   * Method which is triggered when the add button is clicked
+   */
+  onAddHighlight() {
     this.selectAddHighlight.emit();
     this.bsModalRef.hide();
   }
diff --git a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
index bea7a116..dcc6e63c 100644
--- a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
+++ b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
@@ -20,7 +20,7 @@
 <div class="modal-highlight-container">
   <div class="modal-body">
     <h2>
-      <fa-icon [icon]=faChevronLeft class="back-button" (click)=onClickBack()></fa-icon>
+      <fa-icon *ngIf="canGoBack" [icon]=faChevronLeft class="back-button" (click)=onClickBack()></fa-icon>
       Highlight project
     </h2>
     <form [formGroup]="highlightProjectForm" class="highlight-form">
diff --git a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
index 9b891020..16664d2a 100644
--- a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
+++ b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
@@ -44,6 +44,7 @@ export interface HighlightFormResult {
 })
 export class ModalHighlightFormComponent implements OnInit {
   @Input() highlight: Highlight;
+  @Input() canGoBack: Boolean;
   @Output() confirm = new EventEmitter();
   @Output() goBack = new EventEmitter();
 
@@ -133,11 +134,17 @@ export class ModalHighlightFormComponent implements OnInit {
     this.bsModalRef.hide();
   }
 
+    /**
+   * Method which triggers when the back button is clicked.
+   */
   public onClickBack(): void {
     this.goBack.emit();
     this.bsModalRef.hide();
   }
 
+    /**
+   * Method which triggers when the delete button is clicked.
+   */
   public onClickDelete(): void {
     if (!this.canDelete) {
       return;

From 4c0f974f983fda93116669aace4380e50622527f Mon Sep 17 00:00:00 2001
From: Devon Cavis <devon.cavis@live.nl>
Date: Wed, 2 Dec 2020 10:47:35 +0100
Subject: [PATCH 046/141] Fixed redirect links, added call to action to edit
 page

---
 .../project/details/details.component.html    |  2 +-
 .../project/details/details.component.ts      |  8 +-
 .../modules/project/edit/edit.component.html  | 23 ++++++
 .../modules/project/edit/edit.component.ts    | 73 ++++++++++++++++++-
 4 files changed, 102 insertions(+), 4 deletions(-)

diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html
index cfa5a057..8f00f712 100644
--- a/src/app/modules/project/details/details.component.html
+++ b/src/app/modules/project/details/details.component.html
@@ -100,7 +100,7 @@ <h1 class="project-title">{{ project.name }}</h1>
         </p>
 
         <ng-container *ngIf="displayCallToActionButton">
-          <button class="primary ml-2" (click)="onClickCallToActionButton()">{{project.callToAction.optionValue}}</button>
+          <button class="primary ml-2" (click)="onClickCallToActionButton(project.callToAction.value)">{{project.callToAction.optionValue}}</button>
         </ng-container>
 
         <div id="project-share-buttons">
diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index e676774e..bba096f9 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -133,8 +133,12 @@ export class DetailsComponent implements OnInit {
     }
   }
 
-  public onClickCallToActionButton(): void {
-    window.open(this.project.callToAction.value, '_blank');
+  public onClickCallToActionButton(url: string) {
+    if (!url.match(/^https?:\/\//i)) {
+      url = 'http://' + url;
+    }
+
+    window.open(url, '_blank');
   }
 
   /**
diff --git a/src/app/modules/project/edit/edit.component.html b/src/app/modules/project/edit/edit.component.html
index 4134bc08..933c1bb0 100644
--- a/src/app/modules/project/edit/edit.component.html
+++ b/src/app/modules/project/edit/edit.component.html
@@ -74,6 +74,29 @@ <h3>Description*</h3>
           </div>
         </form>
 
+        <form [formGroup]="newCallToActionForm" class="project-form">
+
+          <div class="row">
+            <div class="col-12">
+              <h3>Call to action</h3>
+            </div>
+            <div class="col-6">
+              <div>
+                <h3>Text</h3>
+                <select [(ngModel)]="selectedCallToActionOption" class='form-control' [ngModelOptions]="{standalone: true}">
+                  <option *ngFor="let action of callToActionOptions" [ngValue]="action">{{action.value}}</option>
+                </select>
+              </div>
+            </div>
+    
+            <div class="col-6">
+              <div>
+                <h3>Link</h3>
+                <input [(ngModel)]="callToActionRedirectUrl" [ngModelOptions]="{standalone: true}" [disabled]="selectedCallToActionOption.id <= 0"/>
+              </div>
+            </div>
+          </div>
+        </form>
 
         <form [formGroup]="editCollaboratorForm" class="project-form">
           <div class="row">
diff --git a/src/app/modules/project/edit/edit.component.ts b/src/app/modules/project/edit/edit.component.ts
index 7aca37ac..0a36ea04 100644
--- a/src/app/modules/project/edit/edit.component.ts
+++ b/src/app/modules/project/edit/edit.component.ts
@@ -27,6 +27,9 @@ import { AlertConfig } from 'src/app/models/internal/alert-config';
 import { AlertType } from 'src/app/models/internal/alert-type';
 import { AlertService } from 'src/app/services/alert.service';
 import { QuillUtils } from 'src/app/utils/quill.utils';
+import { CallToActionOptionService } from 'src/app/services/call-to-action-option.service';
+import { CallToActionOption } from 'src/app/models/domain/call-to-action-option';
+import { CallToAction } from 'src/app/models/domain/call-to-action';
 
 /**
  * Component for editting adding a project.
@@ -41,9 +44,24 @@ export class EditComponent implements OnInit {
    * Formgroup for entering project details.
    */
   public editProjectForm: FormGroup;
+  public newCallToActionForm: FormGroup;
   public editCollaboratorForm: FormGroup;
   public project: Project;
 
+  /**
+   * Projects selected call to action
+   */
+  public selectedCallToActionOption: CallToActionOption = {
+    id: 0,
+    type: 'title',
+    value: 'None',
+  };
+
+  /**
+   * The specified redirect url from the call to action
+   */
+  public callToActionRedirectUrl: string;
+
   /**
    * Project's collaborators.
    */
@@ -59,6 +77,13 @@ export class EditComponent implements OnInit {
    */
   public modulesConfigration = QuillUtils.getDefaultModulesConfiguration();
 
+  /**
+   * The available call to action options to select from
+   */
+  public callToActionOptions: CallToActionOption[] = [];
+
+  public callToActionsLoading = true;
+
   /**
    * Property for storting the invalidId if an invalid project id was entered.
    */
@@ -74,7 +99,8 @@ export class EditComponent implements OnInit {
     private formBuilder: FormBuilder,
     private projectService: ProjectService,
     private activatedRoute: ActivatedRoute,
-    private alertService: AlertService
+    private alertService: AlertService,
+    private callToActionOptionService: CallToActionOptionService
   ) {
     this.editProjectForm = this.formBuilder.group({
       name: [null, Validators.required],
@@ -83,6 +109,11 @@ export class EditComponent implements OnInit {
       description: [null],
     });
 
+    this.newCallToActionForm = this.formBuilder.group({
+      type: [null, Validators.required],
+      value: [null, Validators.required],
+    });
+
     this.editCollaboratorForm = this.formBuilder.group({
       fullName: [null, Validators.required],
       role: [null, Validators.required],
@@ -108,8 +139,36 @@ export class EditComponent implements OnInit {
         (result) => {
           this.project = result;
           this.collaborators = this.project.collaborators;
+
+          if (this.project.callToAction != null) {
+            for (let i = 0; i < this.callToActionOptions.length; i++) {
+              const element = this.callToActionOptions[i];
+              if (element.value.toLowerCase() === this.project.callToAction.optionValue) {
+                this.selectedCallToActionOption = this.callToActionOptions[i];
+              }
+            }
+
+            this.callToActionRedirectUrl = this.project.callToAction.value;
+          }
         }
       );
+
+    /**
+     * Retrieve the available call to actions
+     */
+    this.callToActionOptionService
+    .getAll()
+    .pipe(finalize(() => (this.callToActionsLoading = false)))
+    .subscribe((result) => {
+        this.callToActionOptions = result.filter(o => o.type === 'title');
+
+        /**
+         * Add the none option to the dropdown
+         */
+        this.callToActionOptions.unshift(this.selectedCallToActionOption);
+
+        this.callToActionOptions.map(o => o.value = o.value.charAt(0).toUpperCase() + o.value.slice(1));
+    });
   }
 
   public onClickSubmit(): void {
@@ -130,6 +189,18 @@ export class EditComponent implements OnInit {
     const edittedProject: ProjectUpdate = this.editProjectForm.value;
     edittedProject.collaborators = this.collaborators;
 
+
+    /*
+    * Whenever a call to action is selected, this value
+    * should be sent to to the API.
+     */
+    if (this.selectedCallToActionOption.id > 0) {
+      const callToActionToSubmit =
+      { optionValue: this.selectedCallToActionOption.value, value: this.callToActionRedirectUrl } as CallToAction;
+
+      edittedProject.callToAction = callToActionToSubmit;
+   }
+
     this.projectService
       .put(this.project.id, edittedProject)
       .pipe(

From 1038ec38cb7a551a5b6f39017b902b4db4f9d211 Mon Sep 17 00:00:00 2001
From: Devon Cavis <devon.cavis@live.nl>
Date: Wed, 2 Dec 2020 16:55:37 +0100
Subject: [PATCH 047/141] Fixed button and dropdown capitalisation, loading of
 options, and alerts

---
 .../project/add/manual/manual.component.scss  |  4 ++
 .../project/add/manual/manual.component.ts    | 19 ++++--
 .../project/details/details.component.html    |  2 +-
 .../project/details/details.component.scss    |  8 +++
 .../modules/project/edit/edit.component.scss  |  9 +++
 .../modules/project/edit/edit.component.ts    | 65 +++++++++++--------
 6 files changed, 74 insertions(+), 33 deletions(-)

diff --git a/src/app/modules/project/add/manual/manual.component.scss b/src/app/modules/project/add/manual/manual.component.scss
index 31da427e..4503a480 100644
--- a/src/app/modules/project/add/manual/manual.component.scss
+++ b/src/app/modules/project/add/manual/manual.component.scss
@@ -44,6 +44,10 @@
     box-shadow: 0px 3px 6px #0000001a;
   }
 
+  option::first-letter {
+    text-transform: uppercase;
+  }
+
   .form-footnote {
     margin-top: -15px;
   }
diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts
index 73dccd32..dfea349d 100644
--- a/src/app/modules/project/add/manual/manual.component.ts
+++ b/src/app/modules/project/add/manual/manual.component.ts
@@ -144,8 +144,6 @@ export class ManualComponent implements OnInit {
          * Add the none option to the dropdown
          */
         this.callToActionOptions.unshift(this.selectedCallToActionOption);
-
-        this.callToActionOptions.map(o => o.value = o.value.charAt(0).toUpperCase() + o.value.slice(1));
     });
 
     // Updates meta and title tags
@@ -179,8 +177,21 @@ export class ManualComponent implements OnInit {
     * should be sent to to the API.
      */
     if (this.selectedCallToActionOption.id > 0) {
-       let callToActionToSubmit = { optionValue: this.selectedCallToActionOption.value, value: this.callToActionRedirectUrl } as CallToAction;
-       newProject.callToAction = callToActionToSubmit;
+      if (this.callToActionRedirectUrl == null) {
+        const alertConfig: AlertConfig = {
+          type: AlertType.danger,
+          preMessage: 'The call to action form is invalid',
+          mainMessage: 'Please add a link to your selected call to action (or set it to "None")',
+          dismissible: true,
+          timeout: this.alertService.defaultTimeout
+        };
+        this.alertService.pushAlert(alertConfig);
+        return;
+      }
+
+      const callToActionToSubmit =
+      { optionValue: this.selectedCallToActionOption.value, value: this.callToActionRedirectUrl } as CallToAction;
+      newProject.callToAction = callToActionToSubmit;
     }
 
     this.projectService
diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html
index 8f00f712..60482a2f 100644
--- a/src/app/modules/project/details/details.component.html
+++ b/src/app/modules/project/details/details.component.html
@@ -100,7 +100,7 @@ <h1 class="project-title">{{ project.name }}</h1>
         </p>
 
         <ng-container *ngIf="displayCallToActionButton">
-          <button class="primary ml-2" (click)="onClickCallToActionButton(project.callToAction.value)">{{project.callToAction.optionValue}}</button>
+          <button id="call-to-action-button" class="primary ml-2" (click)="onClickCallToActionButton(project.callToAction.value)">{{project.callToAction.optionValue}}</button>
         </ng-container>
 
         <div id="project-share-buttons">
diff --git a/src/app/modules/project/details/details.component.scss b/src/app/modules/project/details/details.component.scss
index a9cd53d6..ec98e29b 100644
--- a/src/app/modules/project/details/details.component.scss
+++ b/src/app/modules/project/details/details.component.scss
@@ -91,6 +91,14 @@
   max-width: 800px;
 }
 
+#call-to-action-button {
+  text-transform: lowercase;
+}
+
+#call-to-action-button::first-letter {
+  text-transform: uppercase;
+}
+
 .project-highlighted-div {
   float: left;
 }
diff --git a/src/app/modules/project/edit/edit.component.scss b/src/app/modules/project/edit/edit.component.scss
index c40a810b..07e4cd84 100644
--- a/src/app/modules/project/edit/edit.component.scss
+++ b/src/app/modules/project/edit/edit.component.scss
@@ -39,6 +39,15 @@
     outline: auto #e4e4e4;
   }
 
+  select {
+    height: 45px;
+    box-shadow: 0px 3px 6px #0000001a;
+  }
+
+  option::first-letter {
+    text-transform: uppercase;
+  }
+
   .form-footnote {
     margin-top: -15px;
   }
diff --git a/src/app/modules/project/edit/edit.component.ts b/src/app/modules/project/edit/edit.component.ts
index 0a36ea04..7b35781e 100644
--- a/src/app/modules/project/edit/edit.component.ts
+++ b/src/app/modules/project/edit/edit.component.ts
@@ -131,28 +131,6 @@ export class EditComponent implements OnInit {
       return;
     }
 
-    this.projectService.get(id)
-      .pipe(
-        finalize(() => this.projectLoading = false)
-      )
-      .subscribe(
-        (result) => {
-          this.project = result;
-          this.collaborators = this.project.collaborators;
-
-          if (this.project.callToAction != null) {
-            for (let i = 0; i < this.callToActionOptions.length; i++) {
-              const element = this.callToActionOptions[i];
-              if (element.value.toLowerCase() === this.project.callToAction.optionValue) {
-                this.selectedCallToActionOption = this.callToActionOptions[i];
-              }
-            }
-
-            this.callToActionRedirectUrl = this.project.callToAction.value;
-          }
-        }
-      );
-
     /**
      * Retrieve the available call to actions
      */
@@ -167,7 +145,27 @@ export class EditComponent implements OnInit {
          */
         this.callToActionOptions.unshift(this.selectedCallToActionOption);
 
-        this.callToActionOptions.map(o => o.value = o.value.charAt(0).toUpperCase() + o.value.slice(1));
+        this.projectService.get(id)
+          .pipe(
+            finalize(() => this.projectLoading = false)
+          )
+          .subscribe(
+            (projectResult) => {
+              this.project = projectResult;
+              this.collaborators = this.project.collaborators;
+
+              if (this.project.callToAction != null) {
+                for (let i = 0; i < this.callToActionOptions.length; i++) {
+                  const element = this.callToActionOptions[i];
+                  if (element.value.toLowerCase() === this.project.callToAction.optionValue) {
+                    this.selectedCallToActionOption = this.callToActionOptions[i];
+                  }
+                }
+
+                this.callToActionRedirectUrl = this.project.callToAction.value;
+              }
+            }
+          );
     });
   }
 
@@ -186,23 +184,34 @@ export class EditComponent implements OnInit {
       return;
     }
 
-    const edittedProject: ProjectUpdate = this.editProjectForm.value;
-    edittedProject.collaborators = this.collaborators;
-
+    const editedProject: ProjectUpdate = this.editProjectForm.value;
+    editedProject.collaborators = this.collaborators;
 
     /*
     * Whenever a call to action is selected, this value
     * should be sent to to the API.
      */
     if (this.selectedCallToActionOption.id > 0) {
+      if (this.callToActionRedirectUrl == null) {
+        const alertConfig: AlertConfig = {
+          type: AlertType.danger,
+          preMessage: 'The call to action form is invalid',
+          mainMessage: 'Please add a link to your selected call to action (or set it to "None")',
+          dismissible: true,
+          timeout: this.alertService.defaultTimeout
+        };
+        this.alertService.pushAlert(alertConfig);
+        return;
+      }
+
       const callToActionToSubmit =
       { optionValue: this.selectedCallToActionOption.value, value: this.callToActionRedirectUrl } as CallToAction;
 
-      edittedProject.callToAction = callToActionToSubmit;
+      editedProject.callToAction = callToActionToSubmit;
    }
 
     this.projectService
-      .put(this.project.id, edittedProject)
+      .put(this.project.id, editedProject)
       .pipe(
         finalize(() => {
           this.submitEnabled = false;

From 9866d3ade0711e1d358896501682b51fa3c27a99 Mon Sep 17 00:00:00 2001
From: Devon Cavis <devon.cavis@live.nl>
Date: Wed, 2 Dec 2020 17:27:22 +0100
Subject: [PATCH 048/141] Updated changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e0acf50f..e0d39f5a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added the option to add a Call-To-Action button to a project - [#267](https://github.com/DigitalExcellence/dex-frontend/issues/267)
+
 ### Changed
 
 ### Deprecated

From eae8a394c081e0cec59e68a43ca89a118e67364b Mon Sep 17 00:00:00 2001
From: Devon Cavis <devon.cavis@live.nl>
Date: Thu, 3 Dec 2020 17:17:39 +0100
Subject: [PATCH 049/141] Fixed naming of editCallToActionForm and double
 adding of projects

---
 .../project/add/manual/manual.component.ts    | 17 ++-----------
 .../modules/project/edit/edit.component.html  |  2 +-
 .../modules/project/edit/edit.component.ts    | 25 +++----------------
 3 files changed, 7 insertions(+), 37 deletions(-)

diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts
index bedaecaa..de4994a7 100644
--- a/src/app/modules/project/add/manual/manual.component.ts
+++ b/src/app/modules/project/add/manual/manual.component.ts
@@ -203,20 +203,6 @@ export class ManualComponent implements OnInit {
       newProject.callToAction = callToActionToSubmit;
     }
 
-    this.projectService
-      .post(newProject)
-      .pipe(finalize(() => (this.submitEnabled = false)))
-      .subscribe(() => {
-        const alertConfig: AlertConfig = {
-          type: AlertType.success,
-          mainMessage: 'Project was succesfully saved',
-          dismissible: true,
-          timeout: this.alertService.defaultTimeout
-        };
-        this.alertService.pushAlert(alertConfig);
-        this.router.navigate([`/project/overview`]);
-      });
-
     // Start uploading files
     this.fileUploader.uploadFiles()
         .subscribe(uploadedFiles => {
@@ -283,7 +269,8 @@ export class ManualComponent implements OnInit {
           const alertConfig: AlertConfig = {
             type: AlertType.success,
             mainMessage: 'Project was succesfully saved',
-            dismissible: true
+            dismissible: true,
+            timeout: this.alertService.defaultTimeout
           };
           this.alertService.pushAlert(alertConfig);
           this.router.navigate([ `/project/overview` ]);
diff --git a/src/app/modules/project/edit/edit.component.html b/src/app/modules/project/edit/edit.component.html
index 1c4d33c8..7f01c97a 100644
--- a/src/app/modules/project/edit/edit.component.html
+++ b/src/app/modules/project/edit/edit.component.html
@@ -90,7 +90,7 @@ <h3>Project icon</h3>
           </div>
         </form>
 
-        <form [formGroup]="newCallToActionForm" class="project-form">
+        <form [formGroup]="editCallToActionForm" class="project-form">
 
           <div class="row">
             <div class="col-12">
diff --git a/src/app/modules/project/edit/edit.component.ts b/src/app/modules/project/edit/edit.component.ts
index 905af43e..79a6caef 100644
--- a/src/app/modules/project/edit/edit.component.ts
+++ b/src/app/modules/project/edit/edit.component.ts
@@ -52,7 +52,7 @@ export class EditComponent implements OnInit  {
    * Formgroup for entering project details.
    */
   public editProjectForm: FormGroup;
-  public newCallToActionForm: FormGroup;
+  public editCallToActionForm: FormGroup;
   public editCollaboratorForm: FormGroup;
   public project: Project;
 
@@ -117,7 +117,7 @@ export class EditComponent implements OnInit  {
       description: [null],
     });
 
-    this.newCallToActionForm = this.formBuilder.group({
+    this.editCallToActionForm = this.formBuilder.group({
       type: [null, Validators.required],
       value: [null, Validators.required],
     });
@@ -218,24 +218,6 @@ export class EditComponent implements OnInit  {
       editedProject.callToAction = callToActionToSubmit;
    }
 
-    this.projectService
-      .put(this.project.id, editedProject)
-      .pipe(
-        finalize(() => {
-          this.submitEnabled = false;
-        })
-      )
-      .subscribe(() => {
-        const alertConfig: AlertConfig = {
-          type: AlertType.success,
-          mainMessage: 'Project was succesfully updated',
-          dismissible: true,
-          timeout: this.alertService.defaultTimeout
-        };
-        this.alertService.pushAlert(alertConfig);
-        this.router.navigate([`project/details/${this.project.id}`]);
-    });
-
     this.fileUploader.uploadFiles()
       .subscribe(uploadedFiles => {
         if (uploadedFiles) {
@@ -320,7 +302,8 @@ export class EditComponent implements OnInit  {
           const alertConfig: AlertConfig = {
             type: AlertType.success,
             mainMessage: 'Project was succesfully updated',
-            dismissible: true
+            dismissible: true,
+            timeout: this.alertService.defaultTimeout
           };
           this.alertService.pushAlert(alertConfig);
           this.router.navigate([`project/details/${this.project.id}`]);

From 81536de7b0d76643d3cb24096398ac11c75d5dc6 Mon Sep 17 00:00:00 2001
From: Julia <j.slaats@student.fontys.nl>
Date: Fri, 4 Dec 2020 10:46:00 +0100
Subject: [PATCH 050/141] added variables for transtions

---
 .../components/app-layout/app-layout.component.scss  |  2 +-
 src/app/components/home/home.component.scss          | 12 ++++++------
 src/app/modules/account/login/login.component.scss   |  4 ++--
 .../top-highlight-cards.component.scss               |  4 ++--
 .../modules/project/overview/overview.component.scss |  4 ++--
 src/assets/styles/_variables.scss                    |  8 ++++++++
 6 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/app/components/app-layout/app-layout.component.scss b/src/app/components/app-layout/app-layout.component.scss
index d3446a09..07ed2b56 100644
--- a/src/app/components/app-layout/app-layout.component.scss
+++ b/src/app/components/app-layout/app-layout.component.scss
@@ -231,7 +231,7 @@
     letter-spacing: 0px;
     color: #fff;
     text-transform: capitalize;
-    transition: height .3s ease-in, padding .3s ease-in;
+    transition: height $transition-short, padding $transition-short;
 
     &:hover{
       height: 64px;
diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss
index 209e3925..8255aff5 100644
--- a/src/app/components/home/home.component.scss
+++ b/src/app/components/home/home.component.scss
@@ -45,7 +45,7 @@ h1 {
     border-radius: 6px;
     opacity: 1;
     font-family: lato, sans-serif;
-    transition: transform .3s ease-in;
+    transition: transform $transition-short;
 
     &::placeholder {
       color: $light-mode-grey-primary;
@@ -54,7 +54,7 @@ h1 {
     &:focus {
       border: none;
       outline: none;
-      transform: scale(1.05);
+      transform: $transform-scale-grow;
     }
   }
 
@@ -72,9 +72,9 @@ h1 {
 
     img {
       width: 25px;
-      transition: transform 0.7s ease-out;
+      transition: transform $transition-long;
       &:hover {
-        transform: rotate(-270deg);
+        transform: $transform-rotate;
       }
     }
   }
@@ -117,7 +117,7 @@ h1 {
 
   button {
     margin-top: 20px;
-    transition: 0.3s ease;
+    transition: transform $transition-short;
 
     &:focus {
       border: none;
@@ -125,7 +125,7 @@ h1 {
     }
 
     &:hover {
-      transform: scale(1.05);
+      transform: $transform-scale-grow;
     }
   }
 }
diff --git a/src/app/modules/account/login/login.component.scss b/src/app/modules/account/login/login.component.scss
index 8aa6178b..109424c5 100644
--- a/src/app/modules/account/login/login.component.scss
+++ b/src/app/modules/account/login/login.component.scss
@@ -122,14 +122,14 @@ span {
 button {
   margin: 30px 4px 0 4px;
   width: calc(100% - 8px);
-  transition: transform .3s ease;
+  transition: transform $transition-short;
 
   &:focus {
     border: none;
     outline: none;
   }
   &:hover{
-    transform: scale(0.95)
+    transform: $transform-scale-shrink;
   }
 }
 
diff --git a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss
index 93dd5fc9..7224e1ad 100644
--- a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss
+++ b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss
@@ -41,10 +41,10 @@
       border: none;
       cursor: pointer;
       height: 100%;
-      transition: transform .3s ease;
+      transition: transform $transition-short;
 
       &:hover{
-        transform: scale(1.05);
+        transform: $transform-scale-grow;
       }
     }
 
diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index 299795f3..c40fa4b0 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -88,9 +88,9 @@
 
      img {
        width: 25px;
-       transition: transform .7s ease;
+       transition: transform $transition-long;
        &:hover{
-         transform: rotate(-270deg)
+         transform: $transform-rotate;
        }
      }
    }
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index acdbae42..b3e9e120 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -29,3 +29,11 @@ $font-size-body: 14px;
 
 // box shadow color
 $box-shadow: 0 3px 6px #0000001a;
+
+// transform
+$transform-rotate: rotate(-270deg);
+$transform-scale-grow: scale(1.05);
+$transform-scale-shrink: scale(0.95);
+
+$transition-long: .7s ease-in-out;
+$transition-short: .3s ease-in-out;

From 77f1ea9790009fe3ec389fc9204d72029c81e3f5 Mon Sep 17 00:00:00 2001
From: Julia <j.slaats@student.fontys.nl>
Date: Fri, 4 Dec 2020 11:19:00 +0100
Subject: [PATCH 051/141] fixed typo

---
 src/app/modules/project/overview/overview.component.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index 27dc1250..57ebf5b8 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -133,9 +133,9 @@
  
      img {
        width: 25px;
-       transition: transform $transition-short;
+       transition: transform $transition-long;
        &:hover{
-         transform: $transformation-rotate;
+         transform: $transform-rotate;
        }
      }
    }

From a31e06bdd4915bf6d617b754749a6aaf9197a288 Mon Sep 17 00:00:00 2001
From: Martin Markov <martin.markov28@gmail.com>
Date: Fri, 4 Dec 2020 12:50:33 +0100
Subject: [PATCH 052/141] Removed the angular fontawesome component

---
 src/app/app.module.ts                            |  2 --
 .../highlights-modal.component.html              |  4 ++--
 .../highlights-modal.component.ts                |  3 ---
 .../modal-highlight-form.component.html          | 16 +++++++++-------
 .../modal-highlight-form.component.ts            |  5 -----
 src/app/modules/project/project.module.ts        |  1 -
 6 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 436491a1..fd7c6245 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -38,7 +38,6 @@ import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-poli
 import { ModalDeleteGenericComponent } from './components/modals/modal-delete-generic/modal-delete-generic.component';
 import { StripHtmlPipe } from './utils/striptags.pipe';
 import { QuillModule } from 'ngx-quill';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @NgModule({
   declarations: [
@@ -64,7 +63,6 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
     HttpClientModule,
     SharedModule,
     QuillModule.forRoot(),
-    FontAwesomeModule
   ],
   providers: [
     {
diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.html b/src/app/modules/project/highlights-modal/highlights-modal.component.html
index 2ca49aa2..c4c25b2b 100644
--- a/src/app/modules/project/highlights-modal/highlights-modal.component.html
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.html
@@ -14,13 +14,13 @@ <h2 class="mb-4">Project highlights</h2>
           <div class="col-md-2 col-5 py-2" (click)=onSelectHighlight(highlight)><span
               class="date">{{highlight.endDate | formatDate}}</span></div>
           <div class="col-2 py-2 d-md-none delete">
-            <fa-icon class='trash-icon' [icon]=faTrash (click)="onDeleteHighlight(highlight)"></fa-icon>
+            <span class='fas fa-trash trash-icon' (click)="onDeleteHighlight(highlight)"></span>
           </div>
           <div class="col-md-6 d-sm-flex py-2 text-truncate" (click)=onSelectHighlight(highlight)>
             {{highlight.description}}
           </div>
           <div class="col-md-2 py-2 pr-3 d-none d-md-inline-block text-right delete">
-            <fa-icon class='trash-icon' [icon]=faTrash  (click)="onDeleteHighlight(highlight)" ></fa-icon>
+            <span class='fas fa-trash trash-icon' (click)="onDeleteHighlight(highlight)"></span>
           </div>
         </div>
       </div>
diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.ts b/src/app/modules/project/highlights-modal/highlights-modal.component.ts
index 721e5b62..a3e0d7cb 100644
--- a/src/app/modules/project/highlights-modal/highlights-modal.component.ts
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.ts
@@ -5,7 +5,6 @@ import { HighlightService } from 'src/app/services/highlight.service';
 import { AlertService } from 'src/app/services/alert.service';
 import { AlertType } from 'src/app/models/internal/alert-type';
 import { AlertConfig } from 'src/app/models/internal/alert-config';
-import { faTrash } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-highlights-modal',
@@ -17,8 +16,6 @@ export class HighlightsModalComponent {
   @Output() selectHighlightToEdit = new EventEmitter();
   @Output() selectAddHighlight = new EventEmitter();
 
-  public faTrash = faTrash;
-
   constructor(
     private bsModalRef: BsModalRef,
     private highlightService: HighlightService,
diff --git a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
index dcc6e63c..3ecc1e50 100644
--- a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
+++ b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
@@ -1,7 +1,7 @@
 <!--
 
   Digital Excellence Copyright (C) 2020 Brend Smits
-
+`
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Lesser General Public License as published
    by the Free Software Foundation version 3 of the License.
@@ -20,7 +20,7 @@
 <div class="modal-highlight-container">
   <div class="modal-body">
     <h2>
-      <fa-icon *ngIf="canGoBack" [icon]=faChevronLeft class="back-button" (click)=onClickBack()></fa-icon>
+      <span *ngIf="canGoBack" class="fas fa-chevron-left back-button" (click)=onClickBack()></span>
       Highlight project
     </h2>
     <form [formGroup]="highlightProjectForm" class="highlight-form">
@@ -64,15 +64,17 @@ <h3>Highlight description</h3>
       <div class="col-sm-5 d-none d-sm-flex">
         <button *ngIf="canDelete" type="button" class="cancel" (click)="onClickDelete()">
           Delete highlight
-          <fa-icon [icon]=faTrashAlt></fa-icon>
+          <span class="fas fa-trash-alt"></span>
         </button>
       </div>
       <div class="col-2 d-sm-none trash-icon">
-        <fa-icon *ngIf="canDelete" [icon]=faTrash (click)="onClickDelete()" size="2x" [classes]="['mobile-trash']"></fa-icon>
+        <span *ngIf="canDelete" (click)="onClickDelete()" class='fas fa-trash mobile-trash'></span>
       </div>
-      <div class="col-10 buttons-bottom col-sm-7 text-right">
-        <button type="button" class="cancel" (click)="onClickDeny()">Cancel</button>
-        <button type="button" class="primary" (click)="onClickConfirm()">Save <fa-icon [icon]=faSave></fa-icon></button>
+      <div class=" col-10 buttons-bottom col-sm-7 text-right">
+          <button type="button" class="cancel" (click)="onClickDeny()">Cancel</button>
+          <button type="button" class="primary" (click)="onClickConfirm()">
+            Save <span class="fas fa-save"></span>
+          </button>
       </div>
     </div>
   </div>
diff --git a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
index 16664d2a..d95cb9a2 100644
--- a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
+++ b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
@@ -22,7 +22,6 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { Highlight } from '../../../models/domain/highlight';
 import { HighlightService } from 'src/app/services/highlight.service';
 import * as moment from 'moment';
-import { faSave, faTrash, faTrashAlt, faChevronLeft } from '@fortawesome/free-solid-svg-icons';
 import { AlertConfig } from 'src/app/models/internal/alert-config';
 import { AlertService } from 'src/app/services/alert.service';
 import { AlertType } from 'src/app/models/internal/alert-type';
@@ -51,10 +50,6 @@ export class ModalHighlightFormComponent implements OnInit {
   public highlightProjectForm: FormGroup;
   public dateFieldsEnabled = true;
   public validationErrorMessage: string = null;
-  public faSave = faSave;
-  public faTrash = faTrash;
-  public faTrashAlt = faTrashAlt;
-  public faChevronLeft = faChevronLeft;
   public canDelete = false;
 
   constructor(
diff --git a/src/app/modules/project/project.module.ts b/src/app/modules/project/project.module.ts
index ac491f6c..debd12f4 100644
--- a/src/app/modules/project/project.module.ts
+++ b/src/app/modules/project/project.module.ts
@@ -36,7 +36,6 @@ import { DndDirective } from 'src/app/components/file-uploader/DndDirective';
 import { Meta } from '@angular/platform-browser';
 import { FormatDatePipe } from 'src/app/utils/format-date.pipe';
 import { HighlightsModalComponent } from './highlights-modal/highlights-modal.component';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { ProjectComponent } from 'src/app/modules/project/overview/project/project.component';
 
 @NgModule({

From 434dd71640f9bc412754de53262af7f588049915 Mon Sep 17 00:00:00 2001
From: Julia <j.slaats@student.fontys.nl>
Date: Fri, 4 Dec 2020 13:56:07 +0100
Subject: [PATCH 053/141] added animations to overview page

---
 src/app/modules/project/overview/overview.component.scss  | 6 +++++-
 .../project/overview/project/project.component.scss       | 8 ++++++++
 src/assets/styles/_variables.scss                         | 4 ++--
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index 57ebf5b8..1c7415d4 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -71,7 +71,11 @@
        display: flex;
        justify-content: center;
        align-items: center;
- 
+       transition: background-color $transition-long, transform $transition-short;
+
+       &:hover{
+         transform: $transform-scale-grow;
+       }
        svg {
          size: inherit;
          width: 100%;
diff --git a/src/app/modules/project/overview/project/project.component.scss b/src/app/modules/project/overview/project/project.component.scss
index 9f313edc..84b128ea 100644
--- a/src/app/modules/project/overview/project/project.component.scss
+++ b/src/app/modules/project/overview/project/project.component.scss
@@ -60,6 +60,10 @@
     display: grid;
     grid-template-columns: auto 3fr 0.75fr 1fr 1fr;
     gap: 20px;
+    transition: transform $transition-short;
+    &:hover{
+      transform: scale(1.02) // exception on the variables
+    }
     //media query to hide less important info on smaller screens
     @media only screen and (max-width: 1000px) {
       grid-template-columns: auto 3fr 0.75fr;
@@ -145,6 +149,10 @@
     flex-direction: column;
     padding: 20px;
     justify-content: space-between;
+    transition: transform $transition-short;
+    &:hover{
+      transform: $transform-scale-grow;
+    }
     .project-info {
       .top-wrapper {
         display: flex;
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index b3e9e120..fe4c88e1 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -35,5 +35,5 @@ $transform-rotate: rotate(-270deg);
 $transform-scale-grow: scale(1.05);
 $transform-scale-shrink: scale(0.95);
 
-$transition-long: .7s ease-in-out;
-$transition-short: .3s ease-in-out;
+$transition-long: .8s ease-in-out;
+$transition-short: .4s ease-in-out;

From 14339479c34a18f03f22370d7ed8fd6e24838f8a Mon Sep 17 00:00:00 2001
From: Martin Markov <martin.markov28@gmail.com>
Date: Fri, 4 Dec 2020 14:52:11 +0100
Subject: [PATCH 054/141] Debouncing buttons when making requests to the API

---
 package-lock.json                                 | 15 +++++++++++++++
 package.json                                      |  1 +
 .../highlights-modal.component.html               |  4 ++--
 .../modal-highlight-form.component.html           |  6 +++---
 src/app/modules/project/project.module.ts         |  2 ++
 5 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 61a3df92..d95b91e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2923,6 +2923,21 @@
         }
       }
     },
+    "@ngx-lite/debounce-click": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@ngx-lite/debounce-click/-/debounce-click-0.2.3.tgz",
+      "integrity": "sha512-hKqwkjEhSwqBWrg6V7Uz9zqblLEutYhFsFWBPx7dytzP7wb0zgTpoa1NqWKBuwKvawr3jB3pR0LcT9Wf1yzKvA==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
diff --git a/package.json b/package.json
index 059becfe..6b22f9d4 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@angular/platform-browser-dynamic": "~9.1.12",
     "@angular/router": "~9.1.12",
     "@fortawesome/fontawesome-free": "^5.15.1",
+    "@ngx-lite/debounce-click": "^0.2.3",
     "@sentry/browser": "^5.24.2",
     "@webcomponents/webcomponentsjs": "^2.4.4",
     "bootstrap": "^4.5.2",
diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.html b/src/app/modules/project/highlights-modal/highlights-modal.component.html
index c4c25b2b..c4f2ae42 100644
--- a/src/app/modules/project/highlights-modal/highlights-modal.component.html
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.html
@@ -14,13 +14,13 @@ <h2 class="mb-4">Project highlights</h2>
           <div class="col-md-2 col-5 py-2" (click)=onSelectHighlight(highlight)><span
               class="date">{{highlight.endDate | formatDate}}</span></div>
           <div class="col-2 py-2 d-md-none delete">
-            <span class='fas fa-trash trash-icon' (click)="onDeleteHighlight(highlight)"></span>
+            <span class='fas fa-trash trash-icon' ngxDebounceClick (debouncedClick)=onDeleteHighlight(highlight)></span>
           </div>
           <div class="col-md-6 d-sm-flex py-2 text-truncate" (click)=onSelectHighlight(highlight)>
             {{highlight.description}}
           </div>
           <div class="col-md-2 py-2 pr-3 d-none d-md-inline-block text-right delete">
-            <span class='fas fa-trash trash-icon' (click)="onDeleteHighlight(highlight)"></span>
+            <span class='fas fa-trash trash-icon' ngxDebounceClick (debouncedClick)=onDeleteHighlight(highlight)></span>
           </div>
         </div>
       </div>
diff --git a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
index 3ecc1e50..bc8bfe5c 100644
--- a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
+++ b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
@@ -62,17 +62,17 @@ <h3>Highlight description</h3>
     </form>
     <div class="row mt-3">
       <div class="col-sm-5 d-none d-sm-flex">
-        <button *ngIf="canDelete" type="button" class="cancel" (click)="onClickDelete()">
+        <button *ngIf="canDelete" type="button" class="cancel" ngxDebounceClick (debouncedClick)="onClickDelete()">
           Delete highlight
           <span class="fas fa-trash-alt"></span>
         </button>
       </div>
       <div class="col-2 d-sm-none trash-icon">
-        <span *ngIf="canDelete" (click)="onClickDelete()" class='fas fa-trash mobile-trash'></span>
+        <span *ngIf="canDelete" ngxDebounceClick (debouncedClick)="onClickDelete()" class='fas fa-trash mobile-trash'></span>
       </div>
       <div class=" col-10 buttons-bottom col-sm-7 text-right">
           <button type="button" class="cancel" (click)="onClickDeny()">Cancel</button>
-          <button type="button" class="primary" (click)="onClickConfirm()">
+          <button type="button" class="primary" ngxDebounceClick (debouncedClick)="onClickConfirm()">
             Save <span class="fas fa-save"></span>
           </button>
       </div>
diff --git a/src/app/modules/project/project.module.ts b/src/app/modules/project/project.module.ts
index debd12f4..77f631a4 100644
--- a/src/app/modules/project/project.module.ts
+++ b/src/app/modules/project/project.module.ts
@@ -37,6 +37,7 @@ import { Meta } from '@angular/platform-browser';
 import { FormatDatePipe } from 'src/app/utils/format-date.pipe';
 import { HighlightsModalComponent } from './highlights-modal/highlights-modal.component';
 import { ProjectComponent } from 'src/app/modules/project/overview/project/project.component';
+import { NgxDebounceClickModule } from '@ngx-lite/debounce-click';
 
 @NgModule({
   declarations: [
@@ -64,6 +65,7 @@ import { ProjectComponent } from 'src/app/modules/project/overview/project/proje
     BsDropdownModule.forRoot(),
     TooltipModule.forRoot(),
     QuillModule,
+    NgxDebounceClickModule
   ],
   exports: [
     FileUploaderComponent

From 1acd0e9ec311f10fbb4c85098b2177073351738c Mon Sep 17 00:00:00 2001
From: Walter Sajtos <waltersajtos@Outlook.com>
Date: Fri, 4 Dec 2020 16:21:17 +0100
Subject: [PATCH 055/141] Added service

---
 src/app/config/api-config.ts     |  2 ++
 src/app/services/like.service.ts | 39 ++++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 src/app/services/like.service.ts

diff --git a/src/app/config/api-config.ts b/src/app/config/api-config.ts
index 3611dd59..095c1219 100644
--- a/src/app/config/api-config.ts
+++ b/src/app/config/api-config.ts
@@ -27,6 +27,7 @@ export interface ApiConfig {
   externalSearchRoute: string;
   wizardRoute: string;
   uploadFileRoute: string;
+  projectLikes: string;
 }
 
 export const API_CONFIG: ApiConfig = {
@@ -39,4 +40,5 @@ export const API_CONFIG: ApiConfig = {
   embeddedProjectRoute: 'embed',
   wizardRoute: 'wizard',
   uploadFileRoute: 'file',
+  projectLikes: 'project/like'
 };
diff --git a/src/app/services/like.service.ts b/src/app/services/like.service.ts
new file mode 100644
index 00000000..8dee57e2
--- /dev/null
+++ b/src/app/services/like.service.ts
@@ -0,0 +1,39 @@
+/*
+ *  Digital Excellence Copyright (C) 2020 Brend Smits
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Lesser General Public License as published
+ *   by the Free Software Foundation version 3 of the License.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty
+ *   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ *   See the GNU Lesser General Public License for more details.
+ *
+ *   You can find a copy of the GNU Lesser General Public License
+ *   along with this program, in the LICENSE.md file in the root project directory.
+ *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
+ */
+
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { API_CONFIG } from 'src/app/config/api-config';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LikeService {
+
+  protected readonly url = API_CONFIG.url + API_CONFIG.projectLikes;
+
+  constructor(
+      private http: HttpClient) { }
+
+  public likeProject(projectId: number): void {
+    this.http.post(this.url, {projectId: projectId})
+  }
+
+  public removeLike(projectId: number): void {
+    this.http.delete(this.url+projectId)
+  }
+}

From f1f6ae3d7b12fc897e04e2d951d3867901988f78 Mon Sep 17 00:00:00 2001
From: Walter Sajtos <waltersajtos@Outlook.com>
Date: Fri, 4 Dec 2020 16:21:24 +0100
Subject: [PATCH 056/141] Update model

---
 src/app/models/domain/project.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/models/domain/project.ts b/src/app/models/domain/project.ts
index fbf59da1..5b1bbf5d 100644
--- a/src/app/models/domain/project.ts
+++ b/src/app/models/domain/project.ts
@@ -30,4 +30,6 @@ export interface Project {
   uri?: string;
   collaborators?: Collaborator[];
   projectIcon?: UploadFile;
+  userHasLikedProject: boolean;
+  likeCount: number;
 }

From 6ddeaa8deafd4ff7ebd64f0e618ff9d2e576eb08 Mon Sep 17 00:00:00 2001
From: Walter Sajtos <waltersajtos@Outlook.com>
Date: Fri, 4 Dec 2020 16:50:14 +0100
Subject: [PATCH 057/141] Added like functionality to project overview

---
 .../project/overview/project/project.component.html    |  9 ++++++---
 .../project/overview/project/project.component.ts      | 10 +++++++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/app/modules/project/overview/project/project.component.html b/src/app/modules/project/overview/project/project.component.html
index 2a60e8be..9066b35f 100644
--- a/src/app/modules/project/overview/project/project.component.html
+++ b/src/app/modules/project/overview/project/project.component.html
@@ -28,7 +28,10 @@ <h3 class="project-name">{{project.name}}</h3>
       <p class="project-short-description">{{project.shortDescription}}</p>
     </div>
     <ng-container *ngIf="displayTags(); else noLikes">
-      <div (click)="likeClicked($event)" class="item project-likes"><em class='far fa-heart'></em> 0 Likes</div>
+      <div (click)="likeClicked($event)" class="item project-likes">
+        <em [ngClass]="project.userHasLikedProject ? 'fas' : 'far'" class='far fa-heart'></em>
+        {{project.likeCount}} Likes
+      </div>
     </ng-container>
     <ng-template #noLikes>
       <div></div>
@@ -71,8 +74,8 @@ <h3 class="project-name">{{project.name}}</h3>
     <div class='bottom-wrapper'>
       <ng-container *ngIf="displayTags()">
         <div (click)="likeClicked($event)" class='item'>
-          <em class='far fa-heart'></em>
-            <div class="project-likes">0 Likes</div>
+          <em [ngClass]="project.userHasLikedProject ? 'fas' : 'far'" class='fa-heart'></em>
+            <div class="project-likes" (click)="likeClicked($event)">{{project.likeCount}} Likes</div>
         </div>
       </ng-container>
       <div [tooltip]="project.collaborators && project.collaborators.length > 0 ? projectCollaborators : null" class='item'>
diff --git a/src/app/modules/project/overview/project/project.component.ts b/src/app/modules/project/overview/project/project.component.ts
index c2f7417d..c25e78b0 100644
--- a/src/app/modules/project/overview/project/project.component.ts
+++ b/src/app/modules/project/overview/project/project.component.ts
@@ -19,6 +19,7 @@ import { Project } from 'src/app/models/domain/project';
 import { SafeUrl } from '@angular/platform-browser';
 import { FileRetrieverService } from 'src/app/services/file-retriever.service';
 import { environment } from 'src/environments/environment';
+import { LikeService } from 'src/app/services/like.service';
 
 
 @Component({
@@ -33,7 +34,8 @@ export class ProjectComponent {
   @Input() project: Project;
 
   constructor(
-      private fileRetrieverService: FileRetrieverService) {
+      private fileRetrieverService: FileRetrieverService,
+      private likeService: LikeService) {
   }
 
   /**
@@ -54,6 +56,12 @@ export class ProjectComponent {
 
   public likeClicked(event) {
     event.stopPropagation();
+    if(this.project.userHasLikedProject) {
+      this.likeService.likeProject(this.project.id);
+    } else {
+      this.likeService.removeLike(this.project.id);
+    }
+    this.project.userHasLikedProject = !this.project.userHasLikedProject;
   }
 
   /**

From 30a104caa9ed8fe7c9653885169f87c28856bcaf Mon Sep 17 00:00:00 2001
From: Walter Sajtos <waltersajtos@Outlook.com>
Date: Fri, 4 Dec 2020 16:50:24 +0100
Subject: [PATCH 058/141] Added like functionality to project detail

---
 .../modules/project/details/details.component.ts   | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 92ed6e62..a2a2e788 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -38,6 +38,7 @@ import { HighlightByProjectIdService } from 'src/app/services/highlightid.servic
 import { ProjectService } from 'src/app/services/project.service';
 import { SEOService } from 'src/app/services/seo.service';
 import { environment } from 'src/environments/environment';
+import { LikeService } from 'src/app/services/like.service';
 
 /**
  * Overview of a single project
@@ -82,7 +83,8 @@ export class DetailsComponent implements OnInit {
     private highlightByProjectIdService: HighlightByProjectIdService,
     private router: Router,
     private seoService: SEOService,
-    private fileRetrieverService: FileRetrieverService
+    private fileRetrieverService: FileRetrieverService,
+    private likeService: LikeService
   ) { }
 
   ngOnInit(): void {
@@ -327,6 +329,16 @@ export class DetailsComponent implements OnInit {
     this.displayEmbedButton = this.project.user.id === this.currentUser.id;
   }
 
+  public likeClicked(event) {
+    event.stopPropagation();
+    if(this.project.userHasLikedProject) {
+      this.likeService.likeProject(this.project.id);
+    } else {
+      this.likeService.removeLike(this.project.id);
+    }
+    this.project.userHasLikedProject = !this.project.userHasLikedProject;
+  }
+
   private formatTimestamps(highlightTimestamp: string): string {
     const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
     const dayOfTheWeek = days[new Date(highlightTimestamp).getDay()];

From d3f4b5901065760392a54e0789ba125234cc52bf Mon Sep 17 00:00:00 2001
From: Walter Sajtos <waltersajtos@Outlook.com>
Date: Fri, 4 Dec 2020 16:56:36 +0100
Subject: [PATCH 059/141] Updated search-result model

---
 src/app/models/resources/search-result.ts | 2 ++
 src/app/services/like.service.ts          | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/app/models/resources/search-result.ts b/src/app/models/resources/search-result.ts
index ae5b020b..b285ce79 100644
--- a/src/app/models/resources/search-result.ts
+++ b/src/app/models/resources/search-result.ts
@@ -25,4 +25,6 @@ export interface SearchResultResource {
     created: Date;
     updated: Date;
     projectIcon: UploadFile;
+    userHasLikedProject: boolean;
+    likeCount: number;
 }
diff --git a/src/app/services/like.service.ts b/src/app/services/like.service.ts
index 8dee57e2..d5222a66 100644
--- a/src/app/services/like.service.ts
+++ b/src/app/services/like.service.ts
@@ -22,6 +22,7 @@ import { API_CONFIG } from 'src/app/config/api-config';
 @Injectable({
   providedIn: 'root'
 })
+
 export class LikeService {
 
   protected readonly url = API_CONFIG.url + API_CONFIG.projectLikes;

From 036aff5addc170427dca82d2d4803094feadea83 Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Mon, 7 Dec 2020 12:53:33 +0100
Subject: [PATCH 060/141] Updated services

---
 src/app/config/api-config.ts                |  2 +-
 src/app/services/internal-search.service.ts | 25 +++++++++++++++++---
 src/app/services/like.service.ts            |  9 +++----
 src/app/services/pagination.service.ts      | 26 ++++++++++++++++++---
 src/app/services/project.service.ts         | 21 ++++++++++++++++-
 5 files changed, 71 insertions(+), 12 deletions(-)

diff --git a/src/app/config/api-config.ts b/src/app/config/api-config.ts
index 095c1219..4f11339d 100644
--- a/src/app/config/api-config.ts
+++ b/src/app/config/api-config.ts
@@ -40,5 +40,5 @@ export const API_CONFIG: ApiConfig = {
   embeddedProjectRoute: 'embed',
   wizardRoute: 'wizard',
   uploadFileRoute: 'file',
-  projectLikes: 'project/like'
+  projectLikes: 'project/like/'
 };
diff --git a/src/app/services/internal-search.service.ts b/src/app/services/internal-search.service.ts
index ab186c77..c3a4f1cc 100644
--- a/src/app/services/internal-search.service.ts
+++ b/src/app/services/internal-search.service.ts
@@ -20,8 +20,10 @@ import { InternalSearchQuery } from './../models/resources/internal-search-query
 import { Injectable } from '@angular/core';
 import { SearchResultsResource } from '../models/resources/search-results';
 import { API_CONFIG } from '../config/api-config';
-import { Observable } from 'rxjs';
+import { from, Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
+import { AuthService } from './auth.service';
+import { mergeMap } from 'rxjs/operators';
 
 /**
  * Service to communicate with the InteralSearchEndpoint of the API.
@@ -33,7 +35,7 @@ export class InternalSearchService {
 
   private readonly url = `${API_CONFIG.url}${API_CONFIG.internalSearchRoute}/`;
 
-  constructor(private http: HttpClient) {
+  constructor(private http: HttpClient, private authService: AuthService) {
   }
 
   getSearchResultsPaginated(internalSearchQuery: InternalSearchQuery): Observable<SearchResultsResource> {
@@ -55,6 +57,23 @@ export class InternalSearchService {
       url += `?${params}`;
     }
 
-    return this.http.get<SearchResultsResource>(url);
+    return this.http.get<SearchResultsResource>(url)
+        .pipe(
+            mergeMap(result => from(
+                this.addLikes(result)
+            ))
+        );
+  }
+
+  private addLikes(searchResult): Promise<SearchResultsResource> {
+    return this.authService.getBackendUser()
+        .then(currentUser => {
+          searchResult.results.map(project => {
+            project.likeCount = project.likes.length ? project.likes.length : 0;
+            project.userHasLikedProject = project.likes.filter(like => like.userId === currentUser.id).length > 0;
+            return project;
+          })
+          return searchResult
+        });
   }
 }
diff --git a/src/app/services/like.service.ts b/src/app/services/like.service.ts
index d5222a66..09db6993 100644
--- a/src/app/services/like.service.ts
+++ b/src/app/services/like.service.ts
@@ -18,6 +18,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { API_CONFIG } from 'src/app/config/api-config';
+import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
@@ -30,11 +31,11 @@ export class LikeService {
   constructor(
       private http: HttpClient) { }
 
-  public likeProject(projectId: number): void {
-    this.http.post(this.url, {projectId: projectId})
+  public likeProject(projectId: number): Observable<any> {
+    return this.http.post(this.url+projectId, {})
   }
 
-  public removeLike(projectId: number): void {
-    this.http.delete(this.url+projectId)
+  public removeLike(projectId: number): Observable<any> {
+    return this.http.delete(this.url+projectId)
   }
 }
diff --git a/src/app/services/pagination.service.ts b/src/app/services/pagination.service.ts
index 11883d71..2b962b65 100644
--- a/src/app/services/pagination.service.ts
+++ b/src/app/services/pagination.service.ts
@@ -2,8 +2,10 @@ import { InternalSearchQuery } from 'src/app/models/resources/internal-search-qu
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { API_CONFIG } from '../config/api-config';
-import { Observable } from 'rxjs';
+import { from, Observable } from 'rxjs';
 import { SearchResultsResource } from '../models/resources/search-results';
+import { AuthService } from './auth.service';
+import { mergeMap } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
@@ -12,7 +14,7 @@ export class PaginationService {
   protected http: HttpClient;
   protected readonly url: string = API_CONFIG.url + API_CONFIG.projectRoute;
 
-  constructor(http: HttpClient) {
+  constructor(http: HttpClient, private authService: AuthService) {
     this.http = http;
   }
 
@@ -39,6 +41,24 @@ export class PaginationService {
     if (params !== '') {
       url += `?${params}`;
     }
-    return this.http.get<SearchResultsResource>(url);
+
+    return this.http.get<SearchResultsResource>(url)
+        .pipe(
+            mergeMap(result => from(
+                this.addLikes(result)
+            ))
+        );
+  }
+
+  private addLikes(searchResult): Promise<SearchResultsResource> {
+    return this.authService.getBackendUser()
+        .then(currentUser => {
+          searchResult.results.map(project => {
+            project.likeCount = project.likes.length ? project.likes.length : 0;
+            project.userHasLikedProject = project.likes.filter(like => like.userId === currentUser.id).length > 0;
+            return project;
+          })
+          return searchResult
+        });
   }
 }
diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts
index 773bafa4..1b7bd8b2 100644
--- a/src/app/services/project.service.ts
+++ b/src/app/services/project.service.ts
@@ -22,12 +22,31 @@ import { Project } from '../models/domain/project';
 import { ProjectAdd } from '../models/resources/project-add';
 import { ProjectUpdate } from '../models/resources/project-update';
 import { HttpBaseService } from './http-base.service';
+import { from, Observable } from 'rxjs';
+import { AuthService } from './auth.service';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ProjectService extends HttpBaseService<Project, ProjectAdd, ProjectUpdate> {
-  constructor(http: HttpClient) {
+  constructor(http: HttpClient, private authService: AuthService) {
     super(http, API_CONFIG.url + API_CONFIG.projectRoute);
   }
+
+  get(id: number): Observable<Project> {
+    return super.get(id)
+        .pipe(project =>
+            from(this.addLikes(project))
+        );
+  }
+
+  private addLikes(project): Promise<Project> {
+    console.log(project)
+    return this.authService.getBackendUser()
+        .then(currentUser => {
+            project.likeCount = project.likes?.length ? project.likes.length : 0;
+            project.userHasLikedProject = project.likes?.filter(like => like.userId === currentUser.id).length > 0;
+            return project;
+          })
+  };
 }

From 7165fe924f1e0181cab696f9e455ccae8fb4d186 Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Mon, 7 Dec 2020 12:53:42 +0100
Subject: [PATCH 061/141] Updated models

---
 src/app/models/domain/project.ts          | 2 ++
 src/app/models/domain/projectLike.ts      | 4 ++++
 src/app/models/resources/search-result.ts | 2 ++
 3 files changed, 8 insertions(+)
 create mode 100644 src/app/models/domain/projectLike.ts

diff --git a/src/app/models/domain/project.ts b/src/app/models/domain/project.ts
index 5b1bbf5d..cbe9cfee 100644
--- a/src/app/models/domain/project.ts
+++ b/src/app/models/domain/project.ts
@@ -18,6 +18,7 @@
 import { User } from './user';
 import { Collaborator } from './collaborator';
 import { UploadFile } from './uploadFile';
+import { ProjectLike } from './projectLike';
 
 export interface Project {
   id: number;
@@ -30,6 +31,7 @@ export interface Project {
   uri?: string;
   collaborators?: Collaborator[];
   projectIcon?: UploadFile;
+  likes?: Array<ProjectLike>;
   userHasLikedProject: boolean;
   likeCount: number;
 }
diff --git a/src/app/models/domain/projectLike.ts b/src/app/models/domain/projectLike.ts
new file mode 100644
index 00000000..1b6896f6
--- /dev/null
+++ b/src/app/models/domain/projectLike.ts
@@ -0,0 +1,4 @@
+export interface ProjectLike {
+  userId: number;
+  data: Date;
+}
diff --git a/src/app/models/resources/search-result.ts b/src/app/models/resources/search-result.ts
index b285ce79..6b01c500 100644
--- a/src/app/models/resources/search-result.ts
+++ b/src/app/models/resources/search-result.ts
@@ -17,8 +17,10 @@
  *
  */
 import { UploadFile } from '../domain/uploadFile';
+import { ProjectLike } from '../domain/projectLike';
 
 export interface SearchResultResource {
+    likes: Array<ProjectLike>;
     id: number;
     name: string;
     shortDescription: string;

From 16ea3a5f3737c468bd748437dc44f727f656561d Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Mon, 7 Dec 2020 12:54:27 +0100
Subject: [PATCH 062/141] Updated components

---
 src/app/modules/project/details/details.component.ts     | 1 +
 src/app/modules/project/overview/overview.component.ts   | 9 +++++++--
 .../project/overview/project/project.component.ts        | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index a2a2e788..d49fd7cf 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -109,6 +109,7 @@ export class DetailsComponent implements OnInit {
       )
       .subscribe(
         (result) => {
+          console.log(result)
           this.project = result;
           const desc = (this.project.shortDescription) ? this.project.shortDescription : this.project.description;
           this.determineDisplayEditProjectButton();
diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts
index 7378dfb3..48890751 100644
--- a/src/app/modules/project/overview/overview.component.ts
+++ b/src/app/modules/project/overview/overview.component.ts
@@ -28,6 +28,7 @@ import { environment } from 'src/environments/environment';
 import { SelectFormOption } from 'src/app/interfaces/select-form-option';
 import { SearchResultsResource } from 'src/app/models/resources/search-results';
 import { SEOService } from 'src/app/services/seo.service';
+import { AuthService } from '../../../services/auth.service';
 
 interface SortFormResult {
   type: string;
@@ -154,7 +155,8 @@ export class OverviewComponent implements OnInit {
     private internalSearchService: InternalSearchService,
     private formBuilder: FormBuilder,
     private activatedRoute: ActivatedRoute,
-    private seoService: SEOService) {
+    private seoService: SEOService,
+    private authService: AuthService) {
     this.searchControl = new FormControl('');
 
     this.categoryForm = this.formBuilder.group({
@@ -346,8 +348,11 @@ export class OverviewComponent implements OnInit {
   /**
    * Method to handle the response of the call to the project or search service.
    */
-  private handleSearchAndProjectResponse(response: SearchResultsResource): void {
+  private async handleSearchAndProjectResponse(response: SearchResultsResource): Promise<void> {
     this.paginationResponse = response;
+
+    console.log(response)
+
     this.projects = response.results;
     this.projectsToDisplay = response.results;
     this.totalNrOfProjects = response.totalCount;
diff --git a/src/app/modules/project/overview/project/project.component.ts b/src/app/modules/project/overview/project/project.component.ts
index c25e78b0..382d32c9 100644
--- a/src/app/modules/project/overview/project/project.component.ts
+++ b/src/app/modules/project/overview/project/project.component.ts
@@ -56,7 +56,7 @@ export class ProjectComponent {
 
   public likeClicked(event) {
     event.stopPropagation();
-    if(this.project.userHasLikedProject) {
+    if(!this.project.userHasLikedProject) {
       this.likeService.likeProject(this.project.id);
     } else {
       this.likeService.removeLike(this.project.id);

From 793a93de6a939d3a7dafb6d6eb98f69f338b2a33 Mon Sep 17 00:00:00 2001
From: Martin Markov <martin.markov28@gmail.com>
Date: Mon, 7 Dec 2020 13:59:46 +0100
Subject: [PATCH 063/141] Merge branch 'develop' into
 feature/294-implement-update-highlight

---
 CHANGELOG.md                                  |   1 +
 .../collaborator/collaborator.component.html  |  11 +
 .../collaborator/collaborator.component.scss  |  81 +++++
 .../collaborator/collaborator.component.ts    |  35 ++
 .../project/details/details.component.html    | 132 ++++---
 .../project/details/details.component.scss    | 343 ++++++++++++++----
 .../project/details/details.component.ts      | 114 +++---
 .../embed-button/embed-button.component.html  |   6 +-
 .../embed-button/embed-button.component.scss  |  39 +-
 .../project/overview/overview.component.ts    |  78 +++-
 .../modules/project/project-routing.module.ts |   6 +-
 src/app/modules/project/project.module.ts     |  16 +-
 src/assets/styles/_variables.scss             |   3 +
 13 files changed, 675 insertions(+), 190 deletions(-)
 create mode 100644 src/app/modules/project/collaborator/collaborator.component.html
 create mode 100644 src/app/modules/project/collaborator/collaborator.component.scss
 create mode 100644 src/app/modules/project/collaborator/collaborator.component.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f2d67b82..90b5f375 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Redesigned project overview page [#365](https://github.com/DigitalExcellence/dex-frontend/issues/365)
+- Implemented redesigned project details page [#362](https://github.com/DigitalExcellence/dex-frontend/issues/362)
 
 ### Deprecated
 
diff --git a/src/app/modules/project/collaborator/collaborator.component.html b/src/app/modules/project/collaborator/collaborator.component.html
new file mode 100644
index 00000000..aeb1db13
--- /dev/null
+++ b/src/app/modules/project/collaborator/collaborator.component.html
@@ -0,0 +1,11 @@
+<div class="collaborator-wrapper">
+  <div class="role">{{collaborator.role}}</div>
+  <div class="orange">
+    <div class="name">{{collaborator.fullName}}</div>
+    <ng-container *ngIf="isProduction()">
+      <div class="follow" (click)="onFollowClick(collaborator.id)">
+        <span>+</span>
+      </div>
+    </ng-container>
+  </div>
+</div>
diff --git a/src/app/modules/project/collaborator/collaborator.component.scss b/src/app/modules/project/collaborator/collaborator.component.scss
new file mode 100644
index 00000000..54d82299
--- /dev/null
+++ b/src/app/modules/project/collaborator/collaborator.component.scss
@@ -0,0 +1,81 @@
+/*
+ *
+ *  Digital Excellence Copyright (C) 2020 Brend Smits
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Lesser General Public License as published
+ *   by the Free Software Foundation version 3 of the License.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty
+ *   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ *   See the GNU Lesser General Public License for more details.
+ *
+ *   You can find a copy of the GNU Lesser General Public License
+ *   along with this program, in the LICENSE.md file in the root project directory.
+ *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
+ *
+ */
+@import "assets/styles/variables";
+
+.collaborator-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1.25fr;
+  align-content: stretch;
+  border-radius: 999px;
+  border: 2px solid $accent-color-red-primary;
+  margin-bottom: 2px;
+  align-items: center;
+  line-height: 1;
+  .role {
+    padding: 0 15px;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: $accent-color-red-primary;
+    white-space: nowrap;
+  }
+
+  .orange {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 28px;
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+
+    background-color: $accent-color-red-primary;
+    color: white;
+    border-radius: 999px;
+    .name {
+      padding: 0 15px;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .follow {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28px;
+      color: white;
+      min-width: 38px;
+      border-left: 1px solid white;
+      background-color: $accent-color-red-primary;
+      max-height: 100%;
+      height: 100%;
+      &:hover{
+        background-color: $accent-color-red-secondary;
+        cursor: pointer;
+      }
+    }
+
+  }
+
+  div {
+    display: inline-block;
+  }
+}
diff --git a/src/app/modules/project/collaborator/collaborator.component.ts b/src/app/modules/project/collaborator/collaborator.component.ts
new file mode 100644
index 00000000..24686fb9
--- /dev/null
+++ b/src/app/modules/project/collaborator/collaborator.component.ts
@@ -0,0 +1,35 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Collaborator } from 'src/app/models/domain/collaborator';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-collaborator',
+  templateUrl: './collaborator.component.html',
+  styleUrls: ['./collaborator.component.scss']
+})
+export class CollaboratorComponent implements OnInit {
+
+  @Input() collaborator: Collaborator;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  /**
+   * Method that is called when a user clicks the follow button on a collaborator
+   * This functionality is not implemented YET
+   */
+  public onFollowClick(projectId: number) {
+    // TODO: Implement this function when following users is added to the backend
+  }
+
+  /**
+   * Check whether the the application is running in production mode
+   * So we can hide the items that are not implemented yet
+   */
+  public isProduction(): boolean {
+    return !environment.production;
+  }
+
+}
diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html
index adce81f0..1595e03a 100644
--- a/src/app/modules/project/details/details.component.html
+++ b/src/app/modules/project/details/details.component.html
@@ -27,54 +27,45 @@
 <ng-template #projectLoaded>
   <div *ngIf="project; else noProject">
     <div class="row">
-      <div class="col-3 project-metadata">
-        <div class="project-icon" style="background-color: unset">
-          <img [src]="getIconUrl()" alt="Code project" loading="lazy"
-            onerror="this.src='/assets/images/placeholder.svg';">
-        </div>
-        <div *ngIf="project.uri" class="project-metadata__item">
-          <h3>External Link</h3>
-
-          <a href="{{ project.uri }}" rel="noreferrer noopener" target="_blank">{{ project.uri }}</a>
+      <!-- on this spot should be an image or a bootstrap carrousel after the wizard is finished
+      <img src="https://www.rover.com/blog/wp-content/uploads/2019/06/bernese-mountain-dog-1177074_1920-960x540.jpg" alt="project-detail-image"> -->
+      <div class='project-modal-content '>
+        <div id="title-wrapper">
+          <h2 class="project-title">{{ project.name }}</h2>
+          <div class="circle" style="background-color: unset">
+            <img [src]="getIconUrl()" alt="Code project" loading="lazy" onerror="this.src='/assets/images/placeholder.svg';">
+          </div>
 
         </div>
-        <div class="project-metadata__item">
-          <h3>Upload Date</h3>
-          <p>
-            {{ project.created | date:'longDate' }}
-          </p>
-        </div>
-        <div class="project-metadata__item">
-          <h3>Uploader</h3>
-          <p>
-            {{ project.user.name }}
-          </p>
-        </div>
-        <div class="project-metadata__item">
-          <h3>Collaborators</h3>
-          <ul class="project-metadata__item__collaborators">
-            <li *ngFor="let collaborator of project.collaborators">{{ collaborator.fullName }} -
-              {{ collaborator.role}}</li>
-          </ul>
-        </div>
-      </div>
-      <div class="col-9">
-        <div id="title-wrapper">
-          <h1 class="project-title">{{ project.name }}</h1>
+        <div class=" project-metadata">
+          <div *ngIf="project.uri" class="project-metadata__item">
+            <p class='title'>Uploader <em class="fas fa-user"></em></p>
+            <p>
+              {{ project.user.name }}
+          </div>
+          <div class="project-metadata__item">
+            <p class='title'>External Link <em class="fas fa-external-link-alt"></em></p>
 
-          <div id="project-edit-buttons">
-            <ng-container *ngIf="displayEditButton">
-              <button class="primary" routerLink="/project/edit/{{ project?.id }}"><img alt="" loading="lazy"
-                  src="assets/images/edit.svg"></button>
-            </ng-container>
-            <ng-container *ngIf="displayDeleteProjectButton">
-              <button (click)="onClickRemoveProject()" class="primary"><img alt="" loading="lazy"
-                  src="assets/images/trash.svg"></button>
-            </ng-container>
+            <a class='hover' href="{{ project.uri }}" rel="noreferrer noopener" target="_blank">{{ project.uri }}</a>
+
+          </div>
+          <ng-container *ngIf="isProduction()">
+            <div class="project-metadata__item">
+              <p class='title'>Likes <em class="fas fa-heart"></em></p>
+              <p><em class="far fa-heart"></em> 120</p>
+            </div>
+          </ng-container>
+          <div class="project-metadata__item" [tooltip]="projectUpdated">
+            <p class='title cursor-pointer'>Upload Date <em class="fas fa-calendar"></em></p>
+            <p class='hover'>{{ project.created | date:'longDate' }}</p>
+            <ng-template #projectUpdated>
+              <p>Created: {{project.created | date: 'mediumDate'}}</p>
+              <p>Updated: {{project.updated | date: 'mediumDate'}}</p>
+            </ng-template>
           </div>
         </div>
 
-        <ng-container *ngIf="displayTags()">
+        <ng-container *ngIf="isProduction()">
           <div class="project-tags">
             <a class="project-tags__tag" href="javascript:void(0)">
               Game
@@ -99,19 +90,56 @@ <h1 class="project-title">{{ project.name }}</h1>
             </a>
           </div>
         </ng-container>
+        <hr>
 
-        <div class="project-description large">
-          <div [innerHTML]="project.description | safeHtml" class="dex-quill-viewer"></div>
-        </div>
-
-        <div id="project-share-buttons">
-          <div class="project-highlighted-div">
-            <button class="primary ml-2" (click)="onClickEditHighlightButton()">Project highlights</button>
+        <div class='bottom'>
+          <div class='menu-wrapper'>
+            <div class='menu'>
+              <div (click)="setActiveTab('description')" [ngClass]="{'active': this.activeTab == 'description' }" class='item'>
+                Description
+              </div>
+              <ng-container *ngIf="isProduction()">
+                <div (click)="setActiveTab('contact')" [ngClass]="{'active': this.activeTab == 'contact' }" class='item'>
+                  Contact
+                </div>
+              </ng-container>
+              <div (click)="setActiveTab('collaborators')" [ngClass]="{'active': this.activeTab == 'collaborators' }" class='item'>
+                Collaborators
+              </div>
+            </div>
+            <ng-container *ngIf="displayHighlightButton || displayEditButton || displayDeleteProjectButton">
+              <em [popover]="cogPopOver"  class="fas fa-cog cog" placement="bottom" triggers="click" [outsideClick]="true">
+              </em>
+              <ng-template #cogPopOver class="cog-tooltip">
+                <ng-container *ngIf="displayHighlightButton">
+                  <a (click)="onClickEditHighlightButton()" class="cog-tooltip-item"><em class="fas fa-highlighter"></em>Hightlight settings</a>
+                </ng-container>
+                <ng-container *ngIf="displayEditButton">
+                  <a class="cog-tooltip-item" (click)="closeModalAndRedirect('project/edit/'+ project?.id)"><em class="fas fa-edit"></em>Edit project</a>
+                </ng-container>
+                <ng-container *ngIf="displayDeleteProjectButton">
+                  <a class="cog-tooltip-item" (click)="closeModalAndRedirect('project/delete/'+ project?.id)"><em class="fas fa-trash"></em>Delete project</a>
+                </ng-container>
+              </ng-template>
+            </ng-container>
           </div>
 
-          <ng-container *ngIf="displayEmbedButton">
-            <app-embed-button [projectId]=project.id></app-embed-button>
-          </ng-container>
+          <div class='tab-content'>
+            <ng-container *ngIf=" this.activeTab == 'description' " class="project-description large">
+              <p [innerHTML]="project.description | safeHtml" class="dex-quill-viewer"></p>
+              <ng-container *ngIf="displayEmbedButton">
+                <app-embed-button [projectId]=project.id></app-embed-button>
+              </ng-container>
+            </ng-container>
+            <ng-container *ngIf=" this.activeTab == 'contact' ">
+              <p>contact</p>
+            </ng-container>
+            <ng-container *ngIf=" this.activeTab == 'collaborators' ">
+              <div class='collaborators'>
+                <app-collaborator *ngFor="let collaborator of project.collaborators" [collaborator]="collaborator"></app-collaborator>
+              </div>
+            </ng-container>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/app/modules/project/details/details.component.scss b/src/app/modules/project/details/details.component.scss
index f2c140df..dfd9a314 100644
--- a/src/app/modules/project/details/details.component.scss
+++ b/src/app/modules/project/details/details.component.scss
@@ -51,95 +51,304 @@
   }
 }
 
-.project-metadata__item {
-  margin: 30px 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  h3,
-  p {
-    margin: 0;
+.row {
+  margin: 0;
+  max-width: 100%;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.modal-dialog {
+  width: 800px;
+  max-width: 90vw;
+  margin: 60px auto 30px auto;
+  border: none;
+
+  .modal-content {
+    border: none;
+    width: fit-content;
+    margin: 0 auto;
+    max-width: 100%;
   }
+}
 
-  a {
-    font-weight: normal;
-    font-family: "Lato", sans-serif;
-    width: inherit;
-    &:link {
-      color: $light-mode-grey-primary;
+.project-modal-content {
+  border: none;
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  width: 800px;
+  max-width: 100%;
+
+  #title-wrapper {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    justify-content: space-between;
+    gap: 20px;
+    min-height: 70px;
+    h2 {
+      margin: 0;
+      display: block;
+      display: -webkit-box;
+      max-width: 100%;
+      max-height: 74px;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .circle {
+      place-content: center;
+      background-color: $accent-color-red-primary;
+      width: 60px;
+      min-width: 60px;
+      height: 60px;
+      border-radius: 999px;
+      overflow: hidden;
+      box-shadow: 0 0px 4px #0000001a;
+
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+      }
+    }
+
+    button {
+      margin-left: 15px;
     }
   }
+  .project-metadata {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 20px;
+    @media screen and (max-width: 769px) {
+      grid-template-columns: 1fr 1fr;
+    }
+    .project-metadata__item {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      ul {
+        margin: 0;
+      }
+      .title {
+        font-weight: bold;
+        color: $light-mode-black;
+        margin-bottom: 5px;
+        display: flex;
+        align-items: center;
+        em {
+          margin-left: 4px;
+          font-size: 13px;
+        }
+      }
+      h3,
+      p {
+        margin: 0;
+      }
+
+      a {
+        font-weight: normal;
+        font-family: "Lato", sans-serif;
+        width: inherit;
+        &:link {
+          color: $light-mode-grey-primary;
+        }
+      }
+
+      ul {
+        font-family: "Lato", sans-serif;
+        color: $light-mode-grey-primary;
+        padding: 0;
+      }
+    }
+    .hover {
+      &:hover {
+        opacity: 0.75;
+        color: $accent-color-red-primary !important;
+        cursor: pointer;
+      }
+    }
+    .project-metadata__item__collaborators {
+      list-style: none;
+    }
+
+    .tooltip-inner {
+      background-color: white;
+      color: black;
+      border-color: white;
+      padding: 8px 12px;
+    }
+    .tooltip {
+      filter: drop-shadow($box-shadow);
+
+      p {
+        margin: 2px 0;
+        text-align: left;
+      }
 
-  ul {
-    font-family: "Lato", sans-serif;
-    color: $light-mode-grey-primary;
-    padding: 0;
+      &.show {
+        opacity: 1;
+      }
+    }
+    .tooltip.bs-tooltip-right .arrow:before {
+      border-right-color: #fff !important;
+    }
+    .tooltip.bs-tooltip-left .arrow:before {
+      border-left-color: #fff !important;
+    }
+    .tooltip.bs-tooltip-bottom .arrow:before {
+      border-bottom-color: #fff !important;
+    }
+    .tooltip.bs-tooltip-top .arrow:before {
+      border-top-color: #fff !important;
+    }
   }
-}
 
-.project-metadata__item__collaborators {
-  list-style: none;
-}
+  .project-title {
+    margin-top: 0;
+  }
+  .project-tags {
+    display: flex;
+    flex-wrap: wrap;
 
-.project-title {
-  margin-top: 0;
-}
+    .project-tags__tag {
+      text-decoration: none;
+      background: $accent-color-red-primary;
+      color: #fff;
+      border-radius: 999px;
+      padding: 3px 20px;
+      box-shadow: rgba(0, 0, 0, 0.15) 0 3px 5px;
+      margin: 5px 5px 5px 0;
+      font-size: 12px;
+    }
 
-.project-tags {
-  display: flex;
-  flex-wrap: wrap;
-
-  .project-tags__tag {
-    text-decoration: none;
-    background: $accent-color-red-primary;
-    color: #fff;
-    border-radius: 3px;
-    padding: 3px 20px;
-    box-shadow: rgba(0, 0, 0, 0.15) 0 3px 5px;
-    margin: 5px 5px 5px 0;
-    font-size: 12px;
+    .project-tags__see-more-link {
+      align-self: center;
+      margin-left: 15px;
+      color: $light-mode-black;
+    }
   }
 
-  .project-tags__see-more-link {
-    align-self: center;
-    margin-left: 15px;
+  hr {
+    margin: 0;
+    width: 100%;
+    border-top: 0.5px solid rgba(0, 0, 0, 0.1);
   }
-}
 
-.project-description {
-  margin-top: 30px;
-  max-width: 800px;
-}
+  .bottom {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
 
-#project-share-buttons {
-  display: flex;
-  margin-top: 60px;
+    .menu-wrapper {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      gap: 30px;
+
+      .menu {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 15px;
+
+        .item {
+          height: fit-content;
+          font-weight: bold;
+          padding-bottom: 4px;
+          cursor: pointer;
 
-  button:first-child {
-    margin-left: 0 !important;
+          &.active {
+            border-bottom: 3px solid $accent-color-red-primary;
+          }
+          &:hover {
+            color: $accent-color-red-primary;
+            opacity: 0.75;
+          }
+        }
+      }
+      .cog {
+        color: $light-mode-black;
+        margin-left: auto;
+        opacity: 0.8;
+        cursor: pointer;
+        font-size: 15px;
+        &:hover {
+          opacity: 1;
+        }
+      }
+      .popover {
+        border: none;
+        filter: drop-shadow($box-shadow);
+        .arrow::before {
+          display: none !important;
+        }
+      }
+      .cog-tooltip-item {
+        color: $light-mode-black;
+        text-align: left;
+        cursor: pointer;
+        display: grid;
+        grid-template-columns: 16px 1fr;
+        align-items: center;
+        gap: 8px;
+        em {
+          color: $accent-color-red-primary;
+        }
+        &:hover {
+          color: $accent-color-red-primary !important;
+          opacity: 0.75;
+          text-decoration: none;
+        }
+      }
+      p {
+        margin: 0;
+      }
+    }
+    .tab-content {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      p {
+        margin: 0;
+      }
+      .collaborators {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        gap: 16px;
+      }
+    }
   }
 
-  button {
-    margin-right: 20px;
+  .project-highlighted-div {
+    float: left;
   }
-}
 
-#project-edit-buttons {
-  margin-top: 15px;
-  display: flex;
+  #project-share-buttons {
+    display: flex;
+    margin-top: 60px;
+
+    button:first-child {
+      margin-left: 0 !important;
+    }
 
-  button {
-    border-radius: 18px;
-    width: 36px;
-    height: 36px;
-    padding: 0;
+    button {
+      margin-right: 20px;
+    }
   }
-}
 
-#title-wrapper {
-  display: flex;
-  justify-content: space-between;
+  #project-edit-buttons {
+    margin-top: 15px;
+    display: flex;
 
-  button {
-    margin-left: 15px;
+    button {
+      border-radius: 18px;
+      width: 36px;
+      height: 36px;
+      padding: 0;
+    }
   }
 }
diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 7e1e76d2..3b60dd90 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -14,9 +14,8 @@
  *   along with this program, in the LICENSE.md file in the root project directory.
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  */
-
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { environment } from 'src/environments/environment';
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Project } from 'src/app/models/domain/project';
 import { ProjectService } from 'src/app/services/project.service';
@@ -52,6 +51,9 @@ import { HighlightsModalComponent } from '../highlights-modal/highlights-modal.c
   encapsulation: ViewEncapsulation.None
 })
 export class DetailsComponent implements OnInit {
+
+  @Input() projectId: number;
+
   /**
    * Variable to store the project which is retrieved from the api
    */
@@ -64,6 +66,11 @@ export class DetailsComponent implements OnInit {
   public displayHighlightButton = false;
   public displayEmbedButton = false;
 
+  /**
+   * Property to indicate which tab is selected
+   */
+  public activeTab = 'description';
+
   /**
    * Property to indicate whether the project is loading.
    */
@@ -90,52 +97,47 @@ export class DetailsComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
-    const routeId = this.activedRoute.snapshot.params.id.split('-')[0];
-    if (!routeId) {
-      return;
-    }
-    const id = Number(routeId);
-    if (id == null || Number.isNaN(id) || id < 1) {
-      this.invalidId = routeId;
-      return;
-    }
-
-    this.authService.authNavStatus$.subscribe((status) => {
-      this.isAuthenticated = status;
-    });
-    this.currentUser = this.authService.getCurrentBackendUser();
-
-    this.projectService.get(id)
-      .pipe(
-        finalize(() => this.projectLoading = false)
-      )
-      .subscribe(
-        (result) => {
-          this.project = result;
-          const desc = (this.project.shortDescription) ? this.project.shortDescription : this.project.description;
-          this.determineDisplayEditProjectButton();
-          this.determineDisplayDeleteProjectButton();
-          this.determineDisplayEmbedButton();
-          this.determineDisplayHighlightButton();
-
-          // Updates meta and title tags
-          this.seoService.updateDescription(desc);
-          this.seoService.updateTitle(this.project.name);
-        }
-      );
+      if (this.projectId == null || Number.isNaN(this.projectId) || this.projectId < 1) {
+        this.invalidId = this.projectId.toString();
+        return;
+      }
 
-    if (this.authService.currentBackendUserHasScope(scopes.HighlightRead)) {
-      this.highlightByProjectIdService.getHighlightsByProjectId(id)
-        .subscribe(highlights => {
-          if (highlights == null) {
-            return;
-          }
-          if (highlights.length > 0) {
-            this.isProjectHighlighted = true;
-          }
-        });
+      this.authService.authNavStatus$.subscribe((status) => {
+        this.isAuthenticated = status;
+      });
+      this.currentUser = this.authService.getCurrentBackendUser();
+
+      this.projectService.get(this.projectId)
+          .pipe(
+              finalize(() => this.projectLoading = false)
+          )
+          .subscribe(
+              (result) => {
+                this.project = result;
+                const desc = (this.project.shortDescription) ? this.project.shortDescription : this.project.description;
+                this.determineDisplayEditProjectButton();
+                this.determineDisplayDeleteProjectButton();
+                this.determineDisplayEmbedButton();
+                this.determineDisplayHighlightButton();
+
+                // Updates meta and title tags
+                this.seoService.updateDescription(desc);
+                this.seoService.updateTitle(this.project.name);
+              }
+          );
+
+      if (this.authService.currentBackendUserHasScope(scopes.HighlightRead)) {
+        this.highlightByProjectIdService.getHighlightsByProjectId(this.projectId)
+            .subscribe(highlights => {
+              if (highlights == null) {
+                return;
+              }
+              if (highlights.length > 0) {
+                this.isProjectHighlighted = true;
+              }
+            });
+      }
     }
-  }
 
   /**
    * Highlight a project by calling the API
@@ -210,9 +212,9 @@ export class DetailsComponent implements OnInit {
 
   /**
    * Method to display the tags based on the environment variable.
-   * Tags should be hidden in production for now untill futher implementation is finished.
+   * Tags should be hidden in production for now until further implementation is finished.
    */
-  public displayTags(): boolean {
+  public isProduction(): boolean {
     return !environment.production;
   }
 
@@ -261,6 +263,13 @@ export class DetailsComponent implements OnInit {
     return this.fileRetrieverService.getIconUrl(this.project.projectIcon);
   }
 
+  /**
+   * Method to set the tab to the active tab from the params
+   */
+  public setActiveTab(newActiveTab): void {
+    this.activeTab = newActiveTab;
+  }
+
   /**
    * Method to display the edit project button based on the current user and the project user.
    * If the user either has the ProjectWrite scope or is the creator of the project
@@ -307,6 +316,15 @@ export class DetailsComponent implements OnInit {
     this.displayHighlightButton = false;
   }
 
+  /**
+   * Method to close the modal and redirect to a different page
+   * @param url the url to redirect to
+   */
+  public closeModalAndRedirect(url: string) {
+    this.modalService.hide(1);
+    this.router.navigateByUrl(url);
+  }
+
   /**
    * Method to display the embed button based on the current user and the project user.
    * If the user either has the EmbedWrite scope or is the creator of the project
diff --git a/src/app/modules/project/embed-button/embed-button.component.html b/src/app/modules/project/embed-button/embed-button.component.html
index 3b79f166..d267a08c 100644
--- a/src/app/modules/project/embed-button/embed-button.component.html
+++ b/src/app/modules/project/embed-button/embed-button.component.html
@@ -1,9 +1,9 @@
-<button (click)="onClickGenerateEmbed()" class="primary ml-2">Embed this</button>
-<pre>
+<div class='wrapper'>
+  <button (click)="onClickGenerateEmbed()" class="primary">Embed this</button>
   <code *ngIf="embeddedProject">
     &lt;iframe src="{{frontendUrl}}/project/embed/{{embeddedProject.guid}}"
     style="border:0px #ffffff none;" name="myiFrame" scrolling="no" 
     frameborder="1" marginheight="0px" marginwidth="0px" 
     height="400px" width="600px" allowfullscreen>&lt;/iframe>
   </code>
-</pre>
+</div>
diff --git a/src/app/modules/project/embed-button/embed-button.component.scss b/src/app/modules/project/embed-button/embed-button.component.scss
index 4b28d649..68fe9683 100644
--- a/src/app/modules/project/embed-button/embed-button.component.scss
+++ b/src/app/modules/project/embed-button/embed-button.component.scss
@@ -1,6 +1,35 @@
-pre code {
-    background-color: #eee;
-    border: 1px solid #999;
+
+/*
+ *
+ *  Digital Excellence Copyright (C) 2020 Brend Smits
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Lesser General Public License as published
+ *   by the Free Software Foundation version 3 of the License.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty
+ *   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ *   See the GNU Lesser General Public License for more details.
+ *
+ *   You can find a copy of the GNU Lesser General Public License
+ *   along with this program, in the LICENSE.md file in the root project directory.
+ *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
+ *
+ */
+ @import "assets/styles/variables";
+ .wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  button{
+    width: fit-content;
+  }
+  code {
+    border-radius: $border-radius;
+    border: 0.5px solid rgba(0, 0, 0, 0.1);
     display: block;
-    padding: 10px;
-  }
\ No newline at end of file
+    padding: 8px;
+    color: black;
+  }
+}
\ No newline at end of file
diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts
index 7378dfb3..a2e149e9 100644
--- a/src/app/modules/project/overview/overview.component.ts
+++ b/src/app/modules/project/overview/overview.component.ts
@@ -14,8 +14,9 @@
  *   along with this program, in the LICENSE.md file in the root project directory.
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  */
-import { Component, OnInit } from '@angular/core';
+import { AfterContentInit, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Location } from '@angular/common';
 import { debounceTime, finalize } from 'rxjs/operators';
 import { Project } from 'src/app/models/domain/project';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
@@ -28,6 +29,10 @@ import { environment } from 'src/environments/environment';
 import { SelectFormOption } from 'src/app/interfaces/select-form-option';
 import { SearchResultsResource } from 'src/app/models/resources/search-results';
 import { SEOService } from 'src/app/services/seo.service';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { DetailsComponent } from 'src/app/modules/project/details/details.component';
+import { Subscription } from 'rxjs';
+
 
 interface SortFormResult {
   type: string;
@@ -40,9 +45,9 @@ interface SortFormResult {
 @Component({
   selector: 'app-overview',
   templateUrl: './overview.component.html',
-  styleUrls: ['./overview.component.scss'],
+  styleUrls: ['./overview.component.scss']
 })
-export class OverviewComponent implements OnInit {
+export class OverviewComponent implements OnInit, AfterContentInit {
   /**
    * Array to receive and store the projects from the api.
    */
@@ -148,13 +153,30 @@ export class OverviewComponent implements OnInit {
 
   public currentPage = 1;
 
+  /**
+   * Project parameter gets updated per project detail modal
+   */
+  public currentProject: Project = null;
+
+  /**
+   * Property to indicate whether the project is loading.
+   */
+  private projectLoading = true;
+
+
+  private modalRef: BsModalRef;
+  private modalSubscriptions: Subscription[] = [];
+
   constructor(
     private router: Router,
     private paginationService: PaginationService,
     private internalSearchService: InternalSearchService,
     private formBuilder: FormBuilder,
     private activatedRoute: ActivatedRoute,
-    private seoService: SEOService) {
+    private seoService: SEOService,
+    private modalService: BsModalService,
+    private location: Location) {
+
     this.searchControl = new FormControl('');
 
     this.categoryForm = this.formBuilder.group({
@@ -208,9 +230,7 @@ export class OverviewComponent implements OnInit {
 
     this.highlightFormControl.valueChanges.subscribe((value) => this.onHighlightFormValueChanges(value));
 
-    // Updates meta and title tags
-    this.seoService.updateTitle('Project overview');
-    this.seoService.updateDescription('Browse or search for specific projects or ideas within DeX');
+    this.updateSEOTags();
 
 
     // Following two oberservables can be used in the feature to implement category & tags searching
@@ -223,6 +243,13 @@ export class OverviewComponent implements OnInit {
     // });
   }
 
+  ngAfterContentInit() {
+    this.activatedRoute.params.subscribe(params => {
+      const projectId = params.id?.split('-')[0];
+      this.createProjectModal(projectId);
+    });
+  }
+
   /**
    * Method which triggers when the serach input receives a key up.
    * Updates the search subject with the query.
@@ -241,7 +268,6 @@ export class OverviewComponent implements OnInit {
     }
 
     this.currentSearchInput = value;
-
     this.searchSubject.next(value);
   }
 
@@ -259,7 +285,9 @@ export class OverviewComponent implements OnInit {
    */
   public onClickProject(id: number, name: string): void {
     name = name.split(' ').join('-');
-    this.router.navigate([`/project/details/${id}-${name}`]);
+
+    this.createProjectModal(id);
+    this.location.replaceState(`/project/details/${id}-${name}`);
   }
 
   /**
@@ -358,4 +386,36 @@ export class OverviewComponent implements OnInit {
       this.showPaginationFooter = true;
     }
   }
+
+
+  /**
+   * Method to open the modal for a projects detail
+   * @param projectId the id of the project that should be shown.
+   */
+  private createProjectModal(projectId: number) {
+    if (projectId) {
+      this.modalRef = this.modalService.show(DetailsComponent, {animated: true, initialState: {projectId: projectId}});
+      this.modalRef.setClass('project-modal');
+
+      // Go back to home page after the modal is closed
+      this.modalSubscriptions.push(
+          this.modalService.onHide.subscribe((reason: string | any) => {
+            this.location.replaceState('/project/overview');
+            this.updateSEOTags();
+          }, reason => {
+            this.location.replaceState('/project/overview');
+            this.updateSEOTags();
+          }));
+    }
+  }
+
+
+  /**
+   * Methods to update the title and description through the SEO service
+   */
+  private updateSEOTags() {
+    // Updates meta and title tags
+    this.seoService.updateTitle('Project overview');
+    this.seoService.updateDescription('Browse or search for specific projects or ideas within DeX');
+  }
 }
diff --git a/src/app/modules/project/project-routing.module.ts b/src/app/modules/project/project-routing.module.ts
index ac3e9ada..2eda0feb 100644
--- a/src/app/modules/project/project-routing.module.ts
+++ b/src/app/modules/project/project-routing.module.ts
@@ -15,16 +15,14 @@ import { EmbedComponent } from './embed/embed.component';
  *   along with this program, in the LICENSE.md file in the root project directory.
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  */
-
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { DetailsComponent } from './details/details.component';
 import { OverviewComponent } from './overview/overview.component';
 import { EditComponent } from './edit/edit.component';
 
 const routes: Routes = [
   { path: 'overview', component: OverviewComponent },
-  { path: 'details/:id', component: DetailsComponent },
+  { path: 'details/:id', component: OverviewComponent},
   { path: 'edit/:id', component: EditComponent },
   { path: 'embed/:id', component: EmbedComponent},
   { path: 'add', loadChildren: () => import('./add/add.module').then((m) => m.AddModule) },
@@ -32,6 +30,6 @@ const routes: Routes = [
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
+  exports: [RouterModule]
 })
 export class ProjectRoutingModule {}
diff --git a/src/app/modules/project/project.module.ts b/src/app/modules/project/project.module.ts
index 77f631a4..76e27a91 100644
--- a/src/app/modules/project/project.module.ts
+++ b/src/app/modules/project/project.module.ts
@@ -20,6 +20,7 @@ import { DetailsComponent } from './details/details.component';
 import { OverviewComponent } from './overview/overview.component';
 import { ProjectRoutingModule } from './project-routing.module';
 import { AccordionModule } from 'ngx-bootstrap/accordion';
+import { ModalModule } from 'ngx-bootstrap/modal';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { EditComponent } from './edit/edit.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -38,6 +39,8 @@ import { FormatDatePipe } from 'src/app/utils/format-date.pipe';
 import { HighlightsModalComponent } from './highlights-modal/highlights-modal.component';
 import { ProjectComponent } from 'src/app/modules/project/overview/project/project.component';
 import { NgxDebounceClickModule } from '@ngx-lite/debounce-click';
+import { PopoverModule } from 'ngx-bootstrap/popover';
+import { CollaboratorComponent } from './collaborator/collaborator.component';
 
 @NgModule({
   declarations: [
@@ -53,6 +56,8 @@ import { NgxDebounceClickModule } from '@ngx-lite/debounce-click';
     SafeHtmlPipe,
     HighlightsModalComponent,
     ProjectComponent,
+    CollaboratorComponent,
+    ProjectComponent
   ],
   imports: [
     CommonModule,
@@ -63,13 +68,20 @@ import { NgxDebounceClickModule } from '@ngx-lite/debounce-click';
     AccordionModule.forRoot(),
     PaginationModule.forRoot(),
     BsDropdownModule.forRoot(),
+    ModalModule.forRoot(),
     TooltipModule.forRoot(),
     QuillModule,
-    NgxDebounceClickModule
+    NgxDebounceClickModule,
+    PopoverModule.forRoot(),
+    QuillModule
+  ],
+  entryComponents: [
+    DetailsComponent
   ],
   exports: [
     FileUploaderComponent
   ],
   providers: [Meta]
 })
-export class ProjectModule { }
+export class ProjectModule {
+}
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index acdbae42..ab3ae626 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -29,3 +29,6 @@ $font-size-body: 14px;
 
 // box shadow color
 $box-shadow: 0 3px 6px #0000001a;
+
+// borderradius
+$border-radius: 6px;

From ef94e2f5ac8dae978774442685aaa4b235c0ec3d Mon Sep 17 00:00:00 2001
From: Julia <j.slaats@student.fontys.nl>
Date: Mon, 7 Dec 2020 15:25:50 +0100
Subject: [PATCH 064/141] better var names, changed transition durations

---
 src/app/components/home/home.component.scss            |  4 ++--
 .../top-highlight-cards.component.scss                 |  2 +-
 .../modules/project/overview/overview.component.scss   |  4 ++--
 .../project/overview/project/project.component.scss    |  4 ++--
 src/assets/styles/_variables.scss                      | 10 +++++++---
 5 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss
index 8255aff5..84a163ef 100644
--- a/src/app/components/home/home.component.scss
+++ b/src/app/components/home/home.component.scss
@@ -54,7 +54,7 @@ h1 {
     &:focus {
       border: none;
       outline: none;
-      transform: $transform-scale-grow;
+      transform: $transform-grow;
     }
   }
 
@@ -125,7 +125,7 @@ h1 {
     }
 
     &:hover {
-      transform: $transform-scale-grow;
+      transform: $transform-grow;
     }
   }
 }
diff --git a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss
index 945380b4..ce3bb556 100644
--- a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss
+++ b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss
@@ -44,7 +44,7 @@
       transition: transform $transition-short;
 
       &:hover{
-        transform: $transform-scale-grow;
+        transform: $transform-grow;
       }
     }
 
diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index 1c7415d4..57fa0ecd 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -71,10 +71,10 @@
        display: flex;
        justify-content: center;
        align-items: center;
-       transition: background-color $transition-long, transform $transition-short;
+       transition: transform $transition-short;
 
        &:hover{
-         transform: $transform-scale-grow;
+         transform: $transform-grow-big;
        }
        svg {
          size: inherit;
diff --git a/src/app/modules/project/overview/project/project.component.scss b/src/app/modules/project/overview/project/project.component.scss
index 84b128ea..72eb8602 100644
--- a/src/app/modules/project/overview/project/project.component.scss
+++ b/src/app/modules/project/overview/project/project.component.scss
@@ -62,7 +62,7 @@
     gap: 20px;
     transition: transform $transition-short;
     &:hover{
-      transform: scale(1.02) // exception on the variables
+      transform: scale(1.015) // exception on the variables
     }
     //media query to hide less important info on smaller screens
     @media only screen and (max-width: 1000px) {
@@ -151,7 +151,7 @@
     justify-content: space-between;
     transition: transform $transition-short;
     &:hover{
-      transform: $transform-scale-grow;
+      transform: $transform-grow;
     }
     .project-info {
       .top-wrapper {
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index fe4c88e1..ebdcdbfc 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -32,8 +32,12 @@ $box-shadow: 0 3px 6px #0000001a;
 
 // transform
 $transform-rotate: rotate(-270deg);
-$transform-scale-grow: scale(1.05);
+
+$transform-grow-small: scale(1.015);
+$transform-grow: scale(1.04);
+$transform-grow-big: scale(1.06);
+
 $transform-scale-shrink: scale(0.95);
 
-$transition-long: .8s ease-in-out;
-$transition-short: .4s ease-in-out;
+$transition-long: .5s ease-in-out;
+$transition-short: .25s ease-in-out;

From 7bf568f60c1592863bfb34353e7a52618536f7cb Mon Sep 17 00:00:00 2001
From: Julia <j.slaats@student.fontys.nl>
Date: Mon, 7 Dec 2020 15:33:41 +0100
Subject: [PATCH 065/141] var changes

---
 src/app/modules/project/overview/overview.component.scss        | 2 +-
 src/app/modules/project/overview/project/project.component.scss | 2 +-
 src/assets/styles/_variables.scss                               | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index 57fa0ecd..98288c3c 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -71,7 +71,7 @@
        display: flex;
        justify-content: center;
        align-items: center;
-       transition: transform $transition-short;
+       transition: background-color $transition-short, transform $transition-short;
 
        &:hover{
          transform: $transform-grow-big;
diff --git a/src/app/modules/project/overview/project/project.component.scss b/src/app/modules/project/overview/project/project.component.scss
index 72eb8602..6982e41c 100644
--- a/src/app/modules/project/overview/project/project.component.scss
+++ b/src/app/modules/project/overview/project/project.component.scss
@@ -62,7 +62,7 @@
     gap: 20px;
     transition: transform $transition-short;
     &:hover{
-      transform: scale(1.015) // exception on the variables
+      transform: $transform-grow-small // exception on the variables
     }
     //media query to hide less important info on smaller screens
     @media only screen and (max-width: 1000px) {
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index ebdcdbfc..db9f01dc 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -35,7 +35,7 @@ $transform-rotate: rotate(-270deg);
 
 $transform-grow-small: scale(1.015);
 $transform-grow: scale(1.04);
-$transform-grow-big: scale(1.06);
+$transform-grow-big: scale(1.08);
 
 $transform-scale-shrink: scale(0.95);
 

From 7e121e00abe7b75d795d42538d7e9c40445a6284 Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Mon, 7 Dec 2020 22:45:18 +0100
Subject: [PATCH 066/141] Added click event for details component

---
 .../modules/project/details/details.component.html  |  5 ++++-
 .../modules/project/details/details.component.ts    | 13 +++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html
index 7857eb37..14936a78 100644
--- a/src/app/modules/project/details/details.component.html
+++ b/src/app/modules/project/details/details.component.html
@@ -52,7 +52,10 @@ <h2 class="project-title">{{ project.name }}</h2>
           <ng-container *ngIf="isProduction()">
             <div class="project-metadata__item">
               <p class='title'>Likes <em class="fas fa-heart"></em></p>
-              <p><em class="far fa-heart"></em> 120</p>
+              <p (click)="likeClicked()">
+                <em [ngClass]="project.userHasLikedProject ? 'fas' : 'far'" class='fa-heart'></em>
+                {{project.likeCount}}
+              </p>
             </div>
           </ng-container>
           <div class="project-metadata__item" [tooltip]="projectUpdated">
diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 11064dab..11db9544 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -38,7 +38,7 @@ import { HighlightByProjectIdService } from 'src/app/services/highlightid.servic
 import { ProjectService } from 'src/app/services/project.service';
 import { SEOService } from 'src/app/services/seo.service';
 import { environment } from 'src/environments/environment';
-import { LikeService } from 'src/app/services/like.service';
+import { LikeService } from '../../../services/like.service';
 
 /**
  * Overview of a single project
@@ -349,12 +349,17 @@ export class DetailsComponent implements OnInit {
     this.displayEmbedButton = this.project.user.id === this.currentUser.id;
   }
 
-  public likeClicked(event) {
-    event.stopPropagation();
-    if(this.project.userHasLikedProject) {
+  /**
+   * Method to handle the click of the like button
+   * It will either like or unlike the project
+   */
+  public likeClicked() {
+    if(!this.project.userHasLikedProject) {
       this.likeService.likeProject(this.project.id);
+      this.project.likeCount++;
     } else {
       this.likeService.removeLike(this.project.id);
+      this.project.likeCount--;
     }
     this.project.userHasLikedProject = !this.project.userHasLikedProject;
   }

From b66f49fe765c5915adbc591b1431cb9f5cad4de2 Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Mon, 7 Dec 2020 22:45:56 +0100
Subject: [PATCH 067/141] Changed return types to null since there is no data
 to retrieve

---
 src/app/services/like.service.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/app/services/like.service.ts b/src/app/services/like.service.ts
index 09db6993..0befed17 100644
--- a/src/app/services/like.service.ts
+++ b/src/app/services/like.service.ts
@@ -18,7 +18,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { API_CONFIG } from 'src/app/config/api-config';
-import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
@@ -31,11 +30,13 @@ export class LikeService {
   constructor(
       private http: HttpClient) { }
 
-  public likeProject(projectId: number): Observable<any> {
-    return this.http.post(this.url+projectId, {})
+  public likeProject(projectId: number): void {
+    this.http.post(this.url+projectId, {projectId: projectId})
+        .subscribe()
   }
 
-  public removeLike(projectId: number): Observable<any> {
-    return this.http.delete(this.url+projectId)
+  public removeLike(projectId: number): void {
+    this.http.delete(this.url+projectId)
+        .subscribe()
   }
 }

From fe4676ecc351f2ca376b97c6926615bb56cb3445 Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Mon, 7 Dec 2020 22:46:43 +0100
Subject: [PATCH 068/141] Added page updates when the detail modal is closed

---
 src/app/modules/project/overview/overview.component.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts
index 0ab59dc6..b5508b08 100644
--- a/src/app/modules/project/overview/overview.component.ts
+++ b/src/app/modules/project/overview/overview.component.ts
@@ -374,7 +374,7 @@ export class OverviewComponent implements OnInit, AfterContentInit {
   /**
    * Method to handle the response of the call to the project or search service.
    */
-  private handleSearchAndProjectResponse(response: SearchResultsResource): Promise<void> {
+  private handleSearchAndProjectResponse(response: SearchResultsResource): void {
     this.paginationResponse = response;
 
     this.projects = response.results;
@@ -401,9 +401,13 @@ export class OverviewComponent implements OnInit, AfterContentInit {
       // Go back to home page after the modal is closed
       this.modalSubscriptions.push(
           this.modalService.onHide.subscribe((reason: string | any) => {
+            // Update project data
+            this.onInternalQueryChange()
             this.location.replaceState('/project/overview');
             this.updateSEOTags();
           }, reason => {
+            // Update project data
+            this.onInternalQueryChange()
             this.location.replaceState('/project/overview');
             this.updateSEOTags();
           }));

From 8db6cd63c645cd32a283ad1f49a2f19bdadaad1f Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Mon, 7 Dec 2020 22:47:52 +0100
Subject: [PATCH 069/141] Added comments and like updates

---
 .../modules/project/overview/project/project.component.ts  | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/app/modules/project/overview/project/project.component.ts b/src/app/modules/project/overview/project/project.component.ts
index 382d32c9..02464ceb 100644
--- a/src/app/modules/project/overview/project/project.component.ts
+++ b/src/app/modules/project/overview/project/project.component.ts
@@ -54,12 +54,19 @@ export class ProjectComponent {
     event.stopPropagation();
   }
 
+
+  /**
+   * Method to handle the click of the like button
+   * It will either like or unlike the project
+   */
   public likeClicked(event) {
     event.stopPropagation();
     if(!this.project.userHasLikedProject) {
       this.likeService.likeProject(this.project.id);
+      this.project.likeCount++;
     } else {
       this.likeService.removeLike(this.project.id);
+      this.project.likeCount--;
     }
     this.project.userHasLikedProject = !this.project.userHasLikedProject;
   }

From 5e59d8236f98775143c02fa57bda4c794bb41ece Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Mon, 7 Dec 2020 22:48:18 +0100
Subject: [PATCH 070/141] Changed map to mergeMap for better async

---
 src/app/services/project.service.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts
index 1b7bd8b2..2246ce4c 100644
--- a/src/app/services/project.service.ts
+++ b/src/app/services/project.service.ts
@@ -24,6 +24,7 @@ import { ProjectUpdate } from '../models/resources/project-update';
 import { HttpBaseService } from './http-base.service';
 import { from, Observable } from 'rxjs';
 import { AuthService } from './auth.service';
+import { mergeMap } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
@@ -35,13 +36,13 @@ export class ProjectService extends HttpBaseService<Project, ProjectAdd, Project
 
   get(id: number): Observable<Project> {
     return super.get(id)
-        .pipe(project =>
-            from(this.addLikes(project))
-        );
+        .pipe(
+            mergeMap(project =>
+              from(this.addLikes(project))
+        ));
   }
 
   private addLikes(project): Promise<Project> {
-    console.log(project)
     return this.authService.getBackendUser()
         .then(currentUser => {
             project.likeCount = project.likes?.length ? project.likes.length : 0;

From cfedbe5fb5f30136440d96fbaaaccdf8278a7f8c Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Mon, 7 Dec 2020 22:55:41 +0100
Subject: [PATCH 071/141] Fixed linter issues

---
 src/app/modules/project/details/details.component.ts      | 2 +-
 src/app/modules/project/overview/overview.component.ts    | 4 ++--
 .../modules/project/overview/project/project.component.ts | 2 +-
 src/app/services/internal-search.service.ts               | 4 ++--
 src/app/services/like.service.ts                          | 8 ++++----
 src/app/services/pagination.service.ts                    | 4 ++--
 src/app/services/project.service.ts                       | 4 ++--
 7 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 11db9544..308be795 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -354,7 +354,7 @@ export class DetailsComponent implements OnInit {
    * It will either like or unlike the project
    */
   public likeClicked() {
-    if(!this.project.userHasLikedProject) {
+    if (!this.project.userHasLikedProject) {
       this.likeService.likeProject(this.project.id);
       this.project.likeCount++;
     } else {
diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts
index b5508b08..474ef467 100644
--- a/src/app/modules/project/overview/overview.component.ts
+++ b/src/app/modules/project/overview/overview.component.ts
@@ -402,12 +402,12 @@ export class OverviewComponent implements OnInit, AfterContentInit {
       this.modalSubscriptions.push(
           this.modalService.onHide.subscribe((reason: string | any) => {
             // Update project data
-            this.onInternalQueryChange()
+            this.onInternalQueryChange();
             this.location.replaceState('/project/overview');
             this.updateSEOTags();
           }, reason => {
             // Update project data
-            this.onInternalQueryChange()
+            this.onInternalQueryChange();
             this.location.replaceState('/project/overview');
             this.updateSEOTags();
           }));
diff --git a/src/app/modules/project/overview/project/project.component.ts b/src/app/modules/project/overview/project/project.component.ts
index 02464ceb..f69c92d9 100644
--- a/src/app/modules/project/overview/project/project.component.ts
+++ b/src/app/modules/project/overview/project/project.component.ts
@@ -61,7 +61,7 @@ export class ProjectComponent {
    */
   public likeClicked(event) {
     event.stopPropagation();
-    if(!this.project.userHasLikedProject) {
+    if (!this.project.userHasLikedProject) {
       this.likeService.likeProject(this.project.id);
       this.project.likeCount++;
     } else {
diff --git a/src/app/services/internal-search.service.ts b/src/app/services/internal-search.service.ts
index c3a4f1cc..87597b33 100644
--- a/src/app/services/internal-search.service.ts
+++ b/src/app/services/internal-search.service.ts
@@ -72,8 +72,8 @@ export class InternalSearchService {
             project.likeCount = project.likes.length ? project.likes.length : 0;
             project.userHasLikedProject = project.likes.filter(like => like.userId === currentUser.id).length > 0;
             return project;
-          })
-          return searchResult
+          });
+          return searchResult;
         });
   }
 }
diff --git a/src/app/services/like.service.ts b/src/app/services/like.service.ts
index 0befed17..3ee609c0 100644
--- a/src/app/services/like.service.ts
+++ b/src/app/services/like.service.ts
@@ -31,12 +31,12 @@ export class LikeService {
       private http: HttpClient) { }
 
   public likeProject(projectId: number): void {
-    this.http.post(this.url+projectId, {projectId: projectId})
-        .subscribe()
+    this.http.post(this.url + projectId, {projectId: projectId})
+        .subscribe();
   }
 
   public removeLike(projectId: number): void {
-    this.http.delete(this.url+projectId)
-        .subscribe()
+    this.http.delete(this.url + projectId)
+        .subscribe();
   }
 }
diff --git a/src/app/services/pagination.service.ts b/src/app/services/pagination.service.ts
index 2b962b65..ed3f4f58 100644
--- a/src/app/services/pagination.service.ts
+++ b/src/app/services/pagination.service.ts
@@ -57,8 +57,8 @@ export class PaginationService {
             project.likeCount = project.likes.length ? project.likes.length : 0;
             project.userHasLikedProject = project.likes.filter(like => like.userId === currentUser.id).length > 0;
             return project;
-          })
-          return searchResult
+          });
+          return searchResult;
         });
   }
 }
diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts
index 2246ce4c..3b540535 100644
--- a/src/app/services/project.service.ts
+++ b/src/app/services/project.service.ts
@@ -48,6 +48,6 @@ export class ProjectService extends HttpBaseService<Project, ProjectAdd, Project
             project.likeCount = project.likes?.length ? project.likes.length : 0;
             project.userHasLikedProject = project.likes?.filter(like => like.userId === currentUser.id).length > 0;
             return project;
-          })
-  };
+          });
+  }
 }

From 5ea8f262a66be286a48fd65c761f9c44433c626d Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Mon, 7 Dec 2020 22:59:25 +0100
Subject: [PATCH 072/141] Updated changelog

---
 CHANGELOG.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 157d5127..decca501 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,8 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added SEO & performance check when pushing new code to develop branch [#285](https://github.com/DigitalExcellence/dex-frontend/issues/285)
-
-- Added a DeX preview with title, description and image for more user friendliness [#347](https://github.com/DigitalExcellence/dex-frontend/issues/347)
+- Added a DeX preview with title, description and image for more user-friendliness [#347](https://github.com/DigitalExcellence/dex-frontend/issues/347)
+- Added functionality to like projects [#389](https://github.com/DigitalExcellence/dex-frontend/issues/389)
 
 ### Changed
 

From 13238ce93ef8d78cfb4254a3d214c433512d4a7c Mon Sep 17 00:00:00 2001
From: Julia <j.slaats@student.fontys.nl>
Date: Tue, 8 Dec 2020 14:51:19 +0100
Subject: [PATCH 073/141] added v1 loading circle

---
 src/app/modules/project/details/details.component.html   | 6 +-----
 src/app/modules/project/details/details.component.scss   | 3 +++
 src/app/modules/project/overview/overview.component.html | 2 +-
 src/app/modules/project/overview/overview.component.scss | 6 +++++-
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html
index 7857eb37..1171d489 100644
--- a/src/app/modules/project/details/details.component.html
+++ b/src/app/modules/project/details/details.component.html
@@ -18,11 +18,7 @@
  -->
 
 <ng-container *ngIf="projectLoading; else projectLoaded">
-  <div class="row">
-    <div class="offset-2 col-8">
-      <p>Project is being loaded</p>
-    </div>
-  </div>
+      <h2 class="fas fa-spinner fa-pulse loading-circle" *ngIf="projectLoading"></h2>
 </ng-container>
 <ng-template #projectLoaded>
   <div *ngIf="project; else noProject">
diff --git a/src/app/modules/project/details/details.component.scss b/src/app/modules/project/details/details.component.scss
index 509257d0..ad09d561 100644
--- a/src/app/modules/project/details/details.component.scss
+++ b/src/app/modules/project/details/details.component.scss
@@ -317,4 +317,7 @@
       padding: 0;
     }
   }
+  .loading-circle {
+    color: $accent-color-red-primary;
+  }
 }
diff --git a/src/app/modules/project/overview/overview.component.html b/src/app/modules/project/overview/overview.component.html
index fd74cbc7..6247ee7d 100644
--- a/src/app/modules/project/overview/overview.component.html
+++ b/src/app/modules/project/overview/overview.component.html
@@ -135,8 +135,8 @@ <h3>Filter</h3>
     </div>
 
     <ng-container *ngIf="!projectsEmpty() && !projectsLoading; else noProjects">
+      <h2 class="fas fa-spinner fa-pulse loading-circle" *ngIf="projectsLoading"></h2>
       <div class="project-list-wrapper" [ngClass]="this.showListView ? 'list' : 'grid'">
-        <h2 *ngIf="projectsLoading">Projects loading...</h2>
         <app-project
             *ngFor="let project of projectsToDisplay"
             [project]="project"
diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index 98288c3c..c7c5e3a6 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -330,4 +330,8 @@
  
  .paginationDropDown {
    width: 80px;
- }
\ No newline at end of file
+ }
+ 
+ .loading-circle {
+  color: $accent-color-red-primary;
+}

From a7f9ae2b54d67a2f243900e5476cb5817bfe2810 Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Thu, 10 Dec 2020 11:40:59 +0100
Subject: [PATCH 074/141] Updated styling for images in quill-view

---
 src/app/modules/project/details/details.component.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/app/modules/project/details/details.component.scss b/src/app/modules/project/details/details.component.scss
index 509257d0..07f369b4 100644
--- a/src/app/modules/project/details/details.component.scss
+++ b/src/app/modules/project/details/details.component.scss
@@ -279,6 +279,14 @@
       display: flex;
       flex-direction: column;
       gap: 15px;
+
+      .dex-quill-viewer {
+        img {
+          margin-bottom: 20px;
+          max-width: 100%;
+        }
+      }
+
       p {
         margin: 0;
       }

From f840c10490fe3eaf85bce24683055921b303b9c4 Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Thu, 10 Dec 2020 11:43:54 +0100
Subject: [PATCH 075/141] Added margin to top too

---
 src/app/modules/project/details/details.component.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/modules/project/details/details.component.scss b/src/app/modules/project/details/details.component.scss
index 07f369b4..703421fb 100644
--- a/src/app/modules/project/details/details.component.scss
+++ b/src/app/modules/project/details/details.component.scss
@@ -282,7 +282,7 @@
 
       .dex-quill-viewer {
         img {
-          margin-bottom: 20px;
+          margin: 20px 0;
           max-width: 100%;
         }
       }

From e9108499e1dd7eafeaa05e8be21846b853f98130 Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Thu, 10 Dec 2020 12:26:55 +0100
Subject: [PATCH 076/141] Updated changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 99cb2087..8b1497f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Fixed issue where images in the project-details view would go outside the page - [#397](https://github.com/DigitalExcellence/dex-frontend/issues/397)
 
 ### Security
 

From edcf8e720b3078eb32246cf041577a15b7801f86 Mon Sep 17 00:00:00 2001
From: Martin Markov <martin.markov28@gmail.com>
Date: Sun, 3 Jan 2021 17:59:05 +0200
Subject: [PATCH 077/141] Added overlay to the newly created modals

---
 .../highlights-modal.component.html           |  4 +++-
 .../highlights-modal.component.scss           | 21 ++++++++++++++++
 .../highlights-modal.component.ts             | 11 +++++++--
 .../modal-highlight-form.component.html       |  2 ++
 .../modal-highlight-form.component.scss       | 24 +++++++++++++++++--
 5 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.html b/src/app/modules/project/highlights-modal/highlights-modal.component.html
index c4f2ae42..b7353ae0 100644
--- a/src/app/modules/project/highlights-modal/highlights-modal.component.html
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.html
@@ -1,3 +1,5 @@
+<div id="overlay" (click)="hide()"></div>
+
 <div class="highligts-modal-container">
   <h2 class="mb-4">Project highlights</h2>
   <div class="row no-gutters heading-row">
@@ -33,4 +35,4 @@ <h2 class="mb-4">Project highlights</h2>
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.scss b/src/app/modules/project/highlights-modal/highlights-modal.component.scss
index 44ec0a0e..9e28a97d 100644
--- a/src/app/modules/project/highlights-modal/highlights-modal.component.scss
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.scss
@@ -2,6 +2,13 @@
 
 .highligts-modal-container {
   padding: 35px;
+  z-index: 1151;
+  position: relative;
+  top: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #fff;
+  min-width: 100%;
 
   .heading-row {
     padding: 0.75rem 0;
@@ -51,3 +58,17 @@
     color: $light-mode-grey-secondary;
   }
 }
+
+#overlay {
+  position: fixed;
+  display: block;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #000;
+  opacity: 0.5;
+  z-index: 1150;
+  cursor: pointer;
+  transition: opacity .5s ease-in;
+}
\ No newline at end of file
diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.ts b/src/app/modules/project/highlights-modal/highlights-modal.component.ts
index a3e0d7cb..7b9f8c50 100644
--- a/src/app/modules/project/highlights-modal/highlights-modal.component.ts
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.ts
@@ -27,7 +27,7 @@ export class HighlightsModalComponent {
    */
   onSelectHighlight(selectedHighlight: Highlight) {
     this.selectHighlightToEdit.emit(selectedHighlight);
-    this.bsModalRef.hide();
+    this.hide();
   }
 
 
@@ -45,7 +45,7 @@ export class HighlightsModalComponent {
         };
 
         this.alertService.pushAlert(alertConfig);
-        this.bsModalRef.hide();
+        this.hide();
       });
   }
 
@@ -54,6 +54,13 @@ export class HighlightsModalComponent {
    */
   onAddHighlight() {
     this.selectAddHighlight.emit();
+    this.hide();
+  }
+
+    /**
+   * Method to hide the modal
+   */
+  hide() {
     this.bsModalRef.hide();
   }
 }
diff --git a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
index bc8bfe5c..910872c9 100644
--- a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
+++ b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.html
@@ -17,6 +17,8 @@
 
  -->
 
+<div id="overlay" (click)="onClickBack()"></div>
+
 <div class="modal-highlight-container">
   <div class="modal-body">
     <h2>
diff --git a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.scss b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.scss
index 13fc56d3..c17f2d7d 100644
--- a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.scss
+++ b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.scss
@@ -29,12 +29,18 @@ h3 {
 
 .modal-highlight-container {
   background: #fff;
-  width: 600px;
   border-radius: 6px;
   border: none;
   outline: none;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
   padding: 15px;
+  position: relative;
+  top: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #fff;
+  max-width: 100%;
+  z-index: 1151;
 
   button.close {
     border: none;
@@ -134,4 +140,18 @@ input, textarea {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-}
\ No newline at end of file
+}
+
+#overlay {
+  position: fixed;
+  display: block;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #000;
+  opacity: 0.5;
+  z-index: 1150;
+  cursor: pointer;
+  transition: opacity .5s ease-in;
+}

From 48e222b08ac9a024a44bb3a9c5996787a40155f3 Mon Sep 17 00:00:00 2001
From: Niek van Dam <niekvandam1@outlook.com>
Date: Tue, 5 Jan 2021 13:41:23 +0100
Subject: [PATCH 078/141] updated open graph description in index

---
 src/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.html b/src/index.html
index fcfdf9ea..88d30d06 100644
--- a/src/index.html
+++ b/src/index.html
@@ -40,6 +40,7 @@
   <meta property="og:title" content="DeX - Digital Excellence"/>
   <meta property="og:url" content="https://dex.software"/>
   <meta property="og:type" content="website" />
+  <meta property="og:description" content="DeX provides a platform for students, teachers and employees to share and work on projects and ideas. Find, create, share and work on projects and ideas on DeX" />
 
   <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">

From 5b3fa3d6d71f3866c1455d63ac89042b2f6a8cc7 Mon Sep 17 00:00:00 2001
From: Julia <j.slaats@student.fontys.nl>
Date: Tue, 5 Jan 2021 14:22:32 +0100
Subject: [PATCH 079/141] Added loading v2

---
 .../project/details/details.component.html    | 35 +++++++++++++------
 .../project/details/details.component.scss    |  9 ++++-
 .../project/overview/overview.component.html  |  8 +++--
 .../project/overview/overview.component.scss  |  2 +-
 4 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html
index 1171d489..2591e4d8 100644
--- a/src/app/modules/project/details/details.component.html
+++ b/src/app/modules/project/details/details.component.html
@@ -18,8 +18,12 @@
  -->
 
 <ng-container *ngIf="projectLoading; else projectLoaded">
-      <h2 class="fas fa-spinner fa-pulse loading-circle" *ngIf="projectLoading"></h2>
+  <div class="loading-circle">
+    <h2 class="fas fa-spinner fa-pulse"></h2>
+  </div>
+
 </ng-container>
+
 <ng-template #projectLoaded>
   <div *ngIf="project; else noProject">
     <div class="row">
@@ -29,7 +33,8 @@ <h2 class="fas fa-spinner fa-pulse loading-circle" *ngIf="projectLoading"></h2>
         <div id="title-wrapper">
           <h2 class="project-title">{{ project.name }}</h2>
           <div class="circle" style="background-color: unset">
-            <img [src]="getIconUrl()" alt="Code project" loading="lazy" onerror="this.src='/assets/images/placeholder.svg';">
+            <img [src]="getIconUrl()" alt="Code project" loading="lazy"
+              onerror="this.src='/assets/images/placeholder.svg';">
           </div>
 
         </div>
@@ -91,30 +96,37 @@ <h2 class="project-title">{{ project.name }}</h2>
         <div class='bottom'>
           <div class='menu-wrapper'>
             <div class='menu'>
-              <div (click)="setActiveTab('description')" [ngClass]="{'active': this.activeTab == 'description' }" class='item'>
+              <div (click)="setActiveTab('description')" [ngClass]="{'active': this.activeTab == 'description' }"
+                class='item'>
                 Description
               </div>
               <ng-container *ngIf="isProduction()">
-                <div (click)="setActiveTab('contact')" [ngClass]="{'active': this.activeTab == 'contact' }" class='item'>
+                <div (click)="setActiveTab('contact')" [ngClass]="{'active': this.activeTab == 'contact' }"
+                  class='item'>
                   Contact
                 </div>
               </ng-container>
-              <div (click)="setActiveTab('collaborators')" [ngClass]="{'active': this.activeTab == 'collaborators' }" class='item'>
+              <div (click)="setActiveTab('collaborators')" [ngClass]="{'active': this.activeTab == 'collaborators' }"
+                class='item'>
                 Collaborators
               </div>
             </div>
             <ng-container *ngIf="displayHighlightButton || displayEditButton || displayDeleteProjectButton">
-              <em [popover]="cogPopOver"  class="fas fa-cog cog" placement="bottom" triggers="click" [outsideClick]="true">
+              <em [popover]="cogPopOver" class="fas fa-cog cog" placement="bottom" triggers="click"
+                [outsideClick]="true">
               </em>
               <ng-template #cogPopOver class="cog-tooltip">
                 <ng-container *ngIf="displayHighlightButton">
-                  <a (click)="onClickHighlightButton()" class="cog-tooltip-item"><em class="fas fa-highlighter"></em>Hightlight settings</a>
+                  <a (click)="onClickHighlightButton()" class="cog-tooltip-item"><em
+                      class="fas fa-highlighter"></em>Hightlight settings</a>
                 </ng-container>
                 <ng-container *ngIf="displayEditButton">
-                  <a class="cog-tooltip-item" (click)="closeModalAndRedirect('project/edit/'+ project?.id)"><em class="fas fa-edit"></em>Edit project</a>
+                  <a class="cog-tooltip-item" (click)="closeModalAndRedirect('project/edit/'+ project?.id)"><em
+                      class="fas fa-edit"></em>Edit project</a>
                 </ng-container>
                 <ng-container *ngIf="displayDeleteProjectButton">
-                  <a class="cog-tooltip-item" (click)="closeModalAndRedirect('project/delete/'+ project?.id)"><em class="fas fa-trash"></em>Delete project</a>
+                  <a class="cog-tooltip-item" (click)="closeModalAndRedirect('project/delete/'+ project?.id)"><em
+                      class="fas fa-trash"></em>Delete project</a>
                 </ng-container>
               </ng-template>
             </ng-container>
@@ -132,7 +144,8 @@ <h2 class="project-title">{{ project.name }}</h2>
             </ng-container>
             <ng-container *ngIf=" this.activeTab == 'collaborators' ">
               <div class='collaborators'>
-                <app-collaborator *ngFor="let collaborator of project.collaborators" [collaborator]="collaborator"></app-collaborator>
+                <app-collaborator *ngFor="let collaborator of project.collaborators" [collaborator]="collaborator">
+                </app-collaborator>
               </div>
             </ng-container>
           </div>
@@ -150,4 +163,4 @@ <h1>Project details</h1>
       </div>
     </div>
   </ng-template>
-</ng-template>
+</ng-template>
\ No newline at end of file
diff --git a/src/app/modules/project/details/details.component.scss b/src/app/modules/project/details/details.component.scss
index ad09d561..ed34ec46 100644
--- a/src/app/modules/project/details/details.component.scss
+++ b/src/app/modules/project/details/details.component.scss
@@ -317,7 +317,14 @@
       padding: 0;
     }
   }
-  .loading-circle {
+}
+.loading-circle {
+  width: 20vw;
+  height: 20vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  h2 {
     color: $accent-color-red-primary;
   }
 }
diff --git a/src/app/modules/project/overview/overview.component.html b/src/app/modules/project/overview/overview.component.html
index 6247ee7d..2554ecd9 100644
--- a/src/app/modules/project/overview/overview.component.html
+++ b/src/app/modules/project/overview/overview.component.html
@@ -134,8 +134,7 @@ <h3>Filter</h3>
       <button><img alt="" loading="lazy" src="assets/images/research.svg"></button>
     </div>
 
-    <ng-container *ngIf="!projectsEmpty() && !projectsLoading; else noProjects">
-      <h2 class="fas fa-spinner fa-pulse loading-circle" *ngIf="projectsLoading"></h2>
+    <ng-container *ngIf="!projectsEmpty(); else noProjects">
       <div class="project-list-wrapper" [ngClass]="this.showListView ? 'list' : 'grid'">
         <app-project
             *ngFor="let project of projectsToDisplay"
@@ -146,7 +145,10 @@ <h2 class="fas fa-spinner fa-pulse loading-circle" *ngIf="projectsLoading"></h2>
       </div>
     </ng-container>
 
-    <ng-template #noProjects>There are no projects available.</ng-template>
+    <ng-template #noProjects>
+      <h2 class="fas fa-spinner fa-pulse loading-circle" *ngIf="projectsLoading"></h2>
+      <p *ngIf="!projectsLoading">There are no projects available.</p>
+    </ng-template>
 
     <div *ngIf="amountOfProjectsOnSinglePage < totalNrOfProjects && showPaginationFooter" class="pagination-div">
       <pagination (pageChanged)="pageChanged($event)" [itemsPerPage]="amountOfProjectsOnSinglePage"
diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index c7c5e3a6..06175112 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -71,7 +71,7 @@
        display: flex;
        justify-content: center;
        align-items: center;
-       transition: background-color $transition-short, transform $transition-short;
+       transition: transform $transition-short;
 
        &:hover{
          transform: $transform-grow-big;

From 71ca1d361bc7f38cf2a080e67bfa6007788164c8 Mon Sep 17 00:00:00 2001
From: Niek van Dam <niekvandam1@outlook.com>
Date: Tue, 5 Jan 2021 14:59:09 +0100
Subject: [PATCH 080/141] updated index meta tags

---
 src/assets/images/dex-x.png | Bin 0 -> 45120 bytes
 src/index.html              |  27 +++++++++++++++++++++------
 2 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/images/dex-x.png

diff --git a/src/assets/images/dex-x.png b/src/assets/images/dex-x.png
new file mode 100644
index 0000000000000000000000000000000000000000..3bfcf785d62dcea5462c6181cc1c923e9ae326bc
GIT binary patch
literal 45120
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
EABLsNfB*mh

literal 0
HcmV?d00001

diff --git a/src/index.html b/src/index.html
index 88d30d06..eca245cc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -22,7 +22,6 @@
 
 <head>
   <meta charset="utf-8">
-  <title>Digital Excellence</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
@@ -35,12 +34,28 @@
   <meta name="msapplication-TileColor" content="#da532c">
   <meta name="msapplication-config" content="assets/favicon/browserconfig.xml">
   <meta name="theme-color" content="#ffffff">
-  <meta property="og:image" content="https://dex.software/assets/images/dex-logo-dark-orange.png"/>
+
+  <!-- HTML Meta Tags -->
+  <title>DeX - Digital Excellence</title>
+  <meta name="description" content="DeX provides a platform for students, teachers and employees to share and work on projects and ideas. Find, create, share and work on projects and ideas on DeX">
+
+  <!-- Facebook Meta Tags -->
+  <meta property="og:url" content="https://dex.software/">
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="DeX - Digital Excellence">
+  <meta property="og:description" content="DeX provides a platform for students, teachers and employees to share and work on projects and ideas. Find, create, share and work on projects and ideas on DeX">
+  <meta property="og:image" content="https://dex.software/assets/images/dex-x.png">
   <meta property="og:image:alt" content="DeX logo"/>
-  <meta property="og:title" content="DeX - Digital Excellence"/>
-  <meta property="og:url" content="https://dex.software"/>
-  <meta property="og:type" content="website" />
-  <meta property="og:description" content="DeX provides a platform for students, teachers and employees to share and work on projects and ideas. Find, create, share and work on projects and ideas on DeX" />
+
+
+  <!-- Twitter Meta Tags -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta property="twitter:domain" content="rare-bird-82.loca.lt">
+  <meta property="twitter:url" content=https://dex.software/">
+  <meta name="twitter:title" content="DeX - Digital Excellence">
+  <meta name="twitter:description" content="DeX provides a platform for students, teachers and employees to share and work on projects and ideas. Find, create, share and work on projects and ideas on DeX">
+  <meta name="twitter:image" content="https://dex.software/assets/images/dex-x.png">
+
 
   <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">

From 590a42f8e1dce62ff5ca81c743f462cc3926ddea Mon Sep 17 00:00:00 2001
From: Niek van Dam <niekvandam1@outlook.com>
Date: Tue, 5 Jan 2021 15:04:49 +0100
Subject: [PATCH 081/141] updated changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b1497f4..b36de58d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Changed the open graph tags in order to show a more appealing website preview [#405](https://github.com/DigitalExcellence/dex-frontend/issues/405)
 
 ### Deprecated
 

From ffa4f67e6b2a5c889e8798da03f8cac285d5005e Mon Sep 17 00:00:00 2001
From: Niek van Dam <niekvandam1@outlook.com>
Date: Wed, 6 Jan 2021 13:20:56 +0100
Subject: [PATCH 082/141] removed deprecated and faulty twitter tag

---
 src/index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index eca245cc..668972b3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -50,7 +50,6 @@
 
   <!-- Twitter Meta Tags -->
   <meta name="twitter:card" content="summary_large_image">
-  <meta property="twitter:domain" content="rare-bird-82.loca.lt">
   <meta property="twitter:url" content=https://dex.software/">
   <meta name="twitter:title" content="DeX - Digital Excellence">
   <meta name="twitter:description" content="DeX provides a platform for students, teachers and employees to share and work on projects and ideas. Find, create, share and work on projects and ideas on DeX">

From 92f00bfedb4ef957269d961c881ccc98251ac760 Mon Sep 17 00:00:00 2001
From: Martin Markov <martin.markov28@gmail.com>
Date: Wed, 6 Jan 2021 14:22:01 +0200
Subject: [PATCH 083/141] Change color of icon on hover

Co-authored-by: Brend Smits <brend_smits@hotmail.com>
---
 .../highlights-modal/highlights-modal.component.scss        | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.scss b/src/app/modules/project/highlights-modal/highlights-modal.component.scss
index 9e28a97d..956fa9e2 100644
--- a/src/app/modules/project/highlights-modal/highlights-modal.component.scss
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.scss
@@ -56,6 +56,10 @@
   }
   .trash-icon{
     color: $light-mode-grey-secondary;
+    
+    &:hover {
+      color: $accent-color-red-secondary;
+    }
   }
 }
 
@@ -71,4 +75,4 @@
   z-index: 1150;
   cursor: pointer;
   transition: opacity .5s ease-in;
-}
\ No newline at end of file
+}

From 964f6654304c63e0aad8ddce2d668da2635ec656 Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Mon, 11 Jan 2021 10:09:22 +0100
Subject: [PATCH 084/141] Added auth check

---
 .../project/details/details.component.ts      | 16 ++++++++-------
 .../overview/project/project.component.ts     | 20 +++++++++++--------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 943341b5..fe08593b 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -355,14 +355,16 @@ export class DetailsComponent implements OnInit {
    * It will either like or unlike the project
    */
   public likeClicked() {
-    if (!this.project.userHasLikedProject) {
-      this.likeService.likeProject(this.project.id);
-      this.project.likeCount++;
-    } else {
-      this.likeService.removeLike(this.project.id);
-      this.project.likeCount--;
+    if (this.authService.isAuthenticated()) {
+      if (!this.project.userHasLikedProject) {
+        this.likeService.likeProject(this.project.id);
+        this.project.likeCount++;
+      } else {
+        this.likeService.removeLike(this.project.id);
+        this.project.likeCount--;
+      }
+      this.project.userHasLikedProject = !this.project.userHasLikedProject;
     }
-    this.project.userHasLikedProject = !this.project.userHasLikedProject;
   }
 
   private formatTimestamps(highlightTimestamp: string): string {
diff --git a/src/app/modules/project/overview/project/project.component.ts b/src/app/modules/project/overview/project/project.component.ts
index f69c92d9..c61d49aa 100644
--- a/src/app/modules/project/overview/project/project.component.ts
+++ b/src/app/modules/project/overview/project/project.component.ts
@@ -20,6 +20,7 @@ import { SafeUrl } from '@angular/platform-browser';
 import { FileRetrieverService } from 'src/app/services/file-retriever.service';
 import { environment } from 'src/environments/environment';
 import { LikeService } from 'src/app/services/like.service';
+import { AuthService } from '../../../../services/auth.service';
 
 
 @Component({
@@ -35,7 +36,8 @@ export class ProjectComponent {
 
   constructor(
       private fileRetrieverService: FileRetrieverService,
-      private likeService: LikeService) {
+      private likeService: LikeService,
+      private authService: AuthService) {
   }
 
   /**
@@ -61,14 +63,16 @@ export class ProjectComponent {
    */
   public likeClicked(event) {
     event.stopPropagation();
-    if (!this.project.userHasLikedProject) {
-      this.likeService.likeProject(this.project.id);
-      this.project.likeCount++;
-    } else {
-      this.likeService.removeLike(this.project.id);
-      this.project.likeCount--;
+    if (this.authService.isAuthenticated()) {
+      if (!this.project.userHasLikedProject) {
+        this.likeService.likeProject(this.project.id);
+        this.project.likeCount++;
+      } else {
+        this.likeService.removeLike(this.project.id);
+        this.project.likeCount--;
+      }
+      this.project.userHasLikedProject = !this.project.userHasLikedProject;
     }
-    this.project.userHasLikedProject = !this.project.userHasLikedProject;
   }
 
   /**

From d1490077e25df070c44a29d1542d763c6535b417 Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Mon, 11 Jan 2021 10:14:53 +0100
Subject: [PATCH 085/141] Fixed linter issues and relative imports

---
 src/app/models/resources/search-result.ts                   | 4 ++--
 src/app/modules/project/details/details.component.ts        | 2 +-
 .../modules/project/overview/project/project.component.ts   | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/models/resources/search-result.ts b/src/app/models/resources/search-result.ts
index 6b01c500..eaef0339 100644
--- a/src/app/models/resources/search-result.ts
+++ b/src/app/models/resources/search-result.ts
@@ -16,8 +16,8 @@
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  *
  */
-import { UploadFile } from '../domain/uploadFile';
-import { ProjectLike } from '../domain/projectLike';
+import { UploadFile } from 'src/app/models/domain/uploadFile';
+import { ProjectLike } from 'src/app/models/domain/projectLike';
 
 export interface SearchResultResource {
     likes: Array<ProjectLike>;
diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index fe08593b..a96d8e26 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -354,7 +354,7 @@ export class DetailsComponent implements OnInit {
    * Method to handle the click of the like button
    * It will either like or unlike the project
    */
-  public likeClicked() {
+  public likeClicked(): void {
     if (this.authService.isAuthenticated()) {
       if (!this.project.userHasLikedProject) {
         this.likeService.likeProject(this.project.id);
diff --git a/src/app/modules/project/overview/project/project.component.ts b/src/app/modules/project/overview/project/project.component.ts
index c61d49aa..ac225b37 100644
--- a/src/app/modules/project/overview/project/project.component.ts
+++ b/src/app/modules/project/overview/project/project.component.ts
@@ -20,7 +20,7 @@ import { SafeUrl } from '@angular/platform-browser';
 import { FileRetrieverService } from 'src/app/services/file-retriever.service';
 import { environment } from 'src/environments/environment';
 import { LikeService } from 'src/app/services/like.service';
-import { AuthService } from '../../../../services/auth.service';
+import { AuthService } from 'src/app/services/auth.service';
 
 
 @Component({
@@ -59,9 +59,9 @@ export class ProjectComponent {
 
   /**
    * Method to handle the click of the like button
-   * It will either like or unlike the project
+   * It will either like or unlike the project.
    */
-  public likeClicked(event) {
+  public likeClicked(event): void {
     event.stopPropagation();
     if (this.authService.isAuthenticated()) {
       if (!this.project.userHasLikedProject) {

From ffbdbfc7558adffa0169215d821f552a1739286d Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Mon, 11 Jan 2021 10:15:22 +0100
Subject: [PATCH 086/141] Removed '/' from like api route

---
 src/app/config/api-config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/config/api-config.ts b/src/app/config/api-config.ts
index 4f11339d..095c1219 100644
--- a/src/app/config/api-config.ts
+++ b/src/app/config/api-config.ts
@@ -40,5 +40,5 @@ export const API_CONFIG: ApiConfig = {
   embeddedProjectRoute: 'embed',
   wizardRoute: 'wizard',
   uploadFileRoute: 'file',
-  projectLikes: 'project/like/'
+  projectLikes: 'project/like'
 };

From 82a8b33daa4bd33183e80556d1021546ef2b4a05 Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Mon, 11 Jan 2021 10:29:19 +0100
Subject: [PATCH 087/141] Fixed linter issues

---
 src/app/modules/project/details/details.component.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index ed3b2a42..2cef4712 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -23,12 +23,15 @@ import { AuthService } from 'src/app/services/auth.service';
 import { HighlightService } from 'src/app/services/highlight.service';
 import { HighlightAdd } from 'src/app/models/resources/highlight-add';
 import { BsModalService, ModalOptions } from 'ngx-bootstrap/modal';
-import { ModalHighlightFormComponent, HighlightFormResult } from 'src/app/modules/project/modal-highlight-form/modal-highlight-form.component';
+import {
+  HighlightFormResult,
+  ModalHighlightFormComponent
+} from 'src/app/modules/project/modal-highlight-form/modal-highlight-form.component';
 import { AlertConfig } from 'src/app/models/internal/alert-config';
 import { AlertType } from 'src/app/models/internal/alert-type';
 import { AlertService } from 'src/app/services/alert.service';
 import { User } from 'src/app/models/domain/user';
-import { Observable, EMPTY } from 'rxjs';
+import { EMPTY, Observable } from 'rxjs';
 import { HighlightByProjectIdService } from 'src/app/services/highlightid.service';
 import { Highlight } from 'src/app/models/domain/highlight';
 import { ModalDeleteGenericComponent } from 'src/app/components/modals/modal-delete-generic/modal-delete-generic.component';
@@ -371,7 +374,7 @@ export class DetailsComponent implements OnInit {
     const timeZone = 'GMT';
     return dayOfTheWeek + ', ' + dateStamp + ', ' + timeStamp + ' ' + timeZone;
   }
-  
+
   /**
    * Method for opening the highlight-modal-form
    * @param highlights the array of highlights to be displayed in the modals

From fdded0e3d3d6fac2d6ab4b5b94a67fec6fb15f14 Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Mon, 11 Jan 2021 11:36:12 +0100
Subject: [PATCH 088/141] small changes

---
 src/app/modules/account/login/login.component.scss | 2 +-
 src/assets/styles/_variables.scss                  | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/app/modules/account/login/login.component.scss b/src/app/modules/account/login/login.component.scss
index 109424c5..be0e3c04 100644
--- a/src/app/modules/account/login/login.component.scss
+++ b/src/app/modules/account/login/login.component.scss
@@ -129,7 +129,7 @@ button {
     outline: none;
   }
   &:hover{
-    transform: $transform-scale-shrink;
+    transform: $transform-grow-small;
   }
 }
 
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index 5ca612f4..43aff97e 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -36,12 +36,10 @@ $border-radius: 6px;
 // transform
 $transform-rotate: rotate(-270deg);
 
-$transform-grow-small: scale(1.015);
+$transform-grow-small: scale(1.02);
 $transform-grow: scale(1.04);
 $transform-grow-big: scale(1.08);
 
-$transform-scale-shrink: scale(0.95);
-
 $transition-long: .5s ease-in-out;
 $transition-short: .25s ease-in-out;
 

From e7f178591117ebc12146b64793466b9eddecd5bb Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Mon, 11 Jan 2021 12:36:40 +0100
Subject: [PATCH 089/141] added to changelog, deleted unused var

---
 CHANGELOG.md                      | 2 ++
 src/assets/styles/_variables.scss | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 157d5127..1b96c9fc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added a DeX preview with title, description and image for more user friendliness [#347](https://github.com/DigitalExcellence/dex-frontend/issues/347)
 
+- Added animations on clickable items and while project pages are loading [#321](https://github.com/DigitalExcellence/dex-frontend/issues/321)
+
 ### Changed
 
 - Redesigned project overview page [#365](https://github.com/DigitalExcellence/dex-frontend/issues/365)
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index 43aff97e..a701efd8 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -33,7 +33,7 @@ $box-shadow: 0 3px 6px #0000001a;
 // borderradius
 $border-radius: 6px;
 
-// transform
+// Animations
 $transform-rotate: rotate(-270deg);
 
 $transform-grow-small: scale(1.02);

From 00628b05e2f90f65a17f97546a2770e9c751a79a Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Tue, 12 Jan 2021 10:14:24 +0100
Subject: [PATCH 090/141] Fixed like url

---
 src/app/services/like.service.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/services/like.service.ts b/src/app/services/like.service.ts
index 3ee609c0..31428e2e 100644
--- a/src/app/services/like.service.ts
+++ b/src/app/services/like.service.ts
@@ -31,12 +31,12 @@ export class LikeService {
       private http: HttpClient) { }
 
   public likeProject(projectId: number): void {
-    this.http.post(this.url + projectId, {projectId: projectId})
+    this.http.post(`${this.url}/${projectId}`, {projectId: projectId})
         .subscribe();
   }
 
   public removeLike(projectId: number): void {
-    this.http.delete(this.url + projectId)
+    this.http.delete(`${this.url}/${projectId}`)
         .subscribe();
   }
 }

From 568abb37383a68b283eff139f581a7206c380ad2 Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Tue, 12 Jan 2021 10:15:01 +0100
Subject: [PATCH 091/141] Added onLike event to update overview page when a
 like is clicked in the detail modal

---
 .../project/details/details.component.ts      |  15 ++-
 .../project/overview/overview.component.ts    | 125 +++++++++---------
 src/app/modules/project/project.module.ts     |   2 +-
 3 files changed, 79 insertions(+), 63 deletions(-)

diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 2cef4712..9735bc99 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -31,7 +31,7 @@ import { AlertConfig } from 'src/app/models/internal/alert-config';
 import { AlertType } from 'src/app/models/internal/alert-type';
 import { AlertService } from 'src/app/services/alert.service';
 import { User } from 'src/app/models/domain/user';
-import { EMPTY, Observable } from 'rxjs';
+import { EMPTY, Observable, Subject } from 'rxjs';
 import { HighlightByProjectIdService } from 'src/app/services/highlightid.service';
 import { Highlight } from 'src/app/models/domain/highlight';
 import { ModalDeleteGenericComponent } from 'src/app/components/modals/modal-delete-generic/modal-delete-generic.component';
@@ -86,6 +86,11 @@ export class DetailsComponent implements OnInit {
 
   private currentUser: User;
 
+  /**
+   * Return whether the project was liked or not to the overview page
+   */
+  public onLike: Subject<boolean>;
+
   constructor(
     private activedRoute: ActivatedRoute,
     private projectService: ProjectService,
@@ -98,7 +103,9 @@ export class DetailsComponent implements OnInit {
     private seoService: SEOService,
     private fileRetrieverService: FileRetrieverService,
     private likeService: LikeService
-  ) { }
+  ) {
+    this.onLike = new Subject<boolean>();
+  }
 
   ngOnInit(): void {
       if (this.projectId == null || Number.isNaN(this.projectId) || this.projectId < 1) {
@@ -357,9 +364,13 @@ export class DetailsComponent implements OnInit {
       if (!this.project.userHasLikedProject) {
         this.likeService.likeProject(this.project.id);
         this.project.likeCount++;
+        // We add this so we can update the overview page when the modal is closed
+        this.onLike.next(true);
       } else {
         this.likeService.removeLike(this.project.id);
         this.project.likeCount--;
+        // We add this so we can update the overview page when the modal is closed
+        this.onLike.next(false);
       }
       this.project.userHasLikedProject = !this.project.userHasLikedProject;
     }
diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts
index 54908253..429dc4a7 100644
--- a/src/app/modules/project/overview/overview.component.ts
+++ b/src/app/modules/project/overview/overview.component.ts
@@ -100,9 +100,9 @@ export class OverviewComponent implements OnInit, AfterContentInit {
    * The possible pagination options for the dropdown
    */
   public paginationDropDownOptions = [
-    { id: 0, amountOnPage: 12 },
-    { id: 1, amountOnPage: 24 },
-    { id: 2, amountOnPage: 36 },
+    {id: 0, amountOnPage: 12},
+    {id: 1, amountOnPage: 24},
+    {id: 2, amountOnPage: 36},
   ];
 
   /**
@@ -120,44 +120,36 @@ export class OverviewComponent implements OnInit, AfterContentInit {
   public highlightFormControl: FormControl;
 
   public sortTypeSelectOptions: SelectFormOption[] = [
-    { value: 'updated', viewValue: 'Updated' },
-    { value: 'created', viewValue: 'Created' },
-    { value: 'name', viewValue: 'Name' }
+    {value: 'updated', viewValue: 'Updated'},
+    {value: 'created', viewValue: 'Created'},
+    {value: 'name', viewValue: 'Name'}
   ];
 
   public sortDirectionSelectOptions: SelectFormOption[] = [
-    { value: 'desc', viewValue: 'Descending' },
-    { value: 'asc', viewValue: 'Ascending' }
+    {value: 'desc', viewValue: 'Descending'},
+    {value: 'asc', viewValue: 'Ascending'}
   ];
 
   public highlightSelectOptions: SelectFormOption[] = [
-    { value: null, viewValue: 'All projects' },
-    { value: true, viewValue: 'Only highlighted' },
-    { value: false, viewValue: 'Only non highlighted' }
+    {value: null, viewValue: 'All projects'},
+    {value: true, viewValue: 'Only highlighted'},
+    {value: false, viewValue: 'Only non highlighted'}
   ];
 
   public displaySearchElements = false;
-
+  public currentOnlyHighlightedProjects: boolean = null;
+  public currentPage = 1;
+  /**
+   * Project parameter gets updated per project detail modal
+   */
+  public currentProject: Project = null;
   private searchSubject = new BehaviorSubject<string>(null);
-
   /**
    * Parameters for keeping track of the current internalSearch query values.
    */
   private currentSearchInput: string = null;
-
   private currentSortType: string = this.sortTypeSelectOptions[0].value;
-
   private currentSortDirection: string = this.sortDirectionSelectOptions[0].value;
-
-  public currentOnlyHighlightedProjects: boolean = null;
-
-  public currentPage = 1;
-
-  /**
-   * Project parameter gets updated per project detail modal
-   */
-  public currentProject: Project = null;
-
   /**
    * Property to indicate whether the project is loading.
    */
@@ -168,15 +160,15 @@ export class OverviewComponent implements OnInit, AfterContentInit {
   private modalSubscriptions: Subscription[] = [];
 
   constructor(
-    private router: Router,
-    private paginationService: PaginationService,
-    private internalSearchService: InternalSearchService,
-    private formBuilder: FormBuilder,
-    private activatedRoute: ActivatedRoute,
-    private seoService: SEOService,
-    private modalService: BsModalService,
-    private location: Location,
-    private authService: AuthService) {
+      private router: Router,
+      private paginationService: PaginationService,
+      private internalSearchService: InternalSearchService,
+      private formBuilder: FormBuilder,
+      private activatedRoute: ActivatedRoute,
+      private seoService: SEOService,
+      private modalService: BsModalService,
+      private location: Location,
+      private authService: AuthService) {
     this.searchControl = new FormControl('');
 
     this.categoryForm = this.formBuilder.group({
@@ -214,15 +206,15 @@ export class OverviewComponent implements OnInit, AfterContentInit {
 
     // Subscribe to search subject to debounce the input and afterwards searchAndFilter.
     this.searchSubject
-      .pipe(
-        debounceTime(500)
-      )
-      .subscribe((result) => {
-        if (result == null) {
-          return;
-        }
-        this.onInternalQueryChange();
-      });
+        .pipe(
+            debounceTime(500)
+        )
+        .subscribe((result) => {
+          if (result == null) {
+            return;
+          }
+          this.onInternalQueryChange();
+        });
 
     this.searchControl.valueChanges.subscribe((value) => this.onSearchInputValueChange(value));
 
@@ -359,15 +351,15 @@ export class OverviewComponent implements OnInit, AfterContentInit {
     if (internalSearchQuery.query == null) {
       // No search query provided use projectService.
       this.paginationService
-        .getProjectsPaginated(internalSearchQuery)
-        .pipe(finalize(() => (this.projectsLoading = false)))
-        .subscribe((result) => this.handleSearchAndProjectResponse(result));
+          .getProjectsPaginated(internalSearchQuery)
+          .pipe(finalize(() => (this.projectsLoading = false)))
+          .subscribe((result) => this.handleSearchAndProjectResponse(result));
     } else {
       // Search query provided use searchService.
       this.internalSearchService
-        .getSearchResultsPaginated(internalSearchQuery)
-        .pipe(finalize(() => (this.projectsLoading = false)))
-        .subscribe((result) => this.handleSearchAndProjectResponse(result));
+          .getSearchResultsPaginated(internalSearchQuery)
+          .pipe(finalize(() => (this.projectsLoading = false)))
+          .subscribe((result) => this.handleSearchAndProjectResponse(result));
     }
   }
 
@@ -398,19 +390,32 @@ export class OverviewComponent implements OnInit, AfterContentInit {
       this.modalRef = this.modalService.show(DetailsComponent, {animated: true, initialState: {projectId: projectId}});
       this.modalRef.setClass('project-modal');
 
+      this.modalRef.content.onLike.subscribe(isLiked => {
+        let projectIndexToUpdate = this.projects.findIndex(project => project.id === projectId);
+        if(isLiked) {
+          this.projects[projectIndexToUpdate].likeCount++;
+          this.projects[projectIndexToUpdate].userHasLikedProject = true;
+        } else {
+          this.projects[projectIndexToUpdate].likeCount--;
+          this.projects[projectIndexToUpdate].userHasLikedProject = false;
+        }
+      })
+
       // Go back to home page after the modal is closed
       this.modalSubscriptions.push(
-          this.modalService.onHide.subscribe((reason: string | any) => {
-            if (this.location.path().startsWith('/project/details')) {
-              this.location.replaceState('/project/overview');
-              this.updateSEOTags();
-            }
-          }, reason => {
-            if (this.location.path().startsWith('/project/details')) {
-              this.location.replaceState('/project/overview');
-              this.updateSEOTags();
-            }
-          }));
+          this.modalService.onHide.subscribe(() => {
+                if (this.location.path().startsWith('/project/details')) {
+                  this.location.replaceState('/project/overview');
+                  this.updateSEOTags();
+                }
+              }
+              // , reason => {
+              //   if (this.location.path().startsWith('/project/details')) {
+              //     this.location.replaceState('/project/overview');
+              //     this.updateSEOTags();
+              //   }
+              // }
+          ));
     }
   }
 
diff --git a/src/app/modules/project/project.module.ts b/src/app/modules/project/project.module.ts
index 76e27a91..11f3e5dc 100644
--- a/src/app/modules/project/project.module.ts
+++ b/src/app/modules/project/project.module.ts
@@ -29,7 +29,7 @@ import { EmbedComponent } from './embed/embed.component';
 import { PaginationModule } from 'ngx-bootstrap/pagination';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalHighlightFormComponent } from 'src/app/modules/project/modal-highlight-form/modal-highlight-form.component';
-import { SharedModule } from './../shared/shared.module';
+import { SharedModule } from 'src/app/modules/shared/shared.module';
 import { QuillModule } from 'ngx-quill';
 import { SafeHtmlPipe } from 'src/app/utils/safeHtml.pipe';
 import { FileUploaderComponent } from 'src/app/components/file-uploader/file-uploader.component';

From eb03ee35b6b8e3322c844fd055d5990349755c9b Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Tue, 12 Jan 2021 10:46:50 +0100
Subject: [PATCH 092/141] Added tslint rule for relative imports and updated
 all relative imports

---
 package-lock.json                             | 20 +++++++++++++++++++
 package.json                                  |  1 +
 src/app/interceptors/auth.interceptor.ts      |  2 +-
 src/app/interceptors/http.interceptor.ts      |  6 +++---
 src/app/models/resources/search-result.ts     |  2 +-
 src/app/modules/project/add/add.module.ts     |  2 +-
 .../project/details/details.component.ts      |  9 ++++++---
 .../highlights-modal.component.ts             |  2 +-
 .../modal-highlight-form.component.ts         |  4 ++--
 src/app/modules/project/project.module.ts     |  2 +-
 src/app/services/embed.service.ts             |  2 +-
 src/app/services/file-uploader.service.ts     |  5 ++---
 src/app/services/highlight.service.ts         |  8 ++++----
 src/app/services/highlightid.service.ts       |  4 ++--
 src/app/services/internal-search.service.ts   |  6 +++---
 src/app/services/pagination.service.ts        |  4 ++--
 src/app/services/project.service.ts           |  8 ++++----
 src/app/services/seo.service.ts               |  1 -
 src/app/services/user.service.ts              |  6 +++---
 src/app/services/wizard-api.service.ts        |  4 ++--
 src/app/services/wizard-github.service.ts     | 17 ++++++++--------
 src/app/services/wizard.service.ts            |  4 ++--
 tslint.json                                   |  9 ++++++++-
 23 files changed, 78 insertions(+), 50 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4b3bc314..12c5f4a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13632,6 +13632,26 @@
         }
       }
     },
+    "tslint-microsoft-contrib": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tslint-microsoft-contrib/-/tslint-microsoft-contrib-6.2.0.tgz",
+      "integrity": "sha512-6tfi/2tHqV/3CL77pULBcK+foty11Rr0idRDxKnteTaKm6gWF9qmaCNU17HVssOuwlYNyOmd9Jsmjd+1t3a3qw==",
+      "dev": true,
+      "requires": {
+        "tsutils": "^2.27.2 <2.29.0"
+      },
+      "dependencies": {
+        "tsutils": {
+          "version": "2.28.0",
+          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.28.0.tgz",
+          "integrity": "sha512-bh5nAtW0tuhvOJnx1GLRn5ScraRLICGyJV5wJhtRWOLsxW70Kk5tZtpK3O/hW6LDnqKS9mlUMPZj9fEMJ0gxqA==",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.8.1"
+          }
+        }
+      }
+    },
     "tsutils": {
       "version": "2.29.0",
       "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
diff --git a/package.json b/package.json
index d7b8ee37..b03fb934 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "protractor": "^5.4.4",
     "ts-node": "~8.3.0",
     "tslint": "^6.1.3",
+    "tslint-microsoft-contrib": "^6.2.0",
     "typescript": "~3.7.5"
   }
 }
diff --git a/src/app/interceptors/auth.interceptor.ts b/src/app/interceptors/auth.interceptor.ts
index 84c55aeb..6aa9f126 100644
--- a/src/app/interceptors/auth.interceptor.ts
+++ b/src/app/interceptors/auth.interceptor.ts
@@ -20,7 +20,7 @@ import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { AuthService } from '../services/auth.service';
+import { AuthService } from 'src/app/services/auth.service';
 
 @Injectable()
 export class TokenInterceptor implements HttpInterceptor {
diff --git a/src/app/interceptors/http.interceptor.ts b/src/app/interceptors/http.interceptor.ts
index 120c822b..56a117ed 100644
--- a/src/app/interceptors/http.interceptor.ts
+++ b/src/app/interceptors/http.interceptor.ts
@@ -1,4 +1,4 @@
-import { API_CONFIG } from './../config/api-config';
+import { API_CONFIG } from 'src/app/config/api-config';
 /*
  *  Digital Excellence Copyright (C) 2020 Brend Smits
  *
@@ -15,9 +15,9 @@ import { API_CONFIG } from './../config/api-config';
  *   along with this program, in the LICENSE.md file in the root project directory.
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  */
-import { HttpRequest, HttpInterceptor, HttpHandler, HttpEvent } from '@angular/common/http';
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable, EMPTY } from 'rxjs';
+import { EMPTY, Observable } from 'rxjs';
 import { catchError, retry } from 'rxjs/operators';
 import * as Sentry from '@sentry/browser';
 import { environment } from 'src/environments/environment';
diff --git a/src/app/models/resources/search-result.ts b/src/app/models/resources/search-result.ts
index ae5b020b..ff8859a0 100644
--- a/src/app/models/resources/search-result.ts
+++ b/src/app/models/resources/search-result.ts
@@ -16,7 +16,7 @@
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  *
  */
-import { UploadFile } from '../domain/uploadFile';
+import { UploadFile } from 'src/app/models/domain/uploadFile';
 
 export interface SearchResultResource {
     id: number;
diff --git a/src/app/modules/project/add/add.module.ts b/src/app/modules/project/add/add.module.ts
index 597a441a..baa6c1f9 100644
--- a/src/app/modules/project/add/add.module.ts
+++ b/src/app/modules/project/add/add.module.ts
@@ -22,7 +22,7 @@ import { AddRoutingModule } from './add-routing.module';
 import { ManualComponent } from './manual/manual.component';
 import { SourceComponent } from './source/source.component';
 import { QuillModule } from 'ngx-quill';
-import { ProjectModule } from '../project.module';
+import { ProjectModule } from 'src/app/modules/project/project.module';
 
 @NgModule({
   declarations: [
diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 8db3724b..b390e52a 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -23,12 +23,15 @@ import { AuthService } from 'src/app/services/auth.service';
 import { HighlightService } from 'src/app/services/highlight.service';
 import { HighlightAdd } from 'src/app/models/resources/highlight-add';
 import { BsModalService, ModalOptions } from 'ngx-bootstrap/modal';
-import { ModalHighlightFormComponent, HighlightFormResult } from 'src/app/modules/project/modal-highlight-form/modal-highlight-form.component';
+import {
+  HighlightFormResult,
+  ModalHighlightFormComponent
+} from 'src/app/modules/project/modal-highlight-form/modal-highlight-form.component';
 import { AlertConfig } from 'src/app/models/internal/alert-config';
 import { AlertType } from 'src/app/models/internal/alert-type';
 import { AlertService } from 'src/app/services/alert.service';
 import { User } from 'src/app/models/domain/user';
-import { Observable, EMPTY } from 'rxjs';
+import { EMPTY, Observable } from 'rxjs';
 import { HighlightByProjectIdService } from 'src/app/services/highlightid.service';
 import { Highlight } from 'src/app/models/domain/highlight';
 import { ModalDeleteGenericComponent } from 'src/app/components/modals/modal-delete-generic/modal-delete-generic.component';
@@ -38,7 +41,7 @@ import { HighlightUpdate } from 'src/app/models/resources/highlight-update';
 import { SafeUrl } from '@angular/platform-browser';
 import { finalize, switchMap } from 'rxjs/operators';
 import { FileRetrieverService } from 'src/app/services/file-retriever.service';
-import { HighlightsModalComponent } from '../highlights-modal/highlights-modal.component';
+import { HighlightsModalComponent } from 'src/app/modules/project/highlights-modal/highlights-modal.component';
 
 
 /**
diff --git a/src/app/modules/project/highlights-modal/highlights-modal.component.ts b/src/app/modules/project/highlights-modal/highlights-modal.component.ts
index 7b9f8c50..2a703aa7 100644
--- a/src/app/modules/project/highlights-modal/highlights-modal.component.ts
+++ b/src/app/modules/project/highlights-modal/highlights-modal.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { BsModalRef } from 'ngx-bootstrap/modal';
-import { Highlight } from '../../../models/domain/highlight';
+import { Highlight } from 'src/app/models/domain/highlight';
 import { HighlightService } from 'src/app/services/highlight.service';
 import { AlertService } from 'src/app/services/alert.service';
 import { AlertType } from 'src/app/models/internal/alert-type';
diff --git a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
index d95cb9a2..0b35e6ed 100644
--- a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
+++ b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts
@@ -16,10 +16,10 @@
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  *
  */
-import { Component, Output, EventEmitter, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { Highlight } from '../../../models/domain/highlight';
+import { Highlight } from 'src/app/models/domain/highlight';
 import { HighlightService } from 'src/app/services/highlight.service';
 import * as moment from 'moment';
 import { AlertConfig } from 'src/app/models/internal/alert-config';
diff --git a/src/app/modules/project/project.module.ts b/src/app/modules/project/project.module.ts
index 76e27a91..11f3e5dc 100644
--- a/src/app/modules/project/project.module.ts
+++ b/src/app/modules/project/project.module.ts
@@ -29,7 +29,7 @@ import { EmbedComponent } from './embed/embed.component';
 import { PaginationModule } from 'ngx-bootstrap/pagination';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalHighlightFormComponent } from 'src/app/modules/project/modal-highlight-form/modal-highlight-form.component';
-import { SharedModule } from './../shared/shared.module';
+import { SharedModule } from 'src/app/modules/shared/shared.module';
 import { QuillModule } from 'ngx-quill';
 import { SafeHtmlPipe } from 'src/app/utils/safeHtml.pipe';
 import { FileUploaderComponent } from 'src/app/components/file-uploader/file-uploader.component';
diff --git a/src/app/services/embed.service.ts b/src/app/services/embed.service.ts
index 3d3f7c7f..9174dbb9 100644
--- a/src/app/services/embed.service.ts
+++ b/src/app/services/embed.service.ts
@@ -1,7 +1,7 @@
 import { Project } from 'src/app/models/domain/project';
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { API_CONFIG } from '../config/api-config';
+import { API_CONFIG } from 'src/app/config/api-config';
 import { EmbeddedProject } from 'src/app/models/domain/embedded-project';
 import { EmbeddedProjectResource } from 'src/app/models/resources/embedded-project-resource';
 import { Observable } from 'rxjs';
diff --git a/src/app/services/file-uploader.service.ts b/src/app/services/file-uploader.service.ts
index e462395d..efd641fb 100644
--- a/src/app/services/file-uploader.service.ts
+++ b/src/app/services/file-uploader.service.ts
@@ -1,9 +1,8 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { API_CONFIG } from '../config/api-config';
-import { UploadFile } from '../models/domain/uploadFile';
-import { Error } from 'tslint/lib/error';
+import { API_CONFIG } from 'src/app/config/api-config';
+import { UploadFile } from 'src/app/models/domain/uploadFile';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/services/highlight.service.ts b/src/app/services/highlight.service.ts
index f6c46330..17f57f2d 100644
--- a/src/app/services/highlight.service.ts
+++ b/src/app/services/highlight.service.ts
@@ -17,10 +17,10 @@
 
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { API_CONFIG } from '../config/api-config';
-import { Highlight } from '../models/domain/highlight';
-import { HighlightAdd } from '../models/resources/highlight-add';
-import { HighlightUpdate } from '../models/resources/highlight-update';
+import { API_CONFIG } from 'src/app/config/api-config';
+import { Highlight } from 'src/app/models/domain/highlight';
+import { HighlightAdd } from 'src/app/models/resources/highlight-add';
+import { HighlightUpdate } from 'src/app/models/resources/highlight-update';
 import { HttpBaseService } from './http-base.service';
 
 @Injectable({
diff --git a/src/app/services/highlightid.service.ts b/src/app/services/highlightid.service.ts
index 3ccfbda6..a3628b49 100644
--- a/src/app/services/highlightid.service.ts
+++ b/src/app/services/highlightid.service.ts
@@ -17,8 +17,8 @@
 
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { API_CONFIG } from '../config/api-config';
-import { Highlight } from '../models/domain/highlight';
+import { API_CONFIG } from 'src/app/config/api-config';
+import { Highlight } from 'src/app/models/domain/highlight';
 import { Observable } from 'rxjs';
 
 @Injectable({
diff --git a/src/app/services/internal-search.service.ts b/src/app/services/internal-search.service.ts
index ab186c77..9116b1eb 100644
--- a/src/app/services/internal-search.service.ts
+++ b/src/app/services/internal-search.service.ts
@@ -16,10 +16,10 @@
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  *
  */
-import { InternalSearchQuery } from './../models/resources/internal-search-query';
+import { InternalSearchQuery } from 'src/app/models/resources/internal-search-query';
 import { Injectable } from '@angular/core';
-import { SearchResultsResource } from '../models/resources/search-results';
-import { API_CONFIG } from '../config/api-config';
+import { SearchResultsResource } from 'src/app/models/resources/search-results';
+import { API_CONFIG } from 'src/app/config/api-config';
 import { Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 
diff --git a/src/app/services/pagination.service.ts b/src/app/services/pagination.service.ts
index 11883d71..bdb9780a 100644
--- a/src/app/services/pagination.service.ts
+++ b/src/app/services/pagination.service.ts
@@ -1,9 +1,9 @@
 import { InternalSearchQuery } from 'src/app/models/resources/internal-search-query';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { API_CONFIG } from '../config/api-config';
+import { API_CONFIG } from 'src/app/config/api-config';
 import { Observable } from 'rxjs';
-import { SearchResultsResource } from '../models/resources/search-results';
+import { SearchResultsResource } from 'src/app/models/resources/search-results';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts
index 773bafa4..d55b212a 100644
--- a/src/app/services/project.service.ts
+++ b/src/app/services/project.service.ts
@@ -17,10 +17,10 @@
 
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { API_CONFIG } from '../config/api-config';
-import { Project } from '../models/domain/project';
-import { ProjectAdd } from '../models/resources/project-add';
-import { ProjectUpdate } from '../models/resources/project-update';
+import { API_CONFIG } from 'src/app/config/api-config';
+import { Project } from 'src/app/models/domain/project';
+import { ProjectAdd } from 'src/app/models/resources/project-add';
+import { ProjectUpdate } from 'src/app/models/resources/project-update';
 import { HttpBaseService } from './http-base.service';
 
 @Injectable({
diff --git a/src/app/services/seo.service.ts b/src/app/services/seo.service.ts
index 6da9dd71..ad236cc5 100644
--- a/src/app/services/seo.service.ts
+++ b/src/app/services/seo.service.ts
@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
-import { stringify } from 'querystring';
 
 @Injectable({
   providedIn: 'root',
diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts
index 9bbec44c..7456bfe7 100644
--- a/src/app/services/user.service.ts
+++ b/src/app/services/user.service.ts
@@ -17,9 +17,9 @@
 
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { API_CONFIG } from '../config/api-config';
-import { User } from '../models/domain/user';
-import { UserAdd } from '../models/resources/user-add';
+import { API_CONFIG } from 'src/app/config/api-config';
+import { User } from 'src/app/models/domain/user';
+import { UserAdd } from 'src/app/models/resources/user-add';
 import { HttpBaseService } from './http-base.service';
 import { Observable } from 'rxjs';
 
diff --git a/src/app/services/wizard-api.service.ts b/src/app/services/wizard-api.service.ts
index 362cbdbc..58ed8564 100644
--- a/src/app/services/wizard-api.service.ts
+++ b/src/app/services/wizard-api.service.ts
@@ -17,9 +17,9 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { GenericWizard } from './interfaces/generic-wizard';
 import { Injectable } from '@angular/core';
-import { API_CONFIG } from '../config/api-config';
+import { API_CONFIG } from 'src/app/config/api-config';
 import { Observable } from 'rxjs';
-import { MappedProject } from '../models/internal/mapped-project';
+import { MappedProject } from 'src/app/models/internal/mapped-project';
 
 /**
  * Service to fetch a repo from api.
diff --git a/src/app/services/wizard-github.service.ts b/src/app/services/wizard-github.service.ts
index 3ee8021b..b98a867e 100644
--- a/src/app/services/wizard-github.service.ts
+++ b/src/app/services/wizard-github.service.ts
@@ -14,18 +14,17 @@
  *   along with this program, in the LICENSE.md file in the root project directory.
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  */
-import { HttpClient } from '@angular/common/http';
+import { HttpBackend, HttpClient } from '@angular/common/http';
 import { GenericWizard } from './interfaces/generic-wizard';
 import { Injectable } from '@angular/core';
-import { Observable, forkJoin, of, throwError } from 'rxjs';
-import { map, switchMap, catchError } from 'rxjs/operators';
-import { GitHubContributor } from '../models/resources/external/github/contributor';
-import { MappedCollaborator } from '../models/internal/mapped-collaborator';
-import { Collaborator } from '../models/domain/collaborator';
-import { GitHubRepo } from '../models/resources/external/github/repo';
+import { forkJoin, Observable, of, throwError } from 'rxjs';
+import { catchError, map, switchMap } from 'rxjs/operators';
+import { GitHubContributor } from 'src/app/models/resources/external/github/contributor';
+import { MappedCollaborator } from 'src/app/models/internal/mapped-collaborator';
+import { Collaborator } from 'src/app/models/domain/collaborator';
+import { GitHubRepo } from 'src/app/models/resources/external/github/repo';
 import { MappedProject } from 'src/app/models/internal/mapped-project';
-import { StringUtils } from '../utils/string.utils';
-import { HttpBackend } from '@angular/common/http';
+import { StringUtils } from 'src/app/utils/string.utils';
 
 /**
  * Service to fetch a repo and it's details from Github.
diff --git a/src/app/services/wizard.service.ts b/src/app/services/wizard.service.ts
index 075eb5e9..98d02c86 100644
--- a/src/app/services/wizard.service.ts
+++ b/src/app/services/wizard.service.ts
@@ -21,8 +21,8 @@ import { Router } from '@angular/router';
 import { MappedProject } from 'src/app/models/internal/mapped-project';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import { WizardGithubService } from './wizard-github.service';
-import { AlertConfig } from '../models/internal/alert-config';
-import { AlertType } from '../models/internal/alert-type';
+import { AlertConfig } from 'src/app/models/internal/alert-config';
+import { AlertType } from 'src/app/models/internal/alert-type';
 import { AlertService } from './alert.service';
 
 /**
diff --git a/tslint.json b/tslint.json
index 49dc6708..19228142 100644
--- a/tslint.json
+++ b/tslint.json
@@ -1,5 +1,12 @@
 {
+  "rulesDirectory": [
+    "tslint-microsoft-contrib"
+  ],
   "rules": {
+    "no-relative-imports": [
+      true,
+      "allow-siblings"
+    ],
     "arrow-return-shorthand": true,
     "callable-types": true,
     "class-name": true,
@@ -121,4 +128,4 @@
       "statements"
     ]
   }
-}
\ No newline at end of file
+}

From 44d0332481cdfa5c7e37897c4bef1a69d8dd6cd8 Mon Sep 17 00:00:00 2001
From: Niek van Dam <niekvandam1@outlook.com>
Date: Tue, 12 Jan 2021 11:37:08 +0100
Subject: [PATCH 093/141] updated budget

---
 budget.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/budget.json b/budget.json
index 41aa3772..009f568c 100644
--- a/budget.json
+++ b/budget.json
@@ -4,21 +4,21 @@
       "timings": [
         {
           "metric": "interactive",
-          "budget": 3000
+          "budget": 4500
         },
         {
           "metric": "first-meaningful-paint",
-          "budget": 1000
+          "budget": 4000
         }
       ],
       "resourceSizes": [
         {
           "resourceType": "script",
-          "budget": 125
+          "budget": 300
         },
         {
           "resourceType": "total",
-          "budget": 300
+          "budget": 400
         }
       ],
       "resourceCounts": [
@@ -28,4 +28,4 @@
         }
       ]
     }
-  ]
\ No newline at end of file
+  ] 
\ No newline at end of file

From cb39d06985661fc2fc80fe77a5df81c8e4b5e2b4 Mon Sep 17 00:00:00 2001
From: Niek van Dam <niekvandam1@outlook.com>
Date: Tue, 12 Jan 2021 11:46:17 +0100
Subject: [PATCH 094/141] updated changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ad14f0e6..b0b49576 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fixed issue where images in the project-details view would go outside the page - [#397](https://github.com/DigitalExcellence/dex-frontend/issues/397)
+- Fixed issue where builds failed due to Lighthouse budgets not being high enough [#411](https://github.com/DigitalExcellence/dex-backend/issues/411)
 
 ### Security
 

From 5b7366b30b5696b12af7155955890cc8ba674732 Mon Sep 17 00:00:00 2001
From: Julia <71012148+juliaslaats@users.noreply.github.com>
Date: Wed, 13 Jan 2021 11:25:35 +0100
Subject: [PATCH 095/141] Update CHANGELOG.md

Co-authored-by: Brend Smits <brend_smits@hotmail.com>
---
 CHANGELOG.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1925c8ac..b9bca9f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,7 +10,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - Added update highlight functionality - [#294](https://github.com/DigitalExcellence/dex-frontend/issues/294)
-
 - Added animations on clickable items and while project pages are loading [#321](https://github.com/DigitalExcellence/dex-frontend/issues/321)
 
 ### Changed

From 257da8e6ddc08d6041103731b4116449710f7fbc Mon Sep 17 00:00:00 2001
From: Julia <71012148+juliaslaats@users.noreply.github.com>
Date: Wed, 13 Jan 2021 11:25:47 +0100
Subject: [PATCH 096/141] Update CHANGELOG.md

Co-authored-by: Brend Smits <brend_smits@hotmail.com>
---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b9bca9f3..b455ca2e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - Added update highlight functionality - [#294](https://github.com/DigitalExcellence/dex-frontend/issues/294)
-- Added animations on clickable items and while project pages are loading [#321](https://github.com/DigitalExcellence/dex-frontend/issues/321)
+- Added animations on clickable items and while project pages are loading - [#321](https://github.com/DigitalExcellence/dex-frontend/issues/321)
 
 ### Changed
 

From 8a1ea61996c09437c27d8405ffdc9d61a89ab51a Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Thu, 14 Jan 2021 09:31:40 +0100
Subject: [PATCH 097/141] Removed comment

---
 src/app/modules/project/overview/overview.component.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts
index 429dc4a7..d4308ccf 100644
--- a/src/app/modules/project/overview/overview.component.ts
+++ b/src/app/modules/project/overview/overview.component.ts
@@ -409,12 +409,6 @@ export class OverviewComponent implements OnInit, AfterContentInit {
                   this.updateSEOTags();
                 }
               }
-              // , reason => {
-              //   if (this.location.path().startsWith('/project/details')) {
-              //     this.location.replaceState('/project/overview');
-              //     this.updateSEOTags();
-              //   }
-              // }
           ));
     }
   }

From c7cae5f8b1a8b86e86d7f1f620bb4b2be01f2009 Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Thu, 14 Jan 2021 09:38:13 +0100
Subject: [PATCH 098/141] Fixed imports that got screwed by the merge earlier

---
 src/app/services/internal-search.service.ts | 2 +-
 src/app/services/pagination.service.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/services/internal-search.service.ts b/src/app/services/internal-search.service.ts
index 63d26b05..b04d0b78 100644
--- a/src/app/services/internal-search.service.ts
+++ b/src/app/services/internal-search.service.ts
@@ -20,7 +20,7 @@ import { InternalSearchQuery } from 'src/app/models/resources/internal-search-qu
 import { Injectable } from '@angular/core';
 import { SearchResultsResource } from 'src/app/models/resources/search-results';
 import { API_CONFIG } from 'src/app/config/api-config';
-import { Observable } from 'rxjs';
+import { from, Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { AuthService } from './auth.service';
 import { mergeMap } from 'rxjs/operators';
diff --git a/src/app/services/pagination.service.ts b/src/app/services/pagination.service.ts
index a6baa013..8e2fdd25 100644
--- a/src/app/services/pagination.service.ts
+++ b/src/app/services/pagination.service.ts
@@ -4,7 +4,7 @@ import { Injectable } from '@angular/core';
 import { AuthService } from './auth.service';
 import { mergeMap } from 'rxjs/operators';
 import { API_CONFIG } from 'src/app/config/api-config';
-import { Observable } from 'rxjs';
+import { from, Observable } from 'rxjs';
 import { SearchResultsResource } from 'src/app/models/resources/search-results';
 
 @Injectable({

From 18d485de2f1ee2a0fa449aac51620f45ac473832 Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Thu, 14 Jan 2021 09:41:29 +0100
Subject: [PATCH 099/141] Fixed linter issues

---
 src/app/modules/project/overview/overview.component.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts
index d4308ccf..ce4bded2 100644
--- a/src/app/modules/project/overview/overview.component.ts
+++ b/src/app/modules/project/overview/overview.component.ts
@@ -391,15 +391,15 @@ export class OverviewComponent implements OnInit, AfterContentInit {
       this.modalRef.setClass('project-modal');
 
       this.modalRef.content.onLike.subscribe(isLiked => {
-        let projectIndexToUpdate = this.projects.findIndex(project => project.id === projectId);
-        if(isLiked) {
+        const projectIndexToUpdate = this.projects.findIndex(project => project.id === projectId);
+        if (isLiked) {
           this.projects[projectIndexToUpdate].likeCount++;
           this.projects[projectIndexToUpdate].userHasLikedProject = true;
         } else {
           this.projects[projectIndexToUpdate].likeCount--;
           this.projects[projectIndexToUpdate].userHasLikedProject = false;
         }
-      })
+      });
 
       // Go back to home page after the modal is closed
       this.modalSubscriptions.push(

From 153f26114918a5dda91de1c5f71ea268b99eced9 Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Thu, 14 Jan 2021 09:50:19 +0100
Subject: [PATCH 100/141] enable likes in production environment

---
 src/app/modules/project/details/details.component.html        | 4 +---
 .../modules/project/overview/project/project.component.html   | 2 --
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html
index 4a4049a6..fa14d103 100644
--- a/src/app/modules/project/details/details.component.html
+++ b/src/app/modules/project/details/details.component.html
@@ -50,7 +50,6 @@ <h2 class="project-title">{{ project.name }}</h2>
             <a class='hover' href="{{ project.uri }}" rel="noreferrer noopener" target="_blank">{{ project.uri }}</a>
 
           </div>
-          <ng-container *ngIf="isProduction()">
             <div class="project-metadata__item">
               <p class='title'>Likes <em class="fas fa-heart"></em></p>
               <p (click)="likeClicked()">
@@ -58,7 +57,6 @@ <h2 class="project-title">{{ project.name }}</h2>
                 {{project.likeCount}}
               </p>
             </div>
-          </ng-container>
           <div class="project-metadata__item" [tooltip]="projectUpdated">
             <p class='title cursor-pointer'>Upload Date <em class="fas fa-calendar"></em></p>
             <p class='hover'>{{ project.created | date:'longDate' }}</p>
@@ -165,4 +163,4 @@ <h1>Project details</h1>
       </div>
     </div>
   </ng-template>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/src/app/modules/project/overview/project/project.component.html b/src/app/modules/project/overview/project/project.component.html
index 9066b35f..767265ba 100644
--- a/src/app/modules/project/overview/project/project.component.html
+++ b/src/app/modules/project/overview/project/project.component.html
@@ -72,12 +72,10 @@ <h3 class="project-name">{{project.name}}</h3>
       </div>
     </ng-container>
     <div class='bottom-wrapper'>
-      <ng-container *ngIf="displayTags()">
         <div (click)="likeClicked($event)" class='item'>
           <em [ngClass]="project.userHasLikedProject ? 'fas' : 'far'" class='fa-heart'></em>
             <div class="project-likes" (click)="likeClicked($event)">{{project.likeCount}} Likes</div>
         </div>
-      </ng-container>
       <div [tooltip]="project.collaborators && project.collaborators.length > 0 ? projectCollaborators : null" class='item'>
         <ng-template #projectCollaborators>
               <p *ngFor="let collaborator of project.collaborators">

From 4f5d5ff3e72de203015218cab515889eab74994f Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Thu, 14 Jan 2021 11:38:01 +0100
Subject: [PATCH 101/141] Fixed an issue when the user was not logged in &
 added alert for unauthorized users

---
 .../app-layout/app-layout.component.scss           |  2 +-
 .../modules/project/details/details.component.ts   |  8 ++++++++
 .../project/overview/project/project.component.ts  | 14 +++++++++++++-
 src/app/services/internal-search.service.ts        |  2 +-
 src/app/services/pagination.service.ts             |  2 +-
 src/app/services/project.service.ts                |  2 +-
 6 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/app/components/app-layout/app-layout.component.scss b/src/app/components/app-layout/app-layout.component.scss
index 07ed2b56..8fc00e21 100644
--- a/src/app/components/app-layout/app-layout.component.scss
+++ b/src/app/components/app-layout/app-layout.component.scss
@@ -286,7 +286,7 @@
   min-width: 600px;
   margin-right: auto;
   margin-left: auto;
-  z-index: 10;
+  z-index: 9999;
   pointer-events: none;
 }
 
diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 5fffe5fe..942abf9d 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -374,6 +374,14 @@ export class DetailsComponent implements OnInit {
       }
       this.project.userHasLikedProject = !this.project.userHasLikedProject;
     }
+    // User is not logged in
+    const alertConfig: AlertConfig = {
+      type: AlertType.warning,
+      mainMessage: 'You need to be logged in to like a project',
+      dismissible: true,
+      timeout: this.alertService.defaultTimeout
+    };
+    this.alertService.pushAlert(alertConfig);
   }
 
   private formatTimestamps(highlightTimestamp: string): string {
diff --git a/src/app/modules/project/overview/project/project.component.ts b/src/app/modules/project/overview/project/project.component.ts
index ac225b37..1e9be3dd 100644
--- a/src/app/modules/project/overview/project/project.component.ts
+++ b/src/app/modules/project/overview/project/project.component.ts
@@ -21,6 +21,9 @@ import { FileRetrieverService } from 'src/app/services/file-retriever.service';
 import { environment } from 'src/environments/environment';
 import { LikeService } from 'src/app/services/like.service';
 import { AuthService } from 'src/app/services/auth.service';
+import { AlertConfig } from 'src/app/models/internal/alert-config';
+import { AlertType } from 'src/app/models/internal/alert-type';
+import { AlertService } from 'src/app/services/alert.service';
 
 
 @Component({
@@ -37,7 +40,8 @@ export class ProjectComponent {
   constructor(
       private fileRetrieverService: FileRetrieverService,
       private likeService: LikeService,
-      private authService: AuthService) {
+      private authService: AuthService,
+      private alertService: AlertService) {
   }
 
   /**
@@ -73,6 +77,14 @@ export class ProjectComponent {
       }
       this.project.userHasLikedProject = !this.project.userHasLikedProject;
     }
+    // User is not logged in
+    const alertConfig: AlertConfig = {
+      type: AlertType.warning,
+      mainMessage: 'You need to be logged in to like a project',
+      dismissible: true,
+      timeout: this.alertService.defaultTimeout
+    };
+    this.alertService.pushAlert(alertConfig);
   }
 
   /**
diff --git a/src/app/services/internal-search.service.ts b/src/app/services/internal-search.service.ts
index b04d0b78..831ff308 100644
--- a/src/app/services/internal-search.service.ts
+++ b/src/app/services/internal-search.service.ts
@@ -70,7 +70,7 @@ export class InternalSearchService {
         .then(currentUser => {
           searchResult.results.map(project => {
             project.likeCount = project.likes.length ? project.likes.length : 0;
-            project.userHasLikedProject = project.likes.filter(like => like.userId === currentUser.id).length > 0;
+            project.userHasLikedProject = project.likes.filter(like => like.userId === currentUser?.id).length > 0;
             return project;
           });
           return searchResult;
diff --git a/src/app/services/pagination.service.ts b/src/app/services/pagination.service.ts
index 8e2fdd25..c8d92be6 100644
--- a/src/app/services/pagination.service.ts
+++ b/src/app/services/pagination.service.ts
@@ -55,7 +55,7 @@ export class PaginationService {
         .then(currentUser => {
           searchResult.results.map(project => {
             project.likeCount = project.likes.length ? project.likes.length : 0;
-            project.userHasLikedProject = project.likes.filter(like => like.userId === currentUser.id).length > 0;
+            project.userHasLikedProject = project.likes.filter(like => like.userId === currentUser?.id).length > 0;
             return project;
           });
           return searchResult;
diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts
index 7c8dc60f..5016b3ba 100644
--- a/src/app/services/project.service.ts
+++ b/src/app/services/project.service.ts
@@ -46,7 +46,7 @@ export class ProjectService extends HttpBaseService<Project, ProjectAdd, Project
     return this.authService.getBackendUser()
         .then(currentUser => {
             project.likeCount = project.likes?.length ? project.likes.length : 0;
-            project.userHasLikedProject = project.likes?.filter(like => like.userId === currentUser.id).length > 0;
+            project.userHasLikedProject = project.likes.filter(like => like.userId === currentUser?.id).length > 0;
             return project;
           });
   }

From a9d84783c67a7c20945c585086e12311915f1923 Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Thu, 14 Jan 2021 11:47:23 +0100
Subject: [PATCH 102/141] Fixed rookie mistake

---
 .../project/details/details.component.ts        | 17 +++++++++--------
 .../overview/project/project.component.ts       | 17 +++++++++--------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 942abf9d..f68851de 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -373,15 +373,16 @@ export class DetailsComponent implements OnInit {
         this.onLike.next(false);
       }
       this.project.userHasLikedProject = !this.project.userHasLikedProject;
+    } else {
+      // User is not logged in
+      const alertConfig: AlertConfig = {
+        type: AlertType.warning,
+        mainMessage: 'You need to be logged in to like a project',
+        dismissible: true,
+        timeout: this.alertService.defaultTimeout
+      };
+      this.alertService.pushAlert(alertConfig);
     }
-    // User is not logged in
-    const alertConfig: AlertConfig = {
-      type: AlertType.warning,
-      mainMessage: 'You need to be logged in to like a project',
-      dismissible: true,
-      timeout: this.alertService.defaultTimeout
-    };
-    this.alertService.pushAlert(alertConfig);
   }
 
   private formatTimestamps(highlightTimestamp: string): string {
diff --git a/src/app/modules/project/overview/project/project.component.ts b/src/app/modules/project/overview/project/project.component.ts
index 1e9be3dd..c8144e9c 100644
--- a/src/app/modules/project/overview/project/project.component.ts
+++ b/src/app/modules/project/overview/project/project.component.ts
@@ -76,15 +76,16 @@ export class ProjectComponent {
         this.project.likeCount--;
       }
       this.project.userHasLikedProject = !this.project.userHasLikedProject;
+    } else {
+      // User is not logged in
+      const alertConfig: AlertConfig = {
+        type: AlertType.warning,
+        mainMessage: 'You need to be logged in to like a project',
+        dismissible: true,
+        timeout: this.alertService.defaultTimeout
+      };
+      this.alertService.pushAlert(alertConfig);
     }
-    // User is not logged in
-    const alertConfig: AlertConfig = {
-      type: AlertType.warning,
-      mainMessage: 'You need to be logged in to like a project',
-      dismissible: true,
-      timeout: this.alertService.defaultTimeout
-    };
-    this.alertService.pushAlert(alertConfig);
   }
 
   /**

From 207d6cd0fffbfb90c587e7aba590ceb130ab4cd1 Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Tue, 19 Jan 2021 15:47:23 +0100
Subject: [PATCH 103/141] added a first version

---
 .../overview/project/project.component.html   |  2 +-
 .../overview/project/project.component.scss   |  6 +++++
 src/assets/styles/_variables.scss             | 23 +++++++++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/project/overview/project/project.component.html b/src/app/modules/project/overview/project/project.component.html
index 767265ba..7c6b4b2b 100644
--- a/src/app/modules/project/overview/project/project.component.html
+++ b/src/app/modules/project/overview/project/project.component.html
@@ -74,7 +74,7 @@ <h3 class="project-name">{{project.name}}</h3>
     <div class='bottom-wrapper'>
         <div (click)="likeClicked($event)" class='item'>
           <em [ngClass]="project.userHasLikedProject ? 'fas' : 'far'" class='fa-heart'></em>
-            <div class="project-likes" (click)="likeClicked($event)">{{project.likeCount}} Likes</div>
+            <div class="project-likes">{{project.likeCount}} Likes</div>
         </div>
       <div [tooltip]="project.collaborators && project.collaborators.length > 0 ? projectCollaborators : null" class='item'>
         <ng-template #projectCollaborators>
diff --git a/src/app/modules/project/overview/project/project.component.scss b/src/app/modules/project/overview/project/project.component.scss
index 1990a60a..6e4a18bf 100644
--- a/src/app/modules/project/overview/project/project.component.scss
+++ b/src/app/modules/project/overview/project/project.component.scss
@@ -249,6 +249,12 @@
             color: $accent-color-red-primary;
           }
         }
+        .fas.fa-heart {
+          animation: heartbeat .4s linear 1;
+        }
+        .far.fa-heart {
+          animation: fade-in .2s ease-in 1;
+        }
       }
     }
   }
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index a701efd8..8fdd43c9 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -43,3 +43,26 @@ $transform-grow-big: scale(1.08);
 $transition-long: .5s ease-in-out;
 $transition-short: .25s ease-in-out;
 
+@keyframes heartbeat{
+    0%{
+        transform: scale(1)
+    }
+    25%{
+        transform: scale(0.8)
+    }
+    75%{
+        transform: scale(1.2)
+    }
+    100%{
+        transform: scale(1)
+    }
+}
+
+@keyframes fade-in{
+    from{
+        transform: scale(0.2)
+    }
+    to{
+        transform: scale(1)
+    }
+}
\ No newline at end of file

From 02090952667a556bf0af6aa1974df000722f9652 Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Wed, 20 Jan 2021 11:48:31 +0100
Subject: [PATCH 104/141] +boolean to trigger animation after first click

---
 .../overview/project/project.component.html      | 16 ++++++++--------
 .../overview/project/project.component.scss      |  4 ++--
 .../overview/project/project.component.ts        |  3 +++
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/app/modules/project/overview/project/project.component.html b/src/app/modules/project/overview/project/project.component.html
index 7c6b4b2b..671985b6 100644
--- a/src/app/modules/project/overview/project/project.component.html
+++ b/src/app/modules/project/overview/project/project.component.html
@@ -72,15 +72,15 @@ <h3 class="project-name">{{project.name}}</h3>
       </div>
     </ng-container>
     <div class='bottom-wrapper'>
-        <div (click)="likeClicked($event)" class='item'>
-          <em [ngClass]="project.userHasLikedProject ? 'fas' : 'far'" class='fa-heart'></em>
-            <div class="project-likes">{{project.likeCount}} Likes</div>
-        </div>
+      <div (click)="likeClicked($event)" class='item'>
+        <em [ngClass]="[project.userHasLikedProject ? 'fas' : 'far', this.animationTriggered ? 'animated' : '']" class='fa-heart'></em>
+        <div class="project-likes">{{project.likeCount}} Likes</div>
+      </div>
       <div [tooltip]="project.collaborators && project.collaborators.length > 0 ? projectCollaborators : null" class='item'>
         <ng-template #projectCollaborators>
-              <p *ngFor="let collaborator of project.collaborators">
-                {{collaborator.fullName}} - {{collaborator.role}}
-              </p>
+          <p *ngFor="let collaborator of project.collaborators">
+            {{collaborator.fullName}} - {{collaborator.role}}
+          </p>
         </ng-template>
         <em class='fas fa-users'></em>
         <div class="project-collaborators">{{project.collaborators ? project.collaborators.length : 0}} collaborators</div>
@@ -99,4 +99,4 @@ <h3 class="project-name">{{project.name}}</h3>
       </div>
     </div>
   </div>
-</ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/src/app/modules/project/overview/project/project.component.scss b/src/app/modules/project/overview/project/project.component.scss
index 6e4a18bf..687b817e 100644
--- a/src/app/modules/project/overview/project/project.component.scss
+++ b/src/app/modules/project/overview/project/project.component.scss
@@ -249,10 +249,10 @@
             color: $accent-color-red-primary;
           }
         }
-        .fas.fa-heart {
+        .fas.fa-heart.animated {
           animation: heartbeat .4s linear 1;
         }
-        .far.fa-heart {
+        .far.fa-heart.animated {
           animation: fade-in .2s ease-in 1;
         }
       }
diff --git a/src/app/modules/project/overview/project/project.component.ts b/src/app/modules/project/overview/project/project.component.ts
index c8144e9c..ee3af6cf 100644
--- a/src/app/modules/project/overview/project/project.component.ts
+++ b/src/app/modules/project/overview/project/project.component.ts
@@ -36,6 +36,7 @@ export class ProjectComponent {
 
   @Input() showListView: boolean;
   @Input() project: Project;
+  @Input() animationTriggered: boolean;
 
   constructor(
       private fileRetrieverService: FileRetrieverService,
@@ -71,9 +72,11 @@ export class ProjectComponent {
       if (!this.project.userHasLikedProject) {
         this.likeService.likeProject(this.project.id);
         this.project.likeCount++;
+        this.animationTriggered = true;
       } else {
         this.likeService.removeLike(this.project.id);
         this.project.likeCount--;
+        this.animationTriggered = true;
       }
       this.project.userHasLikedProject = !this.project.userHasLikedProject;
     } else {

From d49da6aeedfc4622a2c3b2b3dc56028306d39b7f Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Wed, 20 Jan 2021 11:51:07 +0100
Subject: [PATCH 105/141] changed boolean declaration

---
 src/app/modules/project/overview/project/project.component.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/project/overview/project/project.component.ts b/src/app/modules/project/overview/project/project.component.ts
index ee3af6cf..0a9c31c2 100644
--- a/src/app/modules/project/overview/project/project.component.ts
+++ b/src/app/modules/project/overview/project/project.component.ts
@@ -36,7 +36,8 @@ export class ProjectComponent {
 
   @Input() showListView: boolean;
   @Input() project: Project;
-  @Input() animationTriggered: boolean;
+  
+  public animationTriggered = false;
 
   constructor(
       private fileRetrieverService: FileRetrieverService,

From 1e439a395ad91d2fcdbfafe3a45ea118c3c2f4ef Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Wed, 20 Jan 2021 12:00:19 +0100
Subject: [PATCH 106/141] added animation to detail page

---
 src/app/modules/project/details/details.component.html     | 2 +-
 src/app/modules/project/details/details.component.scss     | 7 +++++++
 src/app/modules/project/details/details.component.ts       | 7 +++++++
 .../modules/project/overview/project/project.component.ts  | 3 +++
 4 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html
index fa14d103..b30fc769 100644
--- a/src/app/modules/project/details/details.component.html
+++ b/src/app/modules/project/details/details.component.html
@@ -53,7 +53,7 @@ <h2 class="project-title">{{ project.name }}</h2>
             <div class="project-metadata__item">
               <p class='title'>Likes <em class="fas fa-heart"></em></p>
               <p (click)="likeClicked()">
-                <em [ngClass]="project.userHasLikedProject ? 'fas' : 'far'" class='fa-heart'></em>
+                <em [ngClass]="[project.userHasLikedProject ? 'fas' : 'far', this.animationTriggered ? 'animated' : '']" class='fa-heart'></em>
                 {{project.likeCount}}
               </p>
             </div>
diff --git a/src/app/modules/project/details/details.component.scss b/src/app/modules/project/details/details.component.scss
index 5dd11e0a..2088aee7 100644
--- a/src/app/modules/project/details/details.component.scss
+++ b/src/app/modules/project/details/details.component.scss
@@ -164,6 +164,13 @@
         color: $light-mode-grey-primary;
         padding: 0;
       }
+
+      .fas.fa-heart.animated {
+        animation: heartbeat .4s linear 1;
+      }
+      .far.fa-heart.animated {
+        animation: fade-in .2s ease-in 1;
+      }
     }
     .hover {
       &:hover {
diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index f68851de..8b82cd92 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -91,6 +91,11 @@ export class DetailsComponent implements OnInit {
    */
   public onLike: Subject<boolean>;
 
+  /**
+   * Boolean to trigger animation only after first click and not on page load. 
+   */
+  public animationTriggered = false;
+
   constructor(
     private activedRoute: ActivatedRoute,
     private projectService: ProjectService,
@@ -364,11 +369,13 @@ export class DetailsComponent implements OnInit {
       if (!this.project.userHasLikedProject) {
         this.likeService.likeProject(this.project.id);
         this.project.likeCount++;
+        this.animationTriggered = true;
         // We add this so we can update the overview page when the modal is closed
         this.onLike.next(true);
       } else {
         this.likeService.removeLike(this.project.id);
         this.project.likeCount--;
+        this.animationTriggered = true;
         // We add this so we can update the overview page when the modal is closed
         this.onLike.next(false);
       }
diff --git a/src/app/modules/project/overview/project/project.component.ts b/src/app/modules/project/overview/project/project.component.ts
index 0a9c31c2..566e2305 100644
--- a/src/app/modules/project/overview/project/project.component.ts
+++ b/src/app/modules/project/overview/project/project.component.ts
@@ -37,6 +37,9 @@ export class ProjectComponent {
   @Input() showListView: boolean;
   @Input() project: Project;
   
+  /**
+   * Boolean to trigger animation only after first click and not on page load. 
+   */
   public animationTriggered = false;
 
   constructor(

From 8b6ae49fc965493f259729b740420ddd2bf541f6 Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Wed, 20 Jan 2021 12:03:17 +0100
Subject: [PATCH 107/141] changed small margin

---
 src/app/modules/project/details/details.component.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/project/details/details.component.scss b/src/app/modules/project/details/details.component.scss
index 2088aee7..43933e37 100644
--- a/src/app/modules/project/details/details.component.scss
+++ b/src/app/modules/project/details/details.component.scss
@@ -164,7 +164,9 @@
         color: $light-mode-grey-primary;
         padding: 0;
       }
-
+      .fa-heart {
+        margin-left: 2px;
+      }
       .fas.fa-heart.animated {
         animation: heartbeat .4s linear 1;
       }

From c77f0918ab2b2a17606d496448c3c6fdd0ff20e4 Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Wed, 20 Jan 2021 12:14:56 +0100
Subject: [PATCH 108/141] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e1c30cf..d853850a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added functionality to like projects [#389](https://github.com/DigitalExcellence/dex-frontend/issues/389)
 - Added update highlight functionality - [#294](https://github.com/DigitalExcellence/dex-frontend/issues/294)
 - Added animations on clickable items and while project pages are loading - [#321](https://github.com/DigitalExcellence/dex-frontend/issues/321)
+- Added animations when user likes (or unlikes) a project - [#414](https://github.com/DigitalExcellence/dex-frontend/issues/414)
 
 ### Changed
 

From f2a814bc3377eb95d9c29575b5684eec51eba80d Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Wed, 20 Jan 2021 12:29:59 +0100
Subject: [PATCH 109/141] formatting changes

---
 .../project/details/details.component.ts      | 78 +++++++++----------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 8b82cd92..bb36507d 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -113,47 +113,47 @@ export class DetailsComponent implements OnInit {
   }
 
   ngOnInit(): void {
-      if (this.projectId == null || Number.isNaN(this.projectId) || this.projectId < 1) {
-        this.invalidId = this.projectId.toString();
-        return;
-      }
+    if (this.projectId == null || Number.isNaN(this.projectId) || this.projectId < 1) {
+      this.invalidId = this.projectId.toString();
+      return;
+    }
 
-      this.authService.authNavStatus$.subscribe((status) => {
-        this.isAuthenticated = status;
-      });
-      this.currentUser = this.authService.getCurrentBackendUser();
-
-      this.projectService.get(this.projectId)
-          .pipe(
-              finalize(() => this.projectLoading = false)
-          )
-          .subscribe(
-              (result) => {
-                this.project = result;
-                const desc = (this.project.shortDescription) ? this.project.shortDescription : this.project.description;
-                this.determineDisplayEditProjectButton();
-                this.determineDisplayDeleteProjectButton();
-                this.determineDisplayEmbedButton();
-                this.determineDisplayHighlightButton();
-
-                // Updates meta and title tags
-                this.seoService.updateDescription(desc);
-                this.seoService.updateTitle(this.project.name);
-              }
-          );
-
-      if (this.authService.currentBackendUserHasScope(scopes.HighlightRead)) {
-        this.highlightByProjectIdService.getHighlightsByProjectId(this.projectId)
-            .subscribe(highlights => {
-              if (highlights == null) {
-                return;
-              }
-              if (highlights.length > 0) {
-                this.isProjectHighlighted = true;
-              }
-            });
-      }
+    this.authService.authNavStatus$.subscribe((status) => {
+      this.isAuthenticated = status;
+    });
+    this.currentUser = this.authService.getCurrentBackendUser();
+
+    this.projectService.get(this.projectId)
+      .pipe(
+        finalize(() => this.projectLoading = false)
+      )
+      .subscribe(
+        (result) => {
+          this.project = result;
+          const desc = (this.project.shortDescription) ? this.project.shortDescription : this.project.description;
+          this.determineDisplayEditProjectButton();
+          this.determineDisplayDeleteProjectButton();
+          this.determineDisplayEmbedButton();
+          this.determineDisplayHighlightButton();
+
+          // Updates meta and title tags
+          this.seoService.updateDescription(desc);
+          this.seoService.updateTitle(this.project.name);
+        }
+      );
+
+    if (this.authService.currentBackendUserHasScope(scopes.HighlightRead)) {
+      this.highlightByProjectIdService.getHighlightsByProjectId(this.projectId)
+        .subscribe(highlights => {
+          if (highlights == null) {
+            return;
+          }
+          if (highlights.length > 0) {
+            this.isProjectHighlighted = true;
+          }
+        });
     }
+  }
 
   /**
    * Highlight a project by calling the API

From d182d493233ecd758963df9ba7fef0f567da940a Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Wed, 20 Jan 2021 12:40:20 +0100
Subject: [PATCH 110/141] fix for ng lint check

---
 src/app/modules/project/details/details.component.ts          | 2 +-
 src/app/modules/project/overview/project/project.component.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index bb36507d..a4151974 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -92,7 +92,7 @@ export class DetailsComponent implements OnInit {
   public onLike: Subject<boolean>;
 
   /**
-   * Boolean to trigger animation only after first click and not on page load. 
+   * Boolean to trigger animation only after first click and not on page load.
    */
   public animationTriggered = false;
 
diff --git a/src/app/modules/project/overview/project/project.component.ts b/src/app/modules/project/overview/project/project.component.ts
index 566e2305..9b450a97 100644
--- a/src/app/modules/project/overview/project/project.component.ts
+++ b/src/app/modules/project/overview/project/project.component.ts
@@ -36,9 +36,9 @@ export class ProjectComponent {
 
   @Input() showListView: boolean;
   @Input() project: Project;
-  
+
   /**
-   * Boolean to trigger animation only after first click and not on page load. 
+   * Boolean to trigger animation only after first click and not on page load.
    */
   public animationTriggered = false;
 

From f794f5cb4df5838cae79790f71e5a22594b4ae1c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 21 Jan 2021 14:48:09 +0000
Subject: [PATCH 111/141] Bump socket.io from 2.3.0 to 2.4.1

Bumps [socket.io](https://github.com/socketio/socket.io) from 2.3.0 to 2.4.1.
- [Release notes](https://github.com/socketio/socket.io/releases)
- [Changelog](https://github.com/socketio/socket.io/blob/2.4.1/CHANGELOG.md)
- [Commits](https://github.com/socketio/socket.io/compare/2.3.0...2.4.1)

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 277 +++++++++++++++++-----------------------------
 1 file changed, 100 insertions(+), 177 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 12c5f4a7..daf00e4e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3911,15 +3911,6 @@
         "tweetnacl": "^0.14.3"
       }
     },
-    "better-assert": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/better-assert/-/better-assert-1.0.2.tgz",
-      "integrity": "sha1-QIZrnhueC1W0gYlDEeaPr/rrxSI=",
-      "dev": true,
-      "requires": {
-        "callsite": "1.0.0"
-      }
-    },
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -4306,12 +4297,6 @@
         "caller-callsite": "^2.0.0"
       }
     },
-    "callsite": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
-      "integrity": "sha1-KAOY5dZkvXQDi28JBRU+borxvCA=",
-      "dev": true
-    },
     "callsites": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
@@ -5807,91 +5792,6 @@
         "once": "^1.4.0"
       }
     },
-    "engine.io": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-3.4.2.tgz",
-      "integrity": "sha512-b4Q85dFkGw+TqgytGPrGgACRUhsdKc9S9ErRAXpPGy/CXKs4tYoHDkvIRdsseAF7NjfVwjRFIn6KTnbw7LwJZg==",
-      "dev": true,
-      "requires": {
-        "accepts": "~1.3.4",
-        "base64id": "2.0.0",
-        "cookie": "0.3.1",
-        "debug": "~4.1.0",
-        "engine.io-parser": "~2.2.0",
-        "ws": "^7.1.2"
-      },
-      "dependencies": {
-        "cookie": {
-          "version": "0.3.1",
-          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
-          "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=",
-          "dev": true
-        },
-        "ws": {
-          "version": "7.3.1",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-7.3.1.tgz",
-          "integrity": "sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==",
-          "dev": true
-        }
-      }
-    },
-    "engine.io-client": {
-      "version": "3.4.4",
-      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.4.4.tgz",
-      "integrity": "sha512-iU4CRr38Fecj8HoZEnFtm2EiKGbYZcPn3cHxqNGl/tmdWRf60KhK+9vE0JeSjgnlS/0oynEfLgKbT9ALpim0sQ==",
-      "dev": true,
-      "requires": {
-        "component-emitter": "~1.3.0",
-        "component-inherit": "0.0.3",
-        "debug": "~3.1.0",
-        "engine.io-parser": "~2.2.0",
-        "has-cors": "1.1.0",
-        "indexof": "0.0.1",
-        "parseqs": "0.0.6",
-        "parseuri": "0.0.6",
-        "ws": "~6.1.0",
-        "xmlhttprequest-ssl": "~1.5.4",
-        "yeast": "0.1.2"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
-        },
-        "parseqs": {
-          "version": "0.0.6",
-          "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
-          "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w==",
-          "dev": true
-        },
-        "parseuri": {
-          "version": "0.0.6",
-          "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
-          "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==",
-          "dev": true
-        },
-        "ws": {
-          "version": "6.1.4",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-6.1.4.tgz",
-          "integrity": "sha512-eqZfL+NE/YQc1/ZynhojeV8q+H050oR8AZ2uIev7RU10svA9ZnJUddHcOUZTJLinZ9yEfdA2kSATS2qZK5fhJA==",
-          "dev": true,
-          "requires": {
-            "async-limiter": "~1.0.0"
-          }
-        }
-      }
-    },
     "engine.io-parser": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.2.1.tgz",
@@ -9496,12 +9396,6 @@
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
       "dev": true
     },
-    "object-component": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/object-component/-/object-component-0.0.3.tgz",
-      "integrity": "sha1-8MaapQ78lbhmwYb0AKM3acsvEpE=",
-      "dev": true
-    },
     "object-copy": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
@@ -10091,24 +9985,6 @@
       "integrity": "sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==",
       "dev": true
     },
-    "parseqs": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.5.tgz",
-      "integrity": "sha1-1SCKNzjkZ2bikbouoXNoSSGouJ0=",
-      "dev": true,
-      "requires": {
-        "better-assert": "~1.0.0"
-      }
-    },
-    "parseuri": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.5.tgz",
-      "integrity": "sha1-gCBKUNTbt3m/3G6+J3jZDkvOMgo=",
-      "dev": true,
-      "requires": {
-        "better-assert": "~1.0.0"
-      }
-    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -12494,58 +12370,68 @@
       }
     },
     "socket.io": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-2.3.0.tgz",
-      "integrity": "sha512-2A892lrj0GcgR/9Qk81EaY2gYhCBxurV0PfmmESO6p27QPrUK1J3zdns+5QPqvUYK2q657nSj0guoIil9+7eFg==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-2.4.1.tgz",
+      "integrity": "sha512-Si18v0mMXGAqLqCVpTxBa8MGqriHGQh8ccEOhmsmNS3thNCGBwO8WGrwMibANsWtQQ5NStdZwHqZR3naJVFc3w==",
       "dev": true,
       "requires": {
         "debug": "~4.1.0",
-        "engine.io": "~3.4.0",
+        "engine.io": "~3.5.0",
         "has-binary2": "~1.0.2",
         "socket.io-adapter": "~1.1.0",
-        "socket.io-client": "2.3.0",
+        "socket.io-client": "2.4.0",
         "socket.io-parser": "~3.4.0"
-      }
-    },
-    "socket.io-adapter": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-1.1.2.tgz",
-      "integrity": "sha512-WzZRUj1kUjrTIrUKpZLEzFZ1OLj5FwLlAFQs9kuZJzJi5DKdU7FsWc36SNmA8iDOtwBQyT8FkrriRM8vXLYz8g==",
-      "dev": true
-    },
-    "socket.io-client": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.3.0.tgz",
-      "integrity": "sha512-cEQQf24gET3rfhxZ2jJ5xzAOo/xhZwK+mOqtGRg5IowZsMgwvHwnf/mCRapAAkadhM26y+iydgwsXGObBB5ZdA==",
-      "dev": true,
-      "requires": {
-        "backo2": "1.0.2",
-        "base64-arraybuffer": "0.1.5",
-        "component-bind": "1.0.0",
-        "component-emitter": "1.2.1",
-        "debug": "~4.1.0",
-        "engine.io-client": "~3.4.0",
-        "has-binary2": "~1.0.2",
-        "has-cors": "1.1.0",
-        "indexof": "0.0.1",
-        "object-component": "0.0.3",
-        "parseqs": "0.0.5",
-        "parseuri": "0.0.5",
-        "socket.io-parser": "~3.3.0",
-        "to-array": "0.1.4"
       },
       "dependencies": {
-        "base64-arraybuffer": {
-          "version": "0.1.5",
-          "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
-          "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg=",
+        "cookie": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
+          "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==",
           "dev": true
         },
-        "component-emitter": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
-          "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
-          "dev": true
+        "engine.io": {
+          "version": "3.5.0",
+          "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-3.5.0.tgz",
+          "integrity": "sha512-21HlvPUKaitDGE4GXNtQ7PLP0Sz4aWLddMPw2VTyFz1FVZqu/kZsJUO8WNpKuE/OCL7nkfRaOui2ZCJloGznGA==",
+          "dev": true,
+          "requires": {
+            "accepts": "~1.3.4",
+            "base64id": "2.0.0",
+            "cookie": "~0.4.1",
+            "debug": "~4.1.0",
+            "engine.io-parser": "~2.2.0",
+            "ws": "~7.4.2"
+          }
+        },
+        "engine.io-client": {
+          "version": "3.5.0",
+          "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.5.0.tgz",
+          "integrity": "sha512-12wPRfMrugVw/DNyJk34GQ5vIVArEcVMXWugQGGuw2XxUSztFNmJggZmv8IZlLyEdnpO1QB9LkcjeWewO2vxtA==",
+          "dev": true,
+          "requires": {
+            "component-emitter": "~1.3.0",
+            "component-inherit": "0.0.3",
+            "debug": "~3.1.0",
+            "engine.io-parser": "~2.2.0",
+            "has-cors": "1.1.0",
+            "indexof": "0.0.1",
+            "parseqs": "0.0.6",
+            "parseuri": "0.0.6",
+            "ws": "~7.4.2",
+            "xmlhttprequest-ssl": "~1.5.4",
+            "yeast": "0.1.2"
+          },
+          "dependencies": {
+            "debug": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+              "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+              "dev": true,
+              "requires": {
+                "ms": "2.0.0"
+              }
+            }
+          }
         },
         "isarray": {
           "version": "2.0.1",
@@ -12559,23 +12445,37 @@
           "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "dev": true
         },
-        "socket.io-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.3.1.tgz",
-          "integrity": "sha512-1QLvVAe8dTz+mKmZ07Swxt+LAo4Y1ff50rlyoEx00TQmDFVQYPfcqGvIDJLGaBdhdNCecXtyKpD+EgKGcmmbuQ==",
+        "parseqs": {
+          "version": "0.0.6",
+          "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
+          "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w==",
+          "dev": true
+        },
+        "parseuri": {
+          "version": "0.0.6",
+          "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
+          "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==",
+          "dev": true
+        },
+        "socket.io-client": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.4.0.tgz",
+          "integrity": "sha512-M6xhnKQHuuZd4Ba9vltCLT9oa+YvTsP8j9NcEiLElfIg8KeYPyhWOes6x4t+LTAC8enQbE/995AdTem2uNyKKQ==",
           "dev": true,
           "requires": {
+            "backo2": "1.0.2",
+            "component-bind": "1.0.0",
             "component-emitter": "~1.3.0",
             "debug": "~3.1.0",
-            "isarray": "2.0.1"
+            "engine.io-client": "~3.5.0",
+            "has-binary2": "~1.0.2",
+            "indexof": "0.0.1",
+            "parseqs": "0.0.6",
+            "parseuri": "0.0.6",
+            "socket.io-parser": "~3.3.0",
+            "to-array": "0.1.4"
           },
           "dependencies": {
-            "component-emitter": {
-              "version": "1.3.0",
-              "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
-              "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
-              "dev": true
-            },
             "debug": {
               "version": "3.1.0",
               "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
@@ -12584,11 +12484,34 @@
               "requires": {
                 "ms": "2.0.0"
               }
+            },
+            "socket.io-parser": {
+              "version": "3.3.2",
+              "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.3.2.tgz",
+              "integrity": "sha512-FJvDBuOALxdCI9qwRrO/Rfp9yfndRtc1jSgVgV8FDraihmSP/MLGD5PEuJrNfjALvcQ+vMDM/33AWOYP/JSjDg==",
+              "dev": true,
+              "requires": {
+                "component-emitter": "~1.3.0",
+                "debug": "~3.1.0",
+                "isarray": "2.0.1"
+              }
             }
           }
+        },
+        "ws": {
+          "version": "7.4.2",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.2.tgz",
+          "integrity": "sha512-T4tewALS3+qsrpGI/8dqNMLIVdq/g/85U98HPMa6F0m6xTbvhXU6RCQLqPH3+SlomNV/LdY6RXEbBpMH6EOJnA==",
+          "dev": true
         }
       }
     },
+    "socket.io-adapter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-1.1.2.tgz",
+      "integrity": "sha512-WzZRUj1kUjrTIrUKpZLEzFZ1OLj5FwLlAFQs9kuZJzJi5DKdU7FsWc36SNmA8iDOtwBQyT8FkrriRM8vXLYz8g==",
+      "dev": true
+    },
     "socket.io-parser": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.4.1.tgz",

From 24d1b944b8697b125d3193700d3af5a1ec5fa7d3 Mon Sep 17 00:00:00 2001
From: Devon Cavis <devon.cavis@live.nl>
Date: Fri, 22 Jan 2021 10:24:19 +0100
Subject: [PATCH 112/141] Added helper description, adjusted spacing, only show
 if CTAs available

---
 .../project/add/manual/manual.component.html  | 45 +++++++++++--------
 .../modules/project/edit/edit.component.html  | 45 +++++++++++--------
 2 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/src/app/modules/project/add/manual/manual.component.html b/src/app/modules/project/add/manual/manual.component.html
index 237c9cb9..ec83a70b 100644
--- a/src/app/modules/project/add/manual/manual.component.html
+++ b/src/app/modules/project/add/manual/manual.component.html
@@ -83,29 +83,38 @@ <h3>Project icon</h3>
       </div>
     </form>
 
-    <form [formGroup]="newCallToActionForm" class="project-form">
+    <ng-container *ngIf="callToActionOptions.length > 1">
+      <form [formGroup]="newCallToActionForm" class="project-form">
 
-      <div class="row">
-        <div class="col-12">
-          <h3>Call to action</h3>
-        </div>
-        <div class="col-6">
-          <div>
-            <h3>Text</h3>
-            <select [(ngModel)]="selectedCallToActionOption" class='form-control' [ngModelOptions]="{standalone: true}">
-              <option *ngFor="let action of callToActionOptions" [ngValue]="action">{{action.value}}</option>
-            </select>
+        <div class="row">
+          <div class="col-12">
+            <h3 class="title-spacing">Call to action</h3>
+          </div>
+          <div class="col-6">
+            <div>
+              <h3>Text</h3>
+              <select [(ngModel)]="selectedCallToActionOption" class='form-control' [ngModelOptions]="{standalone: true}">
+                <option *ngFor="let action of callToActionOptions" [ngValue]="action">{{action.value}}</option>
+              </select>
+            </div>
           </div>
-        </div>
 
-        <div class="col-6">
-          <div>
-            <h3>Link</h3>
-            <input [(ngModel)]="callToActionRedirectUrl" [ngModelOptions]="{standalone: true}" [disabled]="selectedCallToActionOption.id <= 0" placeholder="Link to your contact info"/>
+          <div class="col-6">
+            <div>
+              <h3>Link</h3>
+              <input [(ngModel)]="callToActionRedirectUrl" [ngModelOptions]="{standalone: true}" [disabled]="selectedCallToActionOption.id <= 0" placeholder="Link to your contact info"/>
+            </div>
           </div>
         </div>
-      </div>
-    </form>
+        <div class="row">
+          <div class="col-12">
+            <div>
+              <p class="form-footnote">Select the type of call to action button you want for your project.</p>
+            </div>
+          </div>
+        </div>
+      </form>
+    </ng-container>
 
     <form [formGroup]="newCollaboratorForm" class="project-form">
       <div class="row">
diff --git a/src/app/modules/project/edit/edit.component.html b/src/app/modules/project/edit/edit.component.html
index 7f01c97a..5f8bc596 100644
--- a/src/app/modules/project/edit/edit.component.html
+++ b/src/app/modules/project/edit/edit.component.html
@@ -90,29 +90,38 @@ <h3>Project icon</h3>
           </div>
         </form>
 
-        <form [formGroup]="editCallToActionForm" class="project-form">
+        <ng-container *ngIf="callToActionOptions.length > 1">
+          <form [formGroup]="editCallToActionForm" class="project-form">
 
-          <div class="row">
-            <div class="col-12">
-              <h3>Call to action</h3>
-            </div>
-            <div class="col-6">
-              <div>
-                <h3>Text</h3>
-                <select [(ngModel)]="selectedCallToActionOption" class='form-control' [ngModelOptions]="{standalone: true}">
-                  <option *ngFor="let action of callToActionOptions" [ngValue]="action">{{action.value}}</option>
-                </select>
+            <div class="row">
+              <div class="col-12">
+                <h3 class="title-spacing">Call to action</h3>
+              </div>
+              <div class="col-6">
+                <div>
+                  <h3>Text</h3>
+                  <select [(ngModel)]="selectedCallToActionOption" class='form-control' [ngModelOptions]="{standalone: true}">
+                    <option *ngFor="let action of callToActionOptions" [ngValue]="action">{{action.value}}</option>
+                  </select>
+                </div>
+              </div>
+      
+              <div class="col-6">
+                <div>
+                  <h3>Link</h3>
+                  <input [(ngModel)]="callToActionRedirectUrl" [ngModelOptions]="{standalone: true}" [disabled]="selectedCallToActionOption.id <= 0"/>
+                </div>
               </div>
             </div>
-    
-            <div class="col-6">
-              <div>
-                <h3>Link</h3>
-                <input [(ngModel)]="callToActionRedirectUrl" [ngModelOptions]="{standalone: true}" [disabled]="selectedCallToActionOption.id <= 0"/>
+            <div class="row">
+              <div class="col-12">
+                <div>
+                  <p class="form-footnote">Select the type of call to action button you want for your project.</p>
+                </div>
               </div>
             </div>
-          </div>
-        </form>
+          </form>
+        </ng-container>
 
         <form [formGroup]="editCollaboratorForm" class="project-form">
           <div class="row">

From fd4d53d096ae2417ef32bf056d19e844d204c686 Mon Sep 17 00:00:00 2001
From: Devon Cavis <devon.cavis@live.nl>
Date: Fri, 22 Jan 2021 15:53:27 +0100
Subject: [PATCH 113/141] Made paths absolute, resized button, put button under
 detail description

---
 src/app/models/resources/project-add.ts                | 2 +-
 src/app/models/resources/project-update.ts             | 2 +-
 src/app/modules/project/details/details.component.html | 3 +++
 src/app/modules/project/details/details.component.scss | 1 +
 src/app/services/call-to-action-option.service.ts      | 8 ++++----
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/app/models/resources/project-add.ts b/src/app/models/resources/project-add.ts
index 5c2c8dd8..060e628e 100644
--- a/src/app/models/resources/project-add.ts
+++ b/src/app/models/resources/project-add.ts
@@ -15,7 +15,7 @@
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  */
 
-import { CallToAction } from '../domain/call-to-action';
+import { CallToAction } from 'src/app/models/domain/call-to-action';
 import { CollaboratorAdd } from './collaborator-add';
 export interface ProjectAdd {
   userId: number;
diff --git a/src/app/models/resources/project-update.ts b/src/app/models/resources/project-update.ts
index c112aae3..a2d44715 100644
--- a/src/app/models/resources/project-update.ts
+++ b/src/app/models/resources/project-update.ts
@@ -15,7 +15,7 @@
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  */
 
-import { CallToAction } from '../domain/call-to-action';
+import { CallToAction } from 'src/app/models/domain/call-to-action';
 import { CollaboratorUpdate } from './collaborator-update';
 
 export interface ProjectUpdate {
diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html
index 5ad994bb..e04f060f 100644
--- a/src/app/modules/project/details/details.component.html
+++ b/src/app/modules/project/details/details.component.html
@@ -135,6 +135,9 @@ <h2 class="project-title">{{ project.name }}</h2>
           <div class='tab-content'>
             <ng-container *ngIf=" this.activeTab == 'description' " class="project-description large">
               <p [innerHTML]="project.description | safeHtml" class="dex-quill-viewer"></p>
+              <ng-container *ngIf="displayCallToActionButton">
+                <button id="call-to-action-button" class="primary ml-2" (click)="onClickCallToActionButton(project.callToAction.value)">{{project.callToAction.optionValue}}</button>
+              </ng-container>
               <ng-container *ngIf="displayEmbedButton">
                 <app-embed-button [projectId]=project.id></app-embed-button>
               </ng-container>
diff --git a/src/app/modules/project/details/details.component.scss b/src/app/modules/project/details/details.component.scss
index 2e53188d..837bc9ea 100644
--- a/src/app/modules/project/details/details.component.scss
+++ b/src/app/modules/project/details/details.component.scss
@@ -333,6 +333,7 @@
 
   #call-to-action-button {
     text-transform: lowercase;
+    width: fit-content;
   }
 
   #call-to-action-button::first-letter {
diff --git a/src/app/services/call-to-action-option.service.ts b/src/app/services/call-to-action-option.service.ts
index 3ad61e69..2868bea1 100644
--- a/src/app/services/call-to-action-option.service.ts
+++ b/src/app/services/call-to-action-option.service.ts
@@ -17,10 +17,10 @@
 
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { API_CONFIG } from '../config/api-config';
-import { CallToActionOption } from '../models/domain/call-to-action-option';
-import { CallToActionOptionAdd } from '../models/resources/calltoaction-add';
-import { CallToActionOptionUpdate } from '../models/resources/calltoaction-update';
+import { API_CONFIG } from 'src/app/config/api-config';
+import { CallToActionOption } from 'src/app/models/domain/call-to-action-option';
+import { CallToActionOptionAdd } from 'src/app/models/resources/calltoaction-add';
+import { CallToActionOptionUpdate } from 'src/app/models/resources/calltoaction-update';
 import { HttpBaseService } from './http-base.service';
 
 @Injectable({

From ae86490f4d076e24f3e6f7f12cf0b424d5fdfa1c Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Mon, 25 Jan 2021 12:53:52 +0100
Subject: [PATCH 114/141] removed old filtermenu, first start on new menu

---
 .../app-layout/app-layout.component.scss      |   1 +
 .../components/footer/footer.component.scss   |   2 +
 .../project/overview/overview.component.html  | 183 ++----
 .../project/overview/overview.component.scss  | 592 ++++++++----------
 .../project/overview/overview.component.ts    | 103 +--
 5 files changed, 408 insertions(+), 473 deletions(-)

diff --git a/src/app/components/app-layout/app-layout.component.scss b/src/app/components/app-layout/app-layout.component.scss
index 8fc00e21..d152d884 100644
--- a/src/app/components/app-layout/app-layout.component.scss
+++ b/src/app/components/app-layout/app-layout.component.scss
@@ -29,6 +29,7 @@
   box-shadow: $box-shadow;
   background-color: #ffffff;
   padding: 10px 20px;
+  z-index: 1; // put header on top
 
   .header-nav {
     display: flex;
diff --git a/src/app/components/footer/footer.component.scss b/src/app/components/footer/footer.component.scss
index 1a86c1fc..f3786f4e 100644
--- a/src/app/components/footer/footer.component.scss
+++ b/src/app/components/footer/footer.component.scss
@@ -28,6 +28,8 @@ footer {
   color: #fff;
   box-shadow: 0px -3px 6px #00000029;
   background-color: #ffffff;
+  position: absolute; //needed to apply z-index
+  z-index: 1; //put footer on top
 
   .title {
     img {
diff --git a/src/app/modules/project/overview/overview.component.html b/src/app/modules/project/overview/overview.component.html
index 4cd43244..1633629b 100644
--- a/src/app/modules/project/overview/overview.component.html
+++ b/src/app/modules/project/overview/overview.component.html
@@ -17,118 +17,76 @@
 
  -->
 
-<div class="project-list-header">
-  <h1 class="">Project overview</h1>
-  <div class="list-view-toggle">
-    <label class="container">
-      <input [(ngModel)]="showListView" [value]="false" name="list-view" type="radio" aria-label="Switch to grid view">
-      <span class="checkmark grid">
-            <svg>
-              <use xlink:href='assets/images/grid-icon.svg#img'></use>
-            </svg>
-          </span>
-    </label>
-    <label class="container">
-      <input [(ngModel)]="showListView" [value]="true" checked="checked" name="list-view" type="radio" aria-label="Switch to list view">
-      <span class="checkmark list">
-            <svg>
-              <use xlink:href='assets/images/list-icon.svg#img'></use>
-            </svg>
-          </span>
-    </label>
-  </div>
-</div>
+
 <div class="row">
   <div class="col-md-2 projects-filter-wrapper">
     <div class="projects-filter">
-      <h3>Filter</h3>
-      <accordion>
-        <accordion-group [hidden]="!displaySearchElements" heading="Category">
-          <form [formGroup]="categoryForm">
-            <div>
-              <input formControlName="code" id="code" name="code" type="checkbox" value="Code">
-              <label for="code"><span class="icon"><img alt="" loading="lazy" src="assets/images/code.svg"></span> Code</label>
-            </div>
-            <div>
-              <input formControlName="video" id="video" name="video" type="checkbox" value="Video">
-              <label for="video"><span class="icon"><img alt="" loading="lazy" src="assets/images/video.svg"></span> Video</label>
-            </div>
-            <div>
-              <input formControlName="research_paper" id="research-paper" name="researchPaper" type="checkbox"
-                     value="Research paper">
-              <label for="research-paper"><span class="icon"><img alt="" loading="lazy" src="assets/images/theses.svg"></span> Research
-                                                                                                                               paper</label>
-            </div>
-            <div>
-              <input formControlName="survey_results" id="survey-results" name="surveyResults" type="checkbox"
-                     value="Survey results">
-              <label for="survey-results"><span class="icon"><img alt="" loading="lazy" src="assets/images/usertest.svg"></span> Survey
-                                                                                                                                 results</label>
-            </div>
-          </form>
-        </accordion-group>
-        <accordion-group [hidden]="!displaySearchElements" heading="Tags">
-          <form [formGroup]="tagsForm">
-            <div>
-              <input formControlName="learning" id="learning" type="checkbox">
-              <label for="learning">Learning</label>
-            </div>
-            <div>
-              <input formControlName="research" id="research" type="checkbox">
-              <label for="research">Research</label>
-            </div>
-            <div>
-              <input formControlName="mobile" id="mobile" type="checkbox">
-              <label for="mobile">Mobile</label>
-            </div>
-            <div>
-              <input formControlName="ux" id="ux" type="checkbox">
-              <label for="ux">UX</label>
-            </div>
-          </form>
-        </accordion-group>
-        <accordion-group heading="Sort options">
-
-          <form [formGroup]="sortForm" class="sort-options-form">
-            <label for="sort-type">Sort type</label>
-            <select class='option-select' formControlName="type" id="sort-type">
-              <option *ngFor="let sortTypeOption of sortTypeSelectOptions" [value]="sortTypeOption.value">
-                {{sortTypeOption.viewValue}}
-              </option>
-            </select>
-
-            <label for="asc-desc">Sort direction</label>
-            <select class='option-select' formControlName="direction" id="asc-desc">
-              <option *ngFor="let sortDirectionOption of sortDirectionSelectOptions"
-                      [value]="sortDirectionOption.value">
-                {{sortDirectionOption.viewValue}}
-              </option>
-            </select>
-          </form>
-
-        </accordion-group>
-
-        <accordion-group heading="Highlighted">
-          <label for="highlight-asc-desc">Filter options</label>
-          <select [formControl]="highlightFormControl" class='option-select' id="highlight-asc-desc">
-            <option *ngFor="let highlightOption of highlightSelectOptions; let i = index" [value]="i">
-              {{highlightOption.viewValue}}
+      <h3><i class="fas fa-filter"></i> Filters</h3>
+      <div class="filter-group" *ngIf="displayTags()">
+        <h4>Labels</h4>
+        <div class='tags'>
+          <div (click)="tagClicked($event)" class='tag clicked'>UX</div>
+          <div (click)="tagClicked($event)" class='tag clicked'>UI</div>
+          <div (click)="tagClicked($event)" class='tag'>Development</div>
+          <div (click)="tagClicked($event)" class='tag'>Creatief</div>
+          <div (click)="tagClicked($event)" class='tag clicked'>Arduino</div>
+          <div (click)="tagClicked($event)" class='tag clicked'>HTML</div>
+        </div>
+      </div>
+      <div class="filter-group">
+        <h4>Sort Options</h4>
+        <form [formGroup]="sortForm" class="sort-options-form">
+          <label for="sort-type">Sort type</label>
+          <select class='option-select' formControlName="type" id="sort-type">
+            <option *ngFor="let sortTypeOption of sortTypeSelectOptions" [value]="sortTypeOption.value">
+              {{sortTypeOption.viewValue}}
             </option>
           </select>
-        </accordion-group>
 
-        <accordion-group heading="Pagination">
-          <label>Projects per page </label>
-          <select (ngModelChange)="onChangePaginationSelect($event)" [(ngModel)]=defaultPaginationOption.id class='option-select'>
-            <option *ngFor="let paginationOption of paginationDropDownOptions" [ngValue]="paginationOption.id"
-                    class="paginationDropDown">{{paginationOption.amountOnPage}}</option>
+          <label for="asc-desc">Sort direction</label>
+          <select class='option-select' formControlName="direction" id="asc-desc">
+            <option *ngFor="let sortDirectionOption of sortDirectionSelectOptions" [value]="sortDirectionOption.value">
+              {{sortDirectionOption.viewValue}}
+            </option>
           </select>
-        </accordion-group>
-      </accordion>
+        </form>
+      </div>
+      <div class="filter-group">
+        <h4>Pagination</h4>
+        <label>Projects per page</label>
+        <select (ngModelChange)="onChangePaginationSelect($event)" [(ngModel)]=defaultPaginationOption.id
+          class='option-select'>
+          <option *ngFor="let paginationOption of paginationDropDownOptions" [ngValue]="paginationOption.id"
+            class="paginationDropDown">{{paginationOption.amountOnPage}}</option>
+        </select>
+      </div>
     </div>
   </div>
 
   <div class="col-md">
+    <div class="project-list-header">
+      <h1 class="">Project overview</h1>
+      <div class="list-view-toggle">
+        <label class="container">
+          <input [(ngModel)]="showListView" [value]="false" name="list-view" type="radio"
+            aria-label="Switch to grid view">
+          <span class="checkmark grid">
+            <svg>
+              <use xlink:href='assets/images/grid-icon.svg#img'></use>
+            </svg>
+          </span>
+        </label>
+        <label class="container">
+          <input [(ngModel)]="showListView" [value]="true" checked="checked" name="list-view" type="radio"
+            aria-label="Switch to list view">
+          <span class="checkmark list">
+            <svg>
+              <use xlink:href='assets/images/list-icon.svg#img'></use>
+            </svg>
+          </span>
+        </label>
+      </div>
+    </div>
     <div class="search">
       <input [formControl]="searchControl" placeholder="search project" type="search" aria-label="Search project">
       <button><img alt="" loading="lazy" src="assets/images/research.svg" aria-label="Search project"></button>
@@ -136,11 +94,8 @@ <h3>Filter</h3>
 
     <ng-container *ngIf="!projectsEmpty(); else noProjects">
       <div class="project-list-wrapper" [ngClass]="this.showListView ? 'list' : 'grid'">
-        <app-project
-            *ngFor="let project of projectsToDisplay"
-            [project]="project"
-            [showListView]="this.showListView"
-            (click)="onClickProject(project.id, project.name)">
+        <app-project *ngFor="let project of projectsToDisplay" [project]="project" [showListView]="this.showListView"
+          (click)="onClickProject(project.id, project.name)">
         </app-project>
       </div>
     </ng-container>
@@ -151,26 +106,26 @@ <h2 class="fas fa-spinner fa-pulse loading-circle" *ngIf="projectsLoading"></h2>
     </ng-template>
 
     <div *ngIf="amountOfProjectsOnSinglePage < totalNrOfProjects && showPaginationFooter" class="pagination-div">
-      <pagination (pageChanged)="pageChanged($event)" [itemsPerPage]="amountOfProjectsOnSinglePage"
-                  [maxSize]="6"
-                  [totalItems]="totalNrOfProjects" [customNextTemplate]="nextTemplate" [customPreviousTemplate]="prevTemplate" class="pagination-footer">
+      <pagination (pageChanged)="pageChanged($event)" [itemsPerPage]="amountOfProjectsOnSinglePage" [maxSize]="6"
+        [totalItems]="totalNrOfProjects" [customNextTemplate]="nextTemplate" [customPreviousTemplate]="prevTemplate"
+        class="pagination-footer">
       </pagination>
       <ng-template #nextTemplate let-currentPage="currentPage" let-disabled="disabled">
         <ng-container *ngIf="!disabled">
-          <img alt="next" class="chevron-right" src="assets/images/chevron-down-solid.svg"/>
+          <img alt="next" class="chevron-right" src="assets/images/chevron-down-solid.svg" />
         </ng-container>
         <ng-container *ngIf="disabled">
-          <img alt="disabled" class="chevron-right disabled" src="assets/images/chevron-down-solid.svg"/>
+          <img alt="disabled" class="chevron-right disabled" src="assets/images/chevron-down-solid.svg" />
         </ng-container>
       </ng-template>
       <ng-template #prevTemplate let-currentPage="currentPage" let-disabled="disabled">
         <ng-container *ngIf="!disabled">
-          <img alt="previous" class="chevron-left" src="assets/images/chevron-down-solid.svg"/>
+          <img alt="previous" class="chevron-left" src="assets/images/chevron-down-solid.svg" />
         </ng-container>
         <ng-container *ngIf="disabled">
-          <img alt="disabled" class="chevron-left disabled" src="assets/images/chevron-down-solid.svg"/>
+          <img alt="disabled" class="chevron-left disabled" src="assets/images/chevron-down-solid.svg" />
         </ng-container>
       </ng-template>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index 1034d33e..30dbb85f 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -16,322 +16,282 @@
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  *
  */
- @import "assets/styles/variables";
+@import "assets/styles/variables";
 
- .project-list-header {
-   width: 100%;
-   margin: 5em 0 2em 0;
-   display: inline-flex;
-   justify-content: space-between;
-   align-content: center;
- 
-   h1 {
-     display: inline;
-   }
-   .list-view-toggle {
-     display: flex;
-     margin: auto 0 auto 0;
-     gap: 12px;
-     flex-wrap: wrap;
-     margin-left: 20px;
-     justify-content: flex-end;
- 
-     .container {
-       box-shadow: $box-shadow;
-       display: inline;
-       position: relative;
-       cursor: pointer;
-       -webkit-user-select: none;
-       -moz-user-select: none;
-       -ms-user-select: none;
-       user-select: none;
-       padding: 0;
-       width: fit-content;
-       margin: 0;
-       height: fit-content;
-     }
- 
-     // Hide the default radio button
-     .container input[type="radio"] {
-       position: absolute;
-       opacity: 0;
-       cursor: pointer;
-       height: 0;
-       width: 0;
-     }
- 
-     // Create custom radio button
-     .checkmark {
-       height: 40px;
-       width: 40px;
-       padding: 10px;
-       border-radius: 5px;
-       background-color: $white;
-       color: $accent-color-red-primary;
-       display: flex;
-       justify-content: center;
-       align-items: center;
-       transition: transform $transition-short;
-       
-       &:hover{
-         transform: $transform-grow-big;
-       }
-       svg {
-         size: inherit;
-         width: 100%;
-         height: 100%;
-         margin: 0;
-       }
-     }
-   }
- 
-   // If the sibling input is checked
-   .container input[type="radio"]:checked ~ .checkmark {
-     color: $light-mode-grey-quaternary;
-     background: $accent-color-red-primary;
-   }
- }
- 
- .search {
-   display: flex;
-   align-items: center;
-   justify-content: center;
-   margin-bottom: 25px;
- 
-   input[type="search"] {
-     position: relative;
-     width: 100%;
-     padding: 8px 20px;
-     font-size: 18px;
-     height: 60px;
-     color: $light-mode-grey-primary;
-     border: none;
-     background: $white;
-     box-shadow: $box-shadow;
-     border-radius: 6px;
-     font-family: lato, sans-serif;
- 
-     &::placeholder {
-       color: $light-mode-grey-primary;
-     }
- 
-     &:focus {
-       border: none;
-       outline: none;
-     }
-   }
- 
-   button {
-     position: relative;
-     right: 55px;
-     height: auto;
-     cursor: pointer;
-     background: none;
-     border: none;
-     width: 0;
-     padding: 0;
- 
-     &:focus {
-       outline: none;
-     }
- 
-     img {
-       width: 25px;
-       transition: transform $transition-long;
-       &:hover{
-         transform: $transform-rotate;
-       }
-     }
-   }
- }
- 
- .project-list-wrapper {
-   width: 100%;
-   display: grid;
-   gap: 15px;
-   margin-bottom: 35px;
- 
-   &.grid {
-     gap: 25px;
-     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-   }
- }
- 
- .projects-filter-wrapper {
-   min-width: 250px;
-   .projects-filter {
-     box-shadow: $box-shadow;
-     background: $white;
-     padding: 20px 25px;
-     border-radius: 6px;
-     margin-bottom: 20px;
-     h3 {
-       margin: 0;
-     }
-     .option-select {
-       margin-bottom: 10px;
-       width: 100%;
-       color: rgba($light-mode-black, 0.7);
-     }
-     form {
-       input[type="checkbox"] {
-         display: none;
-         + label {
-           color: $light-mode-grey-primary;
-           vertical-align: middle;
-           position: relative;
-           padding-left: 20px;
-           margin: 0.25rem 0;
-           cursor: pointer;
-           display: flex;
-           align-items: center;
-           span {
-             margin-right: 4px;
-           }
-           &::before,
-           &::after {
-             content: "";
-             display: inline-block;
-             border-radius: 2px;
-             position: absolute;
-           }
-           &::before {
-             width: 15px;
-             height: 15px;
-             border: 1px $light-mode-grey-secondary solid;
-             background: $white;
-             left: 0;
-             top: calc(50% - 15px / 2);
-           }
-         }
-         &:checked {
-           + label {
-             &::after {
-               width: 9px;
-               height: 9px;
-               background: $accent-color-red-primary;
-               position: absolute;
-               top: calc(50% - 9px / 2);
-               left: 3px;
-             }
-           }
-         }
-       }
-       .icon {
-         display: inline-flex;
-         place-content: center;
-         border-radius: 50%;
-         background-color: $accent-color-red-primary;
-         vertical-align: middle;
-         height: 15px;
-         width: 15px;
-         padding: 2px;
-         img {
-           height: auto;
-           width: 100%;
-         }
-       }
-     }
-     select {
-       padding: 4px;
-       border-radius: 3px;
-       border: 0px solid transparent;
-     }
-     select, option {
-       outline: 0;
-     }
-   }
- }
- 
- :host {
-   ::ng-deep accordion-group {
-     margin-top: 10px;
-     .card-header {
-       background: url("~src/assets/images/chevron-down-solid-orange.svg") no-repeat center right;
-       padding: 0;
-       border: none;
-       background-size: 13px;
-       button {
-         padding: 0;
-         color: $light-mode-grey-primary;
-         font-size: 18px;
-       }
-     }
-     .card {
-       border: none;
-     }
-     .card-body {
-       margin-top: 10px;
-       background: $light-mode-grey-quaternary;
-       border-radius: 6px;
-       padding: 5px 10px;
-     }
-   }
- }
- 
- .pagination-div {
-   margin-top: 20px;
-   display: flex;
-   justify-content: center;
- }
- 
- .pagination-footer::ng-deep {
-   flex-wrap: wrap;
- 
-   .pagination-next,
-   .pagination-prev {
-     max-width: 35px;
-     overflow: hidden;
-   }
- }
- 
- .pagination-footer::ng-deep .page-link {
-   z-index: 1;
-   color: $light-mode-black;
-   height: 35px;
-   display: flex;
-   align-items: center;
- }
- 
- .pagination-footer::ng-deep .page-item.active .page-link {
-   border-color: $accent-color-red-primary;
-   background-color: $accent-color-red-primary !important;
-   color: #ffffff;
- }
- 
- .paginationDropDown {
-   width: 80px;
- }
- 
- .pagination-footer {
-   li {
-     height: 35px;
-     width: 35px;
-   }
-   a {
-     height: 35px;
-     width: 35px;
-   }
-   img {
-     width: 100%;
-   }
-   .chevron-right {
-     margin-top: 1px;
-     transform: rotateZ(270deg);
-   }
-   .chevron-left {
-     margin-top: 1px;
-     transform: rotateZ(90deg);
-   }
-   .disabled {
-     opacity: 0.3;
-   }
- }
- 
- .paginationDropDown {
-   width: 80px;
- }
- 
- .loading-circle {
+.project-list-header {
+  width: 100%;
+  margin: 5em 0 2em 0;
+  display: inline-flex;
+  justify-content: space-between;
+  align-content: center;
+
+  h1 {
+    display: inline;
+  }
+  .list-view-toggle {
+    display: flex;
+    margin: auto 0 auto 0;
+    gap: 12px;
+    flex-wrap: wrap;
+    margin-left: 20px;
+    justify-content: flex-end;
+
+    .container {
+      box-shadow: $box-shadow;
+      display: inline;
+      position: relative;
+      cursor: pointer;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      padding: 0;
+      width: fit-content;
+      margin: 0;
+      height: fit-content;
+    }
+
+    // Hide the default radio button
+    .container input[type="radio"] {
+      position: absolute;
+      opacity: 0;
+      cursor: pointer;
+      height: 0;
+      width: 0;
+    }
+
+    // Create custom radio button
+    .checkmark {
+      height: 40px;
+      width: 40px;
+      padding: 10px;
+      border-radius: 5px;
+      background-color: $white;
+      color: $accent-color-red-primary;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: transform $transition-short;
+
+      &:hover {
+        transform: $transform-grow-big;
+      }
+      svg {
+        size: inherit;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+      }
+    }
+  }
+
+  // If the sibling input is checked
+  .container input[type="radio"]:checked ~ .checkmark {
+    color: $light-mode-grey-quaternary;
+    background: $accent-color-red-primary;
+  }
+}
+
+.search {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 25px;
+
+  input[type="search"] {
+    position: relative;
+    width: 100%;
+    padding: 8px 20px;
+    font-size: 18px;
+    height: 60px;
+    color: $light-mode-grey-primary;
+    border: none;
+    background: $white;
+    box-shadow: $box-shadow;
+    border-radius: 6px;
+    font-family: lato, sans-serif;
+
+    &::placeholder {
+      color: $light-mode-grey-primary;
+    }
+
+    &:focus {
+      border: none;
+      outline: none;
+    }
+  }
+
+  button {
+    position: relative;
+    right: 55px;
+    height: auto;
+    cursor: pointer;
+    background: none;
+    border: none;
+    width: 0;
+    padding: 0;
+
+    &:focus {
+      outline: none;
+    }
+
+    img {
+      width: 25px;
+      transition: transform $transition-long;
+      &:hover {
+        transform: $transform-rotate;
+      }
+    }
+  }
+}
+
+.project-list-wrapper {
+  width: 100%;
+  display: grid;
+  gap: 15px;
+  margin-bottom: 35px;
+
+  &.grid {
+    gap: 25px;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  }
+}
+
+.projects-filter-wrapper {
+  min-width: 250px;
+  margin: -24px 24px -64px -24px; // override padding from parent element & footer
+  padding: 48px 24px;
+  background-color: white;
+  .filter-group {
+    padding: 12px;
+    border-bottom: 1px solid $light-mode-grey-thertiary;
+    display: flex;
+    flex-direction: column;
+    h4 {
+      color: $light-mode-grey-primary;
+    }
+    .tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      .tag {
+        background-color: $light-mode-grey-secondary;
+        color: white;
+        border-radius: 999px;
+        padding: 2px 10px;
+        font-size: 12px;
+        cursor: pointer;
+        &.clicked {
+          background-color: $accent-color-red-primary;
+        }
+      }
+    }
+    form{
+      display: flex;
+      flex-direction: column;
+    }
+    select {
+      padding: 4px;
+      border-radius: 3px;
+      background-color: $light-mode-grey-thertiary;
+      border: 0px solid transparent;
+    }
+    select,
+    option {
+      outline: 0;
+    }
+  }
+}
+
+:host {
+  ::ng-deep accordion-group {
+    margin-top: 10px;
+    .card-header {
+      background: url("~src/assets/images/chevron-down-solid-orange.svg") no-repeat center right;
+      padding: 0;
+      border: none;
+      background-size: 13px;
+      button {
+        padding: 0;
+        color: $light-mode-grey-primary;
+        font-size: 18px;
+      }
+    }
+    .card {
+      border: none;
+    }
+    .card-body {
+      margin-top: 10px;
+      background: $light-mode-grey-quaternary;
+      border-radius: 6px;
+      padding: 5px 10px;
+    }
+  }
+}
+
+.pagination-div {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.pagination-footer::ng-deep {
+  flex-wrap: wrap;
+
+  .pagination-next,
+  .pagination-prev {
+    max-width: 35px;
+    overflow: hidden;
+  }
+}
+
+.pagination-footer::ng-deep .page-link {
+  z-index: 1;
+  color: $light-mode-black;
+  height: 35px;
+  display: flex;
+  align-items: center;
+}
+
+.pagination-footer::ng-deep .page-item.active .page-link {
+  border-color: $accent-color-red-primary;
+  background-color: $accent-color-red-primary !important;
+  color: #ffffff;
+}
+
+.paginationDropDown {
+  width: 80px;
+}
+
+.pagination-footer {
+  li {
+    height: 35px;
+    width: 35px;
+  }
+  a {
+    height: 35px;
+    width: 35px;
+  }
+  img {
+    width: 100%;
+  }
+  .chevron-right {
+    margin-top: 1px;
+    transform: rotateZ(270deg);
+  }
+  .chevron-left {
+    margin-top: 1px;
+    transform: rotateZ(90deg);
+  }
+  .disabled {
+    opacity: 0.3;
+  }
+}
+
+.paginationDropDown {
+  width: 80px;
+}
+
+.loading-circle {
   color: $accent-color-red-primary;
 }
diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts
index ce4bded2..b8fd62c8 100644
--- a/src/app/modules/project/overview/overview.component.ts
+++ b/src/app/modules/project/overview/overview.component.ts
@@ -100,9 +100,9 @@ export class OverviewComponent implements OnInit, AfterContentInit {
    * The possible pagination options for the dropdown
    */
   public paginationDropDownOptions = [
-    {id: 0, amountOnPage: 12},
-    {id: 1, amountOnPage: 24},
-    {id: 2, amountOnPage: 36},
+    { id: 0, amountOnPage: 12 },
+    { id: 1, amountOnPage: 24 },
+    { id: 2, amountOnPage: 36 },
   ];
 
   /**
@@ -120,20 +120,20 @@ export class OverviewComponent implements OnInit, AfterContentInit {
   public highlightFormControl: FormControl;
 
   public sortTypeSelectOptions: SelectFormOption[] = [
-    {value: 'updated', viewValue: 'Updated'},
-    {value: 'created', viewValue: 'Created'},
-    {value: 'name', viewValue: 'Name'}
+    { value: 'updated', viewValue: 'Updated' },
+    { value: 'created', viewValue: 'Created' },
+    { value: 'name', viewValue: 'Name' }
   ];
 
   public sortDirectionSelectOptions: SelectFormOption[] = [
-    {value: 'desc', viewValue: 'Descending'},
-    {value: 'asc', viewValue: 'Ascending'}
+    { value: 'desc', viewValue: 'Descending' },
+    { value: 'asc', viewValue: 'Ascending' }
   ];
 
   public highlightSelectOptions: SelectFormOption[] = [
-    {value: null, viewValue: 'All projects'},
-    {value: true, viewValue: 'Only highlighted'},
-    {value: false, viewValue: 'Only non highlighted'}
+    { value: null, viewValue: 'All projects' },
+    { value: true, viewValue: 'Only highlighted' },
+    { value: false, viewValue: 'Only non highlighted' }
   ];
 
   public displaySearchElements = false;
@@ -160,15 +160,15 @@ export class OverviewComponent implements OnInit, AfterContentInit {
   private modalSubscriptions: Subscription[] = [];
 
   constructor(
-      private router: Router,
-      private paginationService: PaginationService,
-      private internalSearchService: InternalSearchService,
-      private formBuilder: FormBuilder,
-      private activatedRoute: ActivatedRoute,
-      private seoService: SEOService,
-      private modalService: BsModalService,
-      private location: Location,
-      private authService: AuthService) {
+    private router: Router,
+    private paginationService: PaginationService,
+    private internalSearchService: InternalSearchService,
+    private formBuilder: FormBuilder,
+    private activatedRoute: ActivatedRoute,
+    private seoService: SEOService,
+    private modalService: BsModalService,
+    private location: Location,
+    private authService: AuthService) {
     this.searchControl = new FormControl('');
 
     this.categoryForm = this.formBuilder.group({
@@ -206,15 +206,15 @@ export class OverviewComponent implements OnInit, AfterContentInit {
 
     // Subscribe to search subject to debounce the input and afterwards searchAndFilter.
     this.searchSubject
-        .pipe(
-            debounceTime(500)
-        )
-        .subscribe((result) => {
-          if (result == null) {
-            return;
-          }
-          this.onInternalQueryChange();
-        });
+      .pipe(
+        debounceTime(500)
+      )
+      .subscribe((result) => {
+        if (result == null) {
+          return;
+        }
+        this.onInternalQueryChange();
+      });
 
     this.searchControl.valueChanges.subscribe((value) => this.onSearchInputValueChange(value));
 
@@ -351,15 +351,15 @@ export class OverviewComponent implements OnInit, AfterContentInit {
     if (internalSearchQuery.query == null) {
       // No search query provided use projectService.
       this.paginationService
-          .getProjectsPaginated(internalSearchQuery)
-          .pipe(finalize(() => (this.projectsLoading = false)))
-          .subscribe((result) => this.handleSearchAndProjectResponse(result));
+        .getProjectsPaginated(internalSearchQuery)
+        .pipe(finalize(() => (this.projectsLoading = false)))
+        .subscribe((result) => this.handleSearchAndProjectResponse(result));
     } else {
       // Search query provided use searchService.
       this.internalSearchService
-          .getSearchResultsPaginated(internalSearchQuery)
-          .pipe(finalize(() => (this.projectsLoading = false)))
-          .subscribe((result) => this.handleSearchAndProjectResponse(result));
+        .getSearchResultsPaginated(internalSearchQuery)
+        .pipe(finalize(() => (this.projectsLoading = false)))
+        .subscribe((result) => this.handleSearchAndProjectResponse(result));
     }
   }
 
@@ -387,7 +387,7 @@ export class OverviewComponent implements OnInit, AfterContentInit {
    */
   private createProjectModal(projectId: number) {
     if (projectId) {
-      this.modalRef = this.modalService.show(DetailsComponent, {animated: true, initialState: {projectId: projectId}});
+      this.modalRef = this.modalService.show(DetailsComponent, { animated: true, initialState: { projectId: projectId } });
       this.modalRef.setClass('project-modal');
 
       this.modalRef.content.onLike.subscribe(isLiked => {
@@ -403,13 +403,13 @@ export class OverviewComponent implements OnInit, AfterContentInit {
 
       // Go back to home page after the modal is closed
       this.modalSubscriptions.push(
-          this.modalService.onHide.subscribe(() => {
-                if (this.location.path().startsWith('/project/details')) {
-                  this.location.replaceState('/project/overview');
-                  this.updateSEOTags();
-                }
-              }
-          ));
+        this.modalService.onHide.subscribe(() => {
+          if (this.location.path().startsWith('/project/details')) {
+            this.location.replaceState('/project/overview');
+            this.updateSEOTags();
+          }
+        }
+        ));
     }
   }
 
@@ -422,4 +422,21 @@ export class OverviewComponent implements OnInit, AfterContentInit {
     this.seoService.updateTitle('Project overview');
     this.seoService.updateDescription('Browse or search for specific projects or ideas within DeX');
   }
+
+
+  public tagClicked(event) {
+    if (event.target.className === 'tag clicked') {
+      event.target.className = 'tag';
+    } else {
+      event.target.className = 'tag clicked';
+    }
+    event.stopPropagation();
+  }
+  /**
+ * Method to display the tags based on the environment variable.
+ * Tags should be hidden in production for now until further implementation is finished.
+ */
+  public displayTags(): boolean {
+    return !environment.production;
+  }
 }

From 3a3fb91badd03bd392e328f0ff99280d3ddea730 Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Mon, 25 Jan 2021 15:10:58 +0100
Subject: [PATCH 115/141] added divider, changed tag styles

---
 .../project/overview/overview.component.html  |  2 ++
 .../project/overview/overview.component.scss  | 19 +++++++++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/app/modules/project/overview/overview.component.html b/src/app/modules/project/overview/overview.component.html
index 1633629b..d7607219 100644
--- a/src/app/modules/project/overview/overview.component.html
+++ b/src/app/modules/project/overview/overview.component.html
@@ -33,6 +33,7 @@ <h4>Labels</h4>
           <div (click)="tagClicked($event)" class='tag clicked'>HTML</div>
         </div>
       </div>
+      <div class="divider"></div>
       <div class="filter-group">
         <h4>Sort Options</h4>
         <form [formGroup]="sortForm" class="sort-options-form">
@@ -51,6 +52,7 @@ <h4>Sort Options</h4>
           </select>
         </form>
       </div>
+      <div class="divider"></div>
       <div class="filter-group">
         <h4>Pagination</h4>
         <label>Projects per page</label>
diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index 30dbb85f..a4d33ee4 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -162,9 +162,14 @@
   margin: -24px 24px -64px -24px; // override padding from parent element & footer
   padding: 48px 24px;
   background-color: white;
-  .filter-group {
-    padding: 12px;
+  .projects-filter {
+    position: sticky;
+  }
+  .divider {
     border-bottom: 1px solid $light-mode-grey-thertiary;
+  }
+  .filter-group {
+    padding: 24px 12px;
     display: flex;
     flex-direction: column;
     h4 {
@@ -175,18 +180,20 @@
       flex-wrap: wrap;
       gap: 6px;
       .tag {
-        background-color: $light-mode-grey-secondary;
-        color: white;
+        background-color: $light-mode-grey-thertiary;
+        color: $light-mode-black;
         border-radius: 999px;
         padding: 2px 10px;
         font-size: 12px;
         cursor: pointer;
+        user-select: none;
         &.clicked {
           background-color: $accent-color-red-primary;
+          color: white;
         }
       }
     }
-    form{
+    form {
       display: flex;
       flex-direction: column;
     }
@@ -194,7 +201,7 @@
       padding: 4px;
       border-radius: 3px;
       background-color: $light-mode-grey-thertiary;
-      border: 0px solid transparent;
+      border: 0px;
     }
     select,
     option {

From ec1b3e13f84669f90a83a1d0326e6cbf7fd2f243 Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Mon, 25 Jan 2021 15:30:58 +0100
Subject: [PATCH 116/141] named col-md wrapper

---
 .../project/overview/overview.component.html  |   2 +-
 .../project/overview/overview.component.scss  | 376 +++++++++---------
 2 files changed, 178 insertions(+), 200 deletions(-)

diff --git a/src/app/modules/project/overview/overview.component.html b/src/app/modules/project/overview/overview.component.html
index d7607219..a87bc4a7 100644
--- a/src/app/modules/project/overview/overview.component.html
+++ b/src/app/modules/project/overview/overview.component.html
@@ -65,7 +65,7 @@ <h4>Pagination</h4>
     </div>
   </div>
 
-  <div class="col-md">
+  <div class="col-md projects-overview-wrapper">
     <div class="project-list-header">
       <h1 class="">Project overview</h1>
       <div class="list-view-toggle">
diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index a4d33ee4..9c2ae5ff 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -18,142 +18,213 @@
  */
 @import "assets/styles/variables";
 
-.project-list-header {
-  width: 100%;
-  margin: 5em 0 2em 0;
-  display: inline-flex;
-  justify-content: space-between;
-  align-content: center;
+.projects-overview-wrapper {
+  padding: 0 5vw;
+  
+  .project-list-header {
+    width: 100%;
+    margin: 2em 0;
+    display: inline-flex;
+    justify-content: space-between;
+    align-content: center;
+
+    h1 {
+      display: inline;
+    }
+    .list-view-toggle {
+      display: flex;
+      margin: auto 0 auto 0;
+      gap: 12px;
+      flex-wrap: wrap;
+      margin-left: 20px;
+      justify-content: flex-end;
+
+      .container {
+        box-shadow: $box-shadow;
+        display: inline;
+        position: relative;
+        cursor: pointer;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        padding: 0;
+        width: fit-content;
+        margin: 0;
+        height: fit-content;
+      }
+
+      // Hide the default radio button
+      .container input[type="radio"] {
+        position: absolute;
+        opacity: 0;
+        cursor: pointer;
+        height: 0;
+        width: 0;
+      }
+
+      // Create custom radio button
+      .checkmark {
+        height: 40px;
+        width: 40px;
+        padding: 10px;
+        border-radius: 5px;
+        background-color: $white;
+        color: $accent-color-red-primary;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: transform $transition-short;
+
+        &:hover {
+          transform: $transform-grow-big;
+        }
+        svg {
+          size: inherit;
+          width: 100%;
+          height: 100%;
+          margin: 0;
+        }
+      }
+    }
 
-  h1 {
-    display: inline;
+    // If the sibling input is checked
+    .container input[type="radio"]:checked ~ .checkmark {
+      color: $light-mode-grey-quaternary;
+      background: $accent-color-red-primary;
+    }
   }
-  .list-view-toggle {
+
+  .search {
     display: flex;
-    margin: auto 0 auto 0;
-    gap: 12px;
-    flex-wrap: wrap;
-    margin-left: 20px;
-    justify-content: flex-end;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 25px;
 
-    .container {
-      box-shadow: $box-shadow;
-      display: inline;
+    input[type="search"] {
       position: relative;
-      cursor: pointer;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
-      padding: 0;
-      width: fit-content;
-      margin: 0;
-      height: fit-content;
+      width: 100%;
+      padding: 8px 20px;
+      font-size: 18px;
+      height: 60px;
+      color: $light-mode-grey-primary;
+      border: none;
+      background: $white;
+      box-shadow: $box-shadow;
+      border-radius: 6px;
+      font-family: lato, sans-serif;
+
+      &::placeholder {
+        color: $light-mode-grey-primary;
+      }
+
+      &:focus {
+        border: none;
+        outline: none;
+      }
     }
 
-    // Hide the default radio button
-    .container input[type="radio"] {
-      position: absolute;
-      opacity: 0;
+    button {
+      position: relative;
+      right: 55px;
+      height: auto;
       cursor: pointer;
-      height: 0;
+      background: none;
+      border: none;
       width: 0;
-    }
-
-    // Create custom radio button
-    .checkmark {
-      height: 40px;
-      width: 40px;
-      padding: 10px;
-      border-radius: 5px;
-      background-color: $white;
-      color: $accent-color-red-primary;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      transition: transform $transition-short;
+      padding: 0;
 
-      &:hover {
-        transform: $transform-grow-big;
+      &:focus {
+        outline: none;
       }
-      svg {
-        size: inherit;
-        width: 100%;
-        height: 100%;
-        margin: 0;
+
+      img {
+        width: 25px;
+        transition: transform $transition-long;
+        &:hover {
+          transform: $transform-rotate;
+        }
       }
     }
   }
 
-  // If the sibling input is checked
-  .container input[type="radio"]:checked ~ .checkmark {
-    color: $light-mode-grey-quaternary;
-    background: $accent-color-red-primary;
+  .project-list-wrapper {
+    width: 100%;
+    display: grid;
+    gap: 15px;
+    margin-bottom: 35px;
+
+    &.grid {
+      gap: 25px;
+      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    }
   }
-}
 
-.search {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 25px;
+  .pagination-div {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+  }
 
-  input[type="search"] {
-    position: relative;
-    width: 100%;
-    padding: 8px 20px;
-    font-size: 18px;
-    height: 60px;
-    color: $light-mode-grey-primary;
-    border: none;
-    background: $white;
-    box-shadow: $box-shadow;
-    border-radius: 6px;
-    font-family: lato, sans-serif;
+  .pagination-footer::ng-deep {
+    flex-wrap: wrap;
 
-    &::placeholder {
-      color: $light-mode-grey-primary;
+    .pagination-next,
+    .pagination-prev {
+      max-width: 35px;
+      overflow: hidden;
     }
+  }
 
-    &:focus {
-      border: none;
-      outline: none;
-    }
+  .pagination-footer::ng-deep .page-link {
+    z-index: 1;
+    color: $light-mode-black;
+    height: 35px;
+    display: flex;
+    align-items: center;
   }
 
-  button {
-    position: relative;
-    right: 55px;
-    height: auto;
-    cursor: pointer;
-    background: none;
-    border: none;
-    width: 0;
-    padding: 0;
+  .pagination-footer::ng-deep .page-item.active .page-link {
+    border-color: $accent-color-red-primary;
+    background-color: $accent-color-red-primary !important;
+    color: #ffffff;
+  }
 
-    &:focus {
-      outline: none;
-    }
+  .paginationDropDown {
+    width: 80px;
+  }
 
+  .pagination-footer {
+    li {
+      height: 35px;
+      width: 35px;
+    }
+    a {
+      height: 35px;
+      width: 35px;
+    }
     img {
-      width: 25px;
-      transition: transform $transition-long;
-      &:hover {
-        transform: $transform-rotate;
-      }
+      width: 100%;
+    }
+    .chevron-right {
+      margin-top: 1px;
+      transform: rotateZ(270deg);
+    }
+    .chevron-left {
+      margin-top: 1px;
+      transform: rotateZ(90deg);
+    }
+    .disabled {
+      opacity: 0.3;
     }
   }
-}
 
-.project-list-wrapper {
-  width: 100%;
-  display: grid;
-  gap: 15px;
-  margin-bottom: 35px;
+  .paginationDropDown {
+    width: 80px;
+  }
 
-  &.grid {
-    gap: 25px;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  .loading-circle {
+    color: $accent-color-red-primary;
   }
 }
 
@@ -209,96 +280,3 @@
     }
   }
 }
-
-:host {
-  ::ng-deep accordion-group {
-    margin-top: 10px;
-    .card-header {
-      background: url("~src/assets/images/chevron-down-solid-orange.svg") no-repeat center right;
-      padding: 0;
-      border: none;
-      background-size: 13px;
-      button {
-        padding: 0;
-        color: $light-mode-grey-primary;
-        font-size: 18px;
-      }
-    }
-    .card {
-      border: none;
-    }
-    .card-body {
-      margin-top: 10px;
-      background: $light-mode-grey-quaternary;
-      border-radius: 6px;
-      padding: 5px 10px;
-    }
-  }
-}
-
-.pagination-div {
-  margin-top: 20px;
-  display: flex;
-  justify-content: center;
-}
-
-.pagination-footer::ng-deep {
-  flex-wrap: wrap;
-
-  .pagination-next,
-  .pagination-prev {
-    max-width: 35px;
-    overflow: hidden;
-  }
-}
-
-.pagination-footer::ng-deep .page-link {
-  z-index: 1;
-  color: $light-mode-black;
-  height: 35px;
-  display: flex;
-  align-items: center;
-}
-
-.pagination-footer::ng-deep .page-item.active .page-link {
-  border-color: $accent-color-red-primary;
-  background-color: $accent-color-red-primary !important;
-  color: #ffffff;
-}
-
-.paginationDropDown {
-  width: 80px;
-}
-
-.pagination-footer {
-  li {
-    height: 35px;
-    width: 35px;
-  }
-  a {
-    height: 35px;
-    width: 35px;
-  }
-  img {
-    width: 100%;
-  }
-  .chevron-right {
-    margin-top: 1px;
-    transform: rotateZ(270deg);
-  }
-  .chevron-left {
-    margin-top: 1px;
-    transform: rotateZ(90deg);
-  }
-  .disabled {
-    opacity: 0.3;
-  }
-}
-
-.paginationDropDown {
-  width: 80px;
-}
-
-.loading-circle {
-  color: $accent-color-red-primary;
-}

From acc1ab135097c15f460dd3a3df9c2cd5e118c561 Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Tue, 26 Jan 2021 14:11:07 +0100
Subject: [PATCH 117/141] small changes

---
 src/app/modules/project/overview/overview.component.scss | 6 +++---
 src/app/modules/project/overview/overview.component.ts   | 7 +++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index 9c2ae5ff..ced84e6b 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -233,9 +233,6 @@
   margin: -24px 24px -64px -24px; // override padding from parent element & footer
   padding: 48px 24px;
   background-color: white;
-  .projects-filter {
-    position: sticky;
-  }
   .divider {
     border-bottom: 1px solid $light-mode-grey-thertiary;
   }
@@ -243,6 +240,7 @@
     padding: 24px 12px;
     display: flex;
     flex-direction: column;
+    color: $light-mode-grey-primary;
     h4 {
       color: $light-mode-grey-primary;
     }
@@ -270,9 +268,11 @@
     }
     select {
       padding: 4px;
+      margin-bottom: 8px;
       border-radius: 3px;
       background-color: $light-mode-grey-thertiary;
       border: 0px;
+      color: $light-mode-black;
     }
     select,
     option {
diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts
index b8fd62c8..139284eb 100644
--- a/src/app/modules/project/overview/overview.component.ts
+++ b/src/app/modules/project/overview/overview.component.ts
@@ -423,15 +423,18 @@ export class OverviewComponent implements OnInit, AfterContentInit {
     this.seoService.updateDescription('Browse or search for specific projects or ideas within DeX');
   }
 
-
+  /**
+ * Method to make tags change appearance on clicking. 
+ * further implementation is still pending.
+ */
   public tagClicked(event) {
     if (event.target.className === 'tag clicked') {
       event.target.className = 'tag';
     } else {
       event.target.className = 'tag clicked';
     }
-    event.stopPropagation();
   }
+
   /**
  * Method to display the tags based on the environment variable.
  * Tags should be hidden in production for now until further implementation is finished.

From 5e0154c6107d71adcc95e16219d662b9a19834aa Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Tue, 26 Jan 2021 14:20:35 +0100
Subject: [PATCH 118/141] made filters sticky

---
 src/app/modules/project/overview/overview.component.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index ced84e6b..dbf7493d 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -20,7 +20,6 @@
 
 .projects-overview-wrapper {
   padding: 0 5vw;
-  
   .project-list-header {
     width: 100%;
     margin: 2em 0;
@@ -230,6 +229,9 @@
 
 .projects-filter-wrapper {
   min-width: 250px;
+  height: 100vh;
+  position: sticky;
+  top: 0;
   margin: -24px 24px -64px -24px; // override padding from parent element & footer
   padding: 48px 24px;
   background-color: white;

From 31376d93c031f822941669582a441e7139d8a7d9 Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Tue, 26 Jan 2021 14:35:03 +0100
Subject: [PATCH 119/141] added quick fix mobile styles

---
 .../modules/project/overview/overview.component.scss  | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index dbf7493d..df429ab2 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -282,3 +282,14 @@
     }
   }
 }
+
+// simple styles for filters on smaller screens 
+@include media-breakpoint-down(sm) {
+  .projects-filter-wrapper{
+    width: 100vw;
+    margin: -24px;
+    height: auto;
+    position: relative;
+  }
+}
+

From 3cb4dd10b7ec383b6a77cf747ebbef7f62a22951 Mon Sep 17 00:00:00 2001
From: Yuqera <yuqera@outlook.com>
Date: Tue, 26 Jan 2021 15:14:37 +0100
Subject: [PATCH 120/141] Small bugfixes

Fixed up some small bugfixes:
 - Alerts go away automatically
 - Edit contributors don't overflow
 - Project overview names don't overflow
 - Opening project detail modal doesn't screw up the layout
---
 .../app-layout/app-layout.component.html      |  4 +--
 .../app-layout/app-layout.component.scss      | 11 ++++++++
 .../app-layout/app-layout.component.ts        | 11 ++++++++
 src/app/models/internal/alert-config.ts       |  1 +
 .../project/add/manual/manual.component.ts    | 10 +++++---
 .../project/add/source/source.component.ts    |  2 ++
 .../project/details/details.component.html    |  2 +-
 .../project/details/details.component.scss    |  2 +-
 .../project/details/details.component.ts      |  5 ++++
 .../modules/project/edit/edit.component.html  | 16 ++++++++++--
 .../modules/project/edit/edit.component.scss  | 25 ++++++++++++++++---
 .../modules/project/edit/edit.component.ts    | 16 +++++++-----
 .../overview/project/project.component.html   |  5 +++-
 .../overview/project/project.component.scss   |  5 ++++
 src/app/services/alert.service.ts             | 25 ++++++++++++-------
 15 files changed, 112 insertions(+), 28 deletions(-)

diff --git a/src/app/components/app-layout/app-layout.component.html b/src/app/components/app-layout/app-layout.component.html
index 5d2930b0..3724442d 100644
--- a/src/app/components/app-layout/app-layout.component.html
+++ b/src/app/components/app-layout/app-layout.component.html
@@ -29,8 +29,8 @@
     </button>
 
     <div class="collapse navbar-collapse" [ngClass]="{ 'show': navbarOpen }">
-      <div class="header-nav">
-        <a routerLink="project/overview" routerLinkActive="active" class="nav-link nav-text">Projects</a>
+      <div class="header-nav project-link">
+        <a (click)="onClickProjects()" routerLinkActive="active" class="nav-link nav-text">Projects</a>
         <a routerLink="project/add/source" routerLinkActive="active" class="nav-link nav-text">Add project</a>
       </div>
       <div class="header-nav account">
diff --git a/src/app/components/app-layout/app-layout.component.scss b/src/app/components/app-layout/app-layout.component.scss
index 8fc00e21..e1cb7db8 100644
--- a/src/app/components/app-layout/app-layout.component.scss
+++ b/src/app/components/app-layout/app-layout.component.scss
@@ -128,6 +128,17 @@
     }
   }
 
+  .project-link a {
+    cursor: pointer;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+  }
+
   .account {
     display: flex;
     align-items: flex-start;
diff --git a/src/app/components/app-layout/app-layout.component.ts b/src/app/components/app-layout/app-layout.component.ts
index 2c929933..d1f71e2e 100644
--- a/src/app/components/app-layout/app-layout.component.ts
+++ b/src/app/components/app-layout/app-layout.component.ts
@@ -88,6 +88,17 @@ export class AppLayoutComponent implements OnInit {
     this.displayBetaBanner = false;
   }
 
+  /**
+   * Navigate to project overview, if on project overview already reload page.
+   */
+  public onClickProjects() {
+    if (this.router.url === '/project/overview') {
+      location.reload();
+    } else {
+      this.router.navigate(['project/overview']);
+    }
+  }
+
   /**
    * Method which triggers when the user clicks the beta text in the header.
    * Displays the beta banner.
diff --git a/src/app/models/internal/alert-config.ts b/src/app/models/internal/alert-config.ts
index 1f7f7ec6..cc826acc 100644
--- a/src/app/models/internal/alert-config.ts
+++ b/src/app/models/internal/alert-config.ts
@@ -23,5 +23,6 @@ export interface AlertConfig {
     preMessage?: string;
     mainMessage: string;
     dismissible?: boolean;
+    autoDismiss?: boolean;
     timeout?: number;
 }
diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts
index a1efb578..5f355eef 100644
--- a/src/app/modules/project/add/manual/manual.component.ts
+++ b/src/app/modules/project/add/manual/manual.component.ts
@@ -124,6 +124,7 @@ export class ManualComponent implements OnInit {
         preMessage: 'The add project form is invalid',
         mainMessage: 'The project could not be saved, please fill all required fields',
         dismissible: true,
+        autoDismiss: true,
         timeout: this.alertService.defaultTimeout
       };
       this.alertService.pushAlert(alertConfig);
@@ -160,7 +161,8 @@ export class ManualComponent implements OnInit {
         type: AlertType.danger,
         preMessage: 'The add collaborator form is invalid',
         mainMessage: 'Collaborator could not be added',
-        dismissible: true
+        dismissible: true,
+        autoDismiss: true
       };
       this.alertService.pushAlert(alertConfig);
       return;
@@ -181,7 +183,8 @@ export class ManualComponent implements OnInit {
       const alertConfig: AlertConfig = {
         type: AlertType.danger,
         mainMessage: 'Collaborator could not be removed',
-        dismissible: true
+        dismissible: true,
+        autoDismiss: true
       };
       this.alertService.pushAlert(alertConfig);
       return;
@@ -198,7 +201,8 @@ export class ManualComponent implements OnInit {
           const alertConfig: AlertConfig = {
             type: AlertType.success,
             mainMessage: 'Project was succesfully saved',
-            dismissible: true
+            dismissible: true,
+            autoDismiss: true
           };
           this.alertService.pushAlert(alertConfig);
           this.router.navigate([ `/project/overview` ]);
diff --git a/src/app/modules/project/add/source/source.component.ts b/src/app/modules/project/add/source/source.component.ts
index 70893b29..0bb72d74 100644
--- a/src/app/modules/project/add/source/source.component.ts
+++ b/src/app/modules/project/add/source/source.component.ts
@@ -105,6 +105,7 @@ export class SourceComponent implements OnInit {
           preMessage: 'Source uri/url was invalid',
           mainMessage: 'Source details could not be fetched',
           dismissible: true,
+          autoDismiss: true,
           timeout: this.alertService.defaultTimeout,
         };
         this.alertService.pushAlert(alertConfig);
@@ -137,6 +138,7 @@ export class SourceComponent implements OnInit {
             preMessage: 'You\'re not logged in!',
             mainMessage: 'You can only add a project when you\'re logged in.',
             dismissible: true,
+            autoDismiss: true,
             timeout: this.alertService.defaultTimeout,
           };
           this.alertService.pushAlert(alertConfig);
diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html
index fa14d103..a54b0967 100644
--- a/src/app/modules/project/details/details.component.html
+++ b/src/app/modules/project/details/details.component.html
@@ -155,7 +155,7 @@ <h2 class="project-title">{{ project.name }}</h2>
   </div>
 
   <ng-template #noProject>
-    <div class="row">
+    <div class="row not-found">
       <div class="offset-2 col-8">
         <h1>Project details</h1>
         <p>The project with the identifier "{{invalidId}}" could not be found.</p>
diff --git a/src/app/modules/project/details/details.component.scss b/src/app/modules/project/details/details.component.scss
index 5dd11e0a..d2002a84 100644
--- a/src/app/modules/project/details/details.component.scss
+++ b/src/app/modules/project/details/details.component.scss
@@ -51,7 +51,7 @@
   }
 }
 
-.row {
+.not-found {
   margin: 0;
   max-width: 100%;
 }
diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index f68851de..d8905fcb 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -162,6 +162,7 @@ export class DetailsComponent implements OnInit {
         preMessage: 'Project could not be highlighted',
         mainMessage: 'Project id could not be found',
         dismissible: true,
+        autoDismiss: true,
         timeout: this.alertService.defaultTimeout
       };
       this.alertService.pushAlert(alertConfig);
@@ -194,6 +195,7 @@ export class DetailsComponent implements OnInit {
           type: AlertType.success,
           mainMessage: 'Project was successfully highlighted',
           dismissible: true,
+          autoDismiss: true,
           timeout: this.alertService.defaultTimeout
         };
         this.alertService.pushAlert(alertConfig);
@@ -260,6 +262,7 @@ export class DetailsComponent implements OnInit {
         mainMessage: 'Removal of project was successful',
         timeout: this.alertService.defaultTimeout,
         dismissible: true,
+        autoDismiss: true,
         type: AlertType.success
       });
       this.router.navigate(['project/overview']);
@@ -379,6 +382,7 @@ export class DetailsComponent implements OnInit {
         type: AlertType.warning,
         mainMessage: 'You need to be logged in to like a project',
         dismissible: true,
+        autoDismiss: true,
         timeout: this.alertService.defaultTimeout
       };
       this.alertService.pushAlert(alertConfig);
@@ -428,6 +432,7 @@ export class DetailsComponent implements OnInit {
           type: AlertType.success,
           mainMessage: 'Highlight was successfully updated',
           dismissible: true,
+          autoDismiss: true,
           timeout: this.alertService.defaultTimeout
         };
         this.alertService.pushAlert(alertConfig);
diff --git a/src/app/modules/project/edit/edit.component.html b/src/app/modules/project/edit/edit.component.html
index c88be0d6..70236e97 100644
--- a/src/app/modules/project/edit/edit.component.html
+++ b/src/app/modules/project/edit/edit.component.html
@@ -131,11 +131,23 @@ <h3>Collaborator role</h3>
             <h3>Collaborators</h3>
           </div>
 
-          <div *ngFor="let collaborator of collaborators" class="col-5 collaborator-item">
+          <div *ngFor="let collaborator of collaborators; index as i" class="col-5 collaborator-item">
             <button type="button" class="btn btn-icon btn-danger" aria-label="error"
               (click)="onClickDeleteCollaborator(collaborator)"> <span aria-hidden="true"> &times; </span>
             </button>
-            <p class="collaborator-text large"><strong>{{collaborator?.fullName}}</strong>- {{collaborator?.role}}</p>
+            
+              <div class="collaborator-text-container w-100">
+
+                <div>
+                  <p class="collaborator-text large font-weight-bold" [tooltip]="collaborator?.fullName" delay="300">{{collaborator?.fullName}}</p>
+                </div>
+                <p class="collaborator-text large dash">-</p>
+                <div>
+                  <p class="collaborator-text large" [tooltip]="collaborator?.role" delay="300">{{collaborator?.role}}</p>
+                </div>     
+
+              </div>
+            
             <hr class="dashed">
           </div>
         </div>
diff --git a/src/app/modules/project/edit/edit.component.scss b/src/app/modules/project/edit/edit.component.scss
index c40a810b..a734dcc6 100644
--- a/src/app/modules/project/edit/edit.component.scss
+++ b/src/app/modules/project/edit/edit.component.scss
@@ -86,11 +86,30 @@
       margin-left: 10px;
     }
 
-    .collaborator-text {
+    .collaborator-text-container {
       display: flex;
-      align-self: center;
-      margin: 0;
+      justify-content: flex-start;
     }
+      .collaborator-text-container .dash {
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+      .collaborator-text-container div {
+        max-width: 50%;
+      }
+        .collaborator-text.font-weight-bold {
+          margin-left: 10px;
+        }
+
+        .collaborator-text {
+          align-self: center;
+          margin: 0;
+          max-width: 100%;
+          
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
   }
 
   button {
diff --git a/src/app/modules/project/edit/edit.component.ts b/src/app/modules/project/edit/edit.component.ts
index 004cd249..c6c9315b 100644
--- a/src/app/modules/project/edit/edit.component.ts
+++ b/src/app/modules/project/edit/edit.component.ts
@@ -15,10 +15,10 @@
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  */
 
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { catchError, finalize } from 'rxjs/operators';
+import { finalize } from 'rxjs/operators';
 import { CollaboratorAdd } from 'src/app/models/resources/collaborator-add';
 import { ProjectService } from 'src/app/services/project.service';
 import { Project } from 'src/app/models/domain/project';
@@ -129,7 +129,8 @@ export class EditComponent implements OnInit  {
         type: AlertType.danger,
         preMessage: 'The edit project form is invalid',
         mainMessage: 'The project could not be updated, please fill all required fields',
-        dismissible: true
+        dismissible: true,
+        autoDismiss: true
       };
       this.alertService.pushAlert(alertConfig);
       return;
@@ -178,7 +179,8 @@ export class EditComponent implements OnInit  {
         type: AlertType.danger,
         preMessage: 'The add collaborator form is invalid',
         mainMessage: 'Collaborator could not be added',
-        dismissible: true
+        dismissible: true,
+        autoDismiss: true
       };
       this.alertService.pushAlert(alertConfig);
       return;
@@ -199,7 +201,8 @@ export class EditComponent implements OnInit  {
       const alertConfig: AlertConfig = {
         type: AlertType.danger,
         mainMessage: 'Collaborator could not be removed',
-        dismissible: true
+        dismissible: true,
+        autoDismiss: true
       };
       this.alertService.pushAlert(alertConfig);
       return;
@@ -222,7 +225,8 @@ export class EditComponent implements OnInit  {
           const alertConfig: AlertConfig = {
             type: AlertType.success,
             mainMessage: 'Project was succesfully updated',
-            dismissible: true
+            dismissible: true,
+            autoDismiss: true
           };
           this.alertService.pushAlert(alertConfig);
           this.router.navigate([`project/details/${this.project.id}`]);
diff --git a/src/app/modules/project/overview/project/project.component.html b/src/app/modules/project/overview/project/project.component.html
index 767265ba..10aada8a 100644
--- a/src/app/modules/project/overview/project/project.component.html
+++ b/src/app/modules/project/overview/project/project.component.html
@@ -93,9 +93,12 @@ <h3 class="project-name">{{project.name}}</h3>
         <em class='far fa-clock'></em>
         <div class="project-created-date">{{project.created | date: 'mediumDate'}}</div>
       </div>
-      <div (click)="userClicked($event)" class='item disabled'>
+      <div (click)="userClicked($event)" [tooltip]="projectUsername" class='item'>
         <em class='fa fa-user'></em>
         <div class="project-user-name">{{project.user.name}}</div>
+        <ng-template #projectUsername>
+          <p>{{project.user.name}}</p>
+        </ng-template>
       </div>
     </div>
   </div>
diff --git a/src/app/modules/project/overview/project/project.component.scss b/src/app/modules/project/overview/project/project.component.scss
index 1990a60a..13d76caf 100644
--- a/src/app/modules/project/overview/project/project.component.scss
+++ b/src/app/modules/project/overview/project/project.component.scss
@@ -238,6 +238,11 @@
           white-space: nowrap;
           text-overflow: ellipsis;
         }
+        .project-user-name {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+        }
         i {
           justify-self: center;
           color: $light-mode-black;
diff --git a/src/app/services/alert.service.ts b/src/app/services/alert.service.ts
index 9791162d..dc2d144e 100644
--- a/src/app/services/alert.service.ts
+++ b/src/app/services/alert.service.ts
@@ -49,8 +49,8 @@ export class AlertService {
 
     this.$activeAlerts.next(this.activeAlerts);
 
-    // Dismissible alerts with no timeout will not be automatically removed.
-    if (alertConfig.dismissible && (alertConfig.timeout == null || alertConfig.timeout <= 0)) {
+    // Alerts that aren't configured to auto dismiss will return.
+    if (alertConfig.autoDismiss == null || !alertConfig.autoDismiss) {
       return;
     }
 
@@ -69,13 +69,20 @@ export class AlertService {
     }
 
     timer(alertTimeOut).subscribe(() => {
-      const index = this.activeAlerts.findIndex(activeAlert => activeAlert === alertConfig);
-      if (index < 0) {
-        return;
-      }
-
-      this.activeAlerts.splice(index, 1);
-      this.$activeAlerts.next(this.activeAlerts);
+      this.removeAlert(alertConfig);
     });
   }
+
+  /**
+   * Method to remove an alert.
+   * @param alertConfig the alert to remove.
+   */
+  private removeAlert(alertConfig: AlertConfig): void {
+    const index = this.activeAlerts.findIndex(activeAlert => activeAlert === alertConfig);
+
+    if (index < 0) { return; }
+
+    this.activeAlerts.splice(index, 1);
+    this.$activeAlerts.next(this.activeAlerts);
+  }
 }

From 535c34f2ebd310934da5d531d3a8e2892db60c77 Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Wed, 27 Jan 2021 11:26:06 +0100
Subject: [PATCH 121/141] small changes

---
 src/app/modules/project/overview/overview.component.html | 2 +-
 src/app/modules/project/overview/overview.component.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/modules/project/overview/overview.component.html b/src/app/modules/project/overview/overview.component.html
index a87bc4a7..68720b3e 100644
--- a/src/app/modules/project/overview/overview.component.html
+++ b/src/app/modules/project/overview/overview.component.html
@@ -33,7 +33,7 @@ <h4>Labels</h4>
           <div (click)="tagClicked($event)" class='tag clicked'>HTML</div>
         </div>
       </div>
-      <div class="divider"></div>
+      <div class="divider"*ngIf="displayTags()"></div>
       <div class="filter-group">
         <h4>Sort Options</h4>
         <form [formGroup]="sortForm" class="sort-options-form">
diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index df429ab2..3e48dde6 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -283,7 +283,7 @@
   }
 }
 
-// simple styles for filters on smaller screens 
+// simple styles for filter-bar on smaller screens 
 @include media-breakpoint-down(sm) {
   .projects-filter-wrapper{
     width: 100vw;

From 27a3469d2160cc595e15728caa7d9e94f9c7f982 Mon Sep 17 00:00:00 2001
From: Spacinggolem <waltersajtos@outlook.com>
Date: Wed, 27 Jan 2021 13:11:47 +0100
Subject: [PATCH 122/141] Removed FormControl/ FormBuilder from sort values so
 they could be merged.

---
 .../models/resources/internal-search-query.ts |  1 -
 .../project/overview/overview.component.html  | 26 +++----
 .../project/overview/overview.component.ts    | 77 ++++---------------
 3 files changed, 30 insertions(+), 74 deletions(-)

diff --git a/src/app/models/resources/internal-search-query.ts b/src/app/models/resources/internal-search-query.ts
index c6992785..44bc8e08 100644
--- a/src/app/models/resources/internal-search-query.ts
+++ b/src/app/models/resources/internal-search-query.ts
@@ -22,5 +22,4 @@ export interface InternalSearchQuery {
     amountOnPage: number;
     sortBy: string;
     sortDirection: string;
-    highlighted: boolean;
 }
diff --git a/src/app/modules/project/overview/overview.component.html b/src/app/modules/project/overview/overview.component.html
index 68720b3e..7858edeb 100644
--- a/src/app/modules/project/overview/overview.component.html
+++ b/src/app/modules/project/overview/overview.component.html
@@ -36,19 +36,19 @@ <h4>Labels</h4>
       <div class="divider"*ngIf="displayTags()"></div>
       <div class="filter-group">
         <h4>Sort Options</h4>
-        <form [formGroup]="sortForm" class="sort-options-form">
-          <label for="sort-type">Sort type</label>
-          <select class='option-select' formControlName="type" id="sort-type">
-            <option *ngFor="let sortTypeOption of sortTypeSelectOptions" [value]="sortTypeOption.value">
-              {{sortTypeOption.viewValue}}
-            </option>
-          </select>
+        <form class="sort-options-form">
+<!--          <label for="sort-type">Sort type</label>-->
+<!--          <select class='option-select' formControlName="type" id="sort-type">-->
+<!--            <option *ngFor="let sortTypeOption of sortTypeSelectOptions" [value]="sortTypeOption.value">-->
+<!--              {{sortTypeOption.viewValue}}-->
+<!--            </option>-->
+<!--          </select>-->
 
-          <label for="asc-desc">Sort direction</label>
-          <select class='option-select' formControlName="direction" id="asc-desc">
-            <option *ngFor="let sortDirectionOption of sortDirectionSelectOptions" [value]="sortDirectionOption.value">
-              {{sortDirectionOption.viewValue}}
-            </option>
+          <label for="asc-desc">Sort options</label>
+          <select class='option-select' #sortForm id="asc-desc" (change)="onSortFormValueChange(sortForm.value)">
+              <option *ngFor="let sortOption of sortSelectOptions" [value]="sortOption.value">
+                {{sortOption.viewValue}}
+              </option>
           </select>
         </form>
       </div>
@@ -130,4 +130,4 @@ <h2 class="fas fa-spinner fa-pulse loading-circle" *ngIf="projectsLoading"></h2>
       </ng-template>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts
index 139284eb..7b984eee 100644
--- a/src/app/modules/project/overview/overview.component.ts
+++ b/src/app/modules/project/overview/overview.component.ts
@@ -34,11 +34,6 @@ import { DetailsComponent } from 'src/app/modules/project/details/details.compon
 import { Subscription } from 'rxjs';
 import { AuthService } from 'src/app/services/auth.service';
 
-interface SortFormResult {
-  type: string;
-  direction: string;
-}
-
 /**
  * Overview of all the projects
  */
@@ -115,29 +110,16 @@ export class OverviewComponent implements OnInit, AfterContentInit {
    */
   public tagsForm: FormGroup;
 
-  public sortForm: FormGroup;
-
-  public highlightFormControl: FormControl;
-
-  public sortTypeSelectOptions: SelectFormOption[] = [
-    { value: 'updated', viewValue: 'Updated' },
-    { value: 'created', viewValue: 'Created' },
-    { value: 'name', viewValue: 'Name' }
-  ];
-
-  public sortDirectionSelectOptions: SelectFormOption[] = [
-    { value: 'desc', viewValue: 'Descending' },
-    { value: 'asc', viewValue: 'Ascending' }
-  ];
-
-  public highlightSelectOptions: SelectFormOption[] = [
-    { value: null, viewValue: 'All projects' },
-    { value: true, viewValue: 'Only highlighted' },
-    { value: false, viewValue: 'Only non highlighted' }
+  public sortSelectOptions: SelectFormOption[] = [
+    { value: 'updated,asc', viewValue: 'Updated Ascending' },
+    { value: 'updated,desc', viewValue: 'Updated Descending' },
+    { value: 'created,asc', viewValue: 'Created Ascending' },
+    { value: 'created,desc', viewValue: 'Created Descending' },
+    { value: 'name,asc', viewValue: 'Name Ascending' },
+    { value: 'name,desc', viewValue: 'Name Descending' }
   ];
 
   public displaySearchElements = false;
-  public currentOnlyHighlightedProjects: boolean = null;
   public currentPage = 1;
   /**
    * Project parameter gets updated per project detail modal
@@ -148,8 +130,9 @@ export class OverviewComponent implements OnInit, AfterContentInit {
    * Parameters for keeping track of the current internalSearch query values.
    */
   private currentSearchInput: string = null;
-  private currentSortType: string = this.sortTypeSelectOptions[0].value;
-  private currentSortDirection: string = this.sortDirectionSelectOptions[0].value;
+  private currentSortOptions: string = this.sortSelectOptions[0].value;
+  private currentSortType: string = this.currentSortOptions.split(",")[0];
+  private currentSortDirection: string = this.currentSortOptions.split(",")[1];
   /**
    * Property to indicate whether the project is loading.
    */
@@ -185,14 +168,6 @@ export class OverviewComponent implements OnInit, AfterContentInit {
       ux: false
     });
 
-    this.sortForm = this.formBuilder.group({
-      type: this.sortTypeSelectOptions[0].value,
-      direction: this.sortDirectionSelectOptions[0].value
-    });
-
-    // Initialize with index value of 0 to by default select the first select option.
-    this.highlightFormControl = this.formBuilder.control(0);
-
     if (!environment.production) {
       this.displaySearchElements = true;
     }
@@ -218,10 +193,6 @@ export class OverviewComponent implements OnInit, AfterContentInit {
 
     this.searchControl.valueChanges.subscribe((value) => this.onSearchInputValueChange(value));
 
-    this.sortForm.valueChanges.subscribe((value) => this.onSortFormValueChange(value));
-
-    this.highlightFormControl.valueChanges.subscribe((value) => this.onHighlightFormValueChanges(value));
-
     this.updateSEOTags();
 
 
@@ -309,27 +280,14 @@ export class OverviewComponent implements OnInit, AfterContentInit {
    * Method to handle value changes of the sort form.
    * @param value the value of the form.
    */
-  private onSortFormValueChange(value: SortFormResult): void {
-    if (value == null || value.type == null || value.type === 'null') {
-      return;
-    }
-    this.currentSortType = value.type;
-    this.currentSortDirection = value.direction;
-    this.onInternalQueryChange();
-  }
-
-  /**
-   * Method to handle the value changes of the highlight form.
-   * @param value the value of the highlight form.
-   */
-  private onHighlightFormValueChanges(value: number): void {
-    // Case the value since for some reason it is always returned as a string.
-    const convertedIndex = +value;
-    const foundOption = this.highlightSelectOptions[convertedIndex];
-    if (foundOption == null) {
+  private onSortFormValueChange(value: string): void {
+    if (value == null) {
       return;
     }
-    this.currentOnlyHighlightedProjects = foundOption.value;
+    this.currentSortType = value.split(",")[0];
+    this.currentSortDirection = value.split(",")[1];
+    console.log(`value.type: ${this.currentSortType}`);
+    console.log(`value.direction: ${this.currentSortDirection}`);
     this.onInternalQueryChange();
   }
 
@@ -345,7 +303,6 @@ export class OverviewComponent implements OnInit, AfterContentInit {
       amountOnPage: this.amountOfProjectsOnSinglePage,
       sortBy: this.currentSortType,
       sortDirection: this.currentSortDirection,
-      highlighted: this.currentOnlyHighlightedProjects,
     };
 
     if (internalSearchQuery.query == null) {
@@ -424,7 +381,7 @@ export class OverviewComponent implements OnInit, AfterContentInit {
   }
 
   /**
- * Method to make tags change appearance on clicking. 
+ * Method to make tags change appearance on clicking.
  * further implementation is still pending.
  */
   public tagClicked(event) {

From 1d970fa5688085dde009f868ed28ec0855717724 Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Wed, 27 Jan 2021 14:10:23 +0100
Subject: [PATCH 123/141] changed order & names of menu

---
 .../project/overview/overview.component.html    | 17 +++++------------
 .../project/overview/overview.component.ts      | 16 ++++++++--------
 2 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/app/modules/project/overview/overview.component.html b/src/app/modules/project/overview/overview.component.html
index 7858edeb..4fa8a36f 100644
--- a/src/app/modules/project/overview/overview.component.html
+++ b/src/app/modules/project/overview/overview.component.html
@@ -33,22 +33,15 @@ <h4>Labels</h4>
           <div (click)="tagClicked($event)" class='tag clicked'>HTML</div>
         </div>
       </div>
-      <div class="divider"*ngIf="displayTags()"></div>
+      <div class="divider" *ngIf="displayTags()"></div>
       <div class="filter-group">
         <h4>Sort Options</h4>
         <form class="sort-options-form">
-<!--          <label for="sort-type">Sort type</label>-->
-<!--          <select class='option-select' formControlName="type" id="sort-type">-->
-<!--            <option *ngFor="let sortTypeOption of sortTypeSelectOptions" [value]="sortTypeOption.value">-->
-<!--              {{sortTypeOption.viewValue}}-->
-<!--            </option>-->
-<!--          </select>-->
-
           <label for="asc-desc">Sort options</label>
           <select class='option-select' #sortForm id="asc-desc" (change)="onSortFormValueChange(sortForm.value)">
-              <option *ngFor="let sortOption of sortSelectOptions" [value]="sortOption.value">
-                {{sortOption.viewValue}}
-              </option>
+            <option *ngFor="let sortOption of sortSelectOptions" [value]="sortOption.value">
+              {{sortOption.viewValue}}
+            </option>
           </select>
         </form>
       </div>
@@ -130,4 +123,4 @@ <h2 class="fas fa-spinner fa-pulse loading-circle" *ngIf="projectsLoading"></h2>
       </ng-template>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts
index 7b984eee..7176fbe4 100644
--- a/src/app/modules/project/overview/overview.component.ts
+++ b/src/app/modules/project/overview/overview.component.ts
@@ -111,12 +111,12 @@ export class OverviewComponent implements OnInit, AfterContentInit {
   public tagsForm: FormGroup;
 
   public sortSelectOptions: SelectFormOption[] = [
-    { value: 'updated,asc', viewValue: 'Updated Ascending' },
-    { value: 'updated,desc', viewValue: 'Updated Descending' },
-    { value: 'created,asc', viewValue: 'Created Ascending' },
-    { value: 'created,desc', viewValue: 'Created Descending' },
-    { value: 'name,asc', viewValue: 'Name Ascending' },
-    { value: 'name,desc', viewValue: 'Name Descending' }
+    { value: 'updated,desc', viewValue: 'Updated (new-old)' },
+    { value: 'updated,asc', viewValue: 'Updated (old-new)' },
+    { value: 'name,asc', viewValue: 'Name (a-z)' },
+    { value: 'name,desc', viewValue: 'Name (z-a)' },
+    { value: 'created,desc', viewValue: 'Created (new-old)' },
+    { value: 'created,asc', viewValue: 'Created (old-new)' },
   ];
 
   public displaySearchElements = false;
@@ -131,8 +131,8 @@ export class OverviewComponent implements OnInit, AfterContentInit {
    */
   private currentSearchInput: string = null;
   private currentSortOptions: string = this.sortSelectOptions[0].value;
-  private currentSortType: string = this.currentSortOptions.split(",")[0];
-  private currentSortDirection: string = this.currentSortOptions.split(",")[1];
+  private currentSortType: string = this.currentSortOptions.split(',')[0];
+  private currentSortDirection: string = this.currentSortOptions.split(',')[1];
   /**
    * Property to indicate whether the project is loading.
    */

From d2302287367e80cc51d66bc7127257d2a6887d80 Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Wed, 27 Jan 2021 14:12:43 +0100
Subject: [PATCH 124/141] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d853850a..694bd198 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Changed the open graph tags in order to show a more appealing website preview [#405](https://github.com/DigitalExcellence/dex-frontend/issues/405)
+- Changed the design of the filtermenu on project overview page- [#287](https://github.com/DigitalExcellence/dex-frontend/issues/287)
 
 ### Deprecated
 

From 71f0cc4a61c39be6c9236b9829f798b05547da99 Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Wed, 27 Jan 2021 14:39:40 +0100
Subject: [PATCH 125/141] private function should be public

---
 src/app/modules/project/overview/overview.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts
index 7176fbe4..aabd4931 100644
--- a/src/app/modules/project/overview/overview.component.ts
+++ b/src/app/modules/project/overview/overview.component.ts
@@ -280,7 +280,7 @@ export class OverviewComponent implements OnInit, AfterContentInit {
    * Method to handle value changes of the sort form.
    * @param value the value of the form.
    */
-  private onSortFormValueChange(value: string): void {
+  public onSortFormValueChange(value: string): void {
     if (value == null) {
       return;
     }

From 7359760d54ef50826c35ac7ee884c869fa3743b8 Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Wed, 27 Jan 2021 14:41:40 +0100
Subject: [PATCH 126/141] replace i tag by em

---
 src/app/modules/project/overview/overview.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/modules/project/overview/overview.component.html b/src/app/modules/project/overview/overview.component.html
index 4fa8a36f..ac2d303d 100644
--- a/src/app/modules/project/overview/overview.component.html
+++ b/src/app/modules/project/overview/overview.component.html
@@ -21,7 +21,7 @@
 <div class="row">
   <div class="col-md-2 projects-filter-wrapper">
     <div class="projects-filter">
-      <h3><i class="fas fa-filter"></i> Filters</h3>
+      <h3><em class="fas fa-filter"></em> Filters</h3>
       <div class="filter-group" *ngIf="displayTags()">
         <h4>Labels</h4>
         <div class='tags'>

From 5dfc5f3b492c8d19c198834514ec09d858d8d27f Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Wed, 27 Jan 2021 14:47:27 +0100
Subject: [PATCH 127/141] fix linting issue

---
 src/app/modules/project/overview/overview.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts
index aabd4931..e2d575ed 100644
--- a/src/app/modules/project/overview/overview.component.ts
+++ b/src/app/modules/project/overview/overview.component.ts
@@ -284,8 +284,8 @@ export class OverviewComponent implements OnInit, AfterContentInit {
     if (value == null) {
       return;
     }
-    this.currentSortType = value.split(",")[0];
-    this.currentSortDirection = value.split(",")[1];
+    this.currentSortType = value.split(',')[0];
+    this.currentSortDirection = value.split(',')[1];
     console.log(`value.type: ${this.currentSortType}`);
     console.log(`value.direction: ${this.currentSortDirection}`);
     this.onInternalQueryChange();

From dfa54c77cd3dcb59070462c3bb52c210beb8baab Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Wed, 27 Jan 2021 15:13:26 +0100
Subject: [PATCH 128/141] removed console.log

---
 src/app/modules/project/overview/overview.component.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts
index e2d575ed..15c6bd34 100644
--- a/src/app/modules/project/overview/overview.component.ts
+++ b/src/app/modules/project/overview/overview.component.ts
@@ -286,8 +286,6 @@ export class OverviewComponent implements OnInit, AfterContentInit {
     }
     this.currentSortType = value.split(',')[0];
     this.currentSortDirection = value.split(',')[1];
-    console.log(`value.type: ${this.currentSortType}`);
-    console.log(`value.direction: ${this.currentSortDirection}`);
     this.onInternalQueryChange();
   }
 

From 673e1b962d136e3be9b0bfa37dd70d86a9dcd760 Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Thu, 28 Jan 2021 10:45:21 +0100
Subject: [PATCH 129/141] fixed sizing issue on bigger screens

---
 src/app/components/app-layout/app-layout.component.scss  | 2 +-
 src/app/modules/project/overview/overview.component.scss | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/app-layout/app-layout.component.scss b/src/app/components/app-layout/app-layout.component.scss
index d152d884..af7574a5 100644
--- a/src/app/components/app-layout/app-layout.component.scss
+++ b/src/app/components/app-layout/app-layout.component.scss
@@ -272,7 +272,7 @@
   justify-content: center;
 
   .container {
-    max-width: 1640px;
+    max-width: 100vw;
     width: 100%;
   }
 }
diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index 3e48dde6..e8f7c1a6 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -233,13 +233,13 @@
   position: sticky;
   top: 0;
   margin: -24px 24px -64px -24px; // override padding from parent element & footer
-  padding: 48px 24px;
+  padding: 48px 36px;
   background-color: white;
   .divider {
     border-bottom: 1px solid $light-mode-grey-thertiary;
   }
   .filter-group {
-    padding: 24px 12px;
+    padding: 24px 0;
     display: flex;
     flex-direction: column;
     color: $light-mode-grey-primary;

From 6dcf7cc6599ef5a7c117ac3fa60b0206833e1f85 Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Thu, 28 Jan 2021 10:57:51 +0100
Subject: [PATCH 130/141] fixed dropdown appearance

---
 src/app/modules/project/overview/overview.component.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index e8f7c1a6..c3273d9f 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -272,9 +272,11 @@
       padding: 4px;
       margin-bottom: 8px;
       border-radius: 3px;
-      background-color: $light-mode-grey-thertiary;
       border: 0px;
       color: $light-mode-black;
+      appearance: none;
+      background: $light-mode-grey-thertiary url("src/assets/images/chevron-down-solid.svg") no-repeat 95% center;
+      background-size: 12px;
     }
     select,
     option {

From 3bb1cbac351186f190119fb4d6dff7ac926c0bb0 Mon Sep 17 00:00:00 2001
From: Brend Smits <brend_smits@hotmail.com>
Date: Thu, 28 Jan 2021 11:45:28 +0100
Subject: [PATCH 131/141] Remove contact tab and incorrect placement of call to
 actions

---
 .../modules/project/details/details.component.html    | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html
index 061cd8f5..e1332403 100644
--- a/src/app/modules/project/details/details.component.html
+++ b/src/app/modules/project/details/details.component.html
@@ -101,12 +101,6 @@ <h2 class="project-title">{{ project.name }}</h2>
                 class='item'>
                 Description
               </div>
-              <ng-container *ngIf="isProduction()">
-                <div (click)="setActiveTab('contact')" [ngClass]="{'active': this.activeTab == 'contact' }"
-                  class='item'>
-                  Contact
-                </div>
-              </ng-container>
               <div (click)="setActiveTab('collaborators')" [ngClass]="{'active': this.activeTab == 'collaborators' }"
                 class='item'>
                 Collaborators
@@ -142,11 +136,6 @@ <h2 class="project-title">{{ project.name }}</h2>
                 <app-embed-button [projectId]=project.id></app-embed-button>
               </ng-container>
             </ng-container>
-            <ng-container *ngIf=" this.activeTab == 'contact' ">
-              <ng-container *ngIf="displayCallToActionButton">
-                <button id="call-to-action-button" class="primary ml-2" (click)="onClickCallToActionButton(project.callToAction.value)">{{project.callToAction.optionValue}}</button>
-              </ng-container>
-            </ng-container>
             <ng-container *ngIf=" this.activeTab == 'collaborators' ">
               <div class='collaborators'>
                 <app-collaborator *ngFor="let collaborator of project.collaborators" [collaborator]="collaborator">

From 9af6d0499b219c6956d82adb2376609363972eb8 Mon Sep 17 00:00:00 2001
From: Brend Smits <brend_smits@hotmail.com>
Date: Thu, 28 Jan 2021 11:46:16 +0100
Subject: [PATCH 132/141] Fix newline in changelog.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c4a059d6..a9e7eb88 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,9 +15,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added update highlight functionality - [#294](https://github.com/DigitalExcellence/dex-frontend/issues/294)
 - Added animations on clickable items and while project pages are loading - [#321](https://github.com/DigitalExcellence/dex-frontend/issues/321)
 - Added animations when user likes (or unlikes) a project - [#414](https://github.com/DigitalExcellence/dex-frontend/issues/414)
-
 - Added the option to add a Call-To-Action button to a project - [#267](https://github.com/DigitalExcellence/dex-frontend/issues/267)
 
+
 ### Changed
 
 - Changed the open graph tags in order to show a more appealing website preview [#405](https://github.com/DigitalExcellence/dex-frontend/issues/405)

From 0e7235d18fb8e872b4480a603da1dba4e6a1dc79 Mon Sep 17 00:00:00 2001
From: Brend Smits <brend_smits@hotmail.com>
Date: Thu, 28 Jan 2021 12:11:40 +0100
Subject: [PATCH 133/141] Added changelog

Fixes #400
Fixes #408
Fixes #392
Fixes #354
Fixes #411
Fixes #401
---
 CHANGELOG.md | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d853850a..49b9d315 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,7 +18,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Changed the open graph tags in order to show a more appealing website preview [#405](https://github.com/DigitalExcellence/dex-frontend/issues/405)
+- Changed the open graph tags in order to show a more appealing website preview - [#405](https://github.com/DigitalExcellence/dex-frontend/issues/405)
+- Changed it so you can now clear query paramters like pagination or search by clicking on 'projects' again - [#401](https://github.com/DigitalExcellence/dex-frontend/issues/401)
+
 
 ### Deprecated
 
@@ -29,7 +31,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fixed issue where images in the project-details view would go outside the page - [#397](https://github.com/DigitalExcellence/dex-frontend/issues/397)
-- Fixed issue where builds failed due to Lighthouse budgets not being high enough [#411](https://github.com/DigitalExcellence/dex-backend/issues/411)
+- Fixed issue where builds failed due to Lighthouse budgets not being high enough - [#411](https://github.com/DigitalExcellence/dex-backend/issues/411)
+- Fixed issue where long collaborator names would mess up styling - [#354](https://github.com/DigitalExcellence/dex-frontend/issues/354)
+- Fixed issue where in some cases the alert banner would not disapear automatically - [#392](https://github.com/DigitalExcellence/dex-frontend/issues/392)
+- Fixed issue where opening a modal or long usernames would cause the page to get unaligned - [#400](https://github.com/DigitalExcellence/dex-frontend/issues/400)
 
 ### Security
 

From 3b0afb8cc6436f7e35f7772338d0b61980e30824 Mon Sep 17 00:00:00 2001
From: Yuqera <yuqera@outlook.com>
Date: Thu, 28 Jan 2021 13:12:10 +0100
Subject: [PATCH 134/141] Fixed sliding to right in project overview modal
 opening

---
 src/app/modules/project/details/details.component.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/app/modules/project/details/details.component.scss b/src/app/modules/project/details/details.component.scss
index d2002a84..b696f8c7 100644
--- a/src/app/modules/project/details/details.component.scss
+++ b/src/app/modules/project/details/details.component.scss
@@ -74,6 +74,15 @@
   }
 }
 
+.modal-open {
+  .feedback-button-container {
+    right: 15.77%!important;
+  }
+  .background {
+    width: 101.8vw;
+  }
+}
+
 .project-modal-content {
   border: none;
   padding: 40px;

From 9f39b03554e450a265c4e3866617bbcd6b10ff46 Mon Sep 17 00:00:00 2001
From: Julia <juliaslaats@gmail.com>
Date: Thu, 28 Jan 2021 13:59:32 +0100
Subject: [PATCH 135/141] added max width to overview wrapper

---
 src/app/modules/project/overview/overview.component.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss
index c3273d9f..04cd8325 100644
--- a/src/app/modules/project/overview/overview.component.scss
+++ b/src/app/modules/project/overview/overview.component.scss
@@ -20,6 +20,9 @@
 
 .projects-overview-wrapper {
   padding: 0 5vw;
+  max-width: 1400px;
+  margin-left: auto;
+  margin-right:auto;
   .project-list-header {
     width: 100%;
     margin: 2em 0;

From dd9ada01d963db6161c58894d18f751fac811a08 Mon Sep 17 00:00:00 2001
From: Brend Smits <brend_smits@hotmail.com>
Date: Fri, 29 Jan 2021 16:29:24 +0100
Subject: [PATCH 136/141] Likes now show in production/staging environments

Likes were being hidden in production environments. This was not intended.
---
 .../project/overview/project/project.component.html        | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/app/modules/project/overview/project/project.component.html b/src/app/modules/project/overview/project/project.component.html
index 364f727e..55ab4054 100644
--- a/src/app/modules/project/overview/project/project.component.html
+++ b/src/app/modules/project/overview/project/project.component.html
@@ -27,15 +27,10 @@
       <h3 class="project-name">{{project.name}}</h3>
       <p class="project-short-description">{{project.shortDescription}}</p>
     </div>
-    <ng-container *ngIf="displayTags(); else noLikes">
       <div (click)="likeClicked($event)" class="item project-likes">
         <em [ngClass]="project.userHasLikedProject ? 'fas' : 'far'" class='far fa-heart'></em>
         {{project.likeCount}} Likes
       </div>
-    </ng-container>
-    <ng-template #noLikes>
-      <div></div>
-    </ng-template>
     <div [tooltip]="projectUpdated" class="item project-created-date">
       <em class='far fa-clock'></em>
       {{project.created | date: 'longDate'}}
@@ -102,4 +97,4 @@ <h3 class="project-name">{{project.name}}</h3>
       </div>
     </div>
   </div>
-</ng-container>
\ No newline at end of file
+</ng-container>

From 147494e79d08e050a0b3c5bfeb51475486fb4944 Mon Sep 17 00:00:00 2001
From: Brend Smits <brend_smits@hotmail.com>
Date: Fri, 29 Jan 2021 17:03:30 +0100
Subject: [PATCH 137/141] Update NPM packages

---
 package-lock.json | 2726 ++++++++++++++++++++++-----------------------
 package.json      |   42 +-
 2 files changed, 1354 insertions(+), 1414 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index daf00e4e..7c6c4970 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,12 +5,12 @@
   "requires": true,
   "dependencies": {
     "@angular-devkit/architect": {
-      "version": "0.901.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.901.12.tgz",
-      "integrity": "sha512-gLlsxa+3JPV1m1gRvRMujOs4xKox6I5BkYmOD1zfu+dB6y3LuBAvHfXA6FaTDVOMBrmSlWnE4PmOmB6xd7wxMA==",
+      "version": "0.901.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.901.13.tgz",
+      "integrity": "sha512-vwIVlG+4TJKcnwMcgpkrMXXzjKnk87AEmgERynJVxGYpRJYppHWd6ul7bYdJQATuLUNbJrgdc+lvU4PZqi8Z2A==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "9.1.12",
+        "@angular-devkit/core": "9.1.13",
         "rxjs": "6.5.4"
       },
       "dependencies": {
@@ -26,21 +26,21 @@
       }
     },
     "@angular-devkit/build-angular": {
-      "version": "0.901.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-0.901.12.tgz",
-      "integrity": "sha512-enK+u1Lg1a/KWUs3r8Tc7Igduu5ph9fgziV8bjQeVrswrqFb0m0eEhxe/zV8rvE92H3NBZp5Z+uzOYIcg4eirw==",
+      "version": "0.901.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-0.901.13.tgz",
+      "integrity": "sha512-CJg6XTw+fYQOuu1Lt4g2KANxo0bdvpj+ozaVIM3u3ejjrvZB1FS+oDJLubkPW8PCQZHOEM8VugQKameZemqwfQ==",
       "dev": true,
       "requires": {
-        "@angular-devkit/architect": "0.901.12",
-        "@angular-devkit/build-optimizer": "0.901.12",
-        "@angular-devkit/build-webpack": "0.901.12",
-        "@angular-devkit/core": "9.1.12",
+        "@angular-devkit/architect": "0.901.13",
+        "@angular-devkit/build-optimizer": "0.901.13",
+        "@angular-devkit/build-webpack": "0.901.13",
+        "@angular-devkit/core": "9.1.13",
         "@babel/core": "7.9.0",
         "@babel/generator": "7.9.3",
         "@babel/preset-env": "7.9.0",
         "@babel/template": "7.8.6",
         "@jsdevtools/coverage-istanbul-loader": "3.0.3",
-        "@ngtools/webpack": "9.1.12",
+        "@ngtools/webpack": "9.1.13",
         "ajv": "6.12.3",
         "autoprefixer": "9.7.4",
         "babel-loader": "8.0.6",
@@ -115,12 +115,12 @@
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -175,9 +175,9 @@
       }
     },
     "@angular-devkit/build-optimizer": {
-      "version": "0.901.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.901.12.tgz",
-      "integrity": "sha512-XuXA+6y9QkIAwSVZhWmne4r7qugUUWaXobgRefbn9heiRlY8/7XkZmmvbSrxc1fgQfQar52W9fAa19fAIeNvnw==",
+      "version": "0.901.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.901.13.tgz",
+      "integrity": "sha512-FbUt5xKks8MfUCpzbr3C8/uHr0GbQijHI3byrsoFvFNRd6e2ZO7qt6yvqqz5VVM7fW0o/RBl4i3WobVsw5QFDg==",
       "dev": true,
       "requires": {
         "loader-utils": "2.0.0",
@@ -202,13 +202,13 @@
       }
     },
     "@angular-devkit/build-webpack": {
-      "version": "0.901.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.901.12.tgz",
-      "integrity": "sha512-zrhZV2LhQ4uFl9at9i2jiedIu932HsaFN4OMMsTFlV+6CZxtEUBI85hhnPa5KQtIYQr2OMQSQf/FyhnBGs0riQ==",
+      "version": "0.901.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.901.13.tgz",
+      "integrity": "sha512-Hgxax3E5YzFyBT6+GEt6NcKVKKxt6x77gALpY14Hj1qc/Axdre8uWjPIiKnXw1TX4SyU5sg9LkUz8IaaJ60EOQ==",
       "dev": true,
       "requires": {
-        "@angular-devkit/architect": "0.901.12",
-        "@angular-devkit/core": "9.1.12",
+        "@angular-devkit/architect": "0.901.13",
+        "@angular-devkit/core": "9.1.13",
         "rxjs": "6.5.4"
       },
       "dependencies": {
@@ -224,9 +224,9 @@
       }
     },
     "@angular-devkit/core": {
-      "version": "9.1.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-9.1.12.tgz",
-      "integrity": "sha512-D/GnBeSlmdgGn7EhuE32HuPuRAjvUuxi7Q6WywBI8PSsXKAGnrypghBwMATNnOA24//CgbW2533Y9VWHaeXdeA==",
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-9.1.13.tgz",
+      "integrity": "sha512-bwehVRsva9OWfh/yuEh9VU+0Gr1T7DHJLe8tpZk/VsIkGOD0IszEPZOIEK23bg32yiff9bh6qJEPMA7ZBYEQHg==",
       "dev": true,
       "requires": {
         "ajv": "6.12.3",
@@ -272,12 +272,12 @@
       }
     },
     "@angular-devkit/schematics": {
-      "version": "9.1.12",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-9.1.12.tgz",
-      "integrity": "sha512-+GYnUzmIy1/QpYitCC8mI7jcrViGHTtOKvvDPEFjU2nggjNEQaMmsHcdIsjrqggEc23ZZyebNAIewT8CMkJyrQ==",
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-9.1.13.tgz",
+      "integrity": "sha512-DZBmfYE6xIfC6PDMvQpR8B31TtLWOmSeTQPnmSm9gj6OZpyqFqoGWOz/0l05FH6zC8HLthAAFJSEnPYyhzWDvg==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "9.1.12",
+        "@angular-devkit/core": "9.1.13",
         "ora": "4.0.3",
         "rxjs": "6.5.4"
       },
@@ -294,25 +294,25 @@
       }
     },
     "@angular/animations": {
-      "version": "9.1.12",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.12.tgz",
-      "integrity": "sha512-tphpf9QHnOPoL2Jl7KpR+R5aHNW3oifLEmRUTajJYJGvo1uzdUDE82+V9OGOinxJsYseCth9gYJhN24aYTB9NA=="
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.13.tgz",
+      "integrity": "sha512-ane1eeQmsP7fcAiLgRhle7YIDgE88WDMMvzqJYhSxwLzXNF/hwqNeskmNcjo8bLt9h/yTIjrCQbycLCHJfU8UQ=="
     },
     "@angular/cli": {
-      "version": "9.1.12",
-      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.12.tgz",
-      "integrity": "sha512-B0yOab5WbD84bIRRUKOPAJnpka8Qj+CRt61wJfjsqpd/Rj7pD/3ubmdCNoBH7Xa6UlOb0tdYqRPsqfK7uEL0sw==",
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.13.tgz",
+      "integrity": "sha512-KfonsB9uBdYbCipjPX/vk+ouMNT5ugxG5O0Y3uMKDnzSYGz+wKjHxOYR+lx1kaQtEsBOTX0DUmce0shZZKbbGQ==",
       "dev": true,
       "requires": {
-        "@angular-devkit/architect": "0.901.12",
-        "@angular-devkit/core": "9.1.12",
-        "@angular-devkit/schematics": "9.1.12",
-        "@schematics/angular": "9.1.12",
-        "@schematics/update": "0.901.12",
+        "@angular-devkit/architect": "0.901.13",
+        "@angular-devkit/core": "9.1.13",
+        "@angular-devkit/schematics": "9.1.13",
+        "@schematics/angular": "9.1.13",
+        "@schematics/update": "0.901.13",
         "@yarnpkg/lockfile": "1.1.0",
         "ansi-colors": "4.1.1",
         "debug": "4.1.1",
-        "ini": "1.3.5",
+        "ini": "1.3.6",
         "inquirer": "7.1.0",
         "npm-package-arg": "8.0.1",
         "npm-pick-manifest": "6.0.0",
@@ -332,6 +332,12 @@
           "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
           "dev": true
         },
+        "ini": {
+          "version": "1.3.6",
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.6.tgz",
+          "integrity": "sha512-IZUoxEjNjubzrmvzZU4lKP7OnYmX72XRl3sqkfJhBKweKi5rnGi5+IUdlj/H1M+Ip5JQ1WzaDMOBRY90Ajc5jg==",
+          "dev": true
+        },
         "semver": {
           "version": "7.1.3",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.1.3.tgz",
@@ -347,19 +353,19 @@
       }
     },
     "@angular/common": {
-      "version": "9.1.12",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-9.1.12.tgz",
-      "integrity": "sha512-XSIqkbM6VV1yixF9zuzeE5eqN1VsiXS517K2VU0XgCRSAzhVhLOeKsdYjeLf7PdSu/HgW/Tr81H+isi9A9I0YA=="
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-9.1.13.tgz",
+      "integrity": "sha512-QACUhJWlly/nfHUmjopVS1p6ayxxa/NqjyftdCeBJaoyM2YohqWixP/n/keu1K/srJ96aFpUNsZQgmgoRv5SOQ=="
     },
     "@angular/compiler": {
-      "version": "9.1.12",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-9.1.12.tgz",
-      "integrity": "sha512-suefk0OFkaJpUUKnV+phbL4T8fmVGHvzkereY5eqybQlumOez8NPL1PJcygAylh/E6OIAYm8SWookYwM6ZY9dg=="
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-9.1.13.tgz",
+      "integrity": "sha512-9MLB1Xx7odKuxDoybVwiOB1ZEUZpL8FurYm4RVuW39ntsUt0IMC9Hb8UagZLTAWhaWSHydkD/KBQVVobGqd0lA=="
     },
     "@angular/compiler-cli": {
-      "version": "9.1.12",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-9.1.12.tgz",
-      "integrity": "sha512-bbqJ+fbY+aQejSYuHUjE1qYJCXkZBM5Hru9eN7m/j376u83MQ5jWdC290uYx+ipsXcPTa/YRZ44jpL+5cCzIrg==",
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-9.1.13.tgz",
+      "integrity": "sha512-40jbfMr1FinOqUyG3k4Moiytjs/Z8zKBgP3S5Qfn80EBJItRdFXwNtvaOi/onaag4+Mv+vigShwsgCewLbt/kA==",
       "dev": true,
       "requires": {
         "canonical-path": "1.0.0",
@@ -373,7 +379,7 @@
         "semver": "^6.3.0",
         "source-map": "^0.6.1",
         "sourcemap-codec": "^1.4.8",
-        "yargs": "15.3.0"
+        "yargs": "^16.1.1"
       },
       "dependencies": {
         "ansi-regex": {
@@ -383,24 +389,23 @@
           "dev": true
         },
         "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "dev": true,
           "requires": {
-            "@types/color-name": "^1.1.1",
             "color-convert": "^2.0.1"
           }
         },
         "cliui": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
-          "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+          "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
           "dev": true,
           "requires": {
             "string-width": "^4.2.0",
             "strip-ansi": "^6.0.0",
-            "wrap-ansi": "^6.2.0"
+            "wrap-ansi": "^7.0.0"
           }
         },
         "color-convert": {
@@ -418,46 +423,12 @@
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
-        "find-up": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^5.0.0",
-            "path-exists": "^4.0.0"
-          }
-        },
         "is-fullwidth-code-point": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
           "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
           "dev": true
         },
-        "locate-path": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^4.1.0"
-          }
-        },
-        "p-locate": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.2.0"
-          }
-        },
-        "path-exists": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-          "dev": true
-        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -485,9 +456,9 @@
           }
         },
         "wrap-ansi": {
-          "version": "6.2.0",
-          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
-          "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
           "dev": true,
           "requires": {
             "ansi-styles": "^4.0.0",
@@ -495,61 +466,59 @@
             "strip-ansi": "^6.0.0"
           }
         },
+        "y18n": {
+          "version": "5.0.5",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.5.tgz",
+          "integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==",
+          "dev": true
+        },
         "yargs": {
-          "version": "15.3.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.3.0.tgz",
-          "integrity": "sha512-g/QCnmjgOl1YJjGsnUg2SatC7NUYEiLXJqxNOQU9qSpjzGtGXda9b+OKccr1kLTy8BN9yqEyqfq5lxlwdc13TA==",
+          "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
           "dev": true,
           "requires": {
-            "cliui": "^6.0.0",
-            "decamelize": "^1.2.0",
-            "find-up": "^4.1.0",
-            "get-caller-file": "^2.0.1",
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
             "require-directory": "^2.1.1",
-            "require-main-filename": "^2.0.0",
-            "set-blocking": "^2.0.0",
             "string-width": "^4.2.0",
-            "which-module": "^2.0.0",
-            "y18n": "^4.0.0",
-            "yargs-parser": "^18.1.0"
+            "y18n": "^5.0.5",
+            "yargs-parser": "^20.2.2"
           }
         },
         "yargs-parser": {
-          "version": "18.1.3",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-          "dev": true,
-          "requires": {
-            "camelcase": "^5.0.0",
-            "decamelize": "^1.2.0"
-          }
+          "version": "20.2.4",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz",
+          "integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==",
+          "dev": true
         }
       }
     },
     "@angular/core": {
-      "version": "9.1.12",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.1.12.tgz",
-      "integrity": "sha512-WVA/eh3fzjx0apOzkKot4YRRUsGkHj50zFQWrAOMgivGaj1YVrvhf+m3hpglj5fn/BkLiFDl8RT0wAE8z9X+gQ=="
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.1.13.tgz",
+      "integrity": "sha512-mBm24Q9GjkAsxMAzqQ86U1078+yTEpr0+syMEruUtJ0HUH6Fzn3J+6xTLb+BVcGb9RkCkFaV9T5mcn6ZM0f++g=="
     },
     "@angular/forms": {
-      "version": "9.1.12",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.1.12.tgz",
-      "integrity": "sha512-LhjnZlC4WEsEsAJfOZLte+Lks3WBAFVeRv2lzoQNFVr/IMzBNDVfjEaaSqKF1cei3cjY39Df2nYDMJM7HfqbJA=="
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.1.13.tgz",
+      "integrity": "sha512-soGVZmPq2bzkxvtTyeJB8p3ejzm4xxt+43hJw6Ag8NxpwUFPVa30oJge3JV+u8Y4yBtl5SbOZ4bBX3EkMxLcGQ=="
     },
     "@angular/language-service": {
-      "version": "9.1.12",
-      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-9.1.12.tgz",
-      "integrity": "sha512-0qfIAn5fP5lD+JW6il5HBHGS89rv+idRv5aooDkHqBhuBo4V2VuB1wNy5eP49GZbHKMW1xPAzv1MqeMdk+zwQA==",
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-9.1.13.tgz",
+      "integrity": "sha512-fecbDGUUGLsdoVgKqQMmqLwy7Q4MjHxrUdk4Uz3kI3wLPf+C0KV8n/hW+RA4mFVTJrpuwnvQa1WJWXz5U5PVjw==",
       "dev": true
     },
     "@angular/localize": {
-      "version": "9.1.12",
-      "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-9.1.12.tgz",
-      "integrity": "sha512-31OalfES+dLrxN0VXCxxtT5dWoOSlQ40KYmzMS8X+mQ20gy9eFiZK4qf3DEq3JPqRltBMdEDnwR38uGIMAu2gQ==",
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-9.1.13.tgz",
+      "integrity": "sha512-jmUQXVgkU2djlRtSE1SQg6ktlKnACdm4p+4YYm/D48gkl+HGwrdZtczlLTWIVeTP7o8tx6+6fQkRSRD64Xvbkg==",
       "requires": {
         "@babel/core": "7.8.3",
         "glob": "7.1.2",
-        "yargs": "15.3.0"
+        "yargs": "^16.1.1"
       },
       "dependencies": {
         "@babel/core": {
@@ -575,21 +544,21 @@
           }
         },
         "@babel/generator": {
-          "version": "7.11.6",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.6.tgz",
-          "integrity": "sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.11.tgz",
+          "integrity": "sha512-Ggg6WPOJtSi8yYQvLVjG8F/TlpWDlKx0OpS4Kt+xMQPs5OaGYWy+v1A+1TvxI6sAMGZpKWWoAQ1DaeQbImlItA==",
           "requires": {
-            "@babel/types": "^7.11.5",
+            "@babel/types": "^7.12.11",
             "jsesc": "^2.5.1",
             "source-map": "^0.5.0"
           },
           "dependencies": {
             "@babel/types": {
-              "version": "7.11.5",
-              "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
-              "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
+              "version": "7.12.12",
+              "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+              "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
               "requires": {
-                "@babel/helper-validator-identifier": "^7.10.4",
+                "@babel/helper-validator-identifier": "^7.12.11",
                 "lodash": "^4.17.19",
                 "to-fast-properties": "^2.0.0"
               }
@@ -602,22 +571,21 @@
           "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
         },
         "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "requires": {
-            "@types/color-name": "^1.1.1",
             "color-convert": "^2.0.1"
           }
         },
         "cliui": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
-          "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+          "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
           "requires": {
             "string-width": "^4.2.0",
             "strip-ansi": "^6.0.0",
-            "wrap-ansi": "^6.2.0"
+            "wrap-ansi": "^7.0.0"
           }
         },
         "color-convert": {
@@ -633,15 +601,6 @@
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
-        "find-up": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-          "requires": {
-            "locate-path": "^5.0.0",
-            "path-exists": "^4.0.0"
-          }
-        },
         "glob": {
           "version": "7.1.2",
           "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
@@ -660,27 +619,6 @@
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
           "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
         },
-        "locate-path": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-          "requires": {
-            "p-locate": "^4.1.0"
-          }
-        },
-        "p-locate": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-          "requires": {
-            "p-limit": "^2.2.0"
-          }
-        },
-        "path-exists": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
-        },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -710,58 +648,55 @@
           }
         },
         "wrap-ansi": {
-          "version": "6.2.0",
-          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
-          "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
           "requires": {
             "ansi-styles": "^4.0.0",
             "string-width": "^4.1.0",
             "strip-ansi": "^6.0.0"
           }
         },
+        "y18n": {
+          "version": "5.0.5",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.5.tgz",
+          "integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg=="
+        },
         "yargs": {
-          "version": "15.3.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.3.0.tgz",
-          "integrity": "sha512-g/QCnmjgOl1YJjGsnUg2SatC7NUYEiLXJqxNOQU9qSpjzGtGXda9b+OKccr1kLTy8BN9yqEyqfq5lxlwdc13TA==",
+          "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
           "requires": {
-            "cliui": "^6.0.0",
-            "decamelize": "^1.2.0",
-            "find-up": "^4.1.0",
-            "get-caller-file": "^2.0.1",
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
             "require-directory": "^2.1.1",
-            "require-main-filename": "^2.0.0",
-            "set-blocking": "^2.0.0",
             "string-width": "^4.2.0",
-            "which-module": "^2.0.0",
-            "y18n": "^4.0.0",
-            "yargs-parser": "^18.1.0"
+            "y18n": "^5.0.5",
+            "yargs-parser": "^20.2.2"
           }
         },
         "yargs-parser": {
-          "version": "18.1.3",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-          "requires": {
-            "camelcase": "^5.0.0",
-            "decamelize": "^1.2.0"
-          }
+          "version": "20.2.4",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz",
+          "integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA=="
         }
       }
     },
     "@angular/platform-browser": {
-      "version": "9.1.12",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-9.1.12.tgz",
-      "integrity": "sha512-rPa/hJcLfdId6bYB0b6pFUo3QIgjZlvUlmtKMGdrLNLYR8XQxPa2Y/UdN/5YeZ12htGw6GXrX9U8U7nTbUSpkw=="
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-9.1.13.tgz",
+      "integrity": "sha512-F3iTz1zNbtrs7KFKUxbj8qmTsd/fiuTNcpBExjE5TtatRiE6J8vNvN1+Z/1FgPe0UXBSdTzSwZ8/RxWKw20RMw=="
     },
     "@angular/platform-browser-dynamic": {
-      "version": "9.1.12",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-9.1.12.tgz",
-      "integrity": "sha512-NmwUZaQeMnA6f+vP9Fp9P+qjL72H8dKlxLS76ujlKHVf75pP5oahWS8wfl7KXel1tKW3FQWMMffmKf5/NHRiSw=="
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-9.1.13.tgz",
+      "integrity": "sha512-jCeHyAZ4Nap1/FOqAlKEg9UxQaSkHrxnQr6hYtWwC4ZDVUn3zLWQf6J+mbeYNOXN5yQxEiIqqhORYeOCLLqf1w=="
     },
     "@angular/router": {
-      "version": "9.1.12",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-9.1.12.tgz",
-      "integrity": "sha512-+qCaXa9y0nsRhzjAYBqmGoQ2YkrdXgftZwuFDf6t4qEi30EXa0oS97KrlFq0M5GKdLIDGrbUm9PcdHSTOI+ZhA=="
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-9.1.13.tgz",
+      "integrity": "sha512-AvqjCsxdzBqOGsPuyCtHb2ckfNhCEGrDfkFmZ5jT9MwohCVbChCKtwEH4cwlph6Tpxvu1a4zSryxOf5q8OSsJQ=="
     },
     "@babel/code-frame": {
       "version": "7.8.3",
@@ -772,23 +707,10 @@
       }
     },
     "@babel/compat-data": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.11.0.tgz",
-      "integrity": "sha512-TPSvJfv73ng0pfnEOh17bYMPQbI95+nGWc71Ss4vZdRBHTDqmM9Z8ZV4rYz8Ks7sfzc95n30k6ODIq5UGnXcYQ==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.12.0",
-        "invariant": "^2.2.4",
-        "semver": "^5.5.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-          "dev": true
-        }
-      }
+      "version": "7.12.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.12.7.tgz",
+      "integrity": "sha512-YaxPMGs/XIWtYqrdEOZOCPsVWfEoriXopnsz3/i7apYPXQ3698UFhS6dVT1KN5qOsWmVgw/FOrmQgpRaZayGsw==",
+      "dev": true
     },
     "@babel/core": {
       "version": "7.9.0",
@@ -815,65 +737,65 @@
       },
       "dependencies": {
         "@babel/generator": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.0.tgz",
-          "integrity": "sha512-fEm3Uzw7Mc9Xi//qU20cBKatTfs2aOtKqmvy/Vm7RkJEGFQ4xc9myCfbXxqK//ZS8MR/ciOHw6meGASJuKmDfQ==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.11.tgz",
+          "integrity": "sha512-Ggg6WPOJtSi8yYQvLVjG8F/TlpWDlKx0OpS4Kt+xMQPs5OaGYWy+v1A+1TvxI6sAMGZpKWWoAQ1DaeQbImlItA==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.11.0",
+            "@babel/types": "^7.12.11",
             "jsesc": "^2.5.1",
             "source-map": "^0.5.0"
           }
         },
         "@babel/helper-function-name": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
-          "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.11.tgz",
+          "integrity": "sha512-AtQKjtYNolKNi6nNNVLQ27CP6D9oFR6bq/HPYSizlzbp7uC1M59XJe8L+0uXjbIaZaUJF99ruHqVGiKXU/7ybA==",
           "dev": true,
           "requires": {
-            "@babel/helper-get-function-arity": "^7.10.4",
-            "@babel/template": "^7.10.4",
-            "@babel/types": "^7.10.4"
+            "@babel/helper-get-function-arity": "^7.12.10",
+            "@babel/template": "^7.12.7",
+            "@babel/types": "^7.12.11"
           },
           "dependencies": {
             "@babel/code-frame": {
-              "version": "7.10.4",
-              "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-              "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+              "version": "7.12.11",
+              "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+              "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
               "dev": true,
               "requires": {
                 "@babel/highlight": "^7.10.4"
               }
             },
             "@babel/template": {
-              "version": "7.10.4",
-              "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
-              "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
+              "version": "7.12.7",
+              "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.7.tgz",
+              "integrity": "sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow==",
               "dev": true,
               "requires": {
                 "@babel/code-frame": "^7.10.4",
-                "@babel/parser": "^7.10.4",
-                "@babel/types": "^7.10.4"
+                "@babel/parser": "^7.12.7",
+                "@babel/types": "^7.12.7"
               }
             }
           }
         },
         "@babel/helper-get-function-arity": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
-          "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
+          "version": "7.12.10",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.10.tgz",
+          "integrity": "sha512-mm0n5BPjR06wh9mPQaDdXWDoll/j5UpCAPl1x8fS71GHm7HA6Ua2V4ylG1Ju8lvcTOietbPNNPaSilKj+pj+Ag==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.10.4"
+            "@babel/types": "^7.12.10"
           }
         },
         "@babel/helper-split-export-declaration": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz",
-          "integrity": "sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.11.tgz",
+          "integrity": "sha512-LsIVN8j48gHgwzfocYUSkO/hjYAOJqlpJEc7tGXcIm4cubjVUf8LGW6eWRyxEu7gA25q02p0rQUWoCI33HNS5g==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.11.0"
+            "@babel/types": "^7.12.11"
           }
         },
         "@babel/highlight": {
@@ -888,32 +810,32 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.3.tgz",
-          "integrity": "sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
+          "integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==",
           "dev": true
         },
         "@babel/traverse": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.0.tgz",
-          "integrity": "sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.12.tgz",
+          "integrity": "sha512-s88i0X0lPy45RrLM8b9mz8RPH5FqO9G9p7ti59cToE44xFm1Q+Pjh5Gq4SXBbtb88X7Uy7pexeqRIQDDMNkL0w==",
           "dev": true,
           "requires": {
-            "@babel/code-frame": "^7.10.4",
-            "@babel/generator": "^7.11.0",
-            "@babel/helper-function-name": "^7.10.4",
-            "@babel/helper-split-export-declaration": "^7.11.0",
-            "@babel/parser": "^7.11.0",
-            "@babel/types": "^7.11.0",
+            "@babel/code-frame": "^7.12.11",
+            "@babel/generator": "^7.12.11",
+            "@babel/helper-function-name": "^7.12.11",
+            "@babel/helper-split-export-declaration": "^7.12.11",
+            "@babel/parser": "^7.12.11",
+            "@babel/types": "^7.12.12",
             "debug": "^4.1.0",
             "globals": "^11.1.0",
             "lodash": "^4.17.19"
           },
           "dependencies": {
             "@babel/code-frame": {
-              "version": "7.10.4",
-              "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-              "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+              "version": "7.12.11",
+              "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+              "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
               "dev": true,
               "requires": {
                 "@babel/highlight": "^7.10.4"
@@ -922,12 +844,12 @@
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -967,21 +889,21 @@
       }
     },
     "@babel/helper-annotate-as-pure": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz",
-      "integrity": "sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==",
+      "version": "7.12.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.10.tgz",
+      "integrity": "sha512-XplmVbC1n+KY6jL8/fgLVXXUauDIB+lD5+GsQEh6F6GBF1dq1qy4DP4yXWzDKcoqXB3X58t61e85Fitoww4JVQ==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.10.4"
+        "@babel/types": "^7.12.10"
       },
       "dependencies": {
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -999,12 +921,12 @@
       },
       "dependencies": {
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -1012,15 +934,14 @@
       }
     },
     "@babel/helper-compilation-targets": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.4.tgz",
-      "integrity": "sha512-a3rYhlsGV0UHNDvrtOXBg8/OpfV0OKTkxKPzIplS1zpx7CygDcWWxckxZeDd3gzPzC4kUT0A4nVFDK0wGMh4MQ==",
+      "version": "7.12.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.12.5.tgz",
+      "integrity": "sha512-+qH6NrscMolUlzOYngSBMIOQpKUGPPsc61Bu5W10mg84LxZ7cmvnBHzARKbDoFxVvqqAbj6Tg6N7bSrWSPXMyw==",
       "dev": true,
       "requires": {
-        "@babel/compat-data": "^7.10.4",
-        "browserslist": "^4.12.0",
-        "invariant": "^2.2.4",
-        "levenary": "^1.1.1",
+        "@babel/compat-data": "^7.12.5",
+        "@babel/helper-validator-option": "^7.12.1",
+        "browserslist": "^4.14.5",
         "semver": "^5.5.0"
       },
       "dependencies": {
@@ -1033,14 +954,29 @@
       }
     },
     "@babel/helper-create-regexp-features-plugin": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.10.4.tgz",
-      "integrity": "sha512-2/hu58IEPKeoLF45DBwx3XFqsbCXmkdAay4spVr2x0jYgRxrSNp+ePwvSsy9g6YSaNDcKIQVPXk1Ov8S2edk2g==",
+      "version": "7.12.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.7.tgz",
+      "integrity": "sha512-idnutvQPdpbduutvi3JVfEgcVIHooQnhvhx0Nk9isOINOIGYkZea1Pk2JlJRiUnMefrlvr0vkByATBY/mB4vjQ==",
       "dev": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.10.4",
-        "@babel/helper-regex": "^7.10.4",
-        "regexpu-core": "^4.7.0"
+        "regexpu-core": "^4.7.1"
+      },
+      "dependencies": {
+        "regexpu-core": {
+          "version": "4.7.1",
+          "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz",
+          "integrity": "sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==",
+          "dev": true,
+          "requires": {
+            "regenerate": "^1.4.0",
+            "regenerate-unicode-properties": "^8.2.0",
+            "regjsgen": "^0.5.1",
+            "regjsparser": "^0.6.4",
+            "unicode-match-property-ecmascript": "^1.0.4",
+            "unicode-match-property-value-ecmascript": "^1.2.0"
+          }
+        }
       }
     },
     "@babel/helper-define-map": {
@@ -1055,32 +991,32 @@
       },
       "dependencies": {
         "@babel/code-frame": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+          "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
           "dev": true,
           "requires": {
             "@babel/highlight": "^7.10.4"
           }
         },
         "@babel/helper-function-name": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
-          "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.11.tgz",
+          "integrity": "sha512-AtQKjtYNolKNi6nNNVLQ27CP6D9oFR6bq/HPYSizlzbp7uC1M59XJe8L+0uXjbIaZaUJF99ruHqVGiKXU/7ybA==",
           "dev": true,
           "requires": {
-            "@babel/helper-get-function-arity": "^7.10.4",
-            "@babel/template": "^7.10.4",
-            "@babel/types": "^7.10.4"
+            "@babel/helper-get-function-arity": "^7.12.10",
+            "@babel/template": "^7.12.7",
+            "@babel/types": "^7.12.11"
           }
         },
         "@babel/helper-get-function-arity": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
-          "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
+          "version": "7.12.10",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.10.tgz",
+          "integrity": "sha512-mm0n5BPjR06wh9mPQaDdXWDoll/j5UpCAPl1x8fS71GHm7HA6Ua2V4ylG1Ju8lvcTOietbPNNPaSilKj+pj+Ag==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.10.4"
+            "@babel/types": "^7.12.10"
           }
         },
         "@babel/highlight": {
@@ -1095,29 +1031,29 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.3.tgz",
-          "integrity": "sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
+          "integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==",
           "dev": true
         },
         "@babel/template": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
-          "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
+          "version": "7.12.7",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.7.tgz",
+          "integrity": "sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.10.4",
-            "@babel/parser": "^7.10.4",
-            "@babel/types": "^7.10.4"
+            "@babel/parser": "^7.12.7",
+            "@babel/types": "^7.12.7"
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -1125,125 +1061,24 @@
       }
     },
     "@babel/helper-explode-assignable-expression": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.10.4.tgz",
-      "integrity": "sha512-4K71RyRQNPRrR85sr5QY4X3VwG4wtVoXZB9+L3r1Gp38DhELyHCtovqydRi7c1Ovb17eRGiQ/FD5s8JdU0Uy5A==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.12.1.tgz",
+      "integrity": "sha512-dmUwH8XmlrUpVqgtZ737tK88v07l840z9j3OEhCLwKTkjlvKpfqXVIZ0wpK3aeOxspwGrf/5AP5qLx4rO3w5rA==",
       "dev": true,
       "requires": {
-        "@babel/traverse": "^7.10.4",
-        "@babel/types": "^7.10.4"
+        "@babel/types": "^7.12.1"
       },
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.4"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.0.tgz",
-          "integrity": "sha512-fEm3Uzw7Mc9Xi//qU20cBKatTfs2aOtKqmvy/Vm7RkJEGFQ4xc9myCfbXxqK//ZS8MR/ciOHw6meGASJuKmDfQ==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.11.0",
-            "jsesc": "^2.5.1",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
-          "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.10.4",
-            "@babel/template": "^7.10.4",
-            "@babel/types": "^7.10.4"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
-          "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.4"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz",
-          "integrity": "sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.11.0"
-          }
-        },
-        "@babel/highlight": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
-          "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.11.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.3.tgz",
-          "integrity": "sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
-          "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.4",
-            "@babel/parser": "^7.10.4",
-            "@babel/types": "^7.10.4"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.0.tgz",
-          "integrity": "sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.4",
-            "@babel/generator": "^7.11.0",
-            "@babel/helper-function-name": "^7.10.4",
-            "@babel/helper-split-export-declaration": "^7.11.0",
-            "@babel/parser": "^7.11.0",
-            "@babel/types": "^7.11.0",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0",
-            "lodash": "^4.17.19"
-          }
-        },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
         }
       }
     },
@@ -1275,12 +1110,12 @@
       },
       "dependencies": {
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -1288,21 +1123,21 @@
       }
     },
     "@babel/helper-member-expression-to-functions": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.11.0.tgz",
-      "integrity": "sha512-JbFlKHFntRV5qKw3YC0CvQnDZ4XMwgzzBbld7Ly4Mj4cbFy3KywcR8NtNctRToMWJOVvLINJv525Gd6wwVEx/Q==",
+      "version": "7.12.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.7.tgz",
+      "integrity": "sha512-DCsuPyeWxeHgh1Dus7APn7iza42i/qXqiFPWyBDdOFtvS581JQePsc1F/nD+fHrcswhLlRc2UpYS1NwERxZhHw==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.11.0"
+        "@babel/types": "^7.12.7"
       },
       "dependencies": {
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -1310,21 +1145,21 @@
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz",
-      "integrity": "sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==",
+      "version": "7.12.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz",
+      "integrity": "sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.10.4"
+        "@babel/types": "^7.12.5"
       },
       "dependencies": {
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -1332,36 +1167,69 @@
       }
     },
     "@babel/helper-module-transforms": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.11.0.tgz",
-      "integrity": "sha512-02EVu8COMuTRO1TAzdMtpBPbe6aQ1w/8fePD2YgQmxZU4gpNWaL9gK3Jp7dxlkUlUCJOTaSeA+Hrm1BRQwqIhg==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.12.1.tgz",
+      "integrity": "sha512-QQzehgFAZ2bbISiCpmVGfiGux8YVFXQ0abBic2Envhej22DVXV9nCFaS5hIQbkyo1AdGb+gNME2TSh3hYJVV/w==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-imports": "^7.10.4",
-        "@babel/helper-replace-supers": "^7.10.4",
-        "@babel/helper-simple-access": "^7.10.4",
+        "@babel/helper-module-imports": "^7.12.1",
+        "@babel/helper-replace-supers": "^7.12.1",
+        "@babel/helper-simple-access": "^7.12.1",
         "@babel/helper-split-export-declaration": "^7.11.0",
+        "@babel/helper-validator-identifier": "^7.10.4",
         "@babel/template": "^7.10.4",
-        "@babel/types": "^7.11.0",
+        "@babel/traverse": "^7.12.1",
+        "@babel/types": "^7.12.1",
         "lodash": "^4.17.19"
       },
       "dependencies": {
         "@babel/code-frame": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+          "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
           "dev": true,
           "requires": {
             "@babel/highlight": "^7.10.4"
           }
         },
+        "@babel/generator": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.11.tgz",
+          "integrity": "sha512-Ggg6WPOJtSi8yYQvLVjG8F/TlpWDlKx0OpS4Kt+xMQPs5OaGYWy+v1A+1TvxI6sAMGZpKWWoAQ1DaeQbImlItA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.12.11",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.11.tgz",
+          "integrity": "sha512-AtQKjtYNolKNi6nNNVLQ27CP6D9oFR6bq/HPYSizlzbp7uC1M59XJe8L+0uXjbIaZaUJF99ruHqVGiKXU/7ybA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.10",
+            "@babel/template": "^7.12.7",
+            "@babel/types": "^7.12.11"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.12.10",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.10.tgz",
+          "integrity": "sha512-mm0n5BPjR06wh9mPQaDdXWDoll/j5UpCAPl1x8fS71GHm7HA6Ua2V4ylG1Ju8lvcTOietbPNNPaSilKj+pj+Ag==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.12.10"
+          }
+        },
         "@babel/helper-split-export-declaration": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz",
-          "integrity": "sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.11.tgz",
+          "integrity": "sha512-LsIVN8j48gHgwzfocYUSkO/hjYAOJqlpJEc7tGXcIm4cubjVUf8LGW6eWRyxEu7gA25q02p0rQUWoCI33HNS5g==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.11.0"
+            "@babel/types": "^7.12.11"
           }
         },
         "@babel/highlight": {
@@ -1376,51 +1244,74 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.3.tgz",
-          "integrity": "sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
+          "integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==",
           "dev": true
         },
         "@babel/template": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
-          "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
+          "version": "7.12.7",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.7.tgz",
+          "integrity": "sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.10.4",
-            "@babel/parser": "^7.10.4",
-            "@babel/types": "^7.10.4"
+            "@babel/parser": "^7.12.7",
+            "@babel/types": "^7.12.7"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.12.tgz",
+          "integrity": "sha512-s88i0X0lPy45RrLM8b9mz8RPH5FqO9G9p7ti59cToE44xFm1Q+Pjh5Gq4SXBbtb88X7Uy7pexeqRIQDDMNkL0w==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.12.11",
+            "@babel/generator": "^7.12.11",
+            "@babel/helper-function-name": "^7.12.11",
+            "@babel/helper-split-export-declaration": "^7.12.11",
+            "@babel/parser": "^7.12.11",
+            "@babel/types": "^7.12.12",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.19"
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
         }
       }
     },
     "@babel/helper-optimise-call-expression": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz",
-      "integrity": "sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==",
+      "version": "7.12.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.10.tgz",
+      "integrity": "sha512-4tpbU0SrSTjjt65UMWSrUOPZTsgvPgGG4S8QSTNHacKzpS51IVWGDj0yCwyeZND/i+LSN2g/O63jEXEWm49sYQ==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.10.4"
+        "@babel/types": "^7.12.10"
       },
       "dependencies": {
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -1433,200 +1324,89 @@
       "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
       "dev": true
     },
-    "@babel/helper-regex": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-regex/-/helper-regex-7.10.5.tgz",
-      "integrity": "sha512-68kdUAzDrljqBrio7DYAEgCoJHxppJOERHOgOrDN7WjOzP0ZQ1LsSDRXcemzVZaLvjaJsJEESb6qt+znNuENDg==",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.17.19"
-      }
-    },
     "@babel/helper-remap-async-to-generator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.10.4.tgz",
-      "integrity": "sha512-86Lsr6NNw3qTNl+TBcF1oRZMaVzJtbWTyTko+CQL/tvNvcGYEFKbLXDPxtW0HKk3McNOk4KzY55itGWCAGK5tg==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.12.1.tgz",
+      "integrity": "sha512-9d0KQCRM8clMPcDwo8SevNs+/9a8yWVVmaE80FGJcEP8N1qToREmWEGnBn8BUlJhYRFz6fqxeRL1sl5Ogsed7A==",
       "dev": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.10.4",
         "@babel/helper-wrap-function": "^7.10.4",
-        "@babel/template": "^7.10.4",
-        "@babel/traverse": "^7.10.4",
-        "@babel/types": "^7.10.4"
+        "@babel/types": "^7.12.1"
       },
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.4"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.0.tgz",
-          "integrity": "sha512-fEm3Uzw7Mc9Xi//qU20cBKatTfs2aOtKqmvy/Vm7RkJEGFQ4xc9myCfbXxqK//ZS8MR/ciOHw6meGASJuKmDfQ==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.11.0",
-            "jsesc": "^2.5.1",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
-          "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.10.4",
-            "@babel/template": "^7.10.4",
-            "@babel/types": "^7.10.4"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
-          "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.4"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz",
-          "integrity": "sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.11.0"
-          }
-        },
-        "@babel/highlight": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
-          "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.11.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.3.tgz",
-          "integrity": "sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
-          "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.4",
-            "@babel/parser": "^7.10.4",
-            "@babel/types": "^7.10.4"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.0.tgz",
-          "integrity": "sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.4",
-            "@babel/generator": "^7.11.0",
-            "@babel/helper-function-name": "^7.10.4",
-            "@babel/helper-split-export-declaration": "^7.11.0",
-            "@babel/parser": "^7.11.0",
-            "@babel/types": "^7.11.0",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0",
-            "lodash": "^4.17.19"
-          }
-        },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
         }
       }
     },
     "@babel/helper-replace-supers": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz",
-      "integrity": "sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==",
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.11.tgz",
+      "integrity": "sha512-q+w1cqmhL7R0FNzth/PLLp2N+scXEK/L2AHbXUyydxp828F4FEa5WcVoqui9vFRiHDQErj9Zof8azP32uGVTRA==",
       "dev": true,
       "requires": {
-        "@babel/helper-member-expression-to-functions": "^7.10.4",
-        "@babel/helper-optimise-call-expression": "^7.10.4",
-        "@babel/traverse": "^7.10.4",
-        "@babel/types": "^7.10.4"
+        "@babel/helper-member-expression-to-functions": "^7.12.7",
+        "@babel/helper-optimise-call-expression": "^7.12.10",
+        "@babel/traverse": "^7.12.10",
+        "@babel/types": "^7.12.11"
       },
       "dependencies": {
         "@babel/code-frame": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+          "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
           "dev": true,
           "requires": {
             "@babel/highlight": "^7.10.4"
           }
         },
         "@babel/generator": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.0.tgz",
-          "integrity": "sha512-fEm3Uzw7Mc9Xi//qU20cBKatTfs2aOtKqmvy/Vm7RkJEGFQ4xc9myCfbXxqK//ZS8MR/ciOHw6meGASJuKmDfQ==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.11.tgz",
+          "integrity": "sha512-Ggg6WPOJtSi8yYQvLVjG8F/TlpWDlKx0OpS4Kt+xMQPs5OaGYWy+v1A+1TvxI6sAMGZpKWWoAQ1DaeQbImlItA==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.11.0",
+            "@babel/types": "^7.12.11",
             "jsesc": "^2.5.1",
             "source-map": "^0.5.0"
           }
         },
         "@babel/helper-function-name": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
-          "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.11.tgz",
+          "integrity": "sha512-AtQKjtYNolKNi6nNNVLQ27CP6D9oFR6bq/HPYSizlzbp7uC1M59XJe8L+0uXjbIaZaUJF99ruHqVGiKXU/7ybA==",
           "dev": true,
           "requires": {
-            "@babel/helper-get-function-arity": "^7.10.4",
-            "@babel/template": "^7.10.4",
-            "@babel/types": "^7.10.4"
+            "@babel/helper-get-function-arity": "^7.12.10",
+            "@babel/template": "^7.12.7",
+            "@babel/types": "^7.12.11"
           }
         },
         "@babel/helper-get-function-arity": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
-          "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
+          "version": "7.12.10",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.10.tgz",
+          "integrity": "sha512-mm0n5BPjR06wh9mPQaDdXWDoll/j5UpCAPl1x8fS71GHm7HA6Ua2V4ylG1Ju8lvcTOietbPNNPaSilKj+pj+Ag==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.10.4"
+            "@babel/types": "^7.12.10"
           }
         },
         "@babel/helper-split-export-declaration": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz",
-          "integrity": "sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.11.tgz",
+          "integrity": "sha512-LsIVN8j48gHgwzfocYUSkO/hjYAOJqlpJEc7tGXcIm4cubjVUf8LGW6eWRyxEu7gA25q02p0rQUWoCI33HNS5g==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.11.0"
+            "@babel/types": "^7.12.11"
           }
         },
         "@babel/highlight": {
@@ -1641,46 +1421,46 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.3.tgz",
-          "integrity": "sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
+          "integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==",
           "dev": true
         },
         "@babel/template": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
-          "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
+          "version": "7.12.7",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.7.tgz",
+          "integrity": "sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.10.4",
-            "@babel/parser": "^7.10.4",
-            "@babel/types": "^7.10.4"
+            "@babel/parser": "^7.12.7",
+            "@babel/types": "^7.12.7"
           }
         },
         "@babel/traverse": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.0.tgz",
-          "integrity": "sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.12.tgz",
+          "integrity": "sha512-s88i0X0lPy45RrLM8b9mz8RPH5FqO9G9p7ti59cToE44xFm1Q+Pjh5Gq4SXBbtb88X7Uy7pexeqRIQDDMNkL0w==",
           "dev": true,
           "requires": {
-            "@babel/code-frame": "^7.10.4",
-            "@babel/generator": "^7.11.0",
-            "@babel/helper-function-name": "^7.10.4",
-            "@babel/helper-split-export-declaration": "^7.11.0",
-            "@babel/parser": "^7.11.0",
-            "@babel/types": "^7.11.0",
+            "@babel/code-frame": "^7.12.11",
+            "@babel/generator": "^7.12.11",
+            "@babel/helper-function-name": "^7.12.11",
+            "@babel/helper-split-export-declaration": "^7.12.11",
+            "@babel/parser": "^7.12.11",
+            "@babel/types": "^7.12.12",
             "debug": "^4.1.0",
             "globals": "^11.1.0",
             "lodash": "^4.17.19"
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -1694,59 +1474,21 @@
       }
     },
     "@babel/helper-simple-access": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz",
-      "integrity": "sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.12.1.tgz",
+      "integrity": "sha512-OxBp7pMrjVewSSC8fXDFrHrBcJATOOFssZwv16F3/6Xtc138GHybBfPbm9kfiqQHKhYQrlamWILwlDCeyMFEaA==",
       "dev": true,
       "requires": {
-        "@babel/template": "^7.10.4",
-        "@babel/types": "^7.10.4"
+        "@babel/types": "^7.12.1"
       },
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.4"
-          }
-        },
-        "@babel/highlight": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
-          "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.11.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.3.tgz",
-          "integrity": "sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
-          "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.4",
-            "@babel/parser": "^7.10.4",
-            "@babel/types": "^7.10.4"
-          }
-        },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -1754,21 +1496,21 @@
       }
     },
     "@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.11.0.tgz",
-      "integrity": "sha512-0XIdiQln4Elglgjbwo9wuJpL/K7AGCY26kmEt0+pRP0TAj4jjyNq1MjoRvikrTVqKcx4Gysxt4cXvVFXP/JO2Q==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.12.1.tgz",
+      "integrity": "sha512-Mf5AUuhG1/OCChOJ/HcADmvcHM42WJockombn8ATJG3OnyiSxBK/Mm5x78BQWvmtXZKHgbjdGL2kin/HOLlZGA==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.11.0"
+        "@babel/types": "^7.12.1"
       },
       "dependencies": {
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -1784,14 +1526,20 @@
       }
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
-      "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw=="
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+      "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+    },
+    "@babel/helper-validator-option": {
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.11.tgz",
+      "integrity": "sha512-TBFCyj939mFSdeX7U7DDj32WtzYY7fDcalgq8v3fBZMNOJQNn7nOYzMaUCiPxPYfCup69mtIpqlKgMZLvQ8Xhw==",
+      "dev": true
     },
     "@babel/helper-wrap-function": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.10.4.tgz",
-      "integrity": "sha512-6py45WvEF0MhiLrdxtRjKjufwLL1/ob2qDJgg5JgNdojBAZSAKnAjkyOCNug6n+OBl4VW76XjvgSFTdaMcW0Ug==",
+      "version": "7.12.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.12.3.tgz",
+      "integrity": "sha512-Cvb8IuJDln3rs6tzjW3Y8UeelAOdnpB8xtQ4sme2MSZ9wOxrbThporC0y/EtE16VAtoyEfLM404Xr1e0OOp+ow==",
       "dev": true,
       "requires": {
         "@babel/helper-function-name": "^7.10.4",
@@ -1801,52 +1549,52 @@
       },
       "dependencies": {
         "@babel/code-frame": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+          "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
           "dev": true,
           "requires": {
             "@babel/highlight": "^7.10.4"
           }
         },
         "@babel/generator": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.0.tgz",
-          "integrity": "sha512-fEm3Uzw7Mc9Xi//qU20cBKatTfs2aOtKqmvy/Vm7RkJEGFQ4xc9myCfbXxqK//ZS8MR/ciOHw6meGASJuKmDfQ==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.11.tgz",
+          "integrity": "sha512-Ggg6WPOJtSi8yYQvLVjG8F/TlpWDlKx0OpS4Kt+xMQPs5OaGYWy+v1A+1TvxI6sAMGZpKWWoAQ1DaeQbImlItA==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.11.0",
+            "@babel/types": "^7.12.11",
             "jsesc": "^2.5.1",
             "source-map": "^0.5.0"
           }
         },
         "@babel/helper-function-name": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
-          "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.11.tgz",
+          "integrity": "sha512-AtQKjtYNolKNi6nNNVLQ27CP6D9oFR6bq/HPYSizlzbp7uC1M59XJe8L+0uXjbIaZaUJF99ruHqVGiKXU/7ybA==",
           "dev": true,
           "requires": {
-            "@babel/helper-get-function-arity": "^7.10.4",
-            "@babel/template": "^7.10.4",
-            "@babel/types": "^7.10.4"
+            "@babel/helper-get-function-arity": "^7.12.10",
+            "@babel/template": "^7.12.7",
+            "@babel/types": "^7.12.11"
           }
         },
         "@babel/helper-get-function-arity": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
-          "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
+          "version": "7.12.10",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.10.tgz",
+          "integrity": "sha512-mm0n5BPjR06wh9mPQaDdXWDoll/j5UpCAPl1x8fS71GHm7HA6Ua2V4ylG1Ju8lvcTOietbPNNPaSilKj+pj+Ag==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.10.4"
+            "@babel/types": "^7.12.10"
           }
         },
         "@babel/helper-split-export-declaration": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz",
-          "integrity": "sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.11.tgz",
+          "integrity": "sha512-LsIVN8j48gHgwzfocYUSkO/hjYAOJqlpJEc7tGXcIm4cubjVUf8LGW6eWRyxEu7gA25q02p0rQUWoCI33HNS5g==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.11.0"
+            "@babel/types": "^7.12.11"
           }
         },
         "@babel/highlight": {
@@ -1861,46 +1609,46 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.3.tgz",
-          "integrity": "sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
+          "integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==",
           "dev": true
         },
         "@babel/template": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
-          "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
+          "version": "7.12.7",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.7.tgz",
+          "integrity": "sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.10.4",
-            "@babel/parser": "^7.10.4",
-            "@babel/types": "^7.10.4"
+            "@babel/parser": "^7.12.7",
+            "@babel/types": "^7.12.7"
           }
         },
         "@babel/traverse": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.0.tgz",
-          "integrity": "sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.12.tgz",
+          "integrity": "sha512-s88i0X0lPy45RrLM8b9mz8RPH5FqO9G9p7ti59cToE44xFm1Q+Pjh5Gq4SXBbtb88X7Uy7pexeqRIQDDMNkL0w==",
           "dev": true,
           "requires": {
-            "@babel/code-frame": "^7.10.4",
-            "@babel/generator": "^7.11.0",
-            "@babel/helper-function-name": "^7.10.4",
-            "@babel/helper-split-export-declaration": "^7.11.0",
-            "@babel/parser": "^7.11.0",
-            "@babel/types": "^7.11.0",
+            "@babel/code-frame": "^7.12.11",
+            "@babel/generator": "^7.12.11",
+            "@babel/helper-function-name": "^7.12.11",
+            "@babel/helper-split-export-declaration": "^7.12.11",
+            "@babel/parser": "^7.12.11",
+            "@babel/types": "^7.12.12",
             "debug": "^4.1.0",
             "globals": "^11.1.0",
             "lodash": "^4.17.19"
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -1914,57 +1662,57 @@
       }
     },
     "@babel/helpers": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.10.4.tgz",
-      "integrity": "sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA==",
+      "version": "7.12.5",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.12.5.tgz",
+      "integrity": "sha512-lgKGMQlKqA8meJqKsW6rUnc4MdUk35Ln0ATDqdM1a/UpARODdI4j5Y5lVfUScnSNkJcdCRAaWkspykNoFg9sJA==",
       "requires": {
         "@babel/template": "^7.10.4",
-        "@babel/traverse": "^7.10.4",
-        "@babel/types": "^7.10.4"
+        "@babel/traverse": "^7.12.5",
+        "@babel/types": "^7.12.5"
       },
       "dependencies": {
         "@babel/code-frame": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+          "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
           "requires": {
             "@babel/highlight": "^7.10.4"
           }
         },
         "@babel/generator": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.0.tgz",
-          "integrity": "sha512-fEm3Uzw7Mc9Xi//qU20cBKatTfs2aOtKqmvy/Vm7RkJEGFQ4xc9myCfbXxqK//ZS8MR/ciOHw6meGASJuKmDfQ==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.11.tgz",
+          "integrity": "sha512-Ggg6WPOJtSi8yYQvLVjG8F/TlpWDlKx0OpS4Kt+xMQPs5OaGYWy+v1A+1TvxI6sAMGZpKWWoAQ1DaeQbImlItA==",
           "requires": {
-            "@babel/types": "^7.11.0",
+            "@babel/types": "^7.12.11",
             "jsesc": "^2.5.1",
             "source-map": "^0.5.0"
           }
         },
         "@babel/helper-function-name": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
-          "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.11.tgz",
+          "integrity": "sha512-AtQKjtYNolKNi6nNNVLQ27CP6D9oFR6bq/HPYSizlzbp7uC1M59XJe8L+0uXjbIaZaUJF99ruHqVGiKXU/7ybA==",
           "requires": {
-            "@babel/helper-get-function-arity": "^7.10.4",
-            "@babel/template": "^7.10.4",
-            "@babel/types": "^7.10.4"
+            "@babel/helper-get-function-arity": "^7.12.10",
+            "@babel/template": "^7.12.7",
+            "@babel/types": "^7.12.11"
           }
         },
         "@babel/helper-get-function-arity": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
-          "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
+          "version": "7.12.10",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.10.tgz",
+          "integrity": "sha512-mm0n5BPjR06wh9mPQaDdXWDoll/j5UpCAPl1x8fS71GHm7HA6Ua2V4ylG1Ju8lvcTOietbPNNPaSilKj+pj+Ag==",
           "requires": {
-            "@babel/types": "^7.10.4"
+            "@babel/types": "^7.12.10"
           }
         },
         "@babel/helper-split-export-declaration": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz",
-          "integrity": "sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.11.tgz",
+          "integrity": "sha512-LsIVN8j48gHgwzfocYUSkO/hjYAOJqlpJEc7tGXcIm4cubjVUf8LGW6eWRyxEu7gA25q02p0rQUWoCI33HNS5g==",
           "requires": {
-            "@babel/types": "^7.11.0"
+            "@babel/types": "^7.12.11"
           }
         },
         "@babel/highlight": {
@@ -1978,42 +1726,42 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.3.tgz",
-          "integrity": "sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA=="
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
+          "integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg=="
         },
         "@babel/template": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
-          "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
+          "version": "7.12.7",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.7.tgz",
+          "integrity": "sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow==",
           "requires": {
             "@babel/code-frame": "^7.10.4",
-            "@babel/parser": "^7.10.4",
-            "@babel/types": "^7.10.4"
+            "@babel/parser": "^7.12.7",
+            "@babel/types": "^7.12.7"
           }
         },
         "@babel/traverse": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.0.tgz",
-          "integrity": "sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg==",
-          "requires": {
-            "@babel/code-frame": "^7.10.4",
-            "@babel/generator": "^7.11.0",
-            "@babel/helper-function-name": "^7.10.4",
-            "@babel/helper-split-export-declaration": "^7.11.0",
-            "@babel/parser": "^7.11.0",
-            "@babel/types": "^7.11.0",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.12.tgz",
+          "integrity": "sha512-s88i0X0lPy45RrLM8b9mz8RPH5FqO9G9p7ti59cToE44xFm1Q+Pjh5Gq4SXBbtb88X7Uy7pexeqRIQDDMNkL0w==",
+          "requires": {
+            "@babel/code-frame": "^7.12.11",
+            "@babel/generator": "^7.12.11",
+            "@babel/helper-function-name": "^7.12.11",
+            "@babel/helper-split-export-declaration": "^7.12.11",
+            "@babel/parser": "^7.12.11",
+            "@babel/types": "^7.12.12",
             "debug": "^4.1.0",
             "globals": "^11.1.0",
             "lodash": "^4.17.19"
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -2041,20 +1789,20 @@
       "integrity": "sha512-trGNYSfwq5s0SgM1BMEB8hX3NDmO7EP2wsDGDexiaKMB92BaRpS+qZfpkMqUBhcsOTBwNy9B/jieo4ad/t/z2g=="
     },
     "@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.5.tgz",
-      "integrity": "sha512-cNMCVezQbrRGvXJwm9fu/1sJj9bHdGAgKodZdLqOQIpfoH3raqmRPBM17+lh7CzhiKRRBrGtZL9WcjxSoGYUSg==",
+      "version": "7.12.12",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.12.tgz",
+      "integrity": "sha512-nrz9y0a4xmUrRq51bYkWJIO5SBZyG2ys2qinHsN0zHDHVsUaModrkpyWWWXfGqYQmOL3x9sQIcTNN/pBGpo09A==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/helper-remap-async-to-generator": "^7.10.4",
+        "@babel/helper-remap-async-to-generator": "^7.12.1",
         "@babel/plugin-syntax-async-generators": "^7.8.0"
       }
     },
     "@babel/plugin-proposal-dynamic-import": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.10.4.tgz",
-      "integrity": "sha512-up6oID1LeidOOASNXgv/CFbgBqTuKJ0cJjz6An5tWD+NVBNlp3VNSBxv2ZdU7SYl3NxJC7agAQDApZusV6uFwQ==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.12.1.tgz",
+      "integrity": "sha512-a4rhUSZFuq5W8/OO8H7BL5zspjnc1FLd9hlOxIK/f7qG4a0qsqk8uvF/ywgBA8/OmjsapjpvaEOYItfGG1qIvQ==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4",
@@ -2062,9 +1810,9 @@
       }
     },
     "@babel/plugin-proposal-json-strings": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.10.4.tgz",
-      "integrity": "sha512-fCL7QF0Jo83uy1K0P2YXrfX11tj3lkpN7l4dMv9Y9VkowkhkQDwFHFd8IiwyK5MZjE8UpbgokkgtcReH88Abaw==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.12.1.tgz",
+      "integrity": "sha512-GoLDUi6U9ZLzlSda2Df++VSqDJg3CG+dR0+iWsv6XRw1rEq+zwt4DirM9yrxW6XWaTpmai1cWJLMfM8qQJf+yw==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4",
@@ -2072,9 +1820,9 @@
       }
     },
     "@babel/plugin-proposal-nullish-coalescing-operator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz",
-      "integrity": "sha512-wq5n1M3ZUlHl9sqT2ok1T2/MTt6AXE0e1Lz4WzWBr95LsAZ5qDXe4KnFuauYyEyLiohvXFMdbsOTMyLZs91Zlw==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.12.1.tgz",
+      "integrity": "sha512-nZY0ESiaQDI1y96+jk6VxMOaL4LPo/QDHBqL+SF3/vl6dHkTwHlOI8L4ZwuRBHgakRBw5zsVylel7QPbbGuYgg==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4",
@@ -2082,9 +1830,9 @@
       }
     },
     "@babel/plugin-proposal-numeric-separator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.10.4.tgz",
-      "integrity": "sha512-73/G7QoRoeNkLZFxsoCCvlg4ezE4eM+57PnOqgaPOozd5myfj7p0muD1mRVJvbUWbOzD+q3No2bWbaKy+DJ8DA==",
+      "version": "7.12.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.7.tgz",
+      "integrity": "sha512-8c+uy0qmnRTeukiGsjLGy6uVs/TFjJchGXUeBqlG4VWYOdJWkhhVPdQ3uHwbmalfJwv2JsV0qffXP4asRfL2SQ==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4",
@@ -2092,20 +1840,20 @@
       }
     },
     "@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.11.0.tgz",
-      "integrity": "sha512-wzch41N4yztwoRw0ak+37wxwJM2oiIiy6huGCoqkvSTA9acYWcPfn9Y4aJqmFFJ70KTJUu29f3DQ43uJ9HXzEA==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz",
+      "integrity": "sha512-s6SowJIjzlhx8o7lsFx5zmY4At6CTtDvgNQDdPzkBQucle58A6b/TTeEBYtyDgmcXjUTM+vE8YOGHZzzbc/ioA==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
-        "@babel/plugin-transform-parameters": "^7.10.4"
+        "@babel/plugin-transform-parameters": "^7.12.1"
       }
     },
     "@babel/plugin-proposal-optional-catch-binding": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.10.4.tgz",
-      "integrity": "sha512-LflT6nPh+GK2MnFiKDyLiqSqVHkQnVf7hdoAvyTnnKj9xB3docGRsdPuxp6qqqW19ifK3xgc9U5/FwrSaCNX5g==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.12.1.tgz",
+      "integrity": "sha512-hFvIjgprh9mMw5v42sJWLI1lzU5L2sznP805zeT6rySVRA0Y18StRhDqhSxlap0oVgItRsB6WSROp4YnJTJz0g==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4",
@@ -2113,23 +1861,23 @@
       }
     },
     "@babel/plugin-proposal-optional-chaining": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.11.0.tgz",
-      "integrity": "sha512-v9fZIu3Y8562RRwhm1BbMRxtqZNFmFA2EG+pT2diuU8PT3H6T/KXoZ54KgYisfOFZHV6PfvAiBIZ9Rcz+/JCxA==",
+      "version": "7.12.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.7.tgz",
+      "integrity": "sha512-4ovylXZ0PWmwoOvhU2vhnzVNnm88/Sm9nx7V8BPgMvAzn5zDou3/Awy0EjglyubVHasJj+XCEkr/r1X3P5elCA==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.11.0",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.12.1",
         "@babel/plugin-syntax-optional-chaining": "^7.8.0"
       }
     },
     "@babel/plugin-proposal-unicode-property-regex": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.10.4.tgz",
-      "integrity": "sha512-H+3fOgPnEXFL9zGYtKQe4IDOPKYlZdF1kqFDQRRb8PK4B8af1vAGK04tF5iQAAsui+mHNBQSAtd2/ndEDe9wuA==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.12.1.tgz",
+      "integrity": "sha512-MYq+l+PvHuw/rKUz1at/vb6nCnQ2gmJBNaM62z0OgH7B2W1D9pvkpYtlti9bGtizNIU1K3zm4bZF9F91efVY0w==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.10.4",
+        "@babel/helper-create-regexp-features-plugin": "^7.12.1",
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
@@ -2206,56 +1954,56 @@
       }
     },
     "@babel/plugin-syntax-top-level-await": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.10.4.tgz",
-      "integrity": "sha512-ni1brg4lXEmWyafKr0ccFWkJG0CeMt4WV1oyeBW6EFObF4oOHclbkj5cARxAPQyAQ2UTuplJyK4nfkXIMMFvsQ==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.12.1.tgz",
+      "integrity": "sha512-i7ooMZFS+a/Om0crxZodrTzNEPJHZrlMVGMTEpFAj6rYY/bKCddB0Dk/YxfPuYXOopuhKk/e1jV6h+WUU9XN3A==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-arrow-functions": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.10.4.tgz",
-      "integrity": "sha512-9J/oD1jV0ZCBcgnoFWFq1vJd4msoKb/TCpGNFyyLt0zABdcvgK3aYikZ8HjzB14c26bc7E3Q1yugpwGy2aTPNA==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.12.1.tgz",
+      "integrity": "sha512-5QB50qyN44fzzz4/qxDPQMBCTHgxg3n0xRBLJUmBlLoU/sFvxVWGZF/ZUfMVDQuJUKXaBhbupxIzIfZ6Fwk/0A==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-async-to-generator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.10.4.tgz",
-      "integrity": "sha512-F6nREOan7J5UXTLsDsZG3DXmZSVofr2tGNwfdrVwkDWHfQckbQXnXSPfD7iO+c/2HGqycwyLST3DnZ16n+cBJQ==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.12.1.tgz",
+      "integrity": "sha512-SDtqoEcarK1DFlRJ1hHRY5HvJUj5kX4qmtpMAm2QnhOlyuMC4TMdCRgW6WXpv93rZeYNeLP22y8Aq2dbcDRM1A==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-imports": "^7.10.4",
+        "@babel/helper-module-imports": "^7.12.1",
         "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/helper-remap-async-to-generator": "^7.10.4"
+        "@babel/helper-remap-async-to-generator": "^7.12.1"
       }
     },
     "@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.10.4.tgz",
-      "integrity": "sha512-WzXDarQXYYfjaV1szJvN3AD7rZgZzC1JtjJZ8dMHUyiK8mxPRahynp14zzNjU3VkPqPsO38CzxiWO1c9ARZ8JA==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.12.1.tgz",
+      "integrity": "sha512-5OpxfuYnSgPalRpo8EWGPzIYf0lHBWORCkj5M0oLBwHdlux9Ri36QqGW3/LR13RSVOAoUUMzoPI/jpE4ABcHoA==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-block-scoping": {
-      "version": "7.11.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.11.1.tgz",
-      "integrity": "sha512-00dYeDE0EVEHuuM+26+0w/SCL0BH2Qy7LwHuI4Hi4MH5gkC8/AqMN5uWFJIsoXZrAphiMm1iXzBw6L2T+eA0ew==",
+      "version": "7.12.12",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.12.tgz",
+      "integrity": "sha512-VOEPQ/ExOVqbukuP7BYJtI5ZxxsmegTwzZ04j1aF0dkSypGo9XpDHuOrABsJu+ie+penpSJheDJ11x1BEZNiyQ==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-classes": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.10.4.tgz",
-      "integrity": "sha512-2oZ9qLjt161dn1ZE0Ms66xBncQH4In8Sqw1YWgBUZuGVJJS5c0OFZXL6dP2MRHrkU/eKhWg8CzFJhRQl50rQxA==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.12.1.tgz",
+      "integrity": "sha512-/74xkA7bVdzQTBeSUhLLJgYIcxw/dpEpCdRDiHgPJ3Mv6uC11UhjpOhl72CgqbBCmt1qtssCyB2xnJm1+PFjog==",
       "dev": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.10.4",
@@ -2263,47 +2011,47 @@
         "@babel/helper-function-name": "^7.10.4",
         "@babel/helper-optimise-call-expression": "^7.10.4",
         "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/helper-replace-supers": "^7.10.4",
+        "@babel/helper-replace-supers": "^7.12.1",
         "@babel/helper-split-export-declaration": "^7.10.4",
         "globals": "^11.1.0"
       },
       "dependencies": {
         "@babel/code-frame": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+          "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
           "dev": true,
           "requires": {
             "@babel/highlight": "^7.10.4"
           }
         },
         "@babel/helper-function-name": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
-          "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.11.tgz",
+          "integrity": "sha512-AtQKjtYNolKNi6nNNVLQ27CP6D9oFR6bq/HPYSizlzbp7uC1M59XJe8L+0uXjbIaZaUJF99ruHqVGiKXU/7ybA==",
           "dev": true,
           "requires": {
-            "@babel/helper-get-function-arity": "^7.10.4",
-            "@babel/template": "^7.10.4",
-            "@babel/types": "^7.10.4"
+            "@babel/helper-get-function-arity": "^7.12.10",
+            "@babel/template": "^7.12.7",
+            "@babel/types": "^7.12.11"
           }
         },
         "@babel/helper-get-function-arity": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
-          "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
+          "version": "7.12.10",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.10.tgz",
+          "integrity": "sha512-mm0n5BPjR06wh9mPQaDdXWDoll/j5UpCAPl1x8fS71GHm7HA6Ua2V4ylG1Ju8lvcTOietbPNNPaSilKj+pj+Ag==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.10.4"
+            "@babel/types": "^7.12.10"
           }
         },
         "@babel/helper-split-export-declaration": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz",
-          "integrity": "sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.11.tgz",
+          "integrity": "sha512-LsIVN8j48gHgwzfocYUSkO/hjYAOJqlpJEc7tGXcIm4cubjVUf8LGW6eWRyxEu7gA25q02p0rQUWoCI33HNS5g==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.11.0"
+            "@babel/types": "^7.12.11"
           }
         },
         "@babel/highlight": {
@@ -2318,29 +2066,29 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.3.tgz",
-          "integrity": "sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
+          "integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==",
           "dev": true
         },
         "@babel/template": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
-          "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
+          "version": "7.12.7",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.7.tgz",
+          "integrity": "sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.10.4",
-            "@babel/parser": "^7.10.4",
-            "@babel/types": "^7.10.4"
+            "@babel/parser": "^7.12.7",
+            "@babel/types": "^7.12.7"
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -2348,46 +2096,46 @@
       }
     },
     "@babel/plugin-transform-computed-properties": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.10.4.tgz",
-      "integrity": "sha512-JFwVDXcP/hM/TbyzGq3l/XWGut7p46Z3QvqFMXTfk6/09m7xZHJUN9xHfsv7vqqD4YnfI5ueYdSJtXqqBLyjBw==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.12.1.tgz",
+      "integrity": "sha512-vVUOYpPWB7BkgUWPo4C44mUQHpTZXakEqFjbv8rQMg7TC6S6ZhGZ3otQcRH6u7+adSlE5i0sp63eMC/XGffrzg==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-destructuring": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.10.4.tgz",
-      "integrity": "sha512-+WmfvyfsyF603iPa6825mq6Qrb7uLjTOsa3XOFzlYcYDHSS4QmpOWOL0NNBY5qMbvrcf3tq0Cw+v4lxswOBpgA==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.12.1.tgz",
+      "integrity": "sha512-fRMYFKuzi/rSiYb2uRLiUENJOKq4Gnl+6qOv5f8z0TZXg3llUwUhsNNwrwaT/6dUhJTzNpBr+CUvEWBtfNY1cw==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-dotall-regex": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.10.4.tgz",
-      "integrity": "sha512-ZEAVvUTCMlMFAbASYSVQoxIbHm2OkG2MseW6bV2JjIygOjdVv8tuxrCTzj1+Rynh7ODb8GivUy7dzEXzEhuPaA==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.12.1.tgz",
+      "integrity": "sha512-B2pXeRKoLszfEW7J4Hg9LoFaWEbr/kzo3teWHmtFCszjRNa/b40f9mfeqZsIDLLt/FjwQ6pz/Gdlwy85xNckBA==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.10.4",
+        "@babel/helper-create-regexp-features-plugin": "^7.12.1",
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-duplicate-keys": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.10.4.tgz",
-      "integrity": "sha512-GL0/fJnmgMclHiBTTWXNlYjYsA7rDrtsazHG6mglaGSTh0KsrW04qml+Bbz9FL0LcJIRwBWL5ZqlNHKTkU3xAA==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.12.1.tgz",
+      "integrity": "sha512-iRght0T0HztAb/CazveUpUQrZY+aGKKaWXMJ4uf9YJtqxSUe09j3wteztCUDRHs+SRAL7yMuFqUsLoAKKzgXjw==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.10.4.tgz",
-      "integrity": "sha512-S5HgLVgkBcRdyQAHbKj+7KyuWx8C6t5oETmUuwz1pt3WTWJhsUV0WIIXuVvfXMxl/QQyHKlSCNNtaIamG8fysw==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.12.1.tgz",
+      "integrity": "sha512-7tqwy2bv48q+c1EHbXK0Zx3KXd2RVQp6OC7PbwFNt/dPTAV3Lu5sWtWuAj8owr5wqtWnqHfl2/mJlUmqkChKug==",
       "dev": true,
       "requires": {
         "@babel/helper-builder-binary-assignment-operator-visitor": "^7.10.4",
@@ -2395,18 +2143,18 @@
       }
     },
     "@babel/plugin-transform-for-of": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.10.4.tgz",
-      "integrity": "sha512-ItdQfAzu9AlEqmusA/65TqJ79eRcgGmpPPFvBnGILXZH975G0LNjP1yjHvGgfuCxqrPPueXOPe+FsvxmxKiHHQ==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.12.1.tgz",
+      "integrity": "sha512-Zaeq10naAsuHo7heQvyV0ptj4dlZJwZgNAtBYBnu5nNKJoW62m0zKcIEyVECrUKErkUkg6ajMy4ZfnVZciSBhg==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-function-name": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.10.4.tgz",
-      "integrity": "sha512-OcDCq2y5+E0dVD5MagT5X+yTRbcvFjDI2ZVAottGH6tzqjx/LKpgkUepu3hp/u4tZBzxxpNGwLsAvGBvQ2mJzg==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.12.1.tgz",
+      "integrity": "sha512-JF3UgJUILoFrFMEnOJLJkRHSk6LUSXLmEFsA23aR2O5CSLUxbeUX1IZ1YQ7Sn0aXb601Ncwjx73a+FVqgcljVw==",
       "dev": true,
       "requires": {
         "@babel/helper-function-name": "^7.10.4",
@@ -2414,32 +2162,32 @@
       },
       "dependencies": {
         "@babel/code-frame": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+          "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
           "dev": true,
           "requires": {
             "@babel/highlight": "^7.10.4"
           }
         },
         "@babel/helper-function-name": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
-          "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.11.tgz",
+          "integrity": "sha512-AtQKjtYNolKNi6nNNVLQ27CP6D9oFR6bq/HPYSizlzbp7uC1M59XJe8L+0uXjbIaZaUJF99ruHqVGiKXU/7ybA==",
           "dev": true,
           "requires": {
-            "@babel/helper-get-function-arity": "^7.10.4",
-            "@babel/template": "^7.10.4",
-            "@babel/types": "^7.10.4"
+            "@babel/helper-get-function-arity": "^7.12.10",
+            "@babel/template": "^7.12.7",
+            "@babel/types": "^7.12.11"
           }
         },
         "@babel/helper-get-function-arity": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
-          "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
+          "version": "7.12.10",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.10.tgz",
+          "integrity": "sha512-mm0n5BPjR06wh9mPQaDdXWDoll/j5UpCAPl1x8fS71GHm7HA6Ua2V4ylG1Ju8lvcTOietbPNNPaSilKj+pj+Ag==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.10.4"
+            "@babel/types": "^7.12.10"
           }
         },
         "@babel/highlight": {
@@ -2454,29 +2202,29 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.3.tgz",
-          "integrity": "sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
+          "integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==",
           "dev": true
         },
         "@babel/template": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
-          "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
+          "version": "7.12.7",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.7.tgz",
+          "integrity": "sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.10.4",
-            "@babel/parser": "^7.10.4",
-            "@babel/types": "^7.10.4"
+            "@babel/parser": "^7.12.7",
+            "@babel/types": "^7.12.7"
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -2484,210 +2232,186 @@
       }
     },
     "@babel/plugin-transform-literals": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.10.4.tgz",
-      "integrity": "sha512-Xd/dFSTEVuUWnyZiMu76/InZxLTYilOSr1UlHV+p115Z/Le2Fi1KXkJUYz0b42DfndostYlPub3m8ZTQlMaiqQ==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.12.1.tgz",
+      "integrity": "sha512-+PxVGA+2Ag6uGgL0A5f+9rklOnnMccwEBzwYFL3EUaKuiyVnUipyXncFcfjSkbimLrODoqki1U9XxZzTvfN7IQ==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-member-expression-literals": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.10.4.tgz",
-      "integrity": "sha512-0bFOvPyAoTBhtcJLr9VcwZqKmSjFml1iVxvPL0ReomGU53CX53HsM4h2SzckNdkQcHox1bpAqzxBI1Y09LlBSw==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.12.1.tgz",
+      "integrity": "sha512-1sxePl6z9ad0gFMB9KqmYofk34flq62aqMt9NqliS/7hPEpURUCMbyHXrMPlo282iY7nAvUB1aQd5mg79UD9Jg==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-modules-amd": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.10.5.tgz",
-      "integrity": "sha512-elm5uruNio7CTLFItVC/rIzKLfQ17+fX7EVz5W0TMgIHFo1zY0Ozzx+lgwhL4plzl8OzVn6Qasx5DeEFyoNiRw==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.12.1.tgz",
+      "integrity": "sha512-tDW8hMkzad5oDtzsB70HIQQRBiTKrhfgwC/KkJeGsaNFTdWhKNt/BiE8c5yj19XiGyrxpbkOfH87qkNg1YGlOQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-transforms": "^7.10.5",
+        "@babel/helper-module-transforms": "^7.12.1",
         "@babel/helper-plugin-utils": "^7.10.4",
         "babel-plugin-dynamic-import-node": "^2.3.3"
       }
     },
     "@babel/plugin-transform-modules-commonjs": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.10.4.tgz",
-      "integrity": "sha512-Xj7Uq5o80HDLlW64rVfDBhao6OX89HKUmb+9vWYaLXBZOma4gA6tw4Ni1O5qVDoZWUV0fxMYA0aYzOawz0l+1w==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.12.1.tgz",
+      "integrity": "sha512-dY789wq6l0uLY8py9c1B48V8mVL5gZh/+PQ5ZPrylPYsnAvnEMjqsUXkuoDVPeVK+0VyGar+D08107LzDQ6pag==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-transforms": "^7.10.4",
+        "@babel/helper-module-transforms": "^7.12.1",
         "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/helper-simple-access": "^7.10.4",
+        "@babel/helper-simple-access": "^7.12.1",
         "babel-plugin-dynamic-import-node": "^2.3.3"
       }
     },
     "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.10.5.tgz",
-      "integrity": "sha512-f4RLO/OL14/FP1AEbcsWMzpbUz6tssRaeQg11RH1BP/XnPpRoVwgeYViMFacnkaw4k4wjRSjn3ip1Uw9TaXuMw==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.12.1.tgz",
+      "integrity": "sha512-Hn7cVvOavVh8yvW6fLwveFqSnd7rbQN3zJvoPNyNaQSvgfKmDBO9U1YL9+PCXGRlZD9tNdWTy5ACKqMuzyn32Q==",
       "dev": true,
       "requires": {
         "@babel/helper-hoist-variables": "^7.10.4",
-        "@babel/helper-module-transforms": "^7.10.5",
+        "@babel/helper-module-transforms": "^7.12.1",
         "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-validator-identifier": "^7.10.4",
         "babel-plugin-dynamic-import-node": "^2.3.3"
       }
     },
     "@babel/plugin-transform-modules-umd": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.10.4.tgz",
-      "integrity": "sha512-mohW5q3uAEt8T45YT7Qc5ws6mWgJAaL/8BfWD9Dodo1A3RKWli8wTS+WiQ/knF+tXlPirW/1/MqzzGfCExKECA==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.12.1.tgz",
+      "integrity": "sha512-aEIubCS0KHKM0zUos5fIoQm+AZUMt1ZvMpqz0/H5qAQ7vWylr9+PLYurT+Ic7ID/bKLd4q8hDovaG3Zch2uz5Q==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-transforms": "^7.10.4",
+        "@babel/helper-module-transforms": "^7.12.1",
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.10.4.tgz",
-      "integrity": "sha512-V6LuOnD31kTkxQPhKiVYzYC/Jgdq53irJC/xBSmqcNcqFGV+PER4l6rU5SH2Vl7bH9mLDHcc0+l9HUOe4RNGKA==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.12.1.tgz",
+      "integrity": "sha512-tB43uQ62RHcoDp9v2Nsf+dSM8sbNodbEicbQNA53zHz8pWUhsgHSJCGpt7daXxRydjb0KnfmB+ChXOv3oADp1Q==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.10.4"
+        "@babel/helper-create-regexp-features-plugin": "^7.12.1"
       }
     },
     "@babel/plugin-transform-new-target": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.10.4.tgz",
-      "integrity": "sha512-YXwWUDAH/J6dlfwqlWsztI2Puz1NtUAubXhOPLQ5gjR/qmQ5U96DY4FQO8At33JN4XPBhrjB8I4eMmLROjjLjw==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.12.1.tgz",
+      "integrity": "sha512-+eW/VLcUL5L9IvJH7rT1sT0CzkdUTvPrXC2PXTn/7z7tXLBuKvezYbGdxD5WMRoyvyaujOq2fWoKl869heKjhw==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-object-super": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.10.4.tgz",
-      "integrity": "sha512-5iTw0JkdRdJvr7sY0vHqTpnruUpTea32JHmq/atIWqsnNussbRzjEDyWep8UNztt1B5IusBYg8Irb0bLbiEBCQ==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.12.1.tgz",
+      "integrity": "sha512-AvypiGJH9hsquNUn+RXVcBdeE3KHPZexWRdimhuV59cSoOt5kFBmqlByorAeUlGG2CJWd0U+4ZtNKga/TB0cAw==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/helper-replace-supers": "^7.10.4"
+        "@babel/helper-replace-supers": "^7.12.1"
       }
     },
     "@babel/plugin-transform-parameters": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.10.5.tgz",
-      "integrity": "sha512-xPHwUj5RdFV8l1wuYiu5S9fqWGM2DrYc24TMvUiRrPVm+SM3XeqU9BcokQX/kEUe+p2RBwy+yoiR1w/Blq6ubw==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.12.1.tgz",
+      "integrity": "sha512-xq9C5EQhdPK23ZeCdMxl8bbRnAgHFrw5EOC3KJUsSylZqdkCaFEXxGSBuTSObOpiiHHNyb82es8M1QYgfQGfNg==",
       "dev": true,
       "requires": {
-        "@babel/helper-get-function-arity": "^7.10.4",
         "@babel/helper-plugin-utils": "^7.10.4"
-      },
-      "dependencies": {
-        "@babel/helper-get-function-arity": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
-          "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.4"
-          }
-        },
-        "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/plugin-transform-property-literals": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.10.4.tgz",
-      "integrity": "sha512-ofsAcKiUxQ8TY4sScgsGeR2vJIsfrzqvFb9GvJ5UdXDzl+MyYCaBj/FGzXuv7qE0aJcjWMILny1epqelnFlz8g==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.12.1.tgz",
+      "integrity": "sha512-6MTCR/mZ1MQS+AwZLplX4cEySjCpnIF26ToWo942nqn8hXSm7McaHQNeGx/pt7suI1TWOWMfa/NgBhiqSnX0cQ==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-regenerator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.10.4.tgz",
-      "integrity": "sha512-3thAHwtor39A7C04XucbMg17RcZ3Qppfxr22wYzZNcVIkPHfpM9J0SO8zuCV6SZa265kxBJSrfKTvDCYqBFXGw==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.12.1.tgz",
+      "integrity": "sha512-gYrHqs5itw6i4PflFX3OdBPMQdPbF4bj2REIUxlMRUFk0/ZOAIpDFuViuxPjUL7YC8UPnf+XG7/utJvqXdPKng==",
       "dev": true,
       "requires": {
         "regenerator-transform": "^0.14.2"
       }
     },
     "@babel/plugin-transform-reserved-words": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.10.4.tgz",
-      "integrity": "sha512-hGsw1O6Rew1fkFbDImZIEqA8GoidwTAilwCyWqLBM9f+e/u/sQMQu7uX6dyokfOayRuuVfKOW4O7HvaBWM+JlQ==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.12.1.tgz",
+      "integrity": "sha512-pOnUfhyPKvZpVyBHhSBoX8vfA09b7r00Pmm1sH+29ae2hMTKVmSp4Ztsr8KBKjLjx17H0eJqaRC3bR2iThM54A==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-shorthand-properties": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.10.4.tgz",
-      "integrity": "sha512-AC2K/t7o07KeTIxMoHneyX90v3zkm5cjHJEokrPEAGEy3UCp8sLKfnfOIGdZ194fyN4wfX/zZUWT9trJZ0qc+Q==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.12.1.tgz",
+      "integrity": "sha512-GFZS3c/MhX1OusqB1MZ1ct2xRzX5ppQh2JU1h2Pnfk88HtFTM+TWQqJNfwkmxtPQtb/s1tk87oENfXJlx7rSDw==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-spread": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.11.0.tgz",
-      "integrity": "sha512-UwQYGOqIdQJe4aWNyS7noqAnN2VbaczPLiEtln+zPowRNlD+79w3oi2TWfYe0eZgd+gjZCbsydN7lzWysDt+gw==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.12.1.tgz",
+      "integrity": "sha512-vuLp8CP0BE18zVYjsEBZ5xoCecMK6LBMMxYzJnh01rxQRvhNhH1csMMmBfNo5tGpGO+NhdSNW2mzIvBu3K1fng==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.11.0"
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.12.1"
       }
     },
     "@babel/plugin-transform-sticky-regex": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.10.4.tgz",
-      "integrity": "sha512-Ddy3QZfIbEV0VYcVtFDCjeE4xwVTJWTmUtorAJkn6u/92Z/nWJNV+mILyqHKrUxXYKA2EoCilgoPePymKL4DvQ==",
+      "version": "7.12.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.12.7.tgz",
+      "integrity": "sha512-VEiqZL5N/QvDbdjfYQBhruN0HYjSPjC4XkeqW4ny/jNtH9gcbgaqBIXYEZCNnESMAGs0/K/R7oFGMhOyu/eIxg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/helper-regex": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-template-literals": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.10.5.tgz",
-      "integrity": "sha512-V/lnPGIb+KT12OQikDvgSuesRX14ck5FfJXt6+tXhdkJ+Vsd0lDCVtF6jcB4rNClYFzaB2jusZ+lNISDk2mMMw==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.12.1.tgz",
+      "integrity": "sha512-b4Zx3KHi+taXB1dVRBhVJtEPi9h1THCeKmae2qP0YdUHIFhVjtpqqNfxeVAa1xeHVhAy4SbHxEwx5cltAu5apw==",
       "dev": true,
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.10.4",
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-typeof-symbol": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.10.4.tgz",
-      "integrity": "sha512-QqNgYwuuW0y0H+kUE/GWSR45t/ccRhe14Fs/4ZRouNNQsyd4o3PG4OtHiIrepbM2WKUBDAXKCAK/Lk4VhzTaGA==",
+      "version": "7.12.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.10.tgz",
+      "integrity": "sha512-JQ6H8Rnsogh//ijxspCjc21YPd3VLVoYtAwv3zQmqAt8YGYUtdo5usNhdl4b9/Vir2kPFZl6n1h0PfUz4hJhaA==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
     "@babel/plugin-transform-unicode-regex": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.10.4.tgz",
-      "integrity": "sha512-wNfsc4s8N2qnIwpO/WP2ZiSyjfpTamT2C9V9FDH/Ljub9zw6P3SjkXcFmc0RQUt96k2fmIvtla2MMjgTwIAC+A==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.12.1.tgz",
+      "integrity": "sha512-SqH4ClNngh/zGwHZOOQMTD+e8FGWexILV+ePMyiDJttAWRh5dhDL8rcl5lSgU3Huiq6Zn6pWTMvdPAb21Dwdyg==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.10.4",
+        "@babel/helper-create-regexp-features-plugin": "^7.12.1",
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
@@ -2760,12 +2484,12 @@
       },
       "dependencies": {
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.12.12",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+          "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -2779,9 +2503,9 @@
       }
     },
     "@babel/preset-modules": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.3.tgz",
-      "integrity": "sha512-Ra3JXOHBq2xd56xSF7lMKXdjBn3T772Y1Wet3yWnkDly9zHvJki029tAFzvAAK5cf4YV3yoxuP61crYRol6SVg==",
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.4.tgz",
+      "integrity": "sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.0.0",
@@ -2792,9 +2516,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.11.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
-      "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
+      "version": "7.12.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
+      "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
       "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
@@ -2855,9 +2579,9 @@
       }
     },
     "@fortawesome/fontawesome-free": {
-      "version": "5.15.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz",
-      "integrity": "sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ=="
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz",
+      "integrity": "sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA=="
     },
     "@istanbuljs/schema": {
       "version": "0.1.2",
@@ -2901,12 +2625,12 @@
       }
     },
     "@ngtools/webpack": {
-      "version": "9.1.12",
-      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-9.1.12.tgz",
-      "integrity": "sha512-lypMXIq5oxBMsoDu/VOa1yUmmXthhxkCJa8LG0ZohfnbwhmZvz3SAW7omBGuVrb5cVIfLCkaRCSnQ1MNc6ULXw==",
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-9.1.13.tgz",
+      "integrity": "sha512-mTygcNgr58Mpv+WVrkXe3QXZJO5RKUEDcMoj0bscBp9G62MiMsRKnkDjb5GSXXnSGZb5GOlzdVwayib1O5y3uQ==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "9.1.12",
+        "@angular-devkit/core": "9.1.13",
         "enhanced-resolve": "4.1.1",
         "rxjs": "6.5.4",
         "webpack-sources": "1.4.3"
@@ -2939,38 +2663,39 @@
       }
     },
     "@nodelib/fs.scandir": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
-      "integrity": "sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
+      "integrity": "sha512-33g3pMJk3bg5nXbL/+CY6I2eJDzZAni49PfJnL5fghPTggPvBd/pFNSgJsdAgWptuFu7qq/ERvOYFlhvsLTCKA==",
       "dev": true,
       "requires": {
-        "@nodelib/fs.stat": "2.0.3",
+        "@nodelib/fs.stat": "2.0.4",
         "run-parallel": "^1.1.9"
       }
     },
     "@nodelib/fs.stat": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz",
-      "integrity": "sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz",
+      "integrity": "sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==",
       "dev": true
     },
     "@nodelib/fs.walk": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz",
-      "integrity": "sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.6.tgz",
+      "integrity": "sha512-8Broas6vTtW4GIXTAHDoE32hnN2M5ykgCpWGbuXHQ15vEMqr23pB76e/GZcYsZCHALv50ktd24qhEyKr6wBtow==",
       "dev": true,
       "requires": {
-        "@nodelib/fs.scandir": "2.1.3",
+        "@nodelib/fs.scandir": "2.1.4",
         "fastq": "^1.6.0"
       }
     },
     "@npmcli/move-file": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.0.1.tgz",
-      "integrity": "sha512-Uv6h1sT+0DrblvIrolFtbvM1FgWm+/sy4B3pvLp67Zys+thcukzS5ekn7HsZFGpWP4Q3fYJCljbWQE/XivMRLw==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.1.1.tgz",
+      "integrity": "sha512-LtWTicuF2wp7PNTuyCwABx7nNG+DnzSE8gN0iWxkC6mpgm/iOPu0ZMTkXuCxmJxtWFsDxUaixM9COSNJEMUfuQ==",
       "dev": true,
       "requires": {
-        "mkdirp": "^1.0.4"
+        "mkdirp": "^1.0.4",
+        "rimraf": "^3.0.2"
       },
       "dependencies": {
         "mkdirp": {
@@ -2982,25 +2707,25 @@
       }
     },
     "@schematics/angular": {
-      "version": "9.1.12",
-      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-9.1.12.tgz",
-      "integrity": "sha512-r4+aPAGhstsKFMwW/kOen1ACnzuLpz+vMxEpndXOqqVXLkAMsuAbQUFYjIlMy6fH4zdhpI90EJZ1PbOrAXvKxA==",
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-9.1.13.tgz",
+      "integrity": "sha512-coHvhu2jXVCN3P5Ux5ArDousMWDq4W6eInJPBpAI6yidRW1ViPVF58Bas/+Txcbhubv2cZViBXGq0OAGdJIvTQ==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "9.1.12",
-        "@angular-devkit/schematics": "9.1.12"
+        "@angular-devkit/core": "9.1.13",
+        "@angular-devkit/schematics": "9.1.13"
       }
     },
     "@schematics/update": {
-      "version": "0.901.12",
-      "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.901.12.tgz",
-      "integrity": "sha512-SxGVYLTHhBC0rSF0OWSWPuJUB1Jhfqkl3o5bBgCC9//DutWiN6WoCCBTrCxR7F5vR2iiD7WqOe9CuvWYfvV8oQ==",
+      "version": "0.901.13",
+      "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.901.13.tgz",
+      "integrity": "sha512-Q+jIzDP01XvXLiDfuiBsDBE18KOA2aduNuHnTlRJpWQuMR16J2sOSrHXXn53oZ14cqiUSdUWDTivMpaUGkXd5g==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "9.1.12",
-        "@angular-devkit/schematics": "9.1.12",
+        "@angular-devkit/core": "9.1.13",
+        "@angular-devkit/schematics": "9.1.13",
         "@yarnpkg/lockfile": "1.1.0",
-        "ini": "1.3.5",
+        "ini": "1.3.6",
         "npm-package-arg": "^8.0.0",
         "pacote": "9.5.12",
         "rxjs": "6.5.4",
@@ -3008,6 +2733,12 @@
         "semver-intersect": "1.4.0"
       },
       "dependencies": {
+        "ini": {
+          "version": "1.3.6",
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.6.tgz",
+          "integrity": "sha512-IZUoxEjNjubzrmvzZU4lKP7OnYmX72XRl3sqkfJhBKweKi5rnGi5+IUdlj/H1M+Ip5JQ1WzaDMOBRY90Ajc5jg==",
+          "dev": true
+        },
         "rxjs": {
           "version": "6.5.4",
           "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",
@@ -3026,66 +2757,67 @@
       }
     },
     "@sentry/browser": {
-      "version": "5.24.2",
-      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-5.24.2.tgz",
-      "integrity": "sha512-P/uZC/VrLRpU7MVEJnlZK5+AkEmuHu+mns5gC91Z4gjn7GamjR/CaXVedHGw/15ZrsQiAiwoWwuxpv4Ypd/+SA==",
+      "version": "5.30.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-5.30.0.tgz",
+      "integrity": "sha512-rOb58ZNVJWh1VuMuBG1mL9r54nZqKeaIlwSlvzJfc89vyfd7n6tQ1UXMN383QBz/MS5H5z44Hy5eE+7pCrYAfw==",
       "requires": {
-        "@sentry/core": "5.24.2",
-        "@sentry/types": "5.24.2",
-        "@sentry/utils": "5.24.2",
+        "@sentry/core": "5.30.0",
+        "@sentry/types": "5.30.0",
+        "@sentry/utils": "5.30.0",
         "tslib": "^1.9.3"
       }
     },
     "@sentry/core": {
-      "version": "5.24.2",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-5.24.2.tgz",
-      "integrity": "sha512-nuAwCGU1l9hgMinl5P/8nIQGRXDP2FI9cJnq5h1qiP/XIOvJkJz2yzBR6nTyqr4vBth0tvxQJbIpDNGd7vHJLg==",
-      "requires": {
-        "@sentry/hub": "5.24.2",
-        "@sentry/minimal": "5.24.2",
-        "@sentry/types": "5.24.2",
-        "@sentry/utils": "5.24.2",
+      "version": "5.30.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-5.30.0.tgz",
+      "integrity": "sha512-TmfrII8w1PQZSZgPpUESqjB+jC6MvZJZdLtE/0hZ+SrnKhW3x5WlYLvTXZpcWePYBku7rl2wn1RZu6uT0qCTeg==",
+      "requires": {
+        "@sentry/hub": "5.30.0",
+        "@sentry/minimal": "5.30.0",
+        "@sentry/types": "5.30.0",
+        "@sentry/utils": "5.30.0",
         "tslib": "^1.9.3"
       }
     },
     "@sentry/hub": {
-      "version": "5.24.2",
-      "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-5.24.2.tgz",
-      "integrity": "sha512-xmO1Ivvpb5Qr9WgekinuZZlpl9Iw7iPETUe84HQOhUrXf+2gKO+LaUYMMsYSVDwXQEmR6/tTMyOtS6iavldC6w==",
+      "version": "5.30.0",
+      "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-5.30.0.tgz",
+      "integrity": "sha512-2tYrGnzb1gKz2EkMDQcfLrDTvmGcQPuWxLnJKXJvYTQDGLlEvi2tWz1VIHjunmOvJrB5aIQLhm+dcMRwFZDCqQ==",
       "requires": {
-        "@sentry/types": "5.24.2",
-        "@sentry/utils": "5.24.2",
+        "@sentry/types": "5.30.0",
+        "@sentry/utils": "5.30.0",
         "tslib": "^1.9.3"
       }
     },
     "@sentry/minimal": {
-      "version": "5.24.2",
-      "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-5.24.2.tgz",
-      "integrity": "sha512-biFpux5bI3R8xiD/Zzvrk1kRE6bqPtfWXmZYAHRtaUMCAibprTKSY9Ta8QYHynOAEoJ5Akedy6HUsEkK5DoZfA==",
+      "version": "5.30.0",
+      "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-5.30.0.tgz",
+      "integrity": "sha512-BwWb/owZKtkDX+Sc4zCSTNcvZUq7YcH3uAVlmh/gtR9rmUvbzAA3ewLuB3myi4wWRAMEtny6+J/FN/x+2wn9Xw==",
       "requires": {
-        "@sentry/hub": "5.24.2",
-        "@sentry/types": "5.24.2",
+        "@sentry/hub": "5.30.0",
+        "@sentry/types": "5.30.0",
         "tslib": "^1.9.3"
       }
     },
     "@sentry/types": {
-      "version": "5.24.2",
-      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-5.24.2.tgz",
-      "integrity": "sha512-HcOK00R0tQG5vzrIrqQ0jC28+z76jWSgQCzXiessJ5SH/9uc6NzdO7sR7K8vqMP2+nweCHckFohC8G0T1DLzuQ=="
+      "version": "5.30.0",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-5.30.0.tgz",
+      "integrity": "sha512-R8xOqlSTZ+htqrfteCWU5Nk0CDN5ApUTvrlvBuiH1DyP6czDZ4ktbZB0hAgBlVcK0U+qpD3ag3Tqqpa5Q67rPw=="
     },
     "@sentry/utils": {
-      "version": "5.24.2",
-      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-5.24.2.tgz",
-      "integrity": "sha512-oPGde4tNEDHKk0Cg9q2p0qX649jLDUOwzJXHKpd0X65w3A6eJByDevMr8CSzKV9sesjrUpxqAv6f9WWlz185tA==",
+      "version": "5.30.0",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-5.30.0.tgz",
+      "integrity": "sha512-zaYmoH0NWWtvnJjC9/CBseXMtKHm/tm40sz3YfJRxeQjyzRqNQPgivpd9R/oDJCYj999mzdW382p/qi2ypjLww==",
       "requires": {
-        "@sentry/types": "5.24.2",
+        "@sentry/types": "5.30.0",
         "tslib": "^1.9.3"
       }
     },
     "@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
-      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="
+      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
+      "dev": true
     },
     "@types/glob": {
       "version": "7.1.3",
@@ -3098,9 +2830,9 @@
       }
     },
     "@types/jasmine": {
-      "version": "3.5.14",
-      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.5.14.tgz",
-      "integrity": "sha512-Fkgk536sHPqcOtd+Ow+WiUNuk0TSo/BntKkF8wSvcd6M2FvPjeXcUE6Oz/bwDZiUZEaXLslAgw00Q94Pnx6T4w==",
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.6.3.tgz",
+      "integrity": "sha512-5QKAG8WfC9XrOgYLXPrxv1G2IIUE6zDyzTWamhNWJO0LqPRUbZ0q0zGHDhDJ7MpFloUuyME/jpBIdPjq3/P3jA==",
       "dev": true
     },
     "@types/jasminewd2": {
@@ -3113,9 +2845,9 @@
       }
     },
     "@types/json-schema": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz",
-      "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==",
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
+      "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==",
       "dev": true
     },
     "@types/minimatch": {
@@ -3125,9 +2857,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "12.12.62",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.62.tgz",
-      "integrity": "sha512-qAfo81CsD7yQIM9mVyh6B/U47li5g7cfpVQEDMfQeF8pSZVwzbhwU3crc0qG4DmpsebpJPR49AKOExQyJ05Cpg==",
+      "version": "12.19.15",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.15.tgz",
+      "integrity": "sha512-lowukE3GUI+VSYSu6VcBXl14d61Rp5hA1D+61r16qnwC0lYNSqdxcvRh0pswejorHfS+HgwBasM8jLXz0/aOsw==",
       "dev": true
     },
     "@types/q": {
@@ -3344,9 +3076,9 @@
       }
     },
     "@webcomponents/webcomponentsjs": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.4.4.tgz",
-      "integrity": "sha512-UWXZYbaDLLfhm+xONXTiDciyhOSwKRrZieGQHFMSMGSxY4mbjZ5uYzOKgnuX0luYFvjJw32G3r0sCwQZPJIR4Q=="
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.5.0.tgz",
+      "integrity": "sha512-C0l51MWQZ9kLzcxOZtniOMohpIFdCLZum7/TEHv3XWFc1Fvt5HCpbSX84x8ltka/JuNKcuiDnxXFkiB2gaePcg=="
     },
     "@xtuc/ieee754": {
       "version": "1.2.0",
@@ -3387,9 +3119,9 @@
       }
     },
     "acorn": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
-      "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
+      "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
       "dev": true
     },
     "adm-zip": {
@@ -3423,9 +3155,9 @@
       }
     },
     "aggregate-error": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.1.tgz",
-      "integrity": "sha512-quoaXsZ9/BLNae5yiNoUz+Nhkwz83GhWwtYFglcjEQB2NDHCIpApbqXxIFnm4Pq/Nvhrsq5sYJFyohrrxnTGAA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
       "dev": true,
       "requires": {
         "clean-stack": "^2.0.0",
@@ -3886,9 +3618,9 @@
       "dev": true
     },
     "base64-js": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz",
-      "integrity": "sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g=="
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
     },
     "base64id": {
       "version": "2.0.0",
@@ -4018,9 +3750,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.2.tgz",
-      "integrity": "sha512-vlGn0bcySYl/iV+BGA544JkkZP5LB3jsmkeKLFQakCOwCM3AOk7VkldBz4jrzSe+Z0Ezn99NVXa1o45cQY4R6A=="
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
+      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -4084,21 +3816,13 @@
       }
     },
     "browserify-rsa": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
-      "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz",
+      "integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==",
       "dev": true,
       "requires": {
-        "bn.js": "^4.1.0",
+        "bn.js": "^5.0.0",
         "randombytes": "^2.0.1"
-      },
-      "dependencies": {
-        "bn.js": {
-          "version": "4.11.9",
-          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
-          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==",
-          "dev": true
-        }
       }
     },
     "browserify-sign": {
@@ -4147,15 +3871,16 @@
       }
     },
     "browserslist": {
-      "version": "4.14.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.0.tgz",
-      "integrity": "sha512-pUsXKAF2lVwhmtpeA3LJrZ76jXuusrNyhduuQs7CDFf9foT4Y38aQOserd2lMe5DSSrjf3fx34oHwryuvxAUgQ==",
+      "version": "4.16.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.1.tgz",
+      "integrity": "sha512-UXhDrwqsNcpTYJBTZsbGATDxZbiVDsx6UjpmRUmtnP10pr8wAYr5LgFoEFw9ixriQH2mv/NX2SfGzE/o8GndLA==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001111",
-        "electron-to-chromium": "^1.3.523",
-        "escalade": "^3.0.2",
-        "node-releases": "^1.1.60"
+        "caniuse-lite": "^1.0.30001173",
+        "colorette": "^1.2.1",
+        "electron-to-chromium": "^1.3.634",
+        "escalade": "^3.1.1",
+        "node-releases": "^1.1.69"
       }
     },
     "browserstack": {
@@ -4279,6 +4004,16 @@
         "unset-value": "^1.0.0"
       }
     },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
     "caller-callsite": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
@@ -4321,9 +4056,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001114",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001114.tgz",
-      "integrity": "sha512-ml/zTsfNBM+T1+mjglWRPgVsu2L76GAaADKX5f4t0pbhttEp0WMawJsHDYlFkVZkoA+89uvBRrVrEE4oqenzXQ==",
+      "version": "1.0.30001181",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001181.tgz",
+      "integrity": "sha512-m5ul/ARCX50JB8BSNM+oiPmQrR5UmngaQ3QThTTp5HcIIQGP/nPBs82BYLE+tigzm3VW+F4BJIhUyaVtEweelQ==",
       "dev": true
     },
     "canonical-path": {
@@ -4355,29 +4090,27 @@
       "dev": true
     },
     "chokidar": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.1.tgz",
-      "integrity": "sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg==",
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
+      "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
       "dev": true,
       "requires": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
-        "fsevents": "~2.1.2",
+        "fsevents": "~2.3.1",
         "glob-parent": "~5.1.0",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
         "normalize-path": "~3.0.0",
-        "readdirp": "~3.3.0"
+        "readdirp": "~3.5.0"
       },
       "dependencies": {
-        "glob-parent": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz",
-          "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==",
+        "fsevents": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.1.tgz",
+          "integrity": "sha512-YR47Eg4hChJGAB1O3yEAOkGO+rlzutoICGqGo9EZ4lKWokzZRSyIW1QmTzqjtw8MJdj9srP869CuWw/hyzSiBw==",
           "dev": true,
-          "requires": {
-            "is-glob": "^4.0.1"
-          }
+          "optional": true
         }
       }
     },
@@ -4451,9 +4184,9 @@
       }
     },
     "cli-spinners": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.4.0.tgz",
-      "integrity": "sha512-sJAofoarcm76ZGpuooaO0eDy8saEy+YoZBLjC4h8srt4jeBnkYeOgqxgsJQTpyt2LjI5PTfLJHSL+41Yu4fEJA==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.5.0.tgz",
+      "integrity": "sha512-PC+AmIuK04E6aeSs/pUccSujsTzBhu4HzC2dL+CfJB/Jcc2qTRbEwZQDfIUpt2Xl8BodYBEq8w4fc0kU2I9DjQ==",
       "dev": true
     },
     "cli-width": {
@@ -4562,13 +4295,13 @@
       }
     },
     "color": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz",
-      "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.1.3.tgz",
+      "integrity": "sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==",
       "dev": true,
       "requires": {
         "color-convert": "^1.9.1",
-        "color-string": "^1.5.2"
+        "color-string": "^1.5.4"
       }
     },
     "color-convert": {
@@ -4585,15 +4318,21 @@
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-string": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
-      "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.4.tgz",
+      "integrity": "sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==",
       "dev": true,
       "requires": {
         "color-name": "^1.0.0",
         "simple-swizzle": "^0.2.2"
       }
     },
+    "colorette": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz",
+      "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==",
+      "dev": true
+    },
     "colors": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
@@ -4882,12 +4621,12 @@
           "dev": true
         },
         "p-limit": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.0.2.tgz",
-          "integrity": "sha512-iwqZSOoWIW+Ew4kAGUlN16J4M7OB3ysMLSZtnhmqx7njIHFPlxWBX8xo3lVTyFVq6mI/lL9qt2IsN1sHwaxJkg==",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
           "dev": true,
           "requires": {
-            "p-try": "^2.0.0"
+            "yocto-queue": "^0.1.0"
           }
         },
         "p-map": {
@@ -4908,12 +4647,12 @@
       "dev": true
     },
     "core-js-compat": {
-      "version": "3.6.5",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.6.5.tgz",
-      "integrity": "sha512-7ItTKOhOZbznhXAQ2g/slGg1PJV5zDO/WdkTwi7UEOJmkvsE32PWvx6mKtDjiMpjnR2CNf6BAD6sSxIlv7ptng==",
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.8.3.tgz",
+      "integrity": "sha512-1sCb0wBXnBIL16pfFG1Gkvei6UzvKyTNYpiC41yrdjEv0UoJoq9E/abTMzyYJ6JpTkAj15dLjbqifIzEBDVvog==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.8.5",
+        "browserslist": "^4.16.1",
         "semver": "7.0.0"
       },
       "dependencies": {
@@ -5169,9 +4908,9 @@
       }
     },
     "css-what": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.3.0.tgz",
-      "integrity": "sha512-pv9JPyatiPaQ6pf4OvD/dbfm0o5LviWmwxNWzblYf/1u9QZd0ihV+PMwy5jdQWQ3349kZmKEx9WXuSka2dM4cg==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
+      "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==",
       "dev": true
     },
     "cssauron": {
@@ -5267,28 +5006,28 @@
       "dev": true
     },
     "csso": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-4.0.3.tgz",
-      "integrity": "sha512-NL3spysxUkcrOgnpsT4Xdl2aiEiBG6bXswAABQVHcMrfjjBisFOKwLDOmf4wf32aPdcJws1zds2B0Rg+jqMyHQ==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
       "dev": true,
       "requires": {
-        "css-tree": "1.0.0-alpha.39"
+        "css-tree": "^1.1.2"
       },
       "dependencies": {
         "css-tree": {
-          "version": "1.0.0-alpha.39",
-          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.39.tgz",
-          "integrity": "sha512-7UvkEYgBAHRG9Nt980lYxjsTrCyHFN53ky3wVsDkiMdVqylqRt+Zc+jm5qw7/qyOvN2dHSYtX0e4MbCCExSvnA==",
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.2.tgz",
+          "integrity": "sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==",
           "dev": true,
           "requires": {
-            "mdn-data": "2.0.6",
+            "mdn-data": "2.0.14",
             "source-map": "^0.6.1"
           }
         },
         "mdn-data": {
-          "version": "2.0.6",
-          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.6.tgz",
-          "integrity": "sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==",
+          "version": "2.0.14",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+          "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
           "dev": true
         },
         "source-map": {
@@ -5646,9 +5385,9 @@
       },
       "dependencies": {
         "domelementtype": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
-          "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==",
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.1.0.tgz",
+          "integrity": "sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==",
           "dev": true
         }
       }
@@ -5676,9 +5415,9 @@
       }
     },
     "dot-prop": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.2.0.tgz",
-      "integrity": "sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
       "dev": true,
       "requires": {
         "is-obj": "^2.0.0"
@@ -5718,9 +5457,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.533",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.533.tgz",
-      "integrity": "sha512-YqAL+NXOzjBnpY+dcOKDlZybJDCOzgsq4koW3fvyty/ldTmsb4QazZpOWmVvZ2m0t5jbBf7L0lIGU3BUipwG+A==",
+      "version": "1.3.648",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.648.tgz",
+      "integrity": "sha512-4POzwyQ80tkDiBwkxn7IpfzioimrjRSFX1sCQ3pLZsYJ5ERYmwzdq0hZZ3nFP7Z6GtmnSn3xwWDm8FPlMeOoEQ==",
       "dev": true
     },
     "elliptic": {
@@ -5823,9 +5562,9 @@
       "dev": true
     },
     "entities": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
-      "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
       "dev": true
     },
     "err-code": {
@@ -5835,9 +5574,9 @@
       "dev": true
     },
     "errno": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
-      "integrity": "sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==",
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
       "dev": true,
       "requires": {
         "prr": "~1.0.1"
@@ -5896,10 +5635,9 @@
       }
     },
     "escalade": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz",
-      "integrity": "sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==",
-      "dev": true
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
     },
     "escape-html": {
       "version": "1.0.3",
@@ -5929,12 +5667,20 @@
       "dev": true
     },
     "esrecurse": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz",
-      "integrity": "sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
       "dev": true,
       "requires": {
-        "estraverse": "^4.1.0"
+        "estraverse": "^5.2.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+          "dev": true
+        }
       }
     },
     "estraverse": {
@@ -6243,9 +5989,9 @@
       "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
     },
     "fast-glob": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.4.tgz",
-      "integrity": "sha512-kr/Oo6PX51265qeuCYsyGypiO5uJFgBS0jksyG7FUeCyQzNwYnzrNIMR1NXfkZXsMYXYLRAHgISHBz8gQcxKHQ==",
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz",
+      "integrity": "sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==",
       "dev": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -6269,9 +6015,9 @@
       "dev": true
     },
     "fastq": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.8.0.tgz",
-      "integrity": "sha512-SMIZoZdLh/fgofivvIkmknUXyPnvxRE3DhtZ5Me3Mrsk5gyPL42F0xr51TdRXskBxHfMp+07bcYzfsYEsSQA9Q==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.10.1.tgz",
+      "integrity": "sha512-AWuv6Ery3pM+dY7LYS8YIaCiQvUaos9OB1RyNgaOWnaX+Tik7Onvcsf8x8c+YtDeT0maYLniBip2hox5KtEXXA==",
       "dev": true,
       "requires": {
         "reusify": "^1.0.4"
@@ -6582,15 +6328,26 @@
       "dev": true
     },
     "gensync": {
-      "version": "1.0.0-beta.1",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.1.tgz",
-      "integrity": "sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg=="
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
     },
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
     },
+    "get-intrinsic": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.0.tgz",
+      "integrity": "sha512-M11rgtQp5GZMZzDL7jLTNxbDfurpzuau5uqRWDPvlHjfvg3TdScAZo96GLvhMjImrmR8uAt0FS2RLoMrfWGKlg==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      }
+    },
     "get-stream": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
@@ -6644,9 +6401,9 @@
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
     },
     "globby": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.1.tgz",
-      "integrity": "sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==",
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.2.tgz",
+      "integrity": "sha512-2ZThXDvvV8fYFRVIxnrMQBipZQDr7MxKAmQK1vujaj9/7eF0efG7BPUKJ7jP7G5SLF37xKDXvO4S/KKLj/Z0og==",
       "dev": true,
       "requires": {
         "array-union": "^2.1.0",
@@ -6853,9 +6610,9 @@
       }
     },
     "hosted-git-info": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.5.tgz",
-      "integrity": "sha512-i4dpK6xj9BIpVOTboXIlKG9+8HMKggcrMX7WA24xZtKwX0TPelq/rbaS5rCKeNX8sJXZJGdSxpnEGtta+wismQ==",
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
+      "integrity": "sha512-aXpmwoOhRBrw6X3j0h5RloK4x1OzsxMPyxqIHyNfSe2pypkVTZFpEiRoSipPEPlMrh0HW/XsjkJ5WgnCirpNUw==",
       "dev": true,
       "requires": {
         "lru-cache": "^6.0.0"
@@ -6903,9 +6660,9 @@
       "dev": true
     },
     "html-entities": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.3.1.tgz",
-      "integrity": "sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.4.0.tgz",
+      "integrity": "sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==",
       "dev": true
     },
     "html-escaper": {
@@ -7168,9 +6925,9 @@
       }
     },
     "ieee754": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
-      "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
       "dev": true
     },
     "iferr": {
@@ -7323,12 +7080,11 @@
           "dev": true
         },
         "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "dev": true,
           "requires": {
-            "@types/color-name": "^1.1.1",
             "color-convert": "^2.0.1"
           }
         },
@@ -7390,9 +7146,9 @@
           }
         },
         "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
@@ -7602,6 +7358,12 @@
       "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
       "dev": true
     },
+    "is-negative-zero": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
+      "integrity": "sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==",
+      "dev": true
+    },
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -7942,9 +7704,9 @@
           "dev": true
         },
         "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
@@ -7984,6 +7746,12 @@
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
       "dev": true
     },
+    "json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
     "json-schema": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
@@ -8533,9 +8301,9 @@
       }
     },
     "loglevel": {
-      "version": "1.6.8",
-      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.8.tgz",
-      "integrity": "sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==",
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz",
+      "integrity": "sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==",
       "dev": true
     },
     "loose-envify": {
@@ -9177,9 +8945,9 @@
       }
     },
     "node-releases": {
-      "version": "1.1.60",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.60.tgz",
-      "integrity": "sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==",
+      "version": "1.1.70",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.70.tgz",
+      "integrity": "sha512-Slf2s69+2/uAD79pVVQo8uSiC34+g8GWY8UH2Qtqv34ZfhYrxpYpfzs9Js9d6O0mbDmALuxaTlplnBTnSELcrw==",
       "dev": true
     },
     "normalize-package-data": {
@@ -9244,11 +9012,23 @@
         "semver": "^7.1.1"
       },
       "dependencies": {
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
         "semver": {
-          "version": "7.3.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
-          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
-          "dev": true
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
+          "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
         }
       }
     },
@@ -9269,11 +9049,23 @@
         "validate-npm-package-name": "^3.0.0"
       },
       "dependencies": {
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
         "semver": {
-          "version": "7.3.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
-          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
-          "dev": true
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
+          "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
         }
       }
     },
@@ -9299,18 +9091,30 @@
         "semver": "^7.0.0"
       },
       "dependencies": {
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
         "semver": {
-          "version": "7.3.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
-          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
-          "dev": true
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
+          "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
         }
       }
     },
     "npm-registry-fetch": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.6.tgz",
-      "integrity": "sha512-SEp9m7fPe8FIKzhg2JS+xs+w4YY9mEwRlMcEZRELph7rdoygIQGY6B+g0+wdZqokHE8f57ZkexxYWqFO0FkfCw==",
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.7.tgz",
+      "integrity": "sha512-cny9v0+Mq6Tjz+e0erFAB+RYJ/AVGzkjnISiobqP8OWj9c9FLoZZu8/SPSKJWE17F1tk4018wfjV+ZbIbqC7fQ==",
       "dev": true,
       "requires": {
         "JSONStream": "^1.3.4",
@@ -9467,13 +9271,91 @@
       }
     },
     "object.getownpropertydescriptors": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz",
-      "integrity": "sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.1.tgz",
+      "integrity": "sha512-6DtXgZ/lIZ9hqx4GtZETobXLR/ZLaa0aqV0kzbn80Rf8Z2e/XFnhA0I7p07N2wH8bBBltr2xQPi6sbKWAY2Eng==",
       "dev": true,
       "requires": {
+        "call-bind": "^1.0.0",
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.0-next.1"
+        "es-abstract": "^1.18.0-next.1"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.18.0-next.2",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.2.tgz",
+          "integrity": "sha512-Ih4ZMFHEtZupnUh6497zEL4y2+w8+1ljnCyaTa+adcoafI1GOvMwFlDjBLfWR7y9VLfrjRJe9ocuHY1PSR9jjw==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.0.2",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1",
+            "is-callable": "^1.2.2",
+            "is-negative-zero": "^2.0.1",
+            "is-regex": "^1.1.1",
+            "object-inspect": "^1.9.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.2",
+            "string.prototype.trimend": "^1.0.3",
+            "string.prototype.trimstart": "^1.0.3"
+          }
+        },
+        "is-callable": {
+          "version": "1.2.2",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz",
+          "integrity": "sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==",
+          "dev": true
+        },
+        "is-regex": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.1.tgz",
+          "integrity": "sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==",
+          "dev": true,
+          "requires": {
+            "has-symbols": "^1.0.1"
+          }
+        },
+        "object-inspect": {
+          "version": "1.9.0",
+          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
+          "integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==",
+          "dev": true
+        },
+        "object.assign": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+          "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.0",
+            "define-properties": "^1.1.3",
+            "has-symbols": "^1.0.1",
+            "object-keys": "^1.1.1"
+          }
+        },
+        "string.prototype.trimend": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.3.tgz",
+          "integrity": "sha512-ayH0pB+uf0U28CtjlLvL7NaohvR1amUvVZk+y3DYb0Ey2PUV5zPkkKy9+U1ndVEIXO8hNg18eIv9Jntbii+dKw==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.0",
+            "define-properties": "^1.1.3"
+          }
+        },
+        "string.prototype.trimstart": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.3.tgz",
+          "integrity": "sha512-oBIBUy5lea5tt0ovtOFiEQaBkoBBkyJhZXzJYrSmDo5IUUqbOPvVezuRs/agBIdZ2p2Eo1FD6bD9USyBLfl3xg==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.0",
+            "define-properties": "^1.1.3"
+          }
+        }
       }
     },
     "object.pick": {
@@ -9486,15 +9368,92 @@
       }
     },
     "object.values": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.1.tgz",
-      "integrity": "sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.2.tgz",
+      "integrity": "sha512-MYC0jvJopr8EK6dPBiO8Nb9mvjdypOachO5REGk6MXzujbBrAisKo3HmdEI6kZDL6fC31Mwee/5YbtMebixeag==",
       "dev": true,
       "requires": {
+        "call-bind": "^1.0.0",
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.0-next.1",
-        "function-bind": "^1.1.1",
+        "es-abstract": "^1.18.0-next.1",
         "has": "^1.0.3"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.18.0-next.2",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.2.tgz",
+          "integrity": "sha512-Ih4ZMFHEtZupnUh6497zEL4y2+w8+1ljnCyaTa+adcoafI1GOvMwFlDjBLfWR7y9VLfrjRJe9ocuHY1PSR9jjw==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.0.2",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1",
+            "is-callable": "^1.2.2",
+            "is-negative-zero": "^2.0.1",
+            "is-regex": "^1.1.1",
+            "object-inspect": "^1.9.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.2",
+            "string.prototype.trimend": "^1.0.3",
+            "string.prototype.trimstart": "^1.0.3"
+          }
+        },
+        "is-callable": {
+          "version": "1.2.2",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz",
+          "integrity": "sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==",
+          "dev": true
+        },
+        "is-regex": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.1.tgz",
+          "integrity": "sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==",
+          "dev": true,
+          "requires": {
+            "has-symbols": "^1.0.1"
+          }
+        },
+        "object-inspect": {
+          "version": "1.9.0",
+          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
+          "integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==",
+          "dev": true
+        },
+        "object.assign": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+          "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.0",
+            "define-properties": "^1.1.3",
+            "has-symbols": "^1.0.1",
+            "object-keys": "^1.1.1"
+          }
+        },
+        "string.prototype.trimend": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.3.tgz",
+          "integrity": "sha512-ayH0pB+uf0U28CtjlLvL7NaohvR1amUvVZk+y3DYb0Ey2PUV5zPkkKy9+U1ndVEIXO8hNg18eIv9Jntbii+dKw==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.0",
+            "define-properties": "^1.1.3"
+          }
+        },
+        "string.prototype.trimstart": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.3.tgz",
+          "integrity": "sha512-oBIBUy5lea5tt0ovtOFiEQaBkoBBkyJhZXzJYrSmDo5IUUqbOPvVezuRs/agBIdZ2p2Eo1FD6bD9USyBLfl3xg==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.0",
+            "define-properties": "^1.1.3"
+          }
+        }
       }
     },
     "obuf": {
@@ -9504,20 +9463,26 @@
       "dev": true
     },
     "oidc-client": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/oidc-client/-/oidc-client-1.10.1.tgz",
-      "integrity": "sha512-/QB5Nl7c9GmT9ir1E+OVY3+yZZnuk7Qa9ZEAJqSvDq0bAyAU9KAgeKipTEfKjGdGLTeOLy9FRWuNpULMkfZydQ==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/oidc-client/-/oidc-client-1.11.0.tgz",
+      "integrity": "sha512-Yxr7/y7y89QY8hq6Mn7BY6zDjlZHnA0znuz5ecFmT6qhQFYPCzK5JHCQPxhZxHMu8hWByyluxkRCeDRRvyXF/w==",
       "requires": {
+        "acorn": "^7.4.0",
         "base64-js": "^1.3.0",
-        "core-js": "^2.6.4",
+        "core-js": "^3.6.5",
         "crypto-js": "^3.1.9-1",
-        "uuid": "^3.3.2"
+        "serialize-javascript": "^4.0.0"
       },
       "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
+        },
         "core-js": {
-          "version": "2.6.11",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
-          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+          "version": "3.8.3",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.8.3.tgz",
+          "integrity": "sha512-KPYXeVZYemC2TkNEkX/01I+7yd+nX3KddKwZ1Ww7SKWdI2wQprSgLmrTddT8nw92AjEklTsPBoSdQBhbI1bQ6Q=="
         }
       }
     },
@@ -9603,12 +9568,11 @@
           "dev": true
         },
         "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "dev": true,
           "requires": {
-            "@types/color-name": "^1.1.1",
             "color-convert": "^2.0.1"
           }
         },
@@ -9653,9 +9617,9 @@
           }
         },
         "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
@@ -10115,9 +10079,9 @@
       },
       "dependencies": {
         "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
           "dev": true,
           "requires": {
             "ms": "^2.1.1"
@@ -10160,9 +10124,9 @@
       }
     },
     "postcss-calc": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.3.tgz",
-      "integrity": "sha512-IB/EAEmZhIMEIhG7Ov4x+l47UaXOS1n2f4FBUk/aKllQhtSCxWhTzn0nJgkqN7fo/jcWySvWTSB6Syk9L+31bA==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.5.tgz",
+      "integrity": "sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==",
       "dev": true,
       "requires": {
         "postcss": "^7.0.27",
@@ -10266,9 +10230,9 @@
       }
     },
     "postcss-load-config": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
-      "integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.2.tgz",
+      "integrity": "sha512-/rDeGV6vMUo3mwJZmeHfEDvwnTKKqQ0S7OHUi/kJvvtx3aWtyWG2/0ZWnzCt2keEclwN6Tf0DST2v9kITdOKYw==",
       "dev": true,
       "requires": {
         "cosmiconfig": "^5.0.0",
@@ -10474,9 +10438,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.32",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
-          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
           "dev": true,
           "requires": {
             "chalk": "^2.4.2",
@@ -10736,14 +10700,15 @@
       }
     },
     "postcss-selector-parser": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
-      "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz",
+      "integrity": "sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==",
       "dev": true,
       "requires": {
         "cssesc": "^3.0.0",
         "indexes-of": "^1.0.1",
-        "uniq": "^1.0.1"
+        "uniq": "^1.0.1",
+        "util-deprecate": "^1.0.2"
       }
     },
     "postcss-svgo": {
@@ -11261,9 +11226,9 @@
       "dev": true
     },
     "querystringify": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.1.1.tgz",
-      "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
       "dev": true
     },
     "quill": {
@@ -11308,7 +11273,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
       "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "dev": true,
       "requires": {
         "safe-buffer": "^5.1.0"
       }
@@ -11399,14 +11363,13 @@
       }
     },
     "read-package-json": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/read-package-json/-/read-package-json-2.1.1.tgz",
-      "integrity": "sha512-dAiqGtVc/q5doFz6096CcnXhpYk0ZN8dEKVkGLU0CsASt8SrgF6SF7OTKAYubfvFhWaqofl+Y8HK19GR8jwW+A==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/read-package-json/-/read-package-json-2.1.2.tgz",
+      "integrity": "sha512-D1KmuLQr6ZSJS0tW8hf3WGpRlwszJOXZ3E8Yd/DNRaM5d+1wVRZdHlpGBLAuovjr28LbWvjpWkBHMxpRGGjzNA==",
       "dev": true,
       "requires": {
         "glob": "^7.1.1",
-        "graceful-fs": "^4.1.2",
-        "json-parse-better-errors": "^1.0.1",
+        "json-parse-even-better-errors": "^2.3.0",
         "normalize-package-data": "^2.0.0",
         "npm-normalize-package-bin": "^1.0.0"
       }
@@ -11450,12 +11413,12 @@
       }
     },
     "readdirp": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.3.0.tgz",
-      "integrity": "sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
+      "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
       "dev": true,
       "requires": {
-        "picomatch": "^2.0.7"
+        "picomatch": "^2.2.1"
       }
     },
     "reflect-metadata": {
@@ -11722,9 +11685,9 @@
       "dev": true
     },
     "run-parallel": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz",
-      "integrity": "sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==",
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.10.tgz",
+      "integrity": "sha512-zb/1OuZ6flOlH6tQyMPUrE3x3Ulxjlo9WIVXR4yVYi4H9UXQaeIsPbLn2R3O3vQCnDKkAl2qHiuocKKX4Tz/Sw==",
       "dev": true
     },
     "run-queue": {
@@ -11824,20 +11787,20 @@
       "dev": true
     },
     "schema-utils": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
-      "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
       "dev": true,
       "requires": {
-        "@types/json-schema": "^7.0.4",
-        "ajv": "^6.12.2",
-        "ajv-keywords": "^3.4.1"
+        "@types/json-schema": "^7.0.5",
+        "ajv": "^6.12.4",
+        "ajv-keywords": "^3.5.2"
       },
       "dependencies": {
         "ajv": {
-          "version": "6.12.4",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz",
-          "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==",
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
           "dev": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
@@ -11991,7 +11954,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
       "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
-      "dev": true,
       "requires": {
         "randombytes": "^2.1.0"
       }
@@ -12563,9 +12525,9 @@
       },
       "dependencies": {
         "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
           "dev": true,
           "requires": {
             "ms": "^2.1.1"
@@ -12736,9 +12698,9 @@
       }
     },
     "spdx-license-ids": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz",
-      "integrity": "sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.7.tgz",
+      "integrity": "sha512-U+MTEOO0AiDzxwFvoa4JVnMV6mZlJKk2sBLt90s7G0Gd0Mlknc7kxEn3nuDPNZRta7O2uy8oLcZLVT+4sqNZHQ==",
       "dev": true
     },
     "spdy": {
@@ -12823,9 +12785,9 @@
       }
     },
     "ssri": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.0.tgz",
-      "integrity": "sha512-aq/pz989nxVYwn16Tsbj1TqFpD5LLrQxHf5zaHuieFV+R0Bbr4y8qUsOA45hXT/N4/9UNXTarBjnjVmjSOVaAA==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
+      "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
       "dev": true,
       "requires": {
         "minipass": "^3.1.1"
@@ -13201,9 +13163,9 @@
       "dev": true
     },
     "tar": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.0.5.tgz",
-      "integrity": "sha512-0b4HOimQHj9nXNEAA7zWwMM91Zhhba3pspja6sQbgTpynOJf+bkjBnfybNYzbpLbnwXnbyB4LOREvlyXLkCHSg==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz",
+      "integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==",
       "dev": true,
       "requires": {
         "chownr": "^2.0.0",
@@ -13302,9 +13264,9 @@
           "dev": true
         },
         "jest-worker": {
-          "version": "26.3.0",
-          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.3.0.tgz",
-          "integrity": "sha512-Vmpn2F6IASefL+DVBhPzI2J9/GJUsqzomdeN+P+dK8/jKxbh8R3BtFnx3FIta7wYlPU62cpJMJQo4kuOowcMnw==",
+          "version": "26.6.2",
+          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
+          "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
           "dev": true,
           "requires": {
             "@types/node": "*",
@@ -13361,9 +13323,9 @@
           "dev": true
         },
         "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
@@ -13405,9 +13367,9 @@
       "dev": true
     },
     "timers-browserify": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.11.tgz",
-      "integrity": "sha512-60aV6sgJ5YEbzUdn9c8kYGIqOubPoUdqQCul3SBAsRCZ40s6Y5cMcrW4dt3/k/EsbLVJNl9n6Vz3fTc+k2GeKQ==",
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
+      "integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==",
       "dev": true,
       "requires": {
         "setimmediate": "^1.0.4"
@@ -13522,9 +13484,9 @@
       }
     },
     "tslib": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
-      "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q=="
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "tslint": {
       "version": "6.1.3",
@@ -13721,9 +13683,9 @@
       },
       "dependencies": {
         "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
           "dev": true,
           "requires": {
             "ms": "^2.1.1"
@@ -13897,7 +13859,8 @@
     "uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+      "dev": true
     },
     "validate-npm-package-license": {
       "version": "3.0.4",
@@ -13954,50 +13917,21 @@
       "dev": true
     },
     "watchpack": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.4.tgz",
-      "integrity": "sha512-aWAgTW4MoSJzZPAicljkO1hsi1oKj/RRq/OJQh2PKI2UKL04c2Bs+MBOB+BBABHTXJpf9mCwHN7ANCvYsvY2sg==",
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
+      "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
       "dev": true,
       "requires": {
         "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
         "neo-async": "^2.5.0",
-        "watchpack-chokidar2": "^2.0.0"
-      },
-      "dependencies": {
-        "chokidar": {
-          "version": "3.4.2",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.2.tgz",
-          "integrity": "sha512-IZHaDeBeI+sZJRX7lGcXsdzgvZqKv6sECqsbErJA4mHWfpRrD8B97kSFN4cQz6nGBGiuFia1MKR4d6c1o8Cv7A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "anymatch": "~3.1.1",
-            "braces": "~3.0.2",
-            "fsevents": "~2.1.2",
-            "glob-parent": "~5.1.0",
-            "is-binary-path": "~2.1.0",
-            "is-glob": "~4.0.1",
-            "normalize-path": "~3.0.0",
-            "readdirp": "~3.4.0"
-          }
-        },
-        "readdirp": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz",
-          "integrity": "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "picomatch": "^2.2.1"
-          }
-        }
+        "watchpack-chokidar2": "^2.0.1"
       }
     },
     "watchpack-chokidar2": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.0.tgz",
-      "integrity": "sha512-9TyfOyN/zLUbA288wZ8IsMZ+6cbzvsNyEzSBp6e/zkifi6xxbl8SmQ/CxQq32k8NNqrdVEVUVSEf56L4rQ/ZxA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz",
+      "integrity": "sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==",
       "dev": true,
       "optional": true,
       "requires": {
@@ -14530,9 +14464,9 @@
           }
         },
         "mime": {
-          "version": "2.4.6",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz",
-          "integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==",
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.0.tgz",
+          "integrity": "sha512-ft3WayFSFUVBuJj7BMLKAQcSlItKtfjsKDDsii3rqFDAZ7t11zRe8ASw/GlmivGwVUYtwkQrxiGGpL6gFvB0ag==",
           "dev": true
         }
       }
@@ -15043,6 +14977,12 @@
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
       "dev": true
     },
+    "yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true
+    },
     "zone.js": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.3.tgz",
diff --git a/package.json b/package.json
index b03fb934..4a72c699 100644
--- a/package.json
+++ b/package.json
@@ -14,40 +14,40 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~9.1.12",
-    "@angular/common": "~9.1.12",
-    "@angular/compiler": "~9.1.12",
-    "@angular/core": "~9.1.12",
-    "@angular/forms": "~9.1.12",
-    "@angular/localize": "^9.1.12",
-    "@angular/platform-browser": "~9.1.12",
-    "@angular/platform-browser-dynamic": "~9.1.12",
-    "@angular/router": "~9.1.12",
-    "@fortawesome/fontawesome-free": "^5.15.1",
+    "@angular/animations": "^9.1.13",
+    "@angular/common": "^9.1.13",
+    "@angular/compiler": "^9.1.13",
+    "@angular/core": "^9.1.13",
+    "@angular/forms": "^9.1.13",
+    "@angular/localize": "^9.1.13",
+    "@angular/platform-browser": "^9.1.13",
+    "@angular/platform-browser-dynamic": "^9.1.13",
+    "@angular/router": "^9.1.13",
+    "@fortawesome/fontawesome-free": "^5.15.2",
     "@ngx-lite/debounce-click": "^0.2.3",
-    "@sentry/browser": "^5.24.2",
-    "@webcomponents/webcomponentsjs": "^2.4.4",
-    "bootstrap": "^4.5.2",
+    "@sentry/browser": "^5.30.0",
+    "@webcomponents/webcomponentsjs": "^2.5.0",
+    "bootstrap": "^4.6.0",
     "dotenv": "^5.0.0",
     "moment": "^2.29.1",
     "ngx-bootstrap": "^5.6.2",
     "ngx-quill": "^11.1.0",
-    "oidc-client": "^1.10.1",
+    "oidc-client": "^1.11.0",
     "quill": "^1.3.7",
     "quill-markdown-shortcuts": "0.0.10",
     "rxjs": "^6.6.3",
     "showdown": "^1.9.1",
-    "tslib": "^1.13.0",
+    "tslib": "^1.14.1",
     "zone.js": "^0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.901.12",
-    "@angular/cli": "^9.1.12",
-    "@angular/compiler-cli": "^9.1.12",
-    "@angular/language-service": "^9.1.12",
-    "@types/jasmine": "^3.5.14",
+    "@angular-devkit/build-angular": "^0.901.13",
+    "@angular/cli": "^9.1.13",
+    "@angular/compiler-cli": "^9.1.13",
+    "@angular/language-service": "^9.1.13",
+    "@types/jasmine": "^3.6.3",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^12.12.62",
+    "@types/node": "^12.19.15",
     "codelyzer": "^5.2.2",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",

From b12fa8cd39d6848d35e1f12d192cae21bae107ec Mon Sep 17 00:00:00 2001
From: Brend Smits <brend_smits@hotmail.com>
Date: Fri, 29 Jan 2021 17:20:01 +0100
Subject: [PATCH 138/141] Only update OIDC Client patch version - 1.11 added
 getEpoch non optional

New OIDC Client adds a non optional getEpochTime that needs to be added to auth server client manager. There is no documentation on this and unsure what it does. Stupid.
---
 package-lock.json                | 27 +++++++++++----------------
 package.json                     |  2 +-
 src/app/services/auth.service.ts | 16 ++++++++--------
 3 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7c6c4970..abfe4ba8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9463,26 +9463,20 @@
       "dev": true
     },
     "oidc-client": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/oidc-client/-/oidc-client-1.11.0.tgz",
-      "integrity": "sha512-Yxr7/y7y89QY8hq6Mn7BY6zDjlZHnA0znuz5ecFmT6qhQFYPCzK5JHCQPxhZxHMu8hWByyluxkRCeDRRvyXF/w==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/oidc-client/-/oidc-client-1.10.1.tgz",
+      "integrity": "sha512-/QB5Nl7c9GmT9ir1E+OVY3+yZZnuk7Qa9ZEAJqSvDq0bAyAU9KAgeKipTEfKjGdGLTeOLy9FRWuNpULMkfZydQ==",
       "requires": {
-        "acorn": "^7.4.0",
         "base64-js": "^1.3.0",
-        "core-js": "^3.6.5",
+        "core-js": "^2.6.4",
         "crypto-js": "^3.1.9-1",
-        "serialize-javascript": "^4.0.0"
+        "uuid": "^3.3.2"
       },
       "dependencies": {
-        "acorn": {
-          "version": "7.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
-        },
         "core-js": {
-          "version": "3.8.3",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.8.3.tgz",
-          "integrity": "sha512-KPYXeVZYemC2TkNEkX/01I+7yd+nX3KddKwZ1Ww7SKWdI2wQprSgLmrTddT8nw92AjEklTsPBoSdQBhbI1bQ6Q=="
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
         }
       }
     },
@@ -11273,6 +11267,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
       "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
       "requires": {
         "safe-buffer": "^5.1.0"
       }
@@ -11954,6 +11949,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
       "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+      "dev": true,
       "requires": {
         "randombytes": "^2.1.0"
       }
@@ -13859,8 +13855,7 @@
     "uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-      "dev": true
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
     },
     "validate-npm-package-license": {
       "version": "3.0.4",
diff --git a/package.json b/package.json
index 4a72c699..0c6b5287 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "moment": "^2.29.1",
     "ngx-bootstrap": "^5.6.2",
     "ngx-quill": "^11.1.0",
-    "oidc-client": "^1.11.0",
+    "oidc-client": "~1.10.1",
     "quill": "^1.3.7",
     "quill-markdown-shortcuts": "0.0.10",
     "rxjs": "^6.6.3",
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
index 11394c46..3576fe38 100644
--- a/src/app/services/auth.service.ts
+++ b/src/app/services/auth.service.ts
@@ -17,13 +17,13 @@
  *
  */
 
-import { Injectable } from '@angular/core';
-import { User, UserManager, UserManagerSettings } from 'oidc-client';
-import { Observable } from 'rxjs';
-import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
-import { User as BackendUser } from 'src/app/models/domain/user';
-import { environment } from 'src/environments/environment';
-import { UserService } from './user.service';
+import {Injectable} from '@angular/core';
+import {User, UserManager, UserManagerSettings} from 'oidc-client';
+import {Observable} from 'rxjs';
+import {BehaviorSubject} from 'rxjs/internal/BehaviorSubject';
+import {User as BackendUser} from 'src/app/models/domain/user';
+import {environment} from 'src/environments/environment';
+import {UserService} from './user.service';
 
 @Injectable({
   providedIn: 'root',
@@ -173,6 +173,6 @@ export function getClientSettings(): UserManagerSettings {
     filterProtocolClaims: true,
     loadUserInfo: true,
     automaticSilentRenew: true,
-    silent_redirect_uri: environment.identitySilentRedirectUri,
+    silent_redirect_uri: environment.identitySilentRedirectUri
   };
 }

From cf4517a4921dfd13ae3b5499dca8cfc83c774bda Mon Sep 17 00:00:00 2001
From: Brend Smits <brend_smits@hotmail.com>
Date: Sun, 31 Jan 2021 10:04:10 +0100
Subject: [PATCH 139/141] Add ability to remove a project.

---
 .../project/details/details.component.html    |  2 +-
 .../project/details/details.component.ts      | 60 ++++++++++---------
 2 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html
index 8ce3fd54..cff58102 100644
--- a/src/app/modules/project/details/details.component.html
+++ b/src/app/modules/project/details/details.component.html
@@ -119,7 +119,7 @@ <h2 class="project-title">{{ project.name }}</h2>
                       class="fas fa-edit"></em>Edit project</a>
                 </ng-container>
                 <ng-container *ngIf="displayDeleteProjectButton">
-                  <a class="cog-tooltip-item" (click)="closeModalAndRedirect('project/delete/'+ project?.id)"><em
+                  <a class="cog-tooltip-item" (click)="onClickRemoveProject()"><em
                       class="fas fa-trash"></em>Delete project</a>
                 </ng-container>
               </ng-template>
diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index 5a6712d5..d576d1c0 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -14,35 +14,36 @@
  *   along with this program, in the LICENSE.md file in the root project directory.
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  */
-import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { environment } from 'src/environments/environment';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Project } from 'src/app/models/domain/project';
-import { ProjectService } from 'src/app/services/project.service';
-import { AuthService } from 'src/app/services/auth.service';
-import { HighlightService } from 'src/app/services/highlight.service';
-import { HighlightAdd } from 'src/app/models/resources/highlight-add';
-import { BsModalService, ModalOptions } from 'ngx-bootstrap/modal';
-import {
-  HighlightFormResult,
-  ModalHighlightFormComponent
-} from 'src/app/modules/project/modal-highlight-form/modal-highlight-form.component';
-import { AlertConfig } from 'src/app/models/internal/alert-config';
-import { AlertType } from 'src/app/models/internal/alert-type';
-import { AlertService } from 'src/app/services/alert.service';
-import { User } from 'src/app/models/domain/user';
-import { EMPTY, Observable, Subject } from 'rxjs';
-import { HighlightByProjectIdService } from 'src/app/services/highlightid.service';
-import { Highlight } from 'src/app/models/domain/highlight';
-import { ModalDeleteGenericComponent } from 'src/app/components/modals/modal-delete-generic/modal-delete-generic.component';
-import { scopes } from 'src/app/models/domain/scopes';
-import { SEOService } from 'src/app/services/seo.service';
-import { LikeService } from 'src/app/services/like.service';
-import { HighlightUpdate } from 'src/app/models/resources/highlight-update';
-import { SafeUrl } from '@angular/platform-browser';
-import { finalize, switchMap } from 'rxjs/operators';
-import { FileRetrieverService } from 'src/app/services/file-retriever.service';
-import { HighlightsModalComponent } from 'src/app/modules/project/highlights-modal/highlights-modal.component';
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import {SafeUrl} from '@angular/platform-browser';
+import {ActivatedRoute, Router} from '@angular/router';
+import {BsModalService, ModalOptions} from 'ngx-bootstrap/modal';
+import {EMPTY, Observable, Subject} from 'rxjs';
+import {finalize, switchMap} from 'rxjs/operators';
+import {ModalDeleteGenericComponent} from 'src/app/components/modals/modal-delete-generic/modal-delete-generic.component';
+import {Highlight} from 'src/app/models/domain/highlight';
+import {Project} from 'src/app/models/domain/project';
+import {scopes} from 'src/app/models/domain/scopes';
+import {User} from 'src/app/models/domain/user';
+import {AlertConfig} from 'src/app/models/internal/alert-config';
+import {AlertType} from 'src/app/models/internal/alert-type';
+import {HighlightAdd} from 'src/app/models/resources/highlight-add';
+import {HighlightUpdate} from 'src/app/models/resources/highlight-update';
+import {HighlightsModalComponent} from 'src/app/modules/project/highlights-modal/highlights-modal.component';
+import
+  {
+    HighlightFormResult,
+    ModalHighlightFormComponent
+  } from 'src/app/modules/project/modal-highlight-form/modal-highlight-form.component';
+import {AlertService} from 'src/app/services/alert.service';
+import {AuthService} from 'src/app/services/auth.service';
+import {FileRetrieverService} from 'src/app/services/file-retriever.service';
+import {HighlightService} from 'src/app/services/highlight.service';
+import {HighlightByProjectIdService} from 'src/app/services/highlightid.service';
+import {LikeService} from 'src/app/services/like.service';
+import {ProjectService} from 'src/app/services/project.service';
+import {SEOService} from 'src/app/services/seo.service';
+import {environment} from 'src/environments/environment';
 
 /**
  * Overview of a single project
@@ -280,6 +281,7 @@ export class DetailsComponent implements OnInit {
         autoDismiss: true,
         type: AlertType.success
       });
+      this.modalService.hide(1);
       this.router.navigate(['project/overview']);
     });
   }

From 9952f7e9757283da4ae62a7e0f58168e22f1977c Mon Sep 17 00:00:00 2001
From: Brend Smits <brend_smits@hotmail.com>
Date: Sun, 31 Jan 2021 10:13:27 +0100
Subject: [PATCH 140/141] Happy linter happy life

---
 .../modules/project/details/details.component.ts    | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts
index d576d1c0..ab80a497 100644
--- a/src/app/modules/project/details/details.component.ts
+++ b/src/app/modules/project/details/details.component.ts
@@ -30,11 +30,8 @@ import {AlertType} from 'src/app/models/internal/alert-type';
 import {HighlightAdd} from 'src/app/models/resources/highlight-add';
 import {HighlightUpdate} from 'src/app/models/resources/highlight-update';
 import {HighlightsModalComponent} from 'src/app/modules/project/highlights-modal/highlights-modal.component';
-import
-  {
-    HighlightFormResult,
-    ModalHighlightFormComponent
-  } from 'src/app/modules/project/modal-highlight-form/modal-highlight-form.component';
+// tslint:disable-next-line: max-line-length
+import {HighlightFormResult, ModalHighlightFormComponent} from 'src/app/modules/project/modal-highlight-form/modal-highlight-form.component';
 import {AlertService} from 'src/app/services/alert.service';
 import {AuthService} from 'src/app/services/auth.service';
 import {FileRetrieverService} from 'src/app/services/file-retriever.service';
@@ -185,7 +182,7 @@ export class DetailsComponent implements OnInit {
       return;
     }
 
-    const modalRef = this.modalService.show(ModalHighlightFormComponent, { initialState: { canGoBack } });
+    const modalRef = this.modalService.show(ModalHighlightFormComponent, {initialState: {canGoBack}});
 
     modalRef.content.confirm
       .pipe(
@@ -436,11 +433,11 @@ export class DetailsComponent implements OnInit {
    * @param highlights the array of highlights to be displayed in the modals
    */
   private handleHighlightResponse(highlights: Highlight[]) {
-    const options = { initialState: { highlights }, class: 'modal-lg highlight-modal' };
+    const options = {initialState: {highlights}, class: 'modal-lg highlight-modal'};
     const highlightsModalComponentRef = this.modalService.show(HighlightsModalComponent, options);
 
     highlightsModalComponentRef.content.selectHighlightToEdit.subscribe(highlight => {
-      const formModalRef = this.modalService.show(ModalHighlightFormComponent, { initialState: { highlight, canGoBack: true } });
+      const formModalRef = this.modalService.show(ModalHighlightFormComponent, {initialState: {highlight, canGoBack: true}});
 
       formModalRef.setClass('highlight-form-modal');
       formModalRef.content.confirm.pipe(

From e47790556e3f23aebbde07905f87ceaf061f94b1 Mon Sep 17 00:00:00 2001
From: Brend Smits <brend_smits@hotmail.com>
Date: Sun, 31 Jan 2021 10:52:05 +0100
Subject: [PATCH 141/141] Upgrade version to 1.0.1-beta and updated Changelog

---
 CHANGELOG.md      | 34 ++++++++++++++++++++--------------
 package-lock.json |  2 +-
 package.json      |  2 +-
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fd66aeaf..c0cb5e4e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,9 +9,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Added SEO & performance check when pushing new code to develop branch [#285](https://github.com/DigitalExcellence/dex-frontend/issues/285)
-- Added a DeX preview with title, description and image for more user-friendliness [#347](https://github.com/DigitalExcellence/dex-frontend/issues/347)
-- Added functionality to like projects [#389](https://github.com/DigitalExcellence/dex-frontend/issues/389)
+### Changed
+
+### Deprecated
+
+
+### Removed
+
+
+### Fixed
+
+### Security
+
+## Release v.1.0.1-beta - 31-01-2021
+
+### Added
+
+- Added SEO & performance check when pushing new code to develop branch - [#285](https://github.com/DigitalExcellence/dex-frontend/issues/285)
+- Added a DeX preview with title, description and image for more user-friendliness - [#347](https://github.com/DigitalExcellence/dex-frontend/issues/347)
+- Added functionality to like projects - [#389](https://github.com/DigitalExcellence/dex-frontend/issues/389)
 - Added update highlight functionality - [#294](https://github.com/DigitalExcellence/dex-frontend/issues/294)
 - Added animations on clickable items and while project pages are loading - [#321](https://github.com/DigitalExcellence/dex-frontend/issues/321)
 - Added animations when user likes (or unlikes) a project - [#414](https://github.com/DigitalExcellence/dex-frontend/issues/414)
@@ -22,13 +38,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Changed the open graph tags in order to show a more appealing website preview - [#405](https://github.com/DigitalExcellence/dex-frontend/issues/405)
 - Changed it so you can now clear query paramters like pagination or search by clicking on 'projects' again - [#401](https://github.com/DigitalExcellence/dex-frontend/issues/401)
-- Changed the design of the filtermenu on project overview page- [#287](https://github.com/DigitalExcellence/dex-frontend/issues/287)
-
-### Deprecated
-
-
-### Removed
-
+- Changed the design of the filtermenu on project overview page - [#287](https://github.com/DigitalExcellence/dex-frontend/issues/287)
 
 ### Fixed
 
@@ -38,10 +48,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed issue where in some cases the alert banner would not disapear automatically - [#392](https://github.com/DigitalExcellence/dex-frontend/issues/392)
 - Fixed issue where opening a modal or long usernames would cause the page to get unaligned - [#400](https://github.com/DigitalExcellence/dex-frontend/issues/400)
 
-### Security
-
-
-
 ## Release v.0.9.0-beta - 09-12-2020
 
 ### Added
diff --git a/package-lock.json b/package-lock.json
index abfe4ba8..a8cfe31f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "dex-frontend",
-  "version": "0.9.0-beta",
+  "version": "1.0.1-beta",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 0c6b5287..e7f4bb40 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dex-frontend",
-  "version": "0.9.0-beta",
+  "version": "1.0.1-beta",
   "scripts": {
     "ng": "ng",
     "config": "ts-node set-env.ts",