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] jobs page and the update page

---
 .../src/app/settings/jobs/jobs.component.html | 190 ++++++++++--------
 .../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, 174 insertions(+), 144 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 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>
-            <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 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">
-                    <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="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="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="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">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="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">
-                        <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">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