Updated the discover cards, there is now a banner with the request status.

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

@@ -1,7 +1,11 @@
-<div class="card-spacing" *ngIf="result">
+<div class="card-spacing box" *ngIf="result">
     <mat-card class="mat-elevation-z8 dark-card grow">
+        <div class="ribbon {{getStatusClass()}} ribbon-top-right"><span>
+            <!-- <i class="ribbon-icon fa {{getAvailbility()}}"></i> -->
+            {{getAvailbilityStatus()}}
+        </span></div>
         <a [routerLink]="result.type === RequestType.movie ? '/details/movie/' + result.id : '/details/tv/' + result.id">
-            <img id="cardImage" mat-card-image src="{{result.posterPath}}" class="card-poster" [ngClass]="getStatusClass()" alt="{{result.title}}">
+            <img id="cardImage" mat-card-image src="{{result.posterPath}}" class="card-poster" alt="{{result.title}}">
         </a>
         <mat-card-content  (click)="openDetails(result);">
 

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

@@ -22,24 +22,6 @@ $card-background: #2b2b2b;
     font-weight: bold;
 }
 
-$border-width: 3px;
-
-.available {
-    border-bottom: $border-width #1DE9B6 solid;
-}
-
-.approved {
-    border-bottom: $border-width #ff5722 solid;
-}
-
-.requested {
-    border-bottom: $border-width #ffd740 solid;
-}
-
-.notrequested {
-    border-bottom: $border-width #303030 solid;
-}
-
 .expand {
     text-align: center;
 }
@@ -84,4 +66,105 @@ small {
         object-fit: cover;
         display: block;
     }
-}
+}
+
+
+
+.box {
+    position: relative;
+    max-width: 600px;
+    box-shadow: 0 0 15px rgba(0,0,0,.1);
+  }
+
+  /* common */
+  .ribbon {
+    width: 118px;
+    height: 96px;
+    overflow: hidden;
+    position: absolute;
+  }
+  .ribbon::before,
+  .ribbon::after {
+    position: absolute;
+    z-index: -1;
+    content: '';
+    display: none;
+    border: 5px solid black;
+  }
+  .ribbon span {
+    position: absolute;
+    display: none;
+    width: 180px;
+    padding: 10px 0;
+    background-color: black;
+    box-shadow: 0 5px 10px rgba(0,0,0,.1);
+    color: #fff;
+    font: 500 11px/1 'Lato', sans-serif;
+    text-shadow: 0 1px 1px rgba(0,0,0,.2);
+    text-transform: uppercase;
+    text-align: center;
+  }
+
+  .ribbon.available span {
+    background-color: #1DE9B6 !important;
+    display: block;
+    color: #2f2f2f;
+  }
+
+  .ribbon.available::before,
+  .ribbon.available::after {
+    border: 5px solid #1DE9B6 !important;
+    display: block;
+  }
+
+  .ribbon.approved span {
+    background-color: #ff5722 !important;
+    display: block;
+    color: #2f2f2f;
+  }
+
+  .ribbon.approved::before,
+  .ribbon.approved::after {
+    border: 5px solid #ff5722 !important;
+    display: block;
+  }
+
+  .ribbon.requested span {
+    background-color: #ffd740 !important;
+    display: block;
+    color: #2f2f2f;
+  }
+
+  .ribbon.requested::before,
+  .ribbon.requested::after {
+    border: 5px solid #ffd740 !important;
+    display: block;
+  }
+
+
+  /* top right*/
+  .ribbon-top-right {
+    top: -10px;
+    right: -10px;
+  }
+  .ribbon-top-right::before,
+  .ribbon-top-right::after {
+    border-top-color: transparent;
+    border-right-color: transparent;
+  }
+  .ribbon-top-right::before {
+    top: 0;
+    left: 40px;
+  }
+  .ribbon-top-right::after {
+    bottom: 18px;
+    right: 0;
+  }
+  .ribbon-top-right span {
+    left: 0px;
+    top: 13px;
+    transform: rotate(45deg);
+  }
+  .ribbon-icon {
+    transform: translateX(0%) translateY(0%) rotate(-45deg);
+  }

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input } from "@angular/core";
 import { IDiscoverCardResult } from "../../interfaces";
-import { RequestType, ISearchTvResult, ISearchMovieResult } from "../../../interfaces";
+import { RequestType } from "../../../interfaces";
 import { SearchV2Service } from "../../../services";
 import { MatDialog } from "@angular/material/dialog";
 import { DiscoverCardDetailsComponent } from "./discover-card-details.component";
@@ -49,7 +49,33 @@ export class DiscoverCardComponent implements OnInit {
         if (this.result.requested) {
             return "requested";
         }
-        return "notrequested";
+        return "";
+    }
+
+    public getAvailbility(): string {
+        if (this.result.available) {
+            return "fa-check-circle";
+        }
+        if (this.result.approved) {
+            return "fa-check-circle";
+        }
+        if (this.result.requested) {
+            return "fa-question-circle";
+        }
+        return "";
+    }
+
+    public getAvailbilityStatus(): string {
+        if (this.result.available) {
+            return "Available";
+        }
+        if (this.result.approved) {
+            return "Approved";
+        }
+        if (this.result.requested) {
+            return "Pending";
+        }
+        return "";
     }
 
     private getExtraMovieInfo() {

src/Ombi/appsettings.Development.json

@@ -4,7 +4,7 @@
     "LogLevel": {
       "Default": "Information",
       "System": "Information",
-      "Microsoft": "Information",
+      "Microsoft": "Warning",
       "System.Net.Http.HttpClient.health-checks": "Information",
       "HealthChecks": "Information"
     }