bit more work on the dark mode !wip

src/Ombi/ClientApp/src/app/discover/discover.module.ts

@@ -10,7 +10,6 @@ import { AuthGuard } from "../auth/auth.guard";
 import { PipeModule } from "../pipes/pipe.module";
 import { DiscoverCardDetailsComponent } from "./card/discover-card-details.component";
 import { MatDialog } from "@angular/material";
-import { EpisodeRequestComponent } from "../shared/episode-request/episode-request.component";
 
 const routes: Routes = [
     { path: "", component: DiscoverComponent, canActivate: [AuthGuard] },
@@ -25,11 +24,9 @@ const routes: Routes = [
         DiscoverComponent,
         DiscoverCardComponent,
         DiscoverCardDetailsComponent,
-        EpisodeRequestComponent,
     ],
     entryComponents: [
-        DiscoverCardDetailsComponent,
+        DiscoverCardDetailsComponent
-        EpisodeRequestComponent
     ],
     exports: [
         RouterModule,

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

@@ -1,5 +1,5 @@
 @import "~@angular/material/theming";
-@import "../../styles/Styles.scss";
+@import "~styles/Styles.scss";
 //MINE
 @media (max-width: 570px) {
     h1 {
@@ -198,8 +198,4 @@
 
 .keywords-panel {
     margin-top: 8%;
-}
-
-.card-color {
-    background: $panel-color;
 }

src/Ombi/ClientApp/src/app/media-details/media-details.module.ts

@@ -10,7 +10,6 @@ import { MovieDetailsComponent } from "./movie/movie-details.component";
 import { TvDetailsComponent } from "./tv/tv-details.component";
 import { PipeModule } from "../pipes/pipe.module";
 import { YoutubeTrailerComponent } from "./youtube-trailer.component";
-import { EpisodeRequestComponent } from "../shared/episode-request/episode-request.component";
 
 const routes: Routes = [
     { path: "movie/:movieDbId", component: MovieDetailsComponent },
@@ -27,7 +26,6 @@ const routes: Routes = [
         MovieDetailsComponent,
         YoutubeTrailerComponent,
         TvDetailsComponent,
-        EpisodeRequestComponent,
     ],
     exports: [
         RouterModule,

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

@@ -106,7 +106,7 @@
                     <button *ngIf="movie.belongsToCollection" mat-raised-button
                         class="btn-spacing-below full-width mat-elevation-z8">{{movie.belongsToCollection.name}}</button>
 
-                    <mat-card class="card-full card-color mat-elevation-z8">
+                    <mat-card class="card-full mat-elevation-z8">
                         <mat-card-content>
                             <div>
                                 <span><strong>Theatrical Release:</strong>

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

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, ViewEncapsulation } from "@angular/core";
 import { ImageService, SearchV2Service, RequestService, MessageService } from "../../services";
 import { ActivatedRoute } from "@angular/router";
 import { DomSanitizer } from "@angular/platform-browser";
@@ -10,6 +10,7 @@ import { AuthService } from "../../auth/auth.service";
 @Component({
     templateUrl: "./movie-details.component.html",
     styleUrls: ["../media-details.component.scss"],
+    encapsulation: ViewEncapsulation.None
 })
 export class MovieDetailsComponent {
     public movie: ISearchMovieResultV2;

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

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, ViewEncapsulation } from "@angular/core";
 import { ImageService, SearchV2Service, RequestService, MessageService } from "../../services";
 import { ActivatedRoute } from "@angular/router";
 import { DomSanitizer } from "@angular/platform-browser";
@@ -9,6 +9,7 @@ import { YoutubeTrailerComponent } from "../youtube-trailer.component";
 @Component({
     templateUrl: "./tv-details.component.html",
     styleUrls: ["../media-details.component.scss"],
+    encapsulation: ViewEncapsulation.None
 })
 export class TvDetailsComponent {
     public tv: ISearchTvResultV2;

src/Ombi/ClientApp/src/app/shared/shared.module.ts

@@ -13,10 +13,12 @@ import {
   MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatTooltipModule} from '@angular/material';
   import {  MatCardModule, MatInputModule, MatTabsModule, MatAutocompleteModule, MatCheckboxModule, MatExpansionModule, MatDialogModule, MatProgressSpinnerModule,
     MatChipsModule } from "@angular/material";
+import { EpisodeRequestComponent } from "./episode-request/episode-request.component";
 
 @NgModule({
   declarations: [
     IssuesReportComponent,
+    EpisodeRequestComponent,
   ],
   imports: [
     SidebarModule,
@@ -38,16 +40,22 @@ import {
     MatListModule, 
     MatToolbarModule,
     MatCheckboxModule,
+    TranslateModule,
     MatExpansionModule,
     MatDialogModule,
   ],
+  entryComponents: [
+    EpisodeRequestComponent
+  ],
   exports: [
       TranslateModule,
       CommonModule,
       FormsModule,
+      TranslateModule,
       SidebarModule,
       MatProgressSpinnerModule,
       IssuesReportComponent,
+      EpisodeRequestComponent,
       TruncateModule,
       InputSwitchModule,
       MomentModule,MatCardModule,

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

@@ -1,42 +1,47 @@
 @import '~@angular/material/theming';
 @import "./mat-palette.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);
+$ombi-app-accent : mat-palette($ombi-accent, A200, A100, A400);
-$panel-color: white;
+$panel: white;
-
+$text:black;
+$background: white;
 // The warn palette is optional (defaults to red).
-$ombi-app-warn:    mat-palette($mat-deep-orange);
+$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.
 @include angular-material-theme($ombi-app-theme);
-
-
-
 // Define an alternate dark theme.
-$ombi-app-primary: mat-palette($mat-grey, 800);
+$ombi-dark-app-primary: mat-palette($mat-grey, 800);
-$ombi-app-accent:  mat-palette($mat-amber, A200, A100, A400);
+$ombi-dark-app-accent : mat-palette($mat-amber, A200, A100, A400);
-$ombi-app-warn:    mat-palette($mat-deep-orange);
+$ombi-dark-app-warn : mat-palette($mat-deep-orange);
-$dark-theme:   mat-dark-theme($ombi-app-primary, $ombi-app-accent, $ombi-app-warn);
+$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-theme` will be affected by this alternate dark theme instead of the default theme.
+// `.dark` will be affected by this alternate dark theme instead of the default theme.
 .dark {
     @include angular-material-theme($dark-theme);
-    $panel-color: mat-color(mat-palette($mat-grey, 800));
+    $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/primeng-overrides.scss

@@ -1,3 +1,4 @@
+@import "Styles.scss";
 // PrimeNG Carosel overrides
 .ui-carousel-dropdown {
     display:none;
@@ -8,6 +9,7 @@
 
 .ui-carousel-viewport {
     border:0 !important;
+    background-color:$background !important;
 }
 
 .ui-carousel .ui-carousel-header {