more stuff

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

@@ -70,7 +70,7 @@ const routes: Routes = [
     { loadChildren: "./wizard/wizard.module#WizardModule", path: "Wizard" },
     { loadChildren: "./usermanagement/usermanagement.module#UserManagementModule", path: "usermanagement" },
     { loadChildren: "./requests/requests.module#RequestsModule", path: "requestsOld" },
-    { loadChildren: "./requests-list/requests-list.module#RequestsListModule", path: "requests" },
+    { loadChildren: "./requests-list/requests-list.module#RequestsListModule", path: "requests-list" },
     { loadChildren: "./search/search.module#SearchModule", path: "search" },
     { loadChildren: "./recentlyAdded/recentlyAdded.module#RecentlyAddedModule", path: "recentlyadded" },
     { loadChildren: "./vote/vote.module#VoteModule", path: "vote" },

src/Ombi/ClientApp/src/app/discover/discover.component.html

@@ -2,11 +2,16 @@
 
     <div class="row justify-content-md-center top-spacing">
         <div class="btn-group" role="group" aria-label="Basic example">
-            <button type="button" (click)="popular()" [ngClass]="popularActive ? 'active-button' : ''" mat-raised-button
-                class="btn grow" color="primary">{{'Discovery.PopularTab' | translate}}</button>
-            <button type="button" (click)="trending()" [ngClass]="trendingActive ? 'active-button' : ''"
+            <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()" [ngClass]="upcomingActive ? 'active-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>

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

@@ -70,7 +70,7 @@
         </div>
 
 
-        <div class="col-12 col-md-10">
+        <div class="col-12 col-md-10" *ngIf="tvRequest">
           <mat-accordion>
             <mat-expansion-panel>
               <mat-expansion-panel-header>

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

@@ -3,12 +3,13 @@
     [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
     <mat-toolbar>{{applicationName}}</mat-toolbar>
     <mat-nav-list>
-      <a *ngFor="let nav of navItems" mat-list-item [routerLink]="nav.link" [routerLinkActive]="['active-list-item']" >
+      <a *ngFor="let nav of navItems" mat-list-item [routerLink]="nav.link" 
+      [routerLinkActive]="getTheme()" >
         <mat-icon aria-label="Side nav toggle icon">{{nav.icon}}</mat-icon>
         {{nav.name | translate}}
       </a>    
 
-      <a class="bottom-nav-link" mat-list-item [routerLinkActive]="['active-list-item']" aria-label="Toggle sidenav" (click)="logOut();">
+      <a class="bottom-nav-link" mat-list-item  [routerLinkActive]="theme === 'dark' ? 'active-list-item-dark' : '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

@@ -44,6 +44,12 @@
 
 .active-list-item {
     background: $accent !important;
+    color:white;
+}
+
+.active-list-item-dark {
+    background: $accent-dark !important;
+    color:black;
 }
 
 .bottom-nav-link {

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

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -9,7 +9,7 @@ import { INavBar } from '../interfaces/ICommon';
   templateUrl: './my-nav.component.html',
   styleUrls: ['./my-nav.component.scss'],
 })
-export class MyNavComponent {
+export class MyNavComponent implements OnInit {
 
   isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
     .pipe(
@@ -21,14 +21,18 @@ export class MyNavComponent {
   @Input() public username: string;
   @Output() public logoutClick = new EventEmitter();
   @Output() public themeChange = new EventEmitter<string>();
-
+  public theme: string;
 
   constructor(private breakpointObserver: BreakpointObserver) {
   }
 
+  public ngOnInit(): void {
+    this.theme = localStorage.getItem("theme");
+  }
+
   public navItems: INavBar[] = [
     { name: "NavigationBar.Discover", icon: "find_replace", link: "/discover" },
-    { name: "NavigationBar.Requests", icon: "list", link: "/requests" },   
+    { name: "NavigationBar.Requests", icon: "list", link: "/requests-list" },   
     { name: "NavigationBar.UserManagement", icon: "account_circle", link: "/usermanagement" },
     { name: "NavigationBar.Settings", icon: "settings", link: "/Settings/About" },
   ]
@@ -38,19 +42,23 @@ export class MyNavComponent {
   }
 
   public switchTheme() {
-    const theme = localStorage.getItem("theme");
-
-    if (theme) {
+    if (this.theme) {
       localStorage.removeItem("theme");
       let newTheme = "";
-      if (theme === "dark") {
+      if (this.theme === "dark") {
         newTheme = "light";
       } else {
         newTheme = "dark";
       }
       localStorage.setItem("theme", newTheme)
+      this.theme = newTheme;
       this.themeChange.emit(newTheme);
     }
   }
 
+  public getTheme(){
+    debugger;
+    return this.theme === 'dark' ? 'active-list-item-dark' : 'active-list-item';
+  }
+
 }

src/Ombi/ClientApp/src/app/shared/functions/common-functions.ts

@@ -2,5 +2,19 @@ export function getBaseLocation() {
     debugger;
     let paths: string[] = location.pathname.split('/').splice(1, 1);
     let basePath: string = (paths && paths[0] ? paths[0] : ""); 
+    if(invalidProxies.indexOf(basePath) === -1){
+        return '/';
+    }
     return '/' + basePath;
-}
+}
+
+const invalidProxies: string[] = [
+    'discover',
+    'requests-list',
+    'Settings',
+    'issues',
+    'usermanagement',
+    'recentlyadded',
+    'details',
+    'vote'
+]

src/Ombi/ClientApp/src/styles/buttons.scss

@@ -13,8 +13,3 @@
 .btn-orange {
     background-color: #F57C00;
 }
-
-.active-button {
-    background-color: #5dffbd !important;
-    color: white;
-}

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

@@ -4,8 +4,8 @@
 // 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-primary: mat-palette($ombi-primary);
+$ombi-app-accent : mat-palette($ombi-accent, 400);
 // The warn palette is optional (defaults to red).
 $ombi-app-warn : mat-palette($mat-deep-orange);