* Made the "Play on Plex/Emby/Jellyfin" buttons more visible on the details page

src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.html

@@ -30,19 +30,22 @@
     </a>
 
     <span class="left-seperator" *ngIf="available">
-        <a *ngIf="plexUrl" class="media-icons plex" href="{{plexUrl}}" target="_blank">
-            <i matTooltip=" {{'Search.ViewOnPlex' | translate}}"
-                class="fa fa-play-circle fa-2x grow-social"></i>
-        </a>
 
-        <a *ngIf="embyUrl" class="media-icons emby" href="{{embyUrl}}" target="_blank">
-            <i matTooltip=" {{'Search.ViewOnEmby' | translate}}"
-                class="fa fa-play-circle fa-2x grow-social"></i>
+        <a *ngIf="plexUrl" href="{{plexUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn plex">
+            {{'Search.ViewOnPlex' | translate}} 
+            <i
+            class="fa fa-play-circle fa-2x"></i>
         </a>
 
-        <a *ngIf="jellyfinUrl" class="media-icons jellyfin" href="{{jellyfinUrl}}" target="_blank">
-            <i matTooltip=" {{'Search.ViewOnJellyfin' | translate}}"
-                class="fa fa-play-circle fa-2x grow-social"></i>
+        <a *ngIf="embyUrl" href="{{embyUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn emby">
+            {{'Search.ViewOnEmby' | translate}} 
+            <i
+            class="fa fa-play-circle fa-2x"></i>
         </a>
 
+        <a *ngIf="jellyfinUrl" href="{{jellyfinUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn jellyfinUrl">
+            {{'Search.ViewOnJellyfin' | translate}} 
+            <i
+            class="fa fa-play-circle fa-2x"></i>
+        </a>
     </span>

src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.scss

@@ -1,13 +1,19 @@
 
-
-.media-icons.plex {
-    color: #feb801 !important;
+.viewon-btn {
+    background-color: transparent;
+    margin-top: 7px;
+    text-decoration: none;
 }
 
-.media-icons.emby {
-    color: #52b54a !important;
+.viewon-btn.plex {
+    border: 1px solid #ffd740;
+    color: #ffd740;
 }
-
-.media-icons.jellyfin {
-    color: #00a4dc !important;
+.viewon-btn.emby {
+    border: 1px solid #52b54a;
+    color: #52b54a;
 }
+.viewon-btn.jellyfin {
+    border: 1px solid #00a4dc;
+    color: #00a4dc;
+}

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

@@ -185,7 +185,7 @@
 }
 
 .media-icons {
-    color: mat-color($ombi-app-primary) !important;
+    color: white !important;
     padding: 1%;
 }
 
@@ -200,7 +200,6 @@
 
 
 
-
 .small-middle-container {
     margin: auto;
     width: 95%;

src/Ombi/wwwroot/translations/en.json

@@ -90,9 +90,9 @@
         "NoResults": "Sorry, we didn't find any results!",
         "DigitalDate": "Digital Release: {{date}}",
         "TheatricalRelease": "Theatrical Release: {{date}}",
-        "ViewOnPlex": "View On Plex",
-        "ViewOnEmby": "View On Emby",
-        "ViewOnJellyfin": "View On Jellyfin",
+        "ViewOnPlex": "Play On Plex",
+        "ViewOnEmby": "Play On Emby",
+        "ViewOnJellyfin": "Play On Jellyfin",
         "RequestAdded": "Request for {{title}} has been added successfully",
         "Similar": "Similar",
         "Refine": "Refine",