Re did some of the styling on the movie search page, let me know your thoughts

src/Ombi/ClientApp/app/interfaces/ISearchMovieResult.ts

@@ -26,6 +26,7 @@
     // for the UI
     requestProcessing: boolean;
     processed: boolean;
+    background: any;
 }
 
 export interface ISearchMovieResultContainer {

src/Ombi/ClientApp/app/requests/movierequests.component.ts

@@ -42,6 +42,7 @@ export class MovieRequestsComponent implements OnInit {
                 }
                 this.requestService.searchMovieRequests(this.searchText)
                     .subscribe(m => {
+                        this.setOverrides(m);
                         this.movieRequests = m;
                     });
             });

src/Ombi/ClientApp/app/search/moviesearch.component.html

@@ -27,12 +27,13 @@
         </div>
 
         <div *ngFor="let result of movieResults">
-            <div class="row">
+        
-                <div class="col-sm-2">
+            <div class="row backdrop" [style.background-image]="result.background">
+                <div class="col-sm-2 small-padding">
                     <img *ngIf="result.posterPath"  class="img-responsive poster" src="https://image.tmdb.org/t/p/w150/{{result.posterPath}}" alt="poster">
 
                 </div>
-                <div class="col-sm-8">
+                <div class="col-sm-8 small-padding">
                     <div>
                         <a href="https://www.themoviedb.org/movie/{{result.id}}/" target="_blank">
                             <h4>{{result.title}} ({{result.releaseDate | date: 'yyyy'}})</h4>
@@ -53,14 +54,13 @@
 
 
 
-                        <br/>
                         <br/>
                     </div>
                     <p style="font-size: 0.9rem !important">{{result.overview}}</p>
                 </div>
 
 
-                <div class="col-sm-2">
+                <div class="col-sm-2 small-padding">
 
                     <div *ngIf="result.available">
                         <button style="text-align: right" class="btn btn-success-outline disabled" disabled><i class="fa fa-check"></i> {{ 'Common.Available' | translate }}</button>
@@ -85,7 +85,8 @@
                 </div>
 
             </div>
-            <hr/>
+            <br/>
+            <br/>
         </div>
 
     </div>

src/Ombi/ClientApp/app/search/moviesearch.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from "@angular/core";
+import { DomSanitizer } from "@angular/platform-browser";
 import { TranslateService } from "@ngx-translate/core";
 import "rxjs/add/operator/debounceTime";
 import "rxjs/add/operator/distinctUntilChanged";
@@ -24,7 +25,7 @@ export class MovieSearchComponent implements OnInit {
         
     constructor(private searchService: SearchService, private requestService: RequestService,
                 private notificationService: NotificationService, private authService: AuthService,
-                private readonly translate: TranslateService) {
+                private readonly translate: TranslateService, private sanitizer: DomSanitizer) {
 
         this.searchChanged
             .debounceTime(600) // Wait Xms afterthe last event before emitting last event
@@ -54,7 +55,6 @@ export class MovieSearchComponent implements OnInit {
             result: false,
             errorMessage: "",
         };      
-        
     }
 
     public search(text: any) {
@@ -134,15 +134,23 @@ export class MovieSearchComponent implements OnInit {
    private getExtaInfo() {
 
         this.movieResults.forEach((val, index) => {
+           
+            val.background = this.sanitizer.
+            bypassSecurityTrustStyle
+            ("linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%),url(" + "https://image.tmdb.org/t/p/w1280" + val.backdropPath + ")");
             this.searchService.getMovieInformation(val.id)
-                .subscribe(m => this.updateItem(val, m));
+                .subscribe(m => {
+                    this.updateItem(val, m);
+                });
         });
     }
 
     private updateItem(key: ISearchMovieResult, updated: ISearchMovieResult) {
         const index = this.movieResults.indexOf(key, 0);
         if (index > -1) {
-            this.movieResults[index] = updated;
+            // const originalBackdrop = Object.create(this.movieResults[index]);
+            // this.movieResults[index] = updated;
+            // this.movieResults[index].backdropPath = originalBackdrop;          
         }
     }
     private clearResults() {

src/Ombi/ClientApp/app/settings/customization/customization.component.html

@@ -27,9 +27,9 @@
 
         
         <div class="form-group">
-            <label for="logo" class="control-label">Custom CSS Link</label>
+            <label for="customLink" class="control-label">Custom CSS Link</label>
             <div>
-                <input type="text" [(ngModel)]="settings.customCssLink" class="form-control form-control-custom " value="{{settings.customCssLink}}" tooltipPosition="top" pTooltip="A link to a CSS file, you can use this to use your own styles for Ombi">
+                <input type="text" [(ngModel)]="settings.customCssLink" class="form-control form-control-custom " name="customLink" value="{{settings.customCssLink}}" tooltipPosition="top" pTooltip="A link to a CSS file, you can use this to use your own styles for Ombi">
             </div>
         </div>
 

src/Ombi/ClientApp/styles/base.scss

@@ -760,8 +760,8 @@ textarea {
 }
 
 .poster {
-    box-shadow: 5px 5px 30px #000000;
+    // box-shadow: 3px 3px 15px #000000;
-    border-radius: 30px;
+    border-radius: 5px;
 }
 
 
@@ -833,3 +833,13 @@ a > h4:hover {
 .ui-treetable tbody td {
     padding: 0.25em 3.5em;
 }
+
+.small-padding {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.backdrop{
+     box-shadow: 3px 3px 10px #000000;
+     background-position: center;
+}