Put some icons in the discover panel

src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.html

@@ -2,6 +2,7 @@
     <mat-spinner *ngIf="loading" [color]="'accent'"></mat-spinner>
 </div>
 <div *ngIf="!loading" mat-dialog-content class="background">
+
     <div class="row">
         <div class="col-4">
             <a (click)="openDetails()">
@@ -9,7 +10,37 @@
             </a>
         </div>
         <div class="col-8">
+            <div class="row">
 
+                <div class="col-4 offset-8 text-right" id="icons">
+                    <span *ngIf="movie">
+                        <a *ngIf="movie.plexUrl" class="media-icons" href="{{movie.plexUrl}}" target="_blank">
+                            <i matTooltip=" {{'Search.ViewOnPlex' | translate}}"
+                                class="fa fa-play-circle fa-2x grow"></i>
+                        </a>
+                        <a *ngIf="movie.embyUrl" class="media-icons" href="{{movie.embyUrl}}" target="_blank">
+                            <i matTooltip=" {{'Search.ViewOnEmby' | translate}}"
+                                class="fa fa-play-circle fa-2x grow"></i>
+                        </a>
+                    </span>
+
+                    <span *ngIf="tv">
+                        <a *ngIf="tv.plexUrl" class="media-icons" href="{{tv.plexUrl}}" target="_blank">
+                            <i matTooltip=" {{'Search.ViewOnPlex' | translate}}"
+                                class="fa fa-play-circle fa-2x grow"></i>
+                        </a>
+                        <a *ngIf="tv.embyUrl" class="media-icons" href="{{tv.embyUrl}}" target="_blank">
+                            <i matTooltip=" {{'Search.ViewOnEmby' | translate}}"
+                                class="fa fa-play-circle fa-2x grow"></i>
+                        </a>
+                    </span>
+
+                    <a class="media-icons" (click)="close()">
+                        <i class="fa fa-window-close fa-2x grow"></i>
+                    </a>
+                </div>
+
+            </div>
             <div class="row">
                 <div class="col-12">
                     <h3><strong>{{data.title}}</strong></h3>
@@ -95,15 +126,6 @@
                 'Common.Request' | translate }}</button>
                 </ng-template>
             </span>
-
-            <span *ngIf="movie.available">
-                <a *ngIf="movie.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem"
-                    href="{{movie.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
-            translate}}</a>
-                <a *ngIf="movie.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{movie.embyUrl}}"
-                    target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
-            translate}}</a>
-            </span>
         </div>
 
         <div class="col-md-12" *ngIf="tv">

src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.scss

@@ -7,7 +7,7 @@
 .details {
     padding: 2%;
     border-radius: 10px;
-    background: $background;
+    background: $backgroundTint;
     div.dark & {
         background: $backgroundTint-dark;
     }
@@ -16,7 +16,13 @@
 .details strong {
     font-weight: bold;
 }
+.grow {
+    transition: all .2s ease-in-out;
+}
 
+.grow:hover {
+    transform: scale(1.1);
+}
 h3 strong {
     font-weight: bold;
 }
@@ -29,3 +35,12 @@ h3 strong {
 .btn-spacing {
     margin-right: 1%;
 }
+
+.media-icons {
+    color: $primary;
+    padding: 2%;
+    div.dark & {
+        color: $warn-dark;
+    }
+}
+

src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.ts

@@ -50,7 +50,7 @@ export class DiscoverCardDetailsComponent implements OnInit {
         this.loading = false;
     }
 
-    public onNoClick(): void {
+    public close(): void {
         this.dialogRef.close();
     }
 

src/Ombi/ClientApp/src/app/discover/discover.component.html

@@ -3,11 +3,11 @@
     <div class="row justify-content-md-center top-spacing">
         <div class="btn-group" role="group" aria-label="Basic example">
             <button type="button" (click)="popular()" [ngClass]="popularActive ? 'active-button' : ''" mat-raised-button
-                class="btn" color="primary">Popular</button>
+                class="btn grow" color="primary">Popular</button>
             <button type="button" (click)="trending()" [ngClass]="trendingActive ? 'active-button' : ''"
-                mat-raised-button class="btn" color="primary">Trending</button>
+                mat-raised-button class="btn grow" color="primary">Trending</button>
             <button type="button" (click)="upcoming()" [ngClass]="upcomingActive ? 'active-button' : ''"
-                mat-raised-button class="btn" color="primary">Upcoming</button>
+                mat-raised-button class="btn grow" color="primary">Upcoming</button>
         </div>
     </div>
     <div *ngIf="loadingFlag" class="row justify-content-md-center top-spacing loading-spinner">

src/Ombi/ClientApp/src/app/media-details/media-details.component.scss

@@ -1,5 +1,5 @@
 @import "~@angular/material/theming";
-@import "~styles/Styles.scss";
+@import "~styles/variables.scss";
 //MINE
 @media (max-width: 570px) {
     h1 {

src/Ombi/ClientApp/src/styles/shared.scss

@@ -35,3 +35,11 @@
   .sidenav ::-webkit-scrollbar-track {
     display: none;
   }
+
+  .grow {
+    transition: all .2s ease-in-out;
+}
+.grow:hover {
+    transform: scale(1.1);
+    color: black;
+}