From e22cc1ca150d4457d5097915086be0e50bb93683 Mon Sep 17 00:00:00 2001
From: David Roizenman <david@hmnd.io>
Date: Wed, 9 Dec 2020 17:51:37 -0800
Subject: [PATCH 1/4] Remove remaining smart quotes

---
 src/Ombi/Views/Shared/_Layout.cshtml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Ombi/Views/Shared/_Layout.cshtml b/src/Ombi/Views/Shared/_Layout.cshtml
index 22c6c98f1..5cee9c275 100644
--- a/src/Ombi/Views/Shared/_Layout.cshtml
+++ b/src/Ombi/Views/Shared/_Layout.cshtml
@@ -82,7 +82,7 @@
     <meta property="og:image" content="~/images/logo.png" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
-    <meta property="og:site_name" content=“@appName” />
+    <meta property="og:site_name" content="@appName" />
     <base href="/@baseUrl" />
     <!--<link rel="apple-touch-icon" sizes="180x180" href="~/images/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="~/images/favicon/favicon-32x32.png">

From cb234e17761e979a17a49fe6c01bf27dce6efd73 Mon Sep 17 00:00:00 2001
From: goldenpipes <lewis.enright@live.com>
Date: Sun, 13 Dec 2020 10:44:10 -0600
Subject: [PATCH 2/4] jobs page and the update page

---
 .../src/app/settings/jobs/jobs.component.html | 194 ++++++++++--------
 .../src/app/settings/jobs/jobs.component.scss |  13 +-
 .../app/settings/update/update.component.html | 104 +++++-----
 .../app/settings/update/update.component.scss |  11 +-
 4 files changed, 176 insertions(+), 146 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/settings/jobs/jobs.component.html b/src/Ombi/ClientApp/src/app/settings/jobs/jobs.component.html
index ec2a42c99..88c4bdfbb 100644
--- a/src/Ombi/ClientApp/src/app/settings/jobs/jobs.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/jobs/jobs.component.html
@@ -1,123 +1,137 @@
-<settings-menu>
-</settings-menu>
-
+<settings-menu></settings-menu>
 <wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Job-Settings'"></wiki>
-<div *ngIf="form">
+<div *ngIf="form" class="small-middle-container">
     <fieldset>
         <legend>Job Settings</legend>
-        <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:5%;">
-            <div class="col-md-6">
-                <small>Changes to any of the below requires you to restart Ombi. </small>
-                <small>You can generate valid CRON Expressions here: <a href="https://www.cronmaker.com/" target="_blank">https://www.cronmaker.com/</a></small>
-                <div class="form-group">
-                    <label for="sonarrSync" class="control-label">Sonarr Sync</label>              
-                        <input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': form.get('sonarrSync').hasError('required')}" id="sonarrSync" name="sonarrSync" formControlName="sonarrSync">
-                        <small *ngIf="form.get('sonarrSync').hasError('required')" class="error-text">The Sonarr Sync is required</small>
-                        <button type="button" class="btn btn-sm btn-primary-outline" (click)="testCron(form.get('sonarrSync')?.value)">Test</button>
+        <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
+            <small>Changes require a restart.</small><p>
+            <small>You can generate valid CRON Expressions here: <a href="https://www.cronmaker.com/" target="_blank">https://www.cronmaker.com/</a></small>
+            <div style="margin-top:1em;">    
+                <div class="form-group cronBox">
+                    <mat-form-field appearance="outline" floatLabel=always>
+                    <mat-label for="sonarrSync" class="control-mat-label">Sonarr Sync</mat-label>              
+                        <input matInput type="text" [ngClass]="{'form-error': form.get('sonarrSync').hasError('required')}" id="sonarrSync" name="sonarrSync" formControlName="sonarrSync">
+                        <small *ngIf="form.get('sonarrSync').hasError('required')" class="error-text">The Sonarr Sync is required</small></mat-form-field>
+                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('sonarrSync')?.value)">Test</button>
+                        
                 </div>
-                <div class="form-group">
-                    <label for="sickRageSync" class="control-label">SickRage Sync</label>              
-                        <input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': form.get('sonarrSync').hasError('required')}" id="sickRageSync" name="sickRageSync" formControlName="sickRageSync">
-                        <small *ngIf="form.get('sickRageSync').hasError('required')" class="error-text">The SickRage Sync is required</small>
-                        <button type="button" class="btn btn-sm btn-primary-outline" (click)="testCron(form.get('sickRageSync')?.value)">Test</button>
+                <div class="form-group cronBox">
+                    <mat-form-field appearance="outline" floatLabel=always>
+                    <mat-label for="sickRageSync" class="control-mat-label">SickRage Sync</mat-label>              
+                        <input type="text" matInput [ngClass]="{'form-error': form.get('sonarrSync').hasError('required')}" id="sickRageSync" name="sickRageSync" formControlName="sickRageSync">
+                        <small *ngIf="form.get('sickRageSync').hasError('required')" class="error-text">The SickRage Sync is required</small></mat-form-field>
+                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('sickRageSync')?.value)">Test</button>
                 </div>
 
-                <div class="form-group">
-                        <label for="radarrSync" class="control-label">Radarr Sync</label>              
-                            <input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': form.get('radarrSync').hasError('required')}" id="radarrSync" name="radarrSync" formControlName="radarrSync">
-                            <small *ngIf="form.get('radarrSync').hasError('required')" class="error-text">The Radarr Sync is required</small>
-                            <button type="button" class="btn btn-sm btn-primary-outline" (click)="testCron(form.get('radarrSync')?.value)">Test</button>
+                <div class="form-group cronBox">
+                    <mat-form-field appearance="outline" floatLabel=always>
+                        <mat-label for="radarrSync" class="control-mat-label">Radarr Sync</mat-label>              
+                            <input type="text" matInput [ngClass]="{'form-error': form.get('radarrSync').hasError('required')}" id="radarrSync" name="radarrSync" formControlName="radarrSync">
+                            <small *ngIf="form.get('radarrSync').hasError('required')" class="error-text">The Radarr Sync is required</small></mat-form-field>
+                            <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('radarrSync')?.value)">Test</button>
                     </div>
 
-                    <div class="form-group">
-                            <label for="lidarrArtistSync" class="control-label">Lidarr Sync</label>              
-                                <input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': form.get('lidarrArtistSync').hasError('required')}" id="lidarrArtistSync" name="lidarrArtistSync" formControlName="lidarrArtistSync">
-                                <small *ngIf="form.get('lidarrArtistSync').hasError('required')" class="error-text">The Lidarr Sync is required</small>
-                                <button type="button" class="btn btn-sm btn-primary-outline" (click)="testCron(form.get('lidarrArtistSync')?.value)">Test</button>
+                    <div class="form-group cronBox">
+                        <mat-form-field appearance="outline" floatLabel=always>
+                            <mat-label for="lidarrArtistSync" class="control-mat-label">Lidarr Sync</mat-label>              
+                                <input type="text" matInput [ngClass]="{'form-error': form.get('lidarrArtistSync').hasError('required')}" id="lidarrArtistSync" name="lidarrArtistSync" formControlName="lidarrArtistSync">
+                                <small *ngIf="form.get('lidarrArtistSync').hasError('required')" class="error-text">The Lidarr Sync is required</small></mat-form-field>
+                                <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('lidarrArtistSync')?.value)">Test</button>
                         </div>
         
-                <div class="form-group">
-                    <label for="couchPotatoSync" class="control-label">CouchPotato Sync</label>              
-                        <input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': form.get('radarrSync').hasError('required')}" id="couchPotatoSync" name="couchPotatoSync" formControlName="couchPotatoSync">
-                        <small *ngIf="form.get('couchPotatoSync').hasError('required')" class="error-text">The CouchPotato Sync is required</small>
-                        <button type="button" class="btn btn-sm btn-primary-outline" (click)="testCron(form.get('couchPotatoSync')?.value)">Test</button>
+                <div class="form-group cronBox">
+                    <mat-form-field appearance="outline" floatLabel=always>
+                    <mat-label for="couchPotatoSync" class="control-mat-label">CouchPotato Sync</mat-label>              
+                        <input type="text" matInput [ngClass]="{'form-error': form.get('radarrSync').hasError('required')}" id="couchPotatoSync" name="couchPotatoSync" formControlName="couchPotatoSync">
+                        <small *ngIf="form.get('couchPotatoSync').hasError('required')" class="error-text">The CouchPotato Sync is required</small></mat-form-field>
+                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('couchPotatoSync')?.value)">Test</button>
                 </div>
                 
-                <div class="form-group">
-                    <label for="automaticUpdater" class="control-label">Automatic Update</label>              
-                        <input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': form.get('automaticUpdater').hasError('required')}" id="automaticUpdater" name="automaticUpdater" formControlName="automaticUpdater">
-                        <small *ngIf="form.get('automaticUpdater').hasError('required')" class="error-text">The Automatic Update is required</small>
-                        <button type="button" class="btn btn-sm btn-primary-outline" (click)="testCron(form.get('automaticUpdater')?.value)">Test</button>
+                <div class="form-group cronBox">
+                    <mat-form-field appearance="outline" floatLabel=always>
+                    <mat-label for="automaticUpdater" class="control-mat-label">Automatic Update</mat-label>              
+                        <input type="text" matInput [ngClass]="{'form-error': form.get('automaticUpdater').hasError('required')}" id="automaticUpdater" name="automaticUpdater" formControlName="automaticUpdater">
+                        <small *ngIf="form.get('automaticUpdater').hasError('required')" class="error-text">The Automatic Update is required</small></mat-form-field>
+                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('automaticUpdater')?.value)">Test</button>
                 </div>
 
-                <div class="form-group">
-                    <label for="retryRequests" class="control-label">Retry Failed Requests</label>              
-                        <input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': form.get('retryRequests').hasError('required')}" id="retryRequests" name="retryRequests" formControlName="retryRequests">
-                        <small *ngIf="form.get('retryRequests').hasError('required')" class="error-text">The Retry Requests is required</small>
-                        <button type="button" class="btn btn-sm btn-primary-outline" (click)="testCron(form.get('retryRequests')?.value)">Test</button>
-                </div>
-            </div>
-            <div class="col-md-6">
-                <div class="form-group">
-                    <label for="plexContentSync" class="control-label">Plex Sync</label>              
-                        <input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': form.get('plexContentSync').hasError('required')}" id="plexContentSync" name="plexContentSync" formControlName="plexContentSync">
-                        <small *ngIf="form.get('plexContentSync').hasError('required')" class="error-text">The Plex Sync is required</small>
-                        <button type="button" class="btn btn-sm btn-primary-outline" (click)="testCron(form.get('plexContentSync')?.value)">Test</button>
-                </div>
-                <div class="form-group">
-                    <label for="plexRecentlyAddedSync" class="control-label">Plex Recently Added Sync</label>              
-                        <input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': form.get('plexRecentlyAddedSync').hasError('required')}" id="plexRecentlyAddedSync" name="plexRecentlyAddedSync" formControlName="plexRecentlyAddedSync">
-                        <small *ngIf="form.get('plexRecentlyAddedSync').hasError('required')" class="error-text">The Plex Sync is required</small>
-                        <button type="button" class="btn btn-sm btn-primary-outline" (click)="testCron(form.get('plexRecentlyAddedSync')?.value)">Test</button>
+                <div class="form-group cronBox">
+                    <mat-form-field appearance="outline" floatLabel=always>
+                    <mat-label for="retryRequests" class="control-mat-label">Retry Failed Requests</mat-label>              
+                        <input type="text" matInput [ngClass]="{'form-error': form.get('retryRequests').hasError('required')}" id="retryRequests" name="retryRequests" formControlName="retryRequests">
+                        <small *ngIf="form.get('retryRequests').hasError('required')" class="error-text">The Retry Requests is required</small></mat-form-field>
+                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('retryRequests')?.value)">Test</button>
                 </div>
 
-                <div class="form-group">
-                    <label for="embyContentSync" class="control-label">Emby Sync</label>
-                        <input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': form.get('embyContentSync').hasError('required')}" id="embyContentSync" name="embyContentSync" formControlName="embyContentSync">
-                        <small *ngIf="form.get('embyContentSync').hasError('required')" class="error-text">The Emby Sync is required</small>
-                        <button type="button" class="btn btn-sm btn-primary-outline" (click)="testCron(form.get('embyContentSync')?.value)">Test</button>
+                <div class="form-group cronBox">
+                    <mat-form-field appearance="outline" floatLabel=always>
+                    <mat-label for="plexContentSync" class="control-mat-label">Plex Sync</mat-label>              
+                        <input type="text" matInput [ngClass]="{'form-error': form.get('plexContentSync').hasError('required')}" id="plexContentSync" name="plexContentSync" formControlName="plexContentSync">
+                        <small *ngIf="form.get('plexContentSync').hasError('required')" class="error-text">The Plex Sync is required</small></mat-form-field>
+                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('plexContentSync')?.value)">Test</button>
+                </div>
+                <div class="form-group cronBox">
+                    <mat-form-field appearance="outline" floatLabel=always>
+                        <mat-label for="plexRecentlyAddedSync" class="control-mat-label">Plex Recently Added Sync</mat-label>              
+                        <input type="text" matInput [ngClass]="{'form-error': form.get('plexRecentlyAddedSync').hasError('required')}" id="plexRecentlyAddedSync" name="plexRecentlyAddedSync" formControlName="plexRecentlyAddedSync">
+                        <small *ngIf="form.get('plexRecentlyAddedSync').hasError('required')" class="error-text">The Plex Sync is required</small></mat-form-field>
+                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('plexRecentlyAddedSync')?.value)">Test</button>
                 </div>
 
-                <div class="form-group">
-                    <label for="userImporter" class="control-label">User Importer</label>
-                        <input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': form.get('userImporter').hasError('required')}" id="userImporter" name="userImporter" formControlName="userImporter">
-                        <small *ngIf="form.get('userImporter').hasError('required')" class="error-text">The User Importer is required</small>
-                        <button type="button" class="btn btn-sm btn-primary-outline" (click)="testCron(form.get('userImporter')?.value)">Test</button>
+                <div class="form-group cronBox">
+                    <mat-form-field appearance="outline" floatLabel=always>
+                    <mat-label for="embyContentSync" class="control-mat-label">Emby Sync</mat-label>
+                        <input type="text" matInput [ngClass]="{'form-error': form.get('embyContentSync').hasError('required')}" id="embyContentSync" name="embyContentSync" formControlName="embyContentSync">
+                        <small *ngIf="form.get('embyContentSync').hasError('required')" class="error-text">The Emby Sync is required</small></mat-form-field>
+                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('embyContentSync')?.value)">Test</button>
                 </div>
 
-                    <div class="form-group">
-                        <label for="userImporter" class="control-label">Newsletter</label>              
-                            <input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': form.get('newsletter').hasError('required')}" id="newsletter" name="newsletter" formControlName="newsletter">
-                            <small *ngIf="form.get('newsletter').hasError('required')" class="error-text">The Newsletter is required</small>
-                            <button type="button" class="btn btn-sm btn-primary-outline" (click)="testCron(form.get('newsletter')?.value)">Test</button>
+                <div class="form-group cronBox">
+                    <mat-form-field appearance="outline" floatLabel=always>
+                    <mat-label for="userImporter" class="control-mat-label">User Importer</mat-label>
+                        <input type="text" matInput [ngClass]="{'form-error': form.get('userImporter').hasError('required')}" id="userImporter" name="userImporter" formControlName="userImporter">
+                        <small *ngIf="form.get('userImporter').hasError('required')" class="error-text">The User Importer is required</small></mat-form-field>
+                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('userImporter')?.value)">Test</button>
+                </div>
+
+                    <div class="form-group cronBox">
+                        <mat-form-field appearance="outline" floatLabel=always>
+                        <mat-label for="userImporter" class="control-mat-label">Newsletter</mat-label>              
+                            <input type="text" matInput [ngClass]="{'form-error': form.get('newsletter').hasError('required')}" id="newsletter" name="newsletter" formControlName="newsletter">
+                            <small *ngIf="form.get('newsletter').hasError('required')" class="error-text">The Newsletter is required</small></mat-form-field>
+                            <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('newsletter')?.value)">Test</button>
                     </div>
 
-                    <div class="form-group">
-                        <label for="userImporter" class="control-label">Issue Purge/Delete</label>              
-                            <input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': form.get('issuesPurge').hasError('required')}" id="issuesPurge" name="issuesPurge" formControlName="issuesPurge">
-                            <small *ngIf="form.get('issuesPurge').hasError('required')" class="error-text">The Issues Purge is required</small>
-                            <button type="button" class="btn btn-sm btn-primary-outline" (click)="testCron(form.get('issuesPurge')?.value)">Test</button>
+                    <div class="form-group cronBox">
+                        <mat-form-field appearance="outline" floatLabel=always>
+                        <mat-label for="userImporter" class="control-mat-label">Issue Purge/Delete</mat-label>              
+                            <input type="text" matInput [ngClass]="{'form-error': form.get('issuesPurge').hasError('required')}" id="issuesPurge" name="issuesPurge" formControlName="issuesPurge">
+                            <small *ngIf="form.get('issuesPurge').hasError('required')" class="error-text">The Issues Purge is required</small></mat-form-field>
+                            <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('issuesPurge')?.value)">Test</button>
                     </div>
 
-                    <div class="form-group">
-                        <label for="userImporter" class="control-label">Media Data Refresh</label>              
-                            <input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': form.get('mediaDatabaseRefresh').hasError('required')}" id="mediaDatabaseRefresh" name="mediaDatabaseRefresh" formControlName="mediaDatabaseRefresh">
-                            <small *ngIf="form.get('mediaDatabaseRefresh').hasError('required')" class="error-text">The Media Database Refresh is required</small>
-                            <button type="button" class="btn btn-sm btn-primary-outline" (click)="testCron(form.get('mediaDatabaseRefresh')?.value)">Test</button>
+                    <div class="form-group cronBox">
+                        <mat-form-field appearance="outline" floatLabel=always>
+                        <mat-label for="userImporter" class="control-mat-label">Media Data Refresh</mat-label>              
+                            <input type="text" matInput [ngClass]="{'form-error': form.get('mediaDatabaseRefresh').hasError('required')}" id="mediaDatabaseRefresh" name="mediaDatabaseRefresh" formControlName="mediaDatabaseRefresh">
+                            <small *ngIf="form.get('mediaDatabaseRefresh').hasError('required')" class="error-text">The Media Database Refresh is required</small></mat-form-field>
+                            <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('mediaDatabaseRefresh')?.value)">Test</button>
                     </div>
 
-                    <div class="form-group">
-                        <label for="userImporter" class="control-label">Auto Available Request Deletion</label>
-                            <input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': form.get('autoDeleteRequests').hasError('required')}" id="autoDeleteRequests" name="autoDeleteRequests" formControlName="autoDeleteRequests">
-                            <small *ngIf="form.get('autoDeleteRequests').hasError('required')" class="error-text">Auto Available Request Deletion is required</small>
-                            <button type="button" class="btn btn-sm btn-primary-outline" (click)="testCron(form.get('autoDeleteRequests')?.value)">Test</button>
+                    <div class="form-group cronBox">
+                        <mat-form-field appearance="outline" floatLabel=always>
+                        <mat-label for="userImporter" class="control-mat-label">Auto Available Request Deletion</mat-label>
+                            <input type="text" matInput [ngClass]="{'form-error': form.get('autoDeleteRequests').hasError('required')}" id="autoDeleteRequests" name="autoDeleteRequests" formControlName="autoDeleteRequests">
+                            <small *ngIf="form.get('autoDeleteRequests').hasError('required')" class="error-text">Auto Available Request Deletion is required</small></mat-form-field>
+                            <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('autoDeleteRequests')?.value)">Test</button>
                     </div>
             </div>
-            <div class="form-group">
+            <div class="form-group cronBox">
                     <div>
-                        <button type="submit" [disabled]="form.invalid" class="btn btn-primary-outline">Submit</button>
+                        <button mat-raised-button type="submit" [disabled]="form.invalid" class="mat-focus-indicator mat-raised-button mat-button-base mat-accent">Submit</button>
+                        
                     </div>
                 </div>
         </form>
     </fieldset>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/settings/jobs/jobs.component.scss b/src/Ombi/ClientApp/src/app/settings/jobs/jobs.component.scss
index 018bebef8..ff6ee2525 100644
--- a/src/Ombi/ClientApp/src/app/settings/jobs/jobs.component.scss
+++ b/src/Ombi/ClientApp/src/app/settings/jobs/jobs.component.scss
@@ -1,5 +1,16 @@
 .small-middle-container{
 	margin: auto;
-	width: 85%;
+	width: 95%;
 	margin-top:10px;
+}
+.cronBox {
+    width: 300px;
+    display: inline-flex;
+    padding-left: 0px;
+    margin-right: 1em;
+}
+.cronbtn {
+	max-height: 36px;
+	margin-top: 1em;
+	margin-left: .5em;
 }
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/settings/update/update.component.html b/src/Ombi/ClientApp/src/app/settings/update/update.component.html
index 990015d76..6d0688697 100644
--- a/src/Ombi/ClientApp/src/app/settings/update/update.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/update/update.component.html
@@ -4,85 +4,87 @@
 <div *ngIf="form" class="small-middle-container">
     <fieldset>
         <legend>Update Settings</legend>
-        <div class="form-group"  style="float: right">
-            <div *ngIf="updateAvailable">
-                <button (click)="update()" [disabled]="!enableUpdateButton" class="btn btn-success-outline">Update</button>
-            </div>
-            <div *ngIf="!updateAvailable">
-                <button (click)="checkForUpdate()" class="btn btn-primary-outline">Check For Update</button>
-            </div>
+        <div class="md-form-field" style="margin-top:1em">
+            <div *ngIf="updateAvailable"><button mat-raised-button (click)="update()" [disabled]="!enableUpdateButton" class="btn btn-success-outline">Update</button></div>
+            <div *ngIf="!updateAvailable"><button mat-raised-button (click)="checkForUpdate()" class="btn btn-primary-outline">Check For Update</button></div>
         </div>
-        <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:5%;">
-            <div class="col-md-6">
-                <div class="form-group">
-                    <div class="checkbox">
-                        <input type="checkbox" id="autoUpdateEnabled" formControlName="autoUpdateEnabled">
-                        <label for="autoUpdateEnabled">Enable Automatic Update</label>
-                    </div>
+        <div class="md-form-field" style="margin-top:1em"></div>
+        <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
+            <div class="md-form-field">
+                    <mat-slide-toggle id="autoUpdateEnabled" formControlName="autoUpdateEnabled">
+                        <mat-mat-label for="autoUpdateEnabled">Enable Automatic Update</mat-mat-label>
+                    </mat-slide-toggle>
                 </div>                
-                <!-- <div class="form-group">
-                    <div class="checkbox">
-                        <input type="checkbox" id="testMode" formControlName="testMode">
-                        <label for="testMode">Test Mode</label>
+                <!-- <div class="md-form-field">
+                    <mat-slide-toggle id="testMode" formControlName="testMode">
+                        <mat-label for="testMode">Test Mode</mat-label>
                     </div>
                 </div> -->
-                <div class="form-group" *ngIf="isWindows">
-                    <div class="checkbox">
-                        <input type="checkbox" id="windowsService" formControlName="windowsService">
-                        <label for="windowsService">Running as a Windows Service</label>
-                    </div>
+                <div class="md-form-field" *ngIf="isWindows">
+                    <mat-slide-toggle id="windowsService" formControlName="windowsService">
+                        <mat-label for="windowsService">Running as a Windows Service</mat-label>
+                    </mat-slide-toggle>
                 </div>
                 
-                <div class="form-group" *ngIf="!form.value.windowsService">
-                    <div class="checkbox">
-                        <input type="checkbox" id="useScript" formControlName="useScript">
-                        <label for="useScript">Use your own updater script</label>
-                    </div>
+                <div class="md-form-field" *ngIf="!form.value.windowsService">
+                    <mat-slide-toggle id="useScript" formControlName="useScript">
+                        <mat-label for="useScript">Use your own updater script</mat-label>
+                    </mat-slide-toggle>
                 </div>
-                
+                <div class="md-form-field" style="margin-top:1em"></div>
                 
                 <div *ngIf="form.value.windowsService">
-                    <div class="form-group">
-                        <label for="windowsServiceName" class="control-label">Windows Service Name</label>
-                        <input type="text" class="form-control form-control-custom " id="windowsServiceName" name="windowsServiceName" formControlName="windowsServiceName">
+                    <div class="md-form-field textEntry">
+                        <mat-form-field appearance="outline" floatLabel=always><mat-label for="windowsServiceName" class="control-mat-label">Windows Service Name</mat-label>
+                        <input matInput id="windowsServiceName" name="windowsServiceName" formControlName="windowsServiceName">
+                    </mat-form-field>
                     </div>
                 </div>
 
 
                 <div [hidden]="!useScript || form.value.windowsService">
                     <small>For information how to use this, please press the wiki button at the top of the page</small>
-                    <div class="form-group">
-                        <label for="scriptLocation" class="control-label">Script Path</label>
-                        <input type="text" class="form-control form-control-custom " id="scriptLocation" name="scriptLocation" formControlName="scriptLocation">
+                    <div class="md-form-field textEntry">
+                        <mat-form-field appearance="outline" floatLabel=always>
+                        <mat-label for="scriptLocation" class="control-mat-label">Script Path</mat-label>
+                        <input matInput id="scriptLocation" name="scriptLocation" formControlName="scriptLocation">
+                        </mat-form-field>
                     </div>
                 </div>
 
                 
                 <div [hidden]="useScript || form.value.windowsService">
                 <small >By default the process name is Ombi, but this could be different for your system. We need to know the process name so we can kill that process to update the files.</small>
-                    <div class="form-group">
-                        <label for="processName">Ombi Process Name</label>
-                        <input type="text" id="processName" class="form-control form-control-custom" placeholder="Ombi" formControlName="processName">
+                    <div class="md-form-field textEntry">
+                        <mat-form-field appearance="outline" floatLabel=always>
+                        <mat-label for="processName">Ombi Process Name</mat-label>
+                        <input matInput id="processName" placeholder="Ombi" formControlName="processName">
+                        </mat-form-field>
                     </div>
                 </div>
                 
-                <div class="form-group">
-                    <div>
-                        <button type="submit" class="btn btn-primary-outline ">Submit</button>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-6" [hidden]="useScript" *ngIf="isWindows">
+
+            
+            <div class="md-form-field" [hidden]="useScript" *ngIf="isWindows">
                 <small>If you are getting any permissions issues, you can specify a user for the update process to run under.</small>
 
-                <div class="form-group">
-                    <label for="username" class="control-label">Username</label>
-                    <input type="text" class="form-control form-control-custom " id="username" name="username" formControlName="username">
+                <div class="md-form-field textEntry">
+                    <mat-form-field appearance="outline" floatLabel=always>
+                    <mat-label for="username" class="control-mat-label">Username</mat-label>
+                    <input matInput id="username" name="username" formControlName="username">
+                    </mat-form-field>
                 </div>
 
-                <div class="form-group">
-                    <label for="password">Password</label>
-                    <input type="password" id="password" class="form-control form-control-custom" formControlName="password">
+                <div class="md-form-field textEntry">
+                    <mat-form-field appearance="outline" floatLabel=always>
+                    <mat-label for="password">Password</mat-label>
+                    <input matInput type="password" id="password" formControlName="password">
+                    </mat-form-field>
+                </div>
+            </div>
+            <div class="md-form-field" style="margin-top:1em;">
+                <div>
+                    <button mat-raised-button type="submit" color="primary" [disabled]="form.invalid" class="mat-focus-indicator mat-stroked-button accent mat-accent mat-raised-button mat-button-base" ng-reflect-disabled="false"><span class="mat-button-wrapper">Submit</span><div matripple="" class="mat-ripple mat-button-ripple" ng-reflect-disabled="false" ng-reflect-centered="false" ng-reflect-trigger="[object HTMLButtonElement]"></div><div class="mat-button-focus-overlay"></div></button>
                 </div>
             </div>
         </form>
diff --git a/src/Ombi/ClientApp/src/app/settings/update/update.component.scss b/src/Ombi/ClientApp/src/app/settings/update/update.component.scss
index 60e52d81a..044e7eb2d 100644
--- a/src/Ombi/ClientApp/src/app/settings/update/update.component.scss
+++ b/src/Ombi/ClientApp/src/app/settings/update/update.component.scss
@@ -1,5 +1,8 @@
-.small-middle-container{
-	margin: auto;
-	width: 85%;
-	margin-top:10px;
+.small-middle-container {
+    margin: auto;
+    width: 95%;
+    margin-top: 10px;
 }
+.textEntry {
+    width: 300px;
+}
\ No newline at end of file

From 093fb673ed5dbfa24de69df7aa2eb7f522ac455a Mon Sep 17 00:00:00 2001
From: goldenpipes <lewis.enright@live.com>
Date: Mon, 14 Dec 2020 18:56:10 -0600
Subject: [PATCH 3/4] added a new class for the login card to allow changing
 the card colour, etc

---
 src/Ombi/ClientApp/src/app/login/login.component.html | 2 +-
 src/Ombi/ClientApp/src/app/login/login.component.scss | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Ombi/ClientApp/src/app/login/login.component.html b/src/Ombi/ClientApp/src/app/login/login.component.html
index 9fcc4c1ee..27b8d827a 100644
--- a/src/Ombi/ClientApp/src/app/login/login.component.html
+++ b/src/Ombi/ClientApp/src/app/login/login.component.html
@@ -3,7 +3,7 @@
 <div class="small-middle-container">
     <div *ngIf="form && customizationSettings && authenticationSettings">
 
-        <mat-card class="mat-elevation-z8 top-margin">
+        <mat-card class="mat-elevation-z8 top-margin login-card">
             <img mat-card-image *ngIf="!customizationSettings.logo" src="{{baseUrl}}/images/logo.png">
             <img mat-card-image *ngIf="customizationSettings.logo" [src]="customizationSettings.logo">
             <mat-card-content id="login-box" *ngIf="!authenticationSettings.enableOAuth || loginWithOmbi">
diff --git a/src/Ombi/ClientApp/src/app/login/login.component.scss b/src/Ombi/ClientApp/src/app/login/login.component.scss
index dfa7c3557..aa285a957 100644
--- a/src/Ombi/ClientApp/src/app/login/login.component.scss
+++ b/src/Ombi/ClientApp/src/app/login/login.component.scss
@@ -228,4 +228,7 @@ div.bg {
 
 .login-buttons {
     text-align: center;
+}
+.login-card {
+    background: #424242;
 }
\ No newline at end of file

From 108e3d8fd95b462ac8628eb5cfa4c7cc38e27707 Mon Sep 17 00:00:00 2001
From: Dyson Parkes <dyson@berserkir.net>
Date: Wed, 16 Dec 2020 14:46:54 +1300
Subject: [PATCH 4/4] Fix 'language' for sonarr v3

Replace "languge" with "Language"
---
 .../ClientApp/src/app/settings/sonarr/sonarr.component.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.ts b/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.ts
index 157accf02..f3cc71018 100644
--- a/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.ts
+++ b/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.ts
@@ -140,7 +140,7 @@ export class SonarrComponent implements OnInit {
                 this.languageProfiles.unshift({ name: "Please Select", id: -1 });
 
                 this.langRunning = false;
-                this.notificationService.success("Successfully retrieved the Languge Profiles");
+                this.notificationService.success("Successfully retrieved the Language Profiles");
             });
     }
 
@@ -191,4 +191,4 @@ function validateProfile(qualityProfile): { [key: string]:boolean } | null {
         return { 'profileValidation': true };
     }
     return null;
-}
\ No newline at end of file
+}