More on the dark

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

@@ -1,15 +1,16 @@
-$ombi-primary:#3f3f3f;
+@import "~styles/variables.scss";
-$ombi-primary-700:#313131;
-$ombi-accent-700:#166d50;
 .poster {
     max-width: 100%;
     border-radius: 2%;
 }
 
 .details {
-    background: $ombi-primary-700;
     padding: 2%;
     border-radius: 10px;
+    background: $background;
+    div.dark & {
+        background: $backgroundTint-dark;
+    }
 }
 
 .details strong {
@@ -20,16 +21,11 @@ h3 strong {
     font-weight: bold;
 }
 
-.request-btn {
-    background-color: $ombi-accent-700;
-    color: white;
-}
-
 .action-buttons-right {
     width: 100%;
     text-align: right;
 }
 
 .btn-spacing {
-    margin-right:1%;
+    margin-right: 1%;
 }

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

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from "@angular/core";
+import { Component, Inject, OnInit, ViewEncapsulation } from "@angular/core";
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from "@angular/material";
 import { IDiscoverCardResult } from "../interfaces";
 import { SearchV2Service, RequestService, MessageService } from "../../services";
@@ -12,6 +12,7 @@ import { EpisodeRequestComponent } from "../../shared/episode-request/episode-re
     selector: "discover-card-details",
     templateUrl: "./discover-card-details.component.html",
     styleUrls: ["./discover-card-details.component.scss"],
+    encapsulation: ViewEncapsulation.None,
 })
 export class DiscoverCardDetailsComponent implements OnInit {
 

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

@@ -44,7 +44,7 @@ $border-width: 3px;
 }
 
 ::ng-deep mat-dialog-container.mat-dialog-container {
-    background-color: $ombi-primary;
+    // background-color: $ombi-primary;
-    color: white;
+    // color: white;
     border-radius: 2%
 }

src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.html

@@ -10,7 +10,8 @@
                 <div class="row">
                     <div
                         class="col-xl-12 col-lg-11 offset-lg-1 col-md-8 offset-md-4 col-sm-7 offset-sm-5 col-6 offset-6">
-                        <h1>{{tv.title}} <span *ngIf="tv.firstAired" class="grey-text align-middle">({{tv.firstAired  | amLocal | amDateFormat: 'YYYY'}})</span>
+                        <h1>{{tv.title}} <span *ngIf="tv.firstAired"
+                                class="grey-text align-middle">({{tv.firstAired  | amLocal | amDateFormat: 'YYYY'}})</span>
                         </h1>
 
                         <h5 class="tagline grey-text">{{tv.certification}}</h5>
@@ -26,8 +27,7 @@
                 <div class="col-md-2 col-sm-3 hidden-xs">
                     <div class="sidebar sidebar-poster affixable affix-top" style="width: 173px;">
                         <div class="poster">
-                            <img class="real" [src]="tv.images.medium" alt="Poster"
+                            <img class="real" [src]="tv.images.medium" alt="Poster" style="display: block;">
-                                style="display: block;">
                         </div>
                         <!--Underneith poster-->
                         <br />
@@ -41,13 +41,12 @@
                         <i matTooltip="Homepage" class="fa fa-home fa-2x grow"></i>
                     </a>
 
-                    <a *ngIf="tv.id" href="https://www.thetvdb.org/tv/{{tv.id}}" class="media-icons"
+                    <a *ngIf="tv.id" href="https://www.thetvdb.org/tv/{{tv.id}}" class="media-icons" target="_blank">
-                        target="_blank">
                         <i matTooltip="The TV DB" class="fa fa-tv fa-2x grow"></i>
                     </a>
 
-                    <a *ngIf="tv.trailer" class="media-icons" (click)="openDialog()"><i
+                    <a *ngIf="tv.trailer" class="media-icons" (click)="openDialog()"><i matTooltip="Trailer"
-                            matTooltip="Trailer" class="fa fa-youtube-play fa-2x grow"></i></a>
+                            class="fa fa-youtube-play fa-2x grow"></i></a>
 
                     <a *ngIf="tv.imdbId" class="media-icons" href="https://imdb.com/title/{{tv.imdbId}}"
                         target="_blank">
@@ -60,31 +59,21 @@
 
                 <div class="col-12 col-lg-7 col-xl-7 media-row">
                  
-                    <button mat-raised-button class="btn-green btn-spacing" *ngIf="tv.available"> {{
+                        <button *ngIf="!tv.fullyAvailable" mat-raised-button class="btn-spacing mat-warn" (click)="request()"
-                            'Common.Available' | translate }}</button>
+                            ><i class="fa fa-plus"></i>
-                    <span *ngIf="!tv.available">
+                            {{ 'Common.Request' | translate }}</button>
-                        <span *ngIf="tv.requested || tv.approved; then requestedBtn else notRequestedBtn"></span>
+
-                        <ng-template #requestedBtn>
+                        <button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing mat-primary"  [disabled]>
-                            <button mat-raised-button class="btn-spacing btn-orange" [disabled]><i
+                            <i class="fa fa-check"></i> {{'Common.Available' | translate }}</button>
-                                    class="fa fa-check"></i>
+
-                                {{ 'Common.Requested' | translate }}</button>
-                        </ng-template>
-                        <ng-template #notRequestedBtn>
-                            <button mat-raised-button class="btn-spacing" (click)="request()">
-                                <i *ngIf="tv.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i
-                                    *ngIf="!tv.requestProcessing && !tv.processed" class="fa fa-plus"></i>
-                                <i *ngIf="tv.processed && !tv.requestProcessing" class="fa fa-check"></i> {{
-                                'Common.Request' | translate }}</button>
-                        </ng-template>
-                    </span>
 
                         <span *ngIf="tv.available">
                             <a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right"
                                 class="btn-spacing btn-greem" href="{{tv.plexUrl}}" target="_blank"><i
                                     class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
                             translate}}</a>
-                        <a *ngIf="tv.embyUrl" mat-raised-button class="btn-green btn-spacing"
+                            <a *ngIf="tv.embyUrl" mat-raised-button class="mat-accent btn-spacing" href="{{tv.embyUrl}}"
-                            href="{{tv.embyUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
+                                target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
                             translate}}</a>
                         </span>
                 </div>

src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.ts

@@ -5,6 +5,7 @@ import { DomSanitizer } from "@angular/platform-browser";
 import { ISearchTvResultV2 } from "../../interfaces/ISearchTvResultV2";
 import { MatDialog } from "@angular/material";
 import { YoutubeTrailerComponent } from "../youtube-trailer.component";
+import { EpisodeRequestComponent } from "../../shared/episode-request/episode-request.component";
 
 @Component({
     templateUrl: "./tv-details.component.html",
@@ -17,8 +18,7 @@ export class TvDetailsComponent {
 
     constructor(private searchService: SearchV2Service, private route: ActivatedRoute,
         private sanitizer: DomSanitizer, private imageService: ImageService,
-        public dialog: MatDialog, private requestService: RequestService,
+        public dialog: MatDialog, public messageService: MessageService) {
-        public messageService: MessageService) {
         this.route.params.subscribe((params: any) => {
             this.tvdbId = params.tvdbId;
             this.load();
@@ -32,13 +32,7 @@ export class TvDetailsComponent {
     }
 
     public async request() {
-        // var result = await this.requestService.requestTv({}).toPromise();
+        this.dialog.open(EpisodeRequestComponent, { width: "700px", data: this.tv })
-        // if (result.result) {
-        //     this.movie.requested = true;
-        //     this.messageService.send(result.message, "Ok");
-        // } else {
-        //     this.messageService.send(result.errorMessage, "Ok");
-        // }
     }
 
     public openDialog() {

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.css

@@ -1,41 +0,0 @@
-.sidenav-container {
-  height: 100%;
-}
-
-.sidenav {
-  width: 200px;
-}
-
-.sidenav .mat-toolbar {
-  background: inherit;
-}
-
-.mat-toolbar.mat-primary {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-.middle {
-  display: flex;
-}
-
-.example-form {
-  min-width: 150px;
-  max-width: 500px;
-  width: 100%;
-}
-
-.quater-width {
-  width: 25%;
-}
-
-.autocomplete-img {
-  vertical-align: middle;
-  height: 63px;
-}
-
-.mat-option {
-  height: 50px;
-  line-height: 50px;
-  padding: 0px 5px;
-}

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html

@@ -3,21 +3,21 @@
     [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
     <mat-toolbar>Ombi</mat-toolbar>
     <mat-nav-list>
-      <a mat-list-item routerLink="/discover">
+      <a mat-list-item routerLink="/discover" [routerLinkActive]="['active-list-item']" >
         <mat-icon aria-label="Side nav toggle icon">find_replace</mat-icon>
         Discover
       </a>
-      <a mat-list-item [routerLinkActive]="['active']" routerLink="/search">
+      <a mat-list-item [routerLinkActive]="['active-list-item']" routerLink="/search">
         <mat-icon aria-label="Side nav toggle icon">search</mat-icon> Search
       </a>
-      <a mat-list-item [routerLinkActive]="['active']" routerLink="/requests">
+      <a mat-list-item [routerLinkActive]="['active-list-item']" routerLink="/requests">
         <mat-icon aria-label="Side nav toggle icon">list</mat-icon> Requests
       </a>
-      <a mat-list-item [routerLinkActive]="['active']" routerLink="/Settings/About">
+      <a mat-list-item [routerLinkActive]="['active-list-item']" routerLink="/Settings/About">
         <mat-icon aria-label="Side nav toggle icon">settings</mat-icon> Settings
       </a>
 
-      <a mat-list-item [routerLinkActive]="['active']" aria-label="Toggle sidenav" (click)="logOut();">
+      <a 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>
         {{ 'NavigationBar.Logout' | translate }}
       </a>

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss

@@ -0,0 +1,47 @@
+@import "~styles/variables.scss";
+.sidenav-container {
+    height: 100%;
+}
+
+.sidenav {
+    width: 200px;
+}
+
+.sidenav .mat-toolbar {
+    background: inherit;
+}
+
+.mat-toolbar.mat-primary {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+.middle {
+    display: flex;
+}
+
+.example-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+}
+
+.quater-width {
+    width: 25%;
+}
+
+.autocomplete-img {
+    vertical-align: middle;
+    height: 63px;
+}
+
+.mat-option {
+    height: 50px;
+    line-height: 50px;
+    padding: 0px 5px;
+}
+
+.active-list-item {
+    background: $accent !important;
+}

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts

@@ -6,7 +6,7 @@ import { map } from 'rxjs/operators';
 @Component({
   selector: 'app-my-nav',
   templateUrl: './my-nav.component.html',
-  styleUrls: ['./my-nav.component.css'],
+  styleUrls: ['./my-nav.component.scss'],
 })
 export class MyNavComponent {
 

src/Ombi/ClientApp/src/app/services/message.service.ts

@@ -12,6 +12,10 @@ export class MessageService {
 
 
     public send(message: string, action?: string) {
+        if (action) {
             this.snackBar.open(message, action.toUpperCase(), this.config)
+        } else {
+            this.snackBar.open(message, "OK", this.config)
+        }
     }
 }

src/Ombi/ClientApp/src/app/shared/episode-request/episode-request.component.html

@@ -64,7 +64,7 @@
 <div mat-dialog-actions>
     <div class="action-buttons-right">
         <div class="col-md-12">
-            <button mat-raised-button class="btn-spacing  btn-orange">{{
+            <button (click)="submitRequests()" mat-raised-button class="btn-spacing  btn-orange">{{
                 'Common.Request' | translate }}</button>
 
 

src/Ombi/ClientApp/src/app/shared/episode-request/episode-request.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, Inject } from "@angular/core";
 import { MatDialogRef, MAT_DIALOG_DATA, MatCheckboxChange } from "@angular/material";
 import { ISearchTvResultV2 } from "../../interfaces/ISearchTvResultV2";
-import { RequestService, NotificationService } from "../../services";
+import { RequestService, MessageService } from "../../services";
 import { ITvRequestViewModel, ISeasonsViewModel, IEpisodesRequests, INewSeasonRequests } from "../../interfaces";
 
 
@@ -14,7 +14,7 @@ export class EpisodeRequestComponent implements OnInit {
     public loading: boolean;
 
     constructor(public dialogRef: MatDialogRef<EpisodeRequestComponent>, @Inject(MAT_DIALOG_DATA) public series: ISearchTvResultV2,
-        private requestService: RequestService, private notificationService: NotificationService) { }
+        private requestService: RequestService, private notificationService: MessageService) { }
 
     public ngOnInit() {
         this.loading = true;
@@ -22,7 +22,7 @@ export class EpisodeRequestComponent implements OnInit {
         this.loading = false;
     }
 
-    public submitRequests() {
+    public async submitRequests() {
         // Make sure something has been selected
         const selected = this.series.seasonRequests.some((season) => {
             return season.episodes.some((ep) => {
@@ -31,7 +31,7 @@ export class EpisodeRequestComponent implements OnInit {
         });
 
         if (!selected) {
-            this.notificationService.error("You need to select some episodes!");
+            this.notificationService.send("You need to select some episodes!", "OK");
             return;
         }
 
@@ -53,10 +53,10 @@ export class EpisodeRequestComponent implements OnInit {
             viewModel.seasons.push(seasonsViewModel);
         });
 
-        this.requestService.requestTv(viewModel)
+        const requestResult = await this.requestService.requestTv(viewModel).toPromise();
-            .subscribe(x => {
+
-                if (x.result) {
+        if (requestResult.result) {
-                    this.notificationService.success(
+            this.notificationService.send(
                 `Request for ${this.series.title} has been added successfully`);
 
             this.series.seasonRequests.forEach((season) => {
@@ -66,9 +66,9 @@ export class EpisodeRequestComponent implements OnInit {
             });
 
         } else {
-                    this.notificationService.warning("Request Added", x.errorMessage ? x.errorMessage : x.message);
+            this.notificationService.send("Request Added", requestResult.errorMessage ? requestResult.errorMessage : requestResult.message);
         }
-            });
+        this.dialogRef.close();
     }
 
     public addRequest(episode: IEpisodesRequests) {

src/Ombi/ClientApp/src/styles/Styles.scss

@@ -1,47 +1,26 @@
 @import '~@angular/material/theming';
-@import "./mat-palette.scss";
+@import "./variables.scss";
 // Plus imports for other components in your app.
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
 @include mat-core();
-// 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, 500);
-$ombi-app-accent : mat-palette($ombi-accent, A200, A100, A400);
-$panel: white;
-$text:black;
-$background: white;
-// The warn palette is optional (defaults to red).
-$ombi-app-warn : mat-palette($mat-deep-orange);
-// 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 theme styles for core and each component used in your app.
 // 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);
-// Define an alternate dark theme.
+
-$ombi-dark-app-primary: mat-palette($mat-grey, 800);
+$dark-theme: mat-dark-theme($ombi-dark-app-primary, $ombi-dark-app-accent, $ombi-dark-app-warn);
-$ombi-dark-app-accent : mat-palette($mat-amber, A200, A100, A400);
-$ombi-dark-app-warn : mat-palette($mat-deep-orange);
-$dark-theme : mat-dark-theme($ombi-dark-app-primary, $ombi-dark-app-accent, $ombi-dark-app-warn);
 
 
-$primary: mat-color($ombi-app-primary);
-$accent: mat-color($ombi-app-accent);
-$warn: mat-color($ombi-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);
-    $panel: mat-color(mat-palette($mat-grey, 800));
-    $primary: mat-color($ombi-dark-app-primary);
-    $accent: mat-color($ombi-dark-app-accent);
-    $warn: mat-color($ombi-dark-app-warn);
 
-    $background: #424242;
 
-    $text: white;
 }

src/Ombi/ClientApp/src/styles/variables.scss

@@ -0,0 +1,39 @@
+@import "./mat-palette.scss";
+@import '~@angular/material/theming';
+// 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, 500);
+$ombi-app-accent : mat-palette($ombi-accent, A200, A100, A400);
+// The warn palette is optional (defaults to red).
+$ombi-app-warn : mat-palette($mat-deep-orange);
+
+// 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);
+
+
+
+// CUSTOM LIGHT
+$panel: white;
+$text:black;
+$background: white;
+$backgroundTint:  mat-color(mat-palette($ombi-primary, 50));
+
+$primary: mat-color($ombi-app-primary);
+$accent: mat-color($ombi-app-accent);
+$warn: mat-color($ombi-app-warn);
+
+
+
+// DARK
+
+$background-dark: at-color(mat-palette($mat-grey, 800));;
+$backgroundTint-dark:  mat-color(mat-palette($mat-grey, 900));
+$text-dark: white;
+$panel: mat-color(mat-palette($mat-grey, 800));
+$primary-dark: mat-color($ombi-dark-app-primary);
+$accent-dark: mat-color($ombi-dark-app-accent);
+$warn-dark: mat-color($ombi-dark-app-warn);