Added a change theme button into the navbar, so now we can switch from light and dark themes

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

@@ -168,7 +168,8 @@
 
     
 <div [ngClass]="user.name && roleClass()">
-    <app-my-nav [showNav]="showNav" [applicationName]="applicationName" [username]="user.name" (logoutClick)="logOut();"></app-my-nav>
+    <app-my-nav [showNav]="showNav" [applicationName]="applicationName" [username]="user.name" (logoutClick)="logOut();"
+    (themeChange)="onSetTheme($event)"></app-my-nav>
 
 
 </div>

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

@@ -23,7 +23,7 @@ import {
 import {
     MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatAutocompleteModule, MatCheckboxModule, MatSnackBarModule
 } from '@angular/material';
-import { MatCardModule, MatInputModule, MatTabsModule } from "@angular/material";
+import { MatCardModule, MatInputModule, MatTabsModule, MatSlideToggleModule } from "@angular/material";
 
 import { MDBBootstrapModule, CardsFreeModule, NavbarModule } from "angular-bootstrap-md";
 
@@ -139,7 +139,7 @@ export function JwtTokenGetter() {
             },
         }),
         SidebarModule,
-        MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, LayoutModule,
+        MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, LayoutModule, MatSlideToggleModule
     ],
     declarations: [
         AppComponent,

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

@@ -8,11 +8,18 @@
         {{nav.name | translate}}
       </a>    
 
-      <a mat-list-item [routerLinkActive]="['active-list-item']" aria-label="Toggle sidenav" (click)="logOut();">
+      <a class="bottom-nav-link" 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>
 
+      <a mat-list-item aria-label="Toggle sidenav" (click)="switchTheme();">
+        <mat-slide-toggle>
+          {{ 'NavigationBar.ChangeTheme' | translate }}
+      </mat-slide-toggle>
+        
+      </a>
+
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>

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

@@ -1,6 +1,6 @@
 @import "~styles/variables.scss";
 .sidenav-container {
-    height: 100%;
+    min-height: 100vh;
 }
 
 .sidenav {
@@ -45,3 +45,8 @@
 .active-list-item {
     background: $accent !important;
 }
+
+.bottom-nav-link {
+    bottom: 0;
+    position: absolute;
+}

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

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -20,18 +20,37 @@ export class MyNavComponent {
   @Input() public applicationName: string;
   @Input() public username: string;
   @Output() public logoutClick = new EventEmitter();
+  @Output() public themeChange = new EventEmitter<string>();
+
 
   constructor(private breakpointObserver: BreakpointObserver) {
   }
 
   public navItems: INavBar[] = [
-    {name: "NavigationBar.Discover", icon: "find_replace", link: "/discover"},
+    { name: "NavigationBar.Discover", icon: "find_replace", link: "/discover" },
-    {name: "NavigationBar.Search", icon: "search", link: "/search"},
+    { name: "NavigationBar.Search", icon: "search", link: "/search" },
-    {name: "NavigationBar.Requests", icon: "list", link: "/requests"},
+    { name: "NavigationBar.Requests", icon: "list", link: "/requests" },
-    {name: "NavigationBar.Settings", icon: "settings", link: "/Settings/About"},
+    { name: "NavigationBar.Settings", icon: "settings", link: "/Settings/About" },
   ]
 
   public logOut() {
     this.logoutClick.emit();
   }
+
+  public switchTheme() {
+    const theme = localStorage.getItem("theme");
+
+    if (theme) {
+      localStorage.removeItem("theme");
+      let newTheme = "";
+      if (theme === "dark") {
+        newTheme = "light";
+      } else {
+        newTheme = "dark";
+      }
+      localStorage.setItem("theme", newTheme)
+      this.themeChange.emit(newTheme);
+    }
+  }
+
 }

src/Ombi/ClientApp/src/app/request-grid/request-card.component.html

@@ -1,45 +0,0 @@
-<style>
-    
-    /*$bg-colour: #333333;*/
-    .card {
-        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-        transition: 0.3s;
-        border-radius: 5px; /* 5px rounded corners */
-        background: #4f4e4e;
-        border-bottom: #333333 solid 1px;
-        margin-left: 10px;
-        margin-right: 10px;
-        margin-top: 5px;
-    }
-
-    img {
-        border-radius: 5px 5px 0 0;
-    }
-
-    /* On mouse-over, add a deeper shadow */
-    .card:hover {
-        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-    }
-
-    .card-container {
-        padding: 2px 16px;
-    }
-    
-    .image-fill {
-        overflow: hidden;
-        background-size: cover;
-        background-position: center;
-        position: relative;
-    }
-    
-    
-</style>
-
-<div *ngIf="request" class="card" style="color: white;">
-    <div style="position: relative; overflow: hidden;">
-        <img src="{{request.posterPath}}" alt="poster" class="image-fill">
-    </div>
-    <div class="card-container">
-        {{request.title}}
-    </div>
-</div>

src/Ombi/ClientApp/src/app/request-grid/request-card.component.ts

@@ -1,11 +0,0 @@
-// import { Component, Input } from "@angular/core";
-
-// import { IMediaBase } from "../interfaces";
-
-// @Component({
-//     selector: "request-card",
-//     templateUrl: "./request-card.component.html",
-// })
-// export class RequestCardComponent {
-//     @Input() public request: IMediaBase;
-// }

src/Ombi/ClientApp/src/app/request-grid/request-grid.component.html

@@ -1,54 +0,0 @@
-
-<style>
-    .landing-box {
-        background: #333333 !important;
-        border-radius: 2%;
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        text-align: center;
-        box-shadow: 5px 3px 5px black;
-    }
-
-    .dragula-container {
-        padding-bottom: 30px;
-    }
-
-    .gu-mirror {
-        margin-left: 100px !important;
-        transform: rotate(4deg);
-        -moz-transform: rotate(4deg);
-        -webkit-transform: rotate(4deg);
-        text-align: center;
-    }
-
-</style>
-
-<div *ngIf="tvRequests">
-    <div class="col-md-4">
-        <h4 class="text-center">New Requests</h4>
-        <div class="landing-box">
-            <div class="dragula-container" [dragula]='"requests-bag"' [dragulaModel]="tvRequests.new">
-                <request-card *ngFor="let item of tvRequests.new" [request]="item"></request-card>
-            </div>
-        </div>
-    </div>
-
-    <div class="col-md-4">
-        <h4 class="text-center">Approved Requests</h4>
-        <div class="landing-box">
-            <div class="dragula-container" [dragula]='"requests-bag"' [dragulaModel]="tvRequests.approved">
-                <request-card *ngFor="let item of tvRequests.approved" [request]="item"></request-card>
-            </div>
-        </div>
-    </div>
-
-    <div class="col-md-4">
-        <h4 class="text-center">Available</h4>
-        <div class="landing-box">
-            <div class="dragula-container" [dragula]='"requests-bag"' [dragulaModel]="tvRequests.available">
-                <request-card *ngFor="let item of tvRequests.available" [request]="item"></request-card>
-            </div>
-        </div>
-    </div>
-</div>

src/Ombi/ClientApp/src/app/request-grid/request-grid.component.ts

@@ -1,28 +0,0 @@
-//import { Component, OnInit } from '@angular/core';
-//import { DragulaService } from 'ng2-dragula/ng2-dragula';
-//import { RequestService } from '../services";
-//import { ITvRequests, IMovieRequests, IRequestGrid } from '../interfaces";
-
-//@Component({
-//    templateUrl: './request-grid.component.html'
-//})
-//export class RequestGridComponent implements OnInit {
-
-//    constructor(private dragulaService: DragulaService, private requestService: RequestService) {
-//        this.dragulaService.drop.subscribe((value: any) => {
-//        });
-//    }
-
-//    ngOnInit() {
-//        this.requestService.getMovieGrid().subscribe(x => {
-//            this.movieRequests = x;
-//        });
-//        this.requestService.getTvGrid().subscribe(x => {
-//            this.tvRequests = x;
-//        });
-//    }
-
-//    movieRequests: IRequestGrid<IMovieRequests>;
-//    tvRequests: IRequestGrid<ITvRequests>;
-
-//}

src/Ombi/ClientApp/src/styles/shared.scss

@@ -10,6 +10,11 @@
   }
 }
 
+html, body{ 
+  min-height: 100vh;
+  overflow: auto;
+}
+
 .spinner-container {
   position: relative;
   margin-left: 50%;
@@ -24,21 +29,25 @@
 ::-webkit-scrollbar {
   width: 7px;
   background: rgba(0, 0, 0, 0);
-  }
+}
-  ::-webkit-scrollbar-track {
+
+::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0);
-  }
+}
-  ::-webkit-scrollbar-thumb {
+
+::-webkit-scrollbar-thumb {
   border-radius: 3px;
   background: #41927b;
-  }
+}
-  .sidenav ::-webkit-scrollbar-track {
-    display: none;
-  }
 
-  .grow {
+.sidenav ::-webkit-scrollbar-track {
+  display: none;
+}
+
+.grow {
   transition: all .2s ease-in-out;
 }
+
 .grow:hover {
   transform: scale(1.1);
   color: black;

src/Ombi/wwwroot/translations/en.json

@@ -60,7 +60,8 @@
     "UpdateDetails": "Update Details",
     "Logout": "Logout",
     "OpenMobileApp": "Open Mobile App",
-    "RecentlyAdded": "Recently Added"
+    "RecentlyAdded": "Recently Added",
+    "ChangeTheme":"Change Theme"
   },
   "Search": {
     "Title": "Search",