Merge pull request #3996 from Ombi-app/feautre/poc-discover

Feautre/poc discover
2025-08-14 02:26:55 -07:00 · 2021-01-22 23:31:14 +00:00 · 2021-01-22 23:31:14 +00:00 · 216c59dfc1
commit 216c59dfc1
parent ac5d801366 b9a94da736
52 changed files with 960 additions and 502 deletions
--- a/src/Ombi.Core/Engine/RecentlyAddedEngine.cs
+++ b/src/Ombi.Core/Engine/RecentlyAddedEngine.cs
@ -26,6 +26,8 @@ namespace Ombi.Core.Engine
        private readonly IJellyfinContentRepository _jellyfin;
        private readonly IRepository<RecentlyAddedLog> _recentlyAddedLog;

+        
+
        public IEnumerable<RecentlyAddedMovieModel> GetRecentlyAddedMovies(DateTime from, DateTime to)
        {
            var plexMovies = _plex.GetAll().Where(x => x.Type == PlexMediaTypeEntity.Movie && x.AddedAt > from && x.AddedAt < to);
--- a/src/Ombi/ClientApp/angular.json
+++ b/src/Ombi/ClientApp/angular.json
@ -25,7 +25,7 @@
              "src/assets"
            ],
            "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles/_imports.scss",
              "node_modules/bootstrap/scss/bootstrap.scss",
              "node_modules/primeng/resources/themes/md-dark-deeppurple/theme.css",
--- a/src/Ombi/ClientApp/package.json
+++ b/src/Ombi/ClientApp/package.json
@ -52,8 +52,9 @@
    "please-wait": "^0.0.5",
    "popper.js": "^1.14.3",
    "primeicons": "^4.0.0",
-    "primeng": "^10.0.3",
+    "primeng": "^11.0.0",
    "rxjs": "^6.5.2",
+    "sass-recursive-map-merge": "^1.0.1",
    "spinkit": "^1.2.5",
    "store": "^2.0.12",
    "ts-md5": "^1.2.7",
--- a/src/Ombi/ClientApp/src/app/app.component.html
+++ b/src/Ombi/ClientApp/src/app/app.component.html
@ -170,7 +170,7 @@


 <div>
-    <app-my-nav id="main-container" [showNav]="showNav" [isAdmin]="isAdmin" [applicationName]="applicationName" [applicationLogo]="customizationSettings?.logo" [username]="username" [email]="user?.email " (logoutClick)="logOut();" (themeChange)="onSetTheme($event)">
+    <app-my-nav id="main-container dark" [showNav]="showNav" [isAdmin]="isAdmin" [applicationName]="applicationName" [applicationLogo]="customizationSettings?.logo" [username]="username" [email]="user?.email " (logoutClick)="logOut();">
    </app-my-nav>


--- a/src/Ombi/ClientApp/src/app/app.component.ts
+++ b/src/Ombi/ClientApp/src/app/app.component.ts
@ -85,8 +85,6 @@ export class AppComponent implements OnInit {

    public ngOnInit() {
        window["loading_screen"].finish();
-        const theme = this.storage.get("theme");
-        this.onSetTheme(theme);

        this.settingsService.getCustomization().subscribe(x => {
            this.customizationSettings = x;
@ -131,11 +129,4 @@ export class AppComponent implements OnInit {
        this.authService.logout();
        this.router.navigate(["login"]);
    }
-
-    public onSetTheme(theme: string) {
-        if (theme) {
-            this.overlayContainer.getContainerElement().classList.add(theme);
-            this.componentCssClass = theme;
-        }
-    }
 }
--- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.scss
+++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.scss
@ -42,4 +42,4 @@ h3 strong {
 .overview {
    height:300px;
    overflow-y: auto;
-}
+}
--- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.ts
+++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.ts
@ -77,7 +77,7 @@ export class DiscoverCardDetailsComponent implements OnInit {
                this.messageService.send(result.errorMessage, "Ok");
            }
        } else if (this.data.type === RequestType.tvShow) {
-            this.dialog.open(EpisodeRequestComponent, { width: "700px", data: this.tv,  panelClass: 'modal-panel' })
+            this.dialog.open(EpisodeRequestComponent, { width: "700px", data: {series: this.tv },  panelClass: 'modal-panel' })
        }
        this.loading = false;

--- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html
+++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html
@ -1,18 +1,24 @@
-<div class="card-spacing box" *ngIf="result" [style.display]="hide ? 'none' : 'block'">
-    <mat-card class="mat-elevation-z8 dark-card" [routerLink]="generateDetailsLink()">
-        <div class="ribbon {{getStatusClass()}} ribbon-top-right"><span>
-            {{getAvailbilityStatus()}}
-        </span></div>
-        <a>
-            <img id="cardImage" mat-card-image src="{{result.posterPath}}" class="card-poster" alt="{{result.title}}">
-        </a>
-        <mat-card-content  (click)="openDetails(result);">
+<p-skeleton  *ngIf="!fullyLoaded" width="100%" height="315px"></p-skeleton>

-            <h6 *ngIf="result.title.length <= 20">{{result.title}}</h6>
-            <h6 *ngIf="result.title.length > 20" matTooltip="{{result.title}}">{{result.title | truncate:20}}</h6>
-            <div class="fade-text">
-            <small class="overview-text">{{result.overview | truncate: 75}}</small>
+<div *ngIf="fullyLoaded" class="ombi-card dark-card c" [style.display]="hide ? 'none' : 'block'">
+    <div class="ribbon {{getStatusClass()}} ribbon-top-right"><span>
+        {{getAvailbilityStatus()}}
+    </span></div>
+    <a>
+        <img [routerLink]="generateDetailsLink()" id="cardImage" src="{{result.posterPath}}" class="image"
+            alt="{{result.title}}">
+            <div class="top-left">{{RequestType[result.type] | humanize}}</div>
+        <div class="middle">
+            <div class="title">{{result.title}}</div>
+            <div class="small-text ellipsis">{{result.overview}}</div>
+            <div class="row" *ngIf="!result.available && !result.approved">
+                <div class="col-12">
+                    <button mat-raised-button class="btn-green full-width" (click)="request($event)">
+                        <mat-icon *ngIf="!loading">cloud_download</mat-icon>
+                        <i *ngIf="loading" class="fa fa-spinner fa-pulse fa-2x fa-fw" aria-hidden="true"></i>
+                    </button>
+                </div>
+            </div>
        </div>
-        </mat-card-content>
-    </mat-card>
+    </a>
 </div>
--- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss
+++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss
@ -2,8 +2,9 @@ $ombi-primary:#3f3f3f;
 $card-background: #2b2b2b;

 #cardImage {
-    border-radius: 5px 5px 0px 0px;
-    height: 75%;
+    border-radius: 5px;
+    height: 315px;
+    object-fit:cover;
 }

 .dark-card {
@ -61,8 +62,12 @@ small {
 }

@media (min-width: 2000px) {
+    .ombi-card{
+      height:100%;
+    }
+
    #cardImage {
-        height: 80%;
+        height: 100%;
        object-fit: cover;
        display: block;
    }
@ -77,93 +82,148 @@ small {

  /* common */
  .ribbon {
-    width: 118px;
+    width: 100px;
    height: 96px;
    overflow: hidden;
    position: absolute;
+    text-align:right;
  }
-  .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);
+    background-color: transparent;
    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;
+    text-align: right;
+    font-size: 14px;
  }

-  .ribbon.available span {
-    background-color: #1DE9B6 !important;
-    display: block;
-    color: #2f2f2f;
+  .ribbon.available span{
+    display:block;
  }

-  .ribbon.available::before,
-  .ribbon.available::after {
-    border: 5px solid #1DE9B6 !important;
-    display: block;
+  .ribbon.available span:before{
+    content: '';
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    -moz-border-radius: 7.5px;
+    -webkit-border-radius: 7.5px;
+    border-radius: 7.5px;
+    background-color: #1DE9B6;
  }

  .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.approved span:before{
+    content: '';
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    -moz-border-radius: 7.5px;
+    -webkit-border-radius: 7.5px;
+    border-radius: 7.5px;
+    background-color: #ff5722;
  }

  .ribbon.requested span {
-    background-color: #ffd740 !important;
    display: block;
-    color: #2f2f2f;
  }

-  .ribbon.requested::before,
-  .ribbon.requested::after {
-    border: 5px solid #ffd740 !important;
-    display: block;
+  .ribbon.requested span:before{
+    content: '';
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    -moz-border-radius: 7.5px;
+    -webkit-border-radius: 7.5px;
+    border-radius: 7.5px;
+    background-color: #ffd740;
  }


  /* 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);
+    right: 0px;
+    z-index: 999999;
+  }  
+
+.ombi-card {
+  padding: 5px;
+}
+::ng-deep .p-carousel-indicators {
+  display: none !important;
  }
-  .ribbon-icon {
-    transform: translateX(0%) translateY(0%) rotate(-45deg);
-  }
+
+  
+.image {
+  border-radius: 10px;
+  opacity: 1;
+  display: block;
+  width: 100%;
+  height: auto;
+  transition: .5s ease;
+  backface-visibility: hidden;
+}
+
+
+.middle {
+  transition: .5s ease;
+  opacity: 0;
+  position: absolute;
+  top: 67%;
+  width: 90%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+}
+
+
+.c {
+  position: relative;
+}
+
+.c:hover .image {
+  opacity: 0.3;
+}
+
+.c:hover .middle {
+  opacity: 1;
+}
+
+.small-text {
+  font-size: 11px;
+}
+.title {
+    font-size: 18px;
+  }
+  .top-left {
+    font-size: 14px;
+    position: absolute;
+    text-transform: uppercase;
+    top: 0px;
+    width: 100%;
+    background-color: rgba(15,23,31,0.6);
+    padding-left: 1em;
+    padding-top: 1em;
+    padding-bottom: 0.5em;font-size: 14px;
+    position: absolute;
+    text-transform: uppercase;
+      
+  }
+  .full-width {
+    width: 100%;
+  }
+
+  .ellipsis {
+    display: -webkit-box;
+    -webkit-line-clamp: 6;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
--- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.ts
+++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.ts
@ -1,11 +1,12 @@
 import { Component, OnInit, Input } from "@angular/core";
 import { IDiscoverCardResult } from "../../interfaces";
 import { RequestType } from "../../../interfaces";
-import { SearchService, SearchV2Service } from "../../../services";
+import { MessageService, RequestService, SearchV2Service } from "../../../services";
 import { MatDialog } from "@angular/material/dialog";
 import { DiscoverCardDetailsComponent } from "./discover-card-details.component";
 import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2";
 import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2";
+import { EpisodeRequestComponent } from "../../../shared/episode-request/episode-request.component";

@Component({
    selector: "discover-card",
@ -17,8 +18,14 @@ export class DiscoverCardComponent implements OnInit {
    @Input() public result: IDiscoverCardResult;
    public RequestType = RequestType;
    public hide: boolean;
+    public fullyLoaded = false;
+    public loading: boolean;

-    constructor(private searchService: SearchV2Service, private v1Search: SearchService, private dialog: MatDialog) { }
+    // This data is needed to open the dialog
+    private tvSearchResult: ISearchTvResultV2;
+
+    constructor(private searchService: SearchV2Service, private dialog: MatDialog, private requestService: RequestService,
+        public messageService: MessageService) { }

    public ngOnInit() {
        if (this.result.type == RequestType.tvShow) {
@ -38,16 +45,17 @@ export class DiscoverCardComponent implements OnInit {

    public async getExtraTvInfo() {
        if (this.result.tvMovieDb) {
-            var result = await this.searchService.getTvInfoWithMovieDbId(+this.result.id);
+            this.tvSearchResult = await this.searchService.getTvInfoWithMovieDbId(+this.result.id);
        } else {
-            var result = await this.searchService.getTvInfo(+this.result.id);
+            this.tvSearchResult = await this.searchService.getTvInfo(+this.result.id);
        }
-        if(result.status === "404") {
+        if (!this.tvSearchResult || this.tvSearchResult?.status.length > 0 && this.tvSearchResult?.status === "404") {
            this.hide = true;
            return;
        }
-        this.setTvDefaults(result);
-        this.updateTvItem(result);
+
+        this.setTvDefaults(this.tvSearchResult);
+        this.updateTvItem(this.tvSearchResult);

    }

@ -55,10 +63,13 @@ export class DiscoverCardComponent implements OnInit {
        this.searchService.getArtistInformation(this.result.id.toString()).subscribe(x => {
            if (x.poster) {
                this.result.posterPath = x.poster;
+                this.fullyLoaded = true;
            } else {
                this.searchService.getReleaseGroupArt(this.result.id.toString()).subscribe(art => {
-                    if(art.image) {
+                    if (art.image) {
                        this.result.posterPath = art.image;
+
+                        this.fullyLoaded = true;
                    }
                })
            }
@ -68,8 +79,7 @@ export class DiscoverCardComponent implements OnInit {
    }

    public generateDetailsLink(): string {
-        let link = "";
-        switch(this.result.type){
+        switch (this.result.type) {
            case RequestType.movie:
                return `/details/movie/${this.result.id}`;
            case RequestType.tvShow:
@ -105,12 +115,36 @@ export class DiscoverCardComponent implements OnInit {
        return "";
    }

+    public request(event: any) {
+        event.preventDefault();
+        this.loading = true;
+        switch (this.result.type) {
+            case RequestType.tvShow:
+                const dia = this.dialog.open(EpisodeRequestComponent, { width: "700px", data: { series: this.tvSearchResult }, panelClass: 'modal-panel' });
+                dia.afterClosed().subscribe(x => this.loading = false);
+                return;
+            case RequestType.movie:
+                this.requestService.requestMovie({ theMovieDbId: +this.result.id, languageCode: null, requestOnBehalf: null }).subscribe(x => {
+                    if (x.result) {
+                        this.result.requested = true;
+                        this.messageService.send(x.message, "Ok");
+                    } else {
+                        this.messageService.send(x.errorMessage, "Ok");
+                    }
+                    this.loading = false;
+                });
+                return;
+        }
+    }
+
    private getExtraMovieInfo() {
        if (!this.result.imdbid) {
            this.searchService.getFullMovieDetails(+this.result.id)
                .subscribe(m => {
                    this.updateMovieItem(m);
                });
+        } else {
+            this.fullyLoaded = true;
        }
    }

@ -122,6 +156,8 @@ export class DiscoverCardComponent implements OnInit {
        this.result.rating = updated.voteAverage;
        this.result.overview = updated.overview;
        this.result.imdbid = updated.imdbId;
+
+        this.fullyLoaded = true;
    }


@ -142,6 +178,8 @@ export class DiscoverCardComponent implements OnInit {
        this.result.url = updated.imdbId;
        this.result.overview = updated.overview;
        this.result.approved = updated.approved;
+
+        this.fullyLoaded = true;
    }

 }
--- a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html
+++ b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html
@ -0,0 +1,13 @@
+<div class="right">
+<mat-button-toggle-group name="discoverMode" (change)="toggleChanged($event)" value="{{discoverOptions}}" class="discover-filter-buttons-group">
+    <mat-button-toggle [ngClass]="{'button-active': discoverOptions === DiscoverOption.Combined}" value="{{DiscoverOption.Combined}}" class="discover-filter-button">{{'Discovery.Combined' | translate}}</mat-button-toggle>
+    <mat-button-toggle [ngClass]="{'button-active': discoverOptions === DiscoverOption.Movie}" value="{{DiscoverOption.Movie}}" class="discover-filter-button">{{'Discovery.Movies' | translate}}</mat-button-toggle>
+    <mat-button-toggle [ngClass]="{'button-active': discoverOptions === DiscoverOption.Tv}" value="{{DiscoverOption.Tv}}" class="discover-filter-button">{{'Discovery.Tv' | translate}}</mat-button-toggle>
+  </mat-button-toggle-group>
+</div>
+
+<p-carousel #carousel [numVisible]="10" [numScroll]="10" [page]="0" [value]="discoverResults" [responsiveOptions]="responsiveOptions" (onPage)="newPage()">
+    <ng-template let-result pTemplate="item">
+        <discover-card [result]="result"></discover-card>
+    </ng-template>
+</p-carousel>
--- a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.scss
+++ b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.scss
@ -0,0 +1,98 @@
+@import "~styles/variables.scss";
+
+.ombi-card {
+    padding: 5px;
+}
+::ng-deep .p-carousel-indicators {
+  display: none !important;
+  }
+
+    
+.image {
+    border-radius: 10px;
+    opacity: 1;
+    display: block;
+    width: 100%;
+    height: auto;
+    transition: .5s ease;
+    backface-visibility: hidden;
+  }
+
+  
+.middle {
+    transition: .5s ease;
+    opacity: 0;
+    position: absolute;
+    top: 75%;
+    width: 90%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+  }
+
+  
+  .c {
+    position: relative;
+  }
+  
+.c:hover .image {
+    opacity: 0.3;
+  }
+  
+  .c:hover .middle {
+    opacity: 1;
+  }
+  
+.small-text {
+  font-size: 11px;
+}
+.title {
+  font-size: 16px;
+}
+.top-left {
+  font-size: 14px;
+  position: absolute;
+  top: 8px;
+  left: 16px;
+}
+
+
+.right {
+  text-align: right;
+  margin-top:-61px;
+}
+
+.discover-filter-buttons-group {
+  background: $ombi-background-primary;
+  border: 1px solid $ombi-background-primary-accent;
+  border-radius: 30px;
+  color:#fff;
+  margin-bottom:10px;
+  margin-right: 30px;
+
+  .discover-filter-button{
+    background:inherit;
+    color:inherit;
+    padding:0 0px;
+    border-radius: 30px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{
+    line-height:40px;
+  }
+
+  .button-active{
+    background:$ombi-active;
+  }
+
+
+}
+::ng-deep .discover-filter-button .mat-button-toggle-button:focus{
+  outline:none;
+}
+
+.card-skeleton {
+   padding: 5px;
+}
--- a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.ts
+++ b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.ts
@ -0,0 +1,258 @@
+import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { DiscoverOption, IDiscoverCardResult } from "../../interfaces";
+import { ISearchMovieResult, ISearchTvResult, RequestType } from "../../../interfaces";
+import { SearchV2Service } from "../../../services";
+import { StorageService } from "../../../shared/storage/storage-service";
+import { MatButtonToggleChange } from '@angular/material/button-toggle';
+import { Carousel } from 'primeng/carousel';
+
+export enum DiscoverType {
+    Upcoming,
+    Trending,
+    Popular,
+}
+
+@Component({
+    selector: "carousel-list",
+    templateUrl: "./carousel-list.component.html",
+    styleUrls: ["./carousel-list.component.scss"],
+})
+export class CarouselListComponent implements OnInit {
+
+    @Input() public discoverType: DiscoverType;
+    @ViewChild('carousel', {static: false}) carousel: Carousel;
+
+    public DiscoverOption = DiscoverOption;
+    public discoverOptions: DiscoverOption = DiscoverOption.Combined;
+    public discoverResults: IDiscoverCardResult[] = [];
+    public movies: ISearchMovieResult[] = [];
+    public tvShows: ISearchTvResult[] = [];
+    public responsiveOptions: any;
+    public RequestType = RequestType;
+    public loadingFlag: boolean;
+
+    get mediaTypeStorageKey() {
+        return "DiscoverOptions" + this.discoverType.toString();
+    };
+    private amountToLoad = 14;
+    private currentlyLoaded = 0;
+
+    constructor(private searchService: SearchV2Service,
+        private storageService: StorageService) {
+        this.responsiveOptions = [
+            {
+                breakpoint: '2559px',
+                numVisible: 7,
+                numScroll: 7
+            },
+            {
+                breakpoint: '1024px',
+                numVisible: 4,
+                numScroll: 4
+            },
+            {
+                breakpoint: '768px',
+                numVisible: 2,
+                numScroll: 2
+            },
+            {
+                breakpoint: '560px',
+                numVisible: 1,
+                numScroll: 1
+            }
+        ];
+    }
+
+    public async ngOnInit() {
+        this.currentlyLoaded = 0;
+        const localDiscoverOptions = +this.storageService.get(this.mediaTypeStorageKey);
+        if (localDiscoverOptions) {
+            this.discoverOptions = DiscoverOption[DiscoverOption[localDiscoverOptions]];
+        }
+
+        var moviePromise: Promise<void>;
+        var tvPromise: Promise<void>;
+        switch (this.discoverOptions) {
+            case DiscoverOption.Combined:
+                moviePromise = this.loadMovies();
+                tvPromise = this.loadTv();
+                break;
+            case DiscoverOption.Movie:
+                moviePromise = this.loadMovies();
+                break;
+            case DiscoverOption.Tv:
+                tvPromise = this.loadTv();
+                break;
+        }
+
+        await moviePromise;
+        await tvPromise;
+
+        this.createInitialModel();
+    }
+
+    public async toggleChanged(event: MatButtonToggleChange) {
+        await this.switchDiscoverMode(event.value);
+    }
+
+    public async newPage() {
+        // Note this is using the internal carousel APIs
+        // https://github.com/primefaces/primeng/blob/master/src/app/components/carousel/carousel.ts
+        var end = this.carousel._page >= (this.carousel.totalDots() - 1);
+        if (end) {
+            var moviePromise: Promise<void>;
+            var tvPromise: Promise<void>;
+            switch (this.discoverOptions) {
+                case DiscoverOption.Combined:
+                    moviePromise = this.loadMovies();
+                    tvPromise = this.loadTv();
+                    break;
+                case DiscoverOption.Movie:
+                    moviePromise = this.loadMovies();
+                    break;
+                case DiscoverOption.Tv:
+                    tvPromise = this.loadTv();
+                    break;
+            }
+            await moviePromise;
+            await tvPromise;
+
+            this.createModel();
+        }
+    }
+
+    private async switchDiscoverMode(newMode: DiscoverOption) {
+        if (this.discoverOptions === newMode) {
+            return;
+        }
+        this.loading();
+        this.discoverOptions = newMode;
+        this.storageService.save(this.mediaTypeStorageKey, newMode.toString());
+        await this.ngOnInit();
+        this.finishLoading();
+    }
+
+    private async loadMovies() {
+        switch (this.discoverType) {
+            case DiscoverType.Popular:
+                this.movies = await this.searchService.popularMoviesByPage(this.currentlyLoaded, this.amountToLoad);
+                break;
+            case DiscoverType.Trending:
+                this.movies = await this.searchService.nowPlayingMoviesByPage(this.currentlyLoaded, this.amountToLoad);
+                break;
+            case DiscoverType.Upcoming:
+                this.movies = await this.searchService.upcomingMoviesByPage(this.currentlyLoaded, this.amountToLoad);
+                break
+        }
+        this.currentlyLoaded += this.amountToLoad;
+    }
+
+    private async loadTv() {
+        switch (this.discoverType) {
+            case DiscoverType.Popular:
+                this.tvShows = await this.searchService.popularTvByPage(this.currentlyLoaded, this.amountToLoad);
+                break;
+            case DiscoverType.Trending:
+                this.tvShows = await this.searchService.trendingTvByPage(this.currentlyLoaded, this.amountToLoad);
+                break;
+            case DiscoverType.Upcoming:
+                this.tvShows = await this.searchService.anticipatedTvByPage(this.currentlyLoaded, this.amountToLoad);
+                break
+        }
+        this.currentlyLoaded += this.amountToLoad;
+    }
+
+    private createInitialModel() {
+        this.clear();
+        this.createModel();
+    }
+
+    private createModel() {
+        const tempResults = <IDiscoverCardResult[]>[];
+
+        switch (this.discoverOptions) {
+            case DiscoverOption.Combined:
+                tempResults.push(...this.mapMovieModel());
+                tempResults.push(...this.mapTvModel());
+                this.shuffle(tempResults);
+                break;
+            case DiscoverOption.Movie:
+                tempResults.push(...this.mapMovieModel());
+                break;
+            case DiscoverOption.Tv:
+                tempResults.push(...this.mapTvModel());
+                break;
+        }
+
+        this.discoverResults.push(...tempResults);
+        this.carousel.ngAfterContentInit();
+
+        this.finishLoading();
+    }
+
+    private mapMovieModel(): IDiscoverCardResult[] {
+        const tempResults = <IDiscoverCardResult[]>[];
+        this.movies.forEach(m => {
+            tempResults.push({
+                available: m.available,
+                posterPath: m.posterPath ? `https://image.tmdb.org/t/p/w500/${m.posterPath}` : "../../../images/default_movie_poster.png",
+                requested: m.requested,
+                title: m.title,
+                type: RequestType.movie,
+                id: m.id,
+                url: `http://www.imdb.com/title/${m.imdbId}/`,
+                rating: m.voteAverage,
+                overview: m.overview,
+                approved: m.approved,
+                imdbid: m.imdbId,
+                denied: false,
+                background: m.backdropPath
+            });
+        });
+        return tempResults;
+    }
+
+    private mapTvModel(): IDiscoverCardResult[] {
+        const tempResults = <IDiscoverCardResult[]>[];
+        this.tvShows.forEach(m => {
+            tempResults.push({
+                available: m.available,
+                posterPath: "../../../images/default_tv_poster.png",
+                requested: m.requested,
+                title: m.title,
+                type: RequestType.tvShow,
+                id: m.id,
+                url: undefined,
+                rating: +m.rating,
+                overview: m.overview,
+                approved: m.approved || m.partlyAvailable,
+                imdbid: m.imdbId,
+                denied: false,
+                background: m.background
+            });
+        });
+        return tempResults;
+    }
+
+    private clear() {
+        this.discoverResults = [];
+    }
+
+    private shuffle(discover: IDiscoverCardResult[]): IDiscoverCardResult[] {
+        for (let i = discover.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [discover[i], discover[j]] = [discover[j], discover[i]];
+        }
+        return discover;
+    }
+
+    private loading() {
+        this.loadingFlag = true;
+    }
+
+    private finishLoading() {
+        this.loadingFlag = false;
+    }
+
+
+}
--- a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html
+++ b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html
@ -1,42 +1,27 @@
 <div class="small-middle-container">
-    <div class="row justify-content-end">
-        <div class="btn-group col-12 col-md-3 small-space discover-layout"role="group">
-            <mat-button-toggle-group *ngIf="displayOption">
-                <mat-button-toggle [ngClass]="displayOption === DisplayOption.Card ? 'mat-button-toggle-checked' : ''" (click)="changeView(DisplayOption.Card)"><mat-icon>dashboard</mat-icon></mat-button-toggle>
-                <mat-button-toggle [ngClass]="displayOption === DisplayOption.List ? 'mat-button-toggle-checked' : ''" (click)="changeView(DisplayOption.List)"><mat-icon>calendar_view_day</mat-icon></mat-button-toggle>
-              </mat-button-toggle-group>
-        </div>
-    </div>
-    <div class="row justify-content-md-center small-space">
-        <div class="btn-group" role="group">
-            <button type="button" (click)="switchDiscoverMode(DiscoverOption.Movie)" [attr.color]="popularActive ? 'accent' : 'primary'" [ngClass]="discoverOptions === DiscoverOption.Movie ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Discovery.Movies' | translate}}</button>
-            <button type="button" (click)="switchDiscoverMode(DiscoverOption.Combined)" [attr.color]="trendingActive ? 'accent' : 'primary'" [ngClass]="discoverOptions === DiscoverOption.Combined ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow"
-                color="primary">{{'Discovery.Combined' | translate}}</button>
-            <button type="button" (click)="switchDiscoverMode(DiscoverOption.Tv)" [attr.color]="upcomingActive ? 'accent' : 'primary'" [ngClass]="discoverOptions === DiscoverOption.Tv ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow" color="primary">{{'Discovery.Tv' | translate}}</button>
-        </div>
-
-    </div>
-
-
-    <div class="row justify-content-md-center small-space">
-        <div class="btn-group" role="group" aria-label="Basic example">
-            <button type="button" (click)="popular()" [attr.color]="popularActive ? 'accent' : 'primary'" [ngClass]="popularActive ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Discovery.PopularTab' | translate}}</button>
-            <button type="button" (click)="trending()" [attr.color]="trendingActive ? 'accent' : 'primary'" [ngClass]="trendingActive ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow" color="primary">{{'Discovery.TrendingTab' | translate}}</button>
-            <button type="button" (click)="upcoming()" [attr.color]="upcomingActive ? 'accent' : 'primary'" [ngClass]="upcomingActive ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow" color="primary">{{'Discovery.UpcomingTab' | translate}}</button>
-        </div>
-    </div>
-
-    <div *ngIf="discoverResults && displayOption === DisplayOption.Card" class="row full-height discoverResults col" infiniteScroll [fromRoot]="false" [infiniteScrollDistance]="0.5" [infiniteScrollDisabled]="scrollDisabled" (scrolled)="onScroll()">
-        <div class="col-xl-2 col-lg-3 col-md-4 col-12 col-sm-6 small-padding" *ngFor="let result of discoverResults">
-            <discover-card [result]="result"></discover-card>
-        </div>
-    </div>
-    <div *ngIf="discoverResults && displayOption == DisplayOption.List" class="row full-height discoverResults col" infiniteScroll [fromRoot]="true" [infiniteScrollDistance]="1" [infiniteScrollDisabled]="scrollDisabled" (scrolled)="onScroll()">
-        <div class="col-12 small-padding" *ngFor="let result of discoverResults">
-            <discover-grid [result]="result"></discover-grid>
-        </div>
-    </div>
    <div *ngIf="loadingFlag" class="row justify-content-md-center top-spacing loading-spinner">
-        <mat-spinner [color]="'accent'"></mat-spinner>
    </div>
-</div>
+    <div class="section">
+        <h2>Popular</h2>
+        <div>
+            <carousel-list [discoverType]="DiscoverType.Popular"></carousel-list>
+        </div>
+
+    </div>
+
+    <div class="section">
+        <h2>Trending</h2>
+        <div >
+            <carousel-list [discoverType]="DiscoverType.Trending"></carousel-list>
+        </div>
+
+    </div>
+
+    <div class="section">
+        <h2>Upcoming</h2>
+        <div>
+            <carousel-list [discoverType]="DiscoverType.Upcoming"></carousel-list>
+        </div>
+
+    </div>
+</div>
--- a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss
+++ b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss
@ -1,210 +1,12 @@
-.full-height {
-    height: 100%;
+.section {
+    margin: 20px;
 }
-
-.small-middle-container {
-    margin: auto;
-    width: 85%;
-}
-
-.small-padding {
-    padding-left: 20px;
-    padding-right: 20px;
-    margin-bottom: 28px;
-}
-
-.loading-spinner {
-    margin: 10%;
-}
-
-#scroller {
-    height: 100vh;
-    overflow: scroll;
-}
-
-.small-space {
-    padding-top: 1%;
-}
-
-.discover-layout {
-    position: absolute;
-    float: right;
-    margin-right: 36px;
-    z-index: 1;
-}
-
-::ng-deep .mat-card-image {
-    height: 75%;
-    object-fit: cover;
-    display: block;
-}
-
-.card-spacing {
-    height: 100%;
-}
-
-.mat-card-content h6 {
-    overflow: hidden;
-    white-space: nowrap;
-    font-weight: 500;
-    font-size: 1.1rem;
-}
-
-@media (min-width: 300px) {
-
-    .small-middle-container {
-        margin: inherit;
+::ng-deep .p-carousel-indicators {
+    display: none !important;
    }

-    .col-xl-2 {
-        flex: 0 0 100%;
-        max-width: 100%;
-        min-width: 100%;
-    }
-
-    .btn-group {
-        width: 100%;
-    }
-
-    mat-button-base {
-        width: 100%;
-    }
-
-    .col {
-        padding-right: 10px !important;
-        padding-left: 10px !important;
-    }
-
-    .row {
-        margin-left: 0px;
-    }
-
-    .small-padding {
-        padding-left: 5px !important;
-        padding-right: 0px !important;
-        height: 40em;
-    }
-
-    ::ng-deep .mat-card-image {
-        height: 85% !important;
-    }
-}
-
-@media (min-width: 600px) {
-    .justify-content-md-center {
-        justify-content: center !important;
-    }
-
-    .small-middle-container {
-        width: auto;
-    }
-
-    .btn-group {
-        width: auto;
-    }
-
-    mat-button-base {
-        width: auto;
-    }
-
-    ::ng-deep .mat-card-image {
-        height: 75% !important;
-    }
-}
-
-@media (min-width: 660px) {
-    .col-xl-2 {
-        flex: 0 0 50%;
-        max-width: 50%;
-        min-width: 50%;
-    }
-
-    .col {
-        padding-right: 15px !important;
-        padding-left: 15px !important;
-    }
-
-    .small-padding {
-        padding-left: 20px !important;
-        padding-right: 20px !important;
-        height: auto;
-    }
-
-    .row {
-        margin-left: 0px;
-    }
-
-    .small-middle-container {
-        width: auto;
-        overflow: hidden;
-    }
-
-    .btn-group {
-        width: auto;
-    }
-
-    mat-button-base {
-        width: auto;
-    }
-}
-
-@media (min-width: 870px) {
-    .col-xl-2 {
-        flex: 0 0 33.33333%;
-        max-width: 33.33333%;
-        min-width: 33.33333%;
-    }
-}
-
-@media (min-width: 1100px) {
-    .col-xl-2 {
-        flex: 0 0 20%;
-        max-width: 25%;
-        min-width: 25%;
-    }
-}
-
-@media (min-width: 1300px) {
-    .col-xl-2 {
-        flex: 0 0 18%;
-        max-width: 20%;
-        min-width: 20%;
-    }
-}
-
-@media (min-width: 1600px) {
-    .col-xl-2 {
-        flex: 0 0 16.66666667%;
-        max-width: 16.66666667%;
-        min-width: 16.66666667%;
-    }
-}
-
-@media (min-width: 1900px) {
-    .col-xl-2 {
-        flex: 0 0 14.285713%;
-        max-width: 14.285713%;
-        min-width: 14.285713%;
-    }
-}
-
-@media (min-width: 2200px) {
-    .col-xl-2 {
-        flex: 0 0 12.5%;
-        max-width: 12.5%;
-        min-width: 12.5%;
-    }
-}
-
-@media (min-width: 2500px) {
-    .col-xl-2 {
-        flex: 0 0 11.111111%;
-        max-width: 11.111111%;
-        min-width: 11.111111%;
-    }
-}
-@media (max-width: 420px) {
-    .discover-layout{
-        display: none;
-    }
+h2{
+    margin-top:40px;
+    margin-left:40px;
+    font-size: 24px;
 }
--- a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts
+++ b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts
@ -5,6 +5,8 @@ import { IDiscoverCardResult, DiscoverOption, DisplayOption } from "../../interf
 import { trigger, transition, style, animate } from "@angular/animations";
 import { StorageService } from "../../../shared/storage/storage-service";
 import { DOCUMENT } from "@angular/common";
+import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2";
+import { DiscoverType } from "../carousel-list/carousel-list.component";

@Component({
    templateUrl: "./discover.component.html",
@ -20,11 +22,16 @@ import { DOCUMENT } from "@angular/common";
 })
 export class DiscoverComponent implements OnInit {

+    public upcomingMovies: IDiscoverCardResult[] = [];
+    public trendingMovies: IDiscoverCardResult[] = [];
+
+
    public discoverResults: IDiscoverCardResult[] = [];
    public movies: ISearchMovieResult[] = [];
    public tvShows: ISearchTvResult[] = [];

    public discoverOptions: DiscoverOption = DiscoverOption.Combined;
+    public DiscoverType = DiscoverType;
    public DiscoverOption = DiscoverOption;
    public displayOption: DisplayOption = DisplayOption.Card;
    public DisplayOption = DisplayOption;
@ -45,6 +52,8 @@ export class DiscoverComponent implements OnInit {
    private mediaTypeStorageKey = "DiscoverOptions";
    private displayOptionsKey = "DiscoverDisplayOptions";

+
+
    constructor(private searchService: SearchV2Service,
        private storageService: StorageService,
        @Inject(DOCUMENT) private container: Document) { }
@ -52,35 +61,38 @@ export class DiscoverComponent implements OnInit {

    public async ngOnInit() {
        this.loading()
-        const localDiscoverOptions = +this.storageService.get(this.mediaTypeStorageKey);
-        if (localDiscoverOptions) {
-            this.discoverOptions = DiscoverOption[DiscoverOption[localDiscoverOptions]];
-        }
-        const localDisplayOptions = +this.storageService.get(this.displayOptionsKey);
-        if (localDisplayOptions) {
-            this.displayOption = DisplayOption[DisplayOption[localDisplayOptions]];
-        }
-        this.scrollDisabled = true;
-        switch (this.discoverOptions) {
-            case DiscoverOption.Combined:
-                this.movies = await this.searchService.popularMoviesByPage(0, this.amountToLoad);
-                this.tvShows = await this.searchService.popularTvByPage(0, this.amountToLoad);
-                break;
-            case DiscoverOption.Movie:
-                this.movies = await this.searchService.popularMoviesByPage(0, this.amountToLoad);
-                break;
-            case DiscoverOption.Tv:
-                this.tvShows = await this.searchService.popularTvByPage(0, this.amountToLoad);
-                break;
-        }
+        // this.upcomingMovies = this.mapTvModel(await this.searchService.popularTvByPage(0, 14));
+        // this.trendingMovies = this.mapMovieModel(await this.searchService.popularMoviesByPage(0, 14));
+this.finishLoading();
+        // const localDiscoverOptions = +this.storageService.get(this.mediaTypeStorageKey);
+        // if (localDiscoverOptions) {
+        //     this.discoverOptions = DiscoverOption[DiscoverOption[localDiscoverOptions]];
+        // }
+        // const localDisplayOptions = +this.storageService.get(this.displayOptionsKey);
+        // if (localDisplayOptions) {
+        //     this.displayOption = DisplayOption[DisplayOption[localDisplayOptions]];
+        // }
+        // this.scrollDisabled = true;
+        // switch (this.discoverOptions) {
+        //     case DiscoverOption.Combined:
+        //         this.movies = await this.searchService.popularMoviesByPage(0, this.amountToLoad);
+        //         this.tvShows = await this.searchService.popularTvByPage(0, this.amountToLoad);
+        //         break;
+        //     case DiscoverOption.Movie:
+        //         this.movies = await this.searchService.popularMoviesByPage(0, this.amountToLoad);
+        //         break;
+        //     case DiscoverOption.Tv:
+        //         this.tvShows = await this.searchService.popularTvByPage(0, this.amountToLoad);
+        //         break;
+        // }

-        this.contentLoaded = this.amountToLoad;
+        // this.contentLoaded = this.amountToLoad;

-        this.createInitialModel();
-        this.scrollDisabled = false;
-        if (!this.containerHasScrollBar()) {
-            await this.onScroll();
-        }
+        // this.createInitialModel();
+        // this.scrollDisabled = false;
+        // if (!this.containerHasScrollBar()) {
+        //     await this.onScroll();
+        // }
    }

    public async onScroll() {
@ -236,18 +248,18 @@ export class DiscoverComponent implements OnInit {
    private createModel() {
        const tempResults = <IDiscoverCardResult[]>[];

-        switch (this.discoverOptions) {
-            case DiscoverOption.Combined:
-                tempResults.push(...this.mapMovieModel());
-                tempResults.push(...this.mapTvModel());
-                break;
-            case DiscoverOption.Movie:
-                tempResults.push(...this.mapMovieModel());
-                break;
-            case DiscoverOption.Tv:
-                tempResults.push(...this.mapTvModel());
-                break;
-        }
+        // switch (this.discoverOptions) {
+        //     case DiscoverOption.Combined:
+        //         tempResults.push(...this.mapMovieModel());
+        //         tempResults.push(...this.mapTvModel());
+        //         break;
+        //     case DiscoverOption.Movie:
+        //         tempResults.push(...this.mapMovieModel());
+        //         break;
+        //     case DiscoverOption.Tv:
+        //         tempResults.push(...this.mapTvModel());
+        //         break;
+        // }

        this.shuffle(tempResults);
        this.discoverResults.push(...tempResults);
@ -255,9 +267,9 @@ export class DiscoverComponent implements OnInit {
        this.finishLoading();
    }

-    private mapMovieModel(): IDiscoverCardResult[] {
+    private mapMovieModel(movies: ISearchMovieResult[]): IDiscoverCardResult[] {
        const tempResults = <IDiscoverCardResult[]>[];
-        this.movies.forEach(m => {
+        movies.forEach(m => {
            tempResults.push({
                available: m.available,
                posterPath: m.posterPath ? `https://image.tmdb.org/t/p/w500/${m.posterPath}` : "../../../images/default_movie_poster.png",
@ -277,9 +289,9 @@ export class DiscoverComponent implements OnInit {
        return tempResults;
    }

-    private mapTvModel(): IDiscoverCardResult[] {
+    private mapTvModel(tv: ISearchTvResult[]): IDiscoverCardResult[] {
        const tempResults = <IDiscoverCardResult[]>[];
-        this.tvShows.forEach(m => {
+        tv.forEach(m => {
            tempResults.push({
                available: m.available,
                posterPath: "../../../images/default_tv_poster.png",
--- a/src/Ombi/ClientApp/src/app/discover/components/index.ts
+++ b/src/Ombi/ClientApp/src/app/discover/components/index.ts
@ -9,6 +9,7 @@ import { SearchService, RequestService } from "../../services";
 import { MatDialog } from "@angular/material/dialog";
 import { DiscoverGridComponent } from "./grid/discover-grid.component";
 import { DiscoverSearchResultsComponent } from "./search-results/search-results.component";
+import { CarouselListComponent } from "./carousel-list/carousel-list.component";


 export const components: any[] = [
@ -19,6 +20,7 @@ export const components: any[] = [
    DiscoverActorComponent,
    DiscoverGridComponent,
    DiscoverSearchResultsComponent,
+    CarouselListComponent,
 ];


--- a/src/Ombi/ClientApp/src/app/discover/discover.module.ts
+++ b/src/Ombi/ClientApp/src/app/discover/discover.module.ts
@ -5,6 +5,8 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';

 import { SharedModule } from "../shared/shared.module";
 import { PipeModule } from "../pipes/pipe.module";
+import { CarouselModule } from 'primeng/carousel';
+import { SkeletonModule } from 'primeng/skeleton';

 import * as fromComponents from './components';

@ -14,8 +16,10 @@ import * as fromComponents from './components';
        RouterModule.forChild(fromComponents.routes),
        SharedModule,
        PipeModule,
+        CarouselModule,
        MatButtonToggleModule,
        InfiniteScrollModule,
+        SkeletonModule,
    ],
    declarations: [
        ...fromComponents.components
--- a/src/Ombi/ClientApp/src/app/login/login.component.scss
+++ b/src/Ombi/ClientApp/src/app/login/login.component.scss
@ -231,4 +231,4 @@ div.bg {
 }
 .login-card {
    background: #424242;
-}
+}
--- a/src/Ombi/ClientApp/src/app/login/login.component.ts
+++ b/src/Ombi/ClientApp/src/app/login/login.component.ts
@ -73,7 +73,7 @@ export class LoginComponent implements OnDestroy, OnInit {
            });

        this.form = this.fb.group({
-            username: ["", [Validators.required]],
+            username: [""],
            password: [""],
            rememberMe: [false],
        });
--- a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
@ -28,8 +28,6 @@
                    <span *ngIf="!movie.available">
            <span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>

-            <button *ngIf="movie.belongsToCollection" [routerLink]="'/discover/collection/' + movie.belongsToCollection.id" mat-raised-button class="btn-spacing"><i class="fa fa-list"></i> {{'MediaDetails.ViewCollection' | translate}}</button>
-
                    <ng-template #requestedBtn>
                        <button mat-raised-button *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied" class="btn-spacing" color="warn" [disabled]><i class="fa fa-check"></i>
                {{ 'Common.Requested' | translate }}</button>
@ -64,6 +62,8 @@
                    <button mat-raised-button class="btn-spacing" color="danger" (click)="issue()">
            <i class="fa fa-exclamation"></i> {{
                'Requests.ReportIssue' | translate }}</button>
+                <button *ngIf="movie.belongsToCollection" [routerLink]="'/discover/collection/' + movie.belongsToCollection.id" mat-raised-button class="btn-spacing"><i class="fa fa-list"></i> {{'MediaDetails.ViewCollection' | translate}}</button>
+
                </div>

                <!-- Setting/Configuration admin area -->
--- a/src/Ombi/ClientApp/src/app/media-details/components/tv/panels/tv-requests/tv-requests-panel.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/tv/panels/tv-requests/tv-requests-panel.component.html
@ -50,7 +50,7 @@
              <span *ngIf="request.denied" id="deniedLabel" [translate]="'Common.Denied'">
              </span>
              <span *ngIf="!request.denied && ep.available" id="availableLabel" [translate]="'Common.Available'"></span>
-              <span *ngIf="!request.denied &&ep.approved && !ep.available" class="label label-info" id="processingRequestLabel"
+              <span *ngIf="!request.denied && ep.approved && !ep.available" class="label label-info" id="processingRequestLabel"
                [translate]="'Common.ProcessingRequest'"></span>
              <div *ngIf="!request.denied && !ep.approved">
                <div *ngIf="!ep.available"><span class="label label-warning" id="pendingApprovalLabel" [translate]="'Common.PendingApproval'"></span></div>
--- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
+++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
@ -3,7 +3,7 @@
        [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
        [opened]="!(isHandset$ | async)">

-        <mat-toolbar>{{applicationName}}</mat-toolbar>
+        <mat-toolbar class="application-name">{{applicationName}}</mat-toolbar>

        <div class="outer-profile">
            <div class="profile-img-container">
@ -42,11 +42,6 @@
                </div>
            </span>

-            <a id="nav-theme" mat-list-item (click)="switchTheme()">
-                <mat-icon *ngIf="theme === 'dark'" aria-label="Side nav toggle icon">wb_incandescent</mat-icon>
-                <mat-icon *ngIf="theme === 'light'" aria-label="Side nav toggle icon">brightness_4</mat-icon>
-                &nbsp;{{ 'NavigationBar.ChangeTheme' | translate }}
-            </a>
            <a id="nav-logout" mat-list-item [routerLinkActive]="'active-list-item'"
                aria-label="Toggle sidenav" (click)="logOut();">
                <mat-icon aria-label="Side nav toggle icon">exit_to_app</mat-icon>
@ -65,14 +60,14 @@
        </div>
    </mat-sidenav>

-    <mat-sidenav-content>
-        <mat-toolbar color="primary">
+    <mat-sidenav-content class="content-container">
+        <mat-toolbar color="primary" class="top-bar-container">
            <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
                *ngIf="isHandset$ | async">
                <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
            </button>

-            <div class="col-8 col-lg-10">
+            <div class="col-8 col-lg-10 top-search-bar">
                <span class="justify-content-center align-items-center">
                    <!-- Search Bar -->
                    <div>
@ -80,7 +75,7 @@
                    </div>
                </span>
            </div>
-            <div class="col-2">
+            <div class="col-2 top-filter">
                <button mat-icon-button [matMenuTriggerFor]="filterMenu">
                    <mat-icon>filter_alt</mat-icon>
                </button>
--- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
+++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
@ -5,10 +5,6 @@
    overflow:auto;
 }

-.sidenav {
-    width: 220px;
-}
-
 .sidenav .mat-toolbar {
    background: inherit;
 }
@ -44,11 +40,6 @@
    padding: 0px 5px;
 }

-.active-list-item {
-    background: $accent !important;
-    color:white;
-}
-
 ::ng-deep .dark .active-list-item {
    background: $accent-dark !important;
    color:black !important;
@ -100,16 +91,9 @@
 }

 .profile-img img {
-    border-radius: 6px;
-    box-shadow: 4px 3px 6px 0 rgba(0,0,0,.2);
    width: 45px;
 }

-.outer-profile {
-    background-color: #303030;
-    box-shadow: inset 0 0 3px #000000;
-    padding: 1px;
-}

 .full {
    width: 100%;
@ -119,4 +103,75 @@
    bottom: 0;
    left: 0;
    text-align: center;
+}
+// New CSS for new style //
+
+.sidenav-container .sidenav{
+    background: $ombi-background-accent;
+    color:#FFF;
+    font-family: 'Montserrat', sans-serif;
+
+    .application-name{
+        font-family: 'Montserrat', sans-serif;
+        text-transform: uppercase;
+        color: $ombi-active;
+        align-items:center;
+        justify-content: center;
+        font-weight: 700;
+        font-size:24px;
+        padding:40px 20px;
+        height:auto;
+    }
+
+    .outer-profile {
+        background: inherit;
+        box-shadow:none;
+    }
+
+    .mat-list-item{
+        color:#FFF;
+        font-family:Roboto, sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        padding:10px 20px;
+        height:auto;
+        width:20rem;
+        margin-bottom:1rem;
+    }
+    
+    .active-list-item{
+        color:$ombi-background-accent;
+        background: $ombi-active;
+        border-radius:0px 30px 30px 0px;
+        padding:10px 20px;
+        height:auto;
+        width:20rem;
+    }
+}
+
+.outer-profile .profile-img-container {
+    background: inherit;
+}
+
+.content-container{
+    background: $ombi-background-primary;
+    color:#FFF;
+
+    .top-bar-container{
+        background: $ombi-background-primary;
+        color:$ombi-background-primary-accent;
+    }
+
+}
+
+.top-search-bar{
+    margin-left: 30px;
+}
+
+::ng-deep .mat-toolbar-row, .mat-toolbar-single-row{
+    height:auto;
+}
+
+.top-search-bar{
+    height:84px;
 }
--- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts
+++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts
@ -37,7 +37,6 @@ export class MyNavComponent implements OnInit {
  @Input() public isAdmin: string;
  @Input() public email: string;
  @Output() public logoutClick = new EventEmitter();
-  @Output() public themeChange = new EventEmitter<string>();
  public theme: string;
  public issuesEnabled: boolean = false;
  public navItems: INavBar[];
@ -98,20 +97,6 @@ export class MyNavComponent implements OnInit {
    this.logoutClick.emit();
  }

-  public switchTheme() {
-    if (this.theme) {
-      let newTheme = "";
-      if (this.theme === "dark") {
-        newTheme = "light";
-      } else {
-        newTheme = "dark";
-      }
-      this.store.save("theme", newTheme)
-      this.theme = newTheme;
-      this.themeChange.emit(newTheme);
-    }
-  }
-
  public changeFilter(event: MatSlideToggleChange, searchFilterType: SearchFilterType) {
    switch (searchFilterType) {
      case SearchFilterType.Movie:
--- a/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss
+++ b/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss
@ -31,17 +31,45 @@ $ombi-accent: #258a6d;
    background-color: white;
 }

-::ng-deep .mat-form-field-underline{
-    bottom:0.5em;
+
+::ng-deep .top-search-bar .mat-form-field-underline{
+    display:none;
 }

+::ng-deep .top-search-bar .mat-form-field-flex{
+    border: 1px solid #35465c;
+    border-radius:30px;
+    margin-top:20px;
+    height:50px;
+}
+
+::ng-deep .top-search-bar .mat-form-field-infix{
+    margin-left:20px;
+    border-top:0px;
+    margin-top:5px;
+}
+
+::ng-deep .top-search-bar .mat-form-field-appearance-legacy .mat-form-field-wrapper{
+    padding-bottom:0px;
+}

 .option-img {
    vertical-align: middle;
    margin-right: 8px;
  }

-  .options {
-      margin-bottom: 5px;
-  }
+.options {
+    margin-bottom: 5px;
+}

+::ng-deep .discoverResults{
+    margin-top:40px;
+}
+
+::ng-deep button:focus{
+    outline:none;
+}
+
+::ng-deep .col-2.top-filter{
+    margin-top:10px;
+}
--- a/src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.scss
+++ b/src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.scss
@ -4,7 +4,7 @@
 	background: $accent-dark !important;
 	font-size: 1em;
 	font-weight: bold;
-	color: #303030;
+	color: $ombi-background-primary-accent;
 }

 .mat-form-field {
@ -23,7 +23,7 @@

 ::ng-deep .dark .mat-tab-label-active{
 	background: $accent-dark !important;
-	color: #303030 !important;
+	color: $ombi-background-primary-accent !important;
 	font-weight:bold;
 }

--- a/src/Ombi/ClientApp/src/app/settings/authentication/authentication.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/authentication/authentication.component.html
@ -1,6 +1,6 @@
 <settings-menu></settings-menu>
 <div class="small-middle-container">
-<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Authentication-Settings'"></wiki>
+<wiki [path]="'/settings/authentication/'"></wiki>
 <fieldset *ngIf="form">
    <legend>Authentication</legend>
    <div class="md-form-field" style="margin-top:1em;"></div>
--- a/src/Ombi/ClientApp/src/app/settings/customization/customization.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/customization/customization.component.html
@ -1,6 +1,6 @@
 <settings-menu></settings-menu>
 <div class="small-middle-container">
-<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Customization-Settings'"></wiki>
+<wiki [path]="'/settings/customization/'"></wiki>
 <fieldset *ngIf="settings">
    <legend>Customization</legend>

--- a/src/Ombi/ClientApp/src/app/settings/dognzb/dognzb.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/dognzb/dognzb.component.html
@ -1,7 +1,7 @@
 <settings-menu>
 </settings-menu>
 <div>
-<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/DogNzb-Settings'"></wiki>
+<wiki [path]="'/settings/dognzb/'"></wiki>
 <div *ngIf="form" class="small-middle-container">
    <fieldset>
        <legend>DogNzb Settings</legend>
--- a/src/Ombi/ClientApp/src/app/settings/issues/issues.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/issues/issues.component.html
@ -1,6 +1,6 @@
 <settings-menu></settings-menu>
 <div class="small-middle-container">
-<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Issue-Settings'"></wiki>
+<wiki [path]="'/settings/issues/'"></wiki>

 <fieldset>
    <legend>Issues</legend>
--- a/src/Ombi/ClientApp/src/app/settings/jobs/jobs.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/jobs/jobs.component.html
@ -1,5 +1,5 @@
 <settings-menu></settings-menu>
-<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Job-Settings'"></wiki>
+<wiki [path]="'/settings/scheduled-tasks/'"></wiki>
 <div *ngIf="form" class="small-middle-container">
    <fieldset>
        <legend>Job Settings</legend>
--- a/src/Ombi/ClientApp/src/app/settings/landingpage/landingpage.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/landingpage/landingpage.component.html
@ -1,6 +1,6 @@
 <settings-menu></settings-menu>
 <div class="small-middle-container">
-<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Landing-Page-Settings'"></wiki>
+<wiki [path]="'/settings/landing-page/'"></wiki>
 <fieldset *ngIf="settings" class="container">
        <legend>Landing Page Configuration</legend>
        <div class="md-form-field" style="margin-top:1em;"></div>
--- a/src/Ombi/ClientApp/src/app/settings/massemail/massemail.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/massemail/massemail.component.html
@ -1,6 +1,6 @@
 <settings-menu></settings-menu>
 <div class="small-middle-container">
-<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Mass-Email'"></wiki>
+<wiki [path]="'/settings/notifications/mass-email/'"></wiki>
 <fieldset>
    <legend>Mass Email</legend>

--- a/src/Ombi/ClientApp/src/app/settings/notifications/newsletter.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/newsletter.component.html
@ -1,6 +1,6 @@
 <settings-menu></settings-menu>

-<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Newsletter-Settings'"></wiki>
+<wiki [path]="'/settings/notifications/newsletter/'"></wiki>
 <div *ngIf="settings" class="small-middle-container">
    <fieldset>
        <legend>Newsletter</legend>
--- a/src/Ombi/ClientApp/src/app/settings/notifications/notificationtemplate.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/notificationtemplate.component.html
@ -1,4 +1,4 @@
-<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Notification-Template-Variables'" [text]="'Notification Variables'">
+<wiki [path]="'/settings/notifications/template-variables/'" [text]="'Notification Variables'">
 </wiki>
 <br><br>

--- a/src/Ombi/ClientApp/src/app/settings/ombi/ombi.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/ombi/ombi.component.html
@ -1,6 +1,6 @@
 <settings-menu></settings-menu>
 <div class="small-middle-container">
-<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Ombi-Settings'"></wiki>
+<wiki [path]="'/settings/ombi-settings/'"></wiki>
 <fieldset *ngIf="form">
    <legend>Ombi Configuration</legend>
    <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
--- a/src/Ombi/ClientApp/src/app/settings/settingsmenu.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/settingsmenu.component.html
@ -7,7 +7,7 @@
    <button mat-menu-item [routerLink]="['/Settings/Issues']">Issues</button>
    <button mat-menu-item [routerLink]="['/Settings/UserManagement']">User Management</button>
    <button mat-menu-item [routerLink]="['/Settings/Authentication']">Authentication</button>
-    <button mat-menu-item [routerLink]="['/Settings/Vote']">Vote</button>
+    <!-- <button mat-menu-item [routerLink]="['/Settings/Vote']">Vote</button> -->
    <button mat-menu-item [routerLink]="['/Settings/TheMovieDb']">The Movie Database</button>
 </mat-menu>

@ -59,7 +59,7 @@
 <mat-menu #systemMenu="matMenu">
    <button mat-menu-item [routerLink]="['/Settings/About']">About</button>
    <button mat-menu-item [routerLink]="['/Settings/FailedRequests']">Failed Requests</button>
-    <button mat-menu-item [routerLink]="['/Settings/Update']">Update</button>
+    <!-- <button mat-menu-item [routerLink]="['/Settings/Update']">Update</button> -->
    <button mat-menu-item [routerLink]="['/Settings/Jobs']">Scheduled Tasks</button>
    <button mat-menu-item [routerLink]="['/Settings/Logs']">Logs</button>
 </mat-menu>
--- a/src/Ombi/ClientApp/src/app/settings/update/update.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/update/update.component.html
@ -1,6 +1,6 @@

 <settings-menu></settings-menu>
-<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Update-Settings'"></wiki>
+<wiki [path]="'https://github.com/tidusjar/Ombi/wiki/Update-Settings'"></wiki>
 <div *ngIf="form" class="small-middle-container">
    <fieldset>
        <legend>Update Settings</legend>
--- a/src/Ombi/ClientApp/src/app/settings/usermanagement/usermanagement.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/usermanagement/usermanagement.component.html
@ -1,6 +1,6 @@
 <settings-menu></settings-menu>
 <div class="small-middle-container">
-<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/User-Importer-Settings'"></wiki>
+<wiki [path]="'/settings/import-users/'"></wiki>
 <fieldset *ngIf="settings">
    <legend>User Importer Settings</legend>
    <div class="md-form-field" style="margin-top:1em;"></div>
--- a/src/Ombi/ClientApp/src/app/settings/vote/vote.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/vote/vote.component.html
@ -1,6 +1,6 @@
 <settings-menu></settings-menu>
 <div class="small-middle-container">
-<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Vote-Settings'"></wiki>
+<wiki [path]="'/settings/voting/'"></wiki>

 <fieldset>
    <legend>Vote</legend>
--- a/src/Ombi/ClientApp/src/app/settings/wiki.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/wiki.component.html
@ -1,6 +1,6 @@
 <div class="col" style="text-align: -webkit-right;">
    <div *ngIf="!text" class="col-md-4 ml-auto ">
-        <a href="{{url}}" target="_blank">
+        <a href="{{domain}}{{url}}" target="_blank">
        <button mat-raised-button color="accent">
            <span>Wiki</span>
        </button>
@ -8,7 +8,7 @@
    </div>

    <div *ngIf="text" class="col-md-4 ml-auto ">
-            <a href="{{url}}" target="_blank">
+            <a href="{{domain}}{{url}}" target="_blank">
            <button mat-raised-button color="accent">
                <span>{{text}}</span>
            </button>
--- a/src/Ombi/ClientApp/src/app/settings/wiki.component.ts
+++ b/src/Ombi/ClientApp/src/app/settings/wiki.component.ts
@ -5,6 +5,7 @@
    templateUrl: "./wiki.component.html",
 })
 export class WikiComponent {
-    @Input() public url: string;
+    @Input() public path: string;
    @Input() public text: string;
+    public domain: string = "http://docs.ombi.app/"
 }
--- a/src/Ombi/ClientApp/src/index.html
+++ b/src/Ombi/ClientApp/src/index.html
@ -57,7 +57,7 @@
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
 </head>

-<body class="mat-typography custom-background">
+<body class="mat-typography my-theme">

    <app-ombi>
        <script type="text/javascript">
--- a/src/Ombi/ClientApp/src/styles/Styles.scss
+++ b/src/Ombi/ClientApp/src/styles/Styles.scss
@ -10,17 +10,14 @@
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
 // Create the theme object (a Sass map containing all of the palettes).
-$ombi-app-theme: mat-light-theme($ombi-app-primary, $ombi-app-accent, $ombi-app-warn);
-@include angular-material-theme($ombi-app-theme);
-
-$dark-theme: mat-dark-theme($ombi-dark-app-primary, $ombi-dark-app-accent, $ombi-dark-app-warn);


-// Include the alternative theme styles inside of a block with a CSS class. You can make this
-// CSS class whatever you want. In this example, any component inside of an element with
-// `.dark` will be affected by this alternate dark theme instead of the default theme.
-.dark {
-    @include angular-material-theme($dark-theme);
+    $mat-light-theme-background: map_merge($mat-light-theme-background, (background: $ombi-background-primary));

-
-}
+    $theme: mat-dark-theme((
+        color: (
+            primary: $ombi-dark-app-primary,
+            accent: $ombi-dark-app-accent,
+        )
+    ), $ombi-dark-app-accent);
+    @include angular-material-theme($theme);
--- a/src/Ombi/ClientApp/src/styles/buttons.scss
+++ b/src/Ombi/ClientApp/src/styles/buttons.scss
@ -5,17 +5,17 @@ $green:#1DE9B6;
 $orange:#F57C00;

 .btn-blue {
-    background-color: $blue;
+    background-color: $blue !important;
 }

 .btn-pink {
-    background-color: $pink;
+    background-color: $pink !important;
 }

 .btn-green {
-    background-color: $green;
+    background-color: $green !important;
 }

 .btn-orange {
-    background-color: $orange;
+    background-color: $orange !important;
 }
--- a/src/Ombi/ClientApp/src/styles/material-overrides.scss
+++ b/src/Ombi/ClientApp/src/styles/material-overrides.scss
@ -1,3 +1,5 @@
+@import "./variables.scss";
+
 .lg-form-field .mat-form-field-infix {
    width: 480px;
 }
@ -12,4 +14,24 @@ td.mat-cell {

 .mat-form-field {
    display: block !important;
+}
+
+
+.mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
+    background-color:  $ombi-background-accent;
+}
+
+// lighter bg
+.mat-expansion-panel,
+.mat-card,
+.mat-dialog-container,
+.mat-menu-content,
+.mat-table,
+.mat-paginator {
+    background: $ombi-background-accent !important;
+}
+
+// Dark bg
+.mat-sidenav-container {
+    background: $ombi-background-primary;
 }
--- a/src/Ombi/ClientApp/src/styles/new-mat-palette.scss
+++ b/src/Ombi/ClientApp/src/styles/new-mat-palette.scss
@ -0,0 +1,98 @@
+$ombi-accent: (
+    50: #ecfafe,
+    100: #d0f2fe,
+    200: #b1e9fd,
+    300: #91e0fc,
+    400: #7ad9fb,
+    500: #62d2fa,
+    600: #5acdf9,
+    700: #50c7f9,
+    800: #46c1f8,
+    900: #34b6f6,
+    A100: #ffffff,
+    A200: #ffffff,
+    A400: #d6f1ff,
+    A700: #bde8ff,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #000000,
+        400 : #ffffff,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #000000,
+        A700 : #000000,
+    )
+);
+
+$ombi-primary: (
+    50 : #e4e5e6,
+    100 : #bbbdc1,
+    200 : #8d9297,
+    300 : #5f666d,
+    400 : #3d454e,
+    500 : #1b242f,
+    600 : #18202a,
+    700 : #141b23,
+    800 : #10161d,
+    900 : #080d12,
+    A100 : #55aaff,
+    A200 : #2290ff,
+    A400 : #0077ee,
+    A700 : #006ad4,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #ffffff,
+        400 : #ffffff,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #ffffff,
+        A400 : #ffffff,
+        A700 : #ffffff,
+    )
+);
+
+$ombi-background: (
+    50 : #e2e3e4,
+    100 : #b7b9bb,
+    200 : #878b8e,
+    300 : #575d61,
+    400 : #333a3f,
+    500 : #0f171d,
+    600 : #0d141a,
+    700 : #0b1115,
+    800 : #080d11,
+    900 : #04070a,
+    A100 : #4fc4ff,
+    A200 : #1cb3ff,
+    A400 : #009be8,
+    A700 : #008ace,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #ffffff,
+        400 : #ffffff,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #ffffff,
+        A700 : #ffffff,
+    )
+);
--- a/src/Ombi/ClientApp/src/styles/shared.scss
+++ b/src/Ombi/ClientApp/src/styles/shared.scss
@ -39,7 +39,7 @@ html,
 body {
    min-height: 100vh;
    overflow: initial;
-    scrollbar-color: #616161 #303030; //firefox
+    // scrollbar-color: #616161 #303030; //firefox
    scrollbar-width: thin; //firefox
    -webkit-overflow-scrolling: touch;
 }
@ -62,7 +62,7 @@ body {

 ::-webkit-scrollbar {
    width: 7px;
-    background: #818181;
+    background: #0f171d;
 }

 ::-webkit-scrollbar-track {
@ -72,7 +72,7 @@ body {
 // Changed color of the scrollbar 
 ::-webkit-scrollbar-thumb {
    border-radius: 3px;
-    background: #303030;
+    background: #35465c;
 }

 .sidenav ::-webkit-scrollbar-track {
@ -106,7 +106,7 @@ table {
 }

 ::ng-deep .dark .nav-link.active {
-    color: #303030;
+    color: $ombi-active;
    background-color: $accent-dark;
    border-color: rgba(0, 0, 0, 0.18);
    font-weight: 400;
--- a/src/Ombi/ClientApp/src/styles/variables.scss
+++ b/src/Ombi/ClientApp/src/styles/variables.scss
@ -1,18 +1,19 @@
-@import "./mat-palette.scss";
+// @import "./mat-palette.scss";
@import '~@angular/material/theming';
+@import "./new-mat-palette.scss";
 // BASE
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
 $ombi-app-primary: mat-palette($ombi-primary);
-$ombi-app-accent : mat-palette($ombi-accent, 400);
+$ombi-app-accent : mat-palette($ombi-accent);
 // The warn palette is optional (defaults to red).
-$ombi-app-warn : mat-palette($mat-deep-orange);
+$ombi-app-warn : mat-palette($ombi-accent);

 // Define an alternate dark theme.
-$ombi-dark-app-primary: mat-palette($mat-grey, 800);
-$ombi-dark-app-accent: mat-palette($mat-amber, A200, A100, A400);
-$ombi-dark-app-warn: mat-palette($mat-deep-orange);
+$ombi-dark-app-primary: mat-palette($ombi-primary, 500);
+$ombi-dark-app-accent:  mat-palette($ombi-accent, 500);
+$ombi-dark-app-warn: mat-palette($ombi-accent, 500);



@ -30,10 +31,16 @@ $warn: mat-color($ombi-app-warn);

 // DARK

-$background-dark: mat-color(mat-palette($mat-grey, 800));;
-$backgroundTint-dark:  mat-color(mat-palette($mat-grey, 900));
+$background-dark: mat-color( mat-palette($ombi-background));
+$backgroundTint-dark:  mat-color(mat-palette($ombi-background, 900));
 $text-dark: white;
-$panel: mat-color(mat-palette($mat-grey, 800));
+$panel: mat-color($ombi-dark-app-primary);
 $primary-dark: mat-color($ombi-dark-app-primary);
 $accent-dark: mat-color($ombi-dark-app-accent);
-$warn-dark: mat-color($ombi-dark-app-warn);
+$warn-dark: mat-color($ombi-dark-app-warn);
+
+
+$ombi-active: mat-color($ombi-dark-app-accent);
+$ombi-background-accent: mat-color($ombi-dark-app-primary);
+$ombi-background-primary: #0f171f;
+$ombi-background-primary-accent: #35465c;
--- a/src/Ombi/ClientApp/yarn.lock
+++ b/src/Ombi/ClientApp/yarn.lock
@ -7005,10 +7005,10 @@ primeicons@^4.0.0:
  resolved "https://registry.yarnpkg.com/primeicons/-/primeicons-4.0.0.tgz#a3594b3af213dcf8c4c3d6fc99eea05b7c92f57c"
  integrity sha512-JQBIswGSItn8I0Pq21RchENpKJxSi1MjfBDfggMQpXtoKNKblJoHmol/7tCV3CAV2Dlb94ht8TD8qdIAW01pGg==

-primeng@^10.0.3:
-  version "10.0.3"
-  resolved "https://registry.yarnpkg.com/primeng/-/primeng-10.0.3.tgz#e9d0ea425b9c5023bc9eef2cb014941939d0c35e"
-  integrity sha512-Nsiwpmy3RlFPBlxabdzeAYxFn4fXEyZjj7iAi1X5J4RRGD7NoB67+NbnOInE1rXTnNVHYxCca91OvaNiHSWWrg==
+primeng@^11.0.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/primeng/-/primeng-11.1.0.tgz#3957e6bac5bf4cc5e4eb4dc2761a35668e08a780"
+  integrity sha512-5eQvLbUJeyaa5EwIEQobRhyl92EhNo4jxvh4YGh984t0B8SyuGmWH5TjoM5GmiZeYOBlt8htvHFJ3rz3xKXQFA==
  dependencies:
    tslib "^2.0.0"

@ -7720,6 +7720,11 @@ sass-loader@8.0.2:
    schema-utils "^2.6.1"
    semver "^6.3.0"

+sass-recursive-map-merge@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sass-recursive-map-merge/-/sass-recursive-map-merge-1.0.1.tgz#d5460b9fe10df62d246ca27c48d823f25c2290cb"
+  integrity sha512-OuDTGVGx2o2sPeaSgGob5s2Qf6LxoMU4LG7n6vCzNgfXyBz/y8tKzcEYdmvgyhjvGQVcGA1g2UJnP7WMmahuVg==
+
 sass@1.26.3:
  version "1.26.3"
  resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.3.tgz#412df54486143b76b5a65cdf7569e86f44659f46"
@ -8767,9 +8772,9 @@ tslib@^1.8.0, tslib@^1.8.1:
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"

 tslib@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
-  integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
+  integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==

 tslint-angular@^1.1.2:
  version "1.1.2"
--- a/src/Ombi/Startup.cs
+++ b/src/Ombi/Startup.cs
@ -153,13 +153,6 @@ namespace Ombi
                ombiService.SaveSettings(settings);
            }

-            if (!settings.Set)
-            {
-                settings.Set = true;
-                settings.CollectAnalyticData = true;
-                ombiService.SaveSettings(settings);
-            }
-
            // Check if it's in the startup args
            var appConfig = serviceProvider.GetService<IApplicationConfigRepository>();
            var baseUrl = appConfig.Get(ConfigurationTypes.BaseUrl);