Added button for closing media-overlay #37

src/app/components/media-viewer/media-viewer.component.html

@@ -1,3 +1,6 @@
 <div class="media-viewer-canvas" (click)="close()">
-    <img class="media-viewer-canvas__image" *ngIf="imageUrl" src="{{imageUrl}}"/>
+    <button class="media-viewer-canvas__close" title="close">
+        <fa-icon [icon]="faTimes"></fa-icon>
+    </button>
+    <img class="media-viewer-canvas__image" *ngIf="imageUrl" src="{{imageUrl}}" />
 </div>

src/app/components/media-viewer/media-viewer.component.scss

@@ -1,11 +1,28 @@
+@import "variables";
+@import "mixins";
+
 .media-viewer-canvas {
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.8);
     overflow: hidden;
+    position: relative;
+
+    &__close {
+        @include clearButton;
+        position: absolute;
+        top: 15px;
+        right: 20px;
+        font-size: 24px;
+        color: $font-link-primary; 
+        &:hover {
+            color: $font-link-primary-hover;
+        }
+    }
 
     &__image {
         max-width: 95%;
+        max-height: calc(100% - 120px);
         margin-top: 50vh;
         margin-left: 50vw;
         transform: translate(-50%, -50%);

src/app/components/media-viewer/media-viewer.component.ts

@@ -1,8 +1,9 @@
 import { Component, OnInit, Input, Output } from '@angular/core';
+import { faChevronLeft, faChevronRight, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { Subject } from 'rxjs';
 
 import { OpenMediaEvent } from '../../models/common.model';
 import { Attachment } from '../../services/models/mastodon.interfaces';
-import { Subject } from 'rxjs';
 
 @Component({
     selector: 'app-media-viewer',
@@ -12,6 +13,9 @@ import { Subject } from 'rxjs';
 export class MediaViewerComponent implements OnInit {
     private _mediaEvent: OpenMediaEvent;
 
+    faChevronLeft = faChevronLeft;
+    faChevronRight = faChevronRight;
+    faTimes = faTimes;
     imageUrl: string;
     
     @Input('openedMediaEvent')