From 3bbab82e0157ee19f1919a16b6c469d2320e59cb Mon Sep 17 00:00:00 2001
From: goldenpipes <lewis.enright@live.com>
Date: Sat, 5 Sep 2020 13:00:21 -0500
Subject: [PATCH] settings pages UI clean-up

---
 .../authentication.component.html             | 18 +++--
 .../app/settings/issues/issues.component.html | 28 ++++----
 .../landingpage/landingpage.component.html    |  2 +-
 .../app/settings/lidarr/lidarr.component.html | 34 +++++----
 .../app/settings/radarr/radarr.component.html | 19 +++--
 .../app/settings/sonarr/sonarr.component.html | 70 +++++++++++--------
 .../themoviedb/themoviedb.component.html      | 10 +--
 .../usermanagement.component.html             | 35 ++++------
 .../usermanagement.component.scss             |  4 ++
 .../src/app/settings/vote/vote.component.html | 13 ++--
 .../src/app/settings/vote/vote.component.scss |  3 +
 src/Ombi/ClientApp/src/styles/buttons.scss    |  2 +-
 src/Ombi/ClientApp/src/styles/shared.scss     |  4 --
 13 files changed, 131 insertions(+), 111 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/settings/authentication/authentication.component.html b/src/Ombi/ClientApp/src/app/settings/authentication/authentication.component.html
index 6ab91801c..7af303f97 100644
--- a/src/Ombi/ClientApp/src/app/settings/authentication/authentication.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/authentication/authentication.component.html
@@ -3,21 +3,18 @@
 <wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Authentication-Settings'"></wiki>
 <fieldset *ngIf="form">
     <legend>Authentication</legend>
+    <div class="md-form-field" style="margin-top:1em;"></div>
     <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
-
-        <div class="col-md-6">
-
             <div class="form-group">
                 <div class="checkbox">
-                    <input type="checkbox" id="allowNoPassword" name="allowNoPassword" formControlName="allowNoPassword">
-                    <label for="allowNoPassword" tooltipPosition="top" pTooltip="Allow users to login with out a password">Allow users to login without a password</label>
+                    <mat-checkbox id="allowNoPassword" name="allowNoPassword" formControlName="allowNoPassword">
+                    Allow users to login without a password</mat-checkbox>
                 </div>
             </div>
 
             <div class="form-group">
                 <div class="checkbox">
-                    <input type="checkbox" id="enableOAuth" name="enableOAuth" formControlName="enableOAuth">
-                    <label for="enableOAuth" >Enable Plex OAuth</label>
+                    <mat-checkbox id="enableOAuth" name="enableOAuth" formControlName="enableOAuth">Enable Plex OAuth</mat-checkbox>
                 </div>
             </div>
 
@@ -59,10 +56,11 @@
 
             <div class="form-group">
                 <div>
-                    <button [disabled]="form.invalid" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                    <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 class="md-form-field" style="margin-top:1em;"></div>
                 </div>
             </div>
-        </div>
-    </form>
+        </form>
 </fieldset>
 </div>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/settings/issues/issues.component.html b/src/Ombi/ClientApp/src/app/settings/issues/issues.component.html
index 84a27b509..d9ba9e342 100644
--- a/src/Ombi/ClientApp/src/app/settings/issues/issues.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/issues/issues.component.html
@@ -4,25 +4,26 @@
 
 <fieldset>
     <legend>Issues</legend>
-    <form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:2%;">
+    <div class="md-form-field" style="margin-top:1em;"></div>
+    <form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
         <div class="col-md-6">
             <div class="form-group">
                 <div class="checkbox">
-                    <input type="checkbox" id="enable" formControlName="enabled" ng-checked="form.enabled">
-                    <label for="enable">Enable</label>
+                    <mat-checkbox id="enable" formControlName="enabled" ng-checked="form.enabled">
+                    Enable</mat-checkbox>
                 </div>
             </div>
             <div class="form-group">
                 <div class="checkbox">
-                    <input type="checkbox" id="enableInProgress" formControlName="enableInProgress" ng-checked="form.enableInProgress">
-                    <label for="enableInProgress">Enable In Progress State</label>
+                    <mat-checkbox id="enableInProgress" formControlName="enableInProgress" ng-checked="form.enableInProgress">
+                    Enable In Progress State</mat-checkbox>
                 </div>
             </div>
 
             <div class="form-group">
                 <div class="checkbox">
-                    <input type="checkbox" id="deleteIssues" formControlName="deleteIssues" ng-checked="form.deleteIssues">
-                    <label for="deleteIssues">Delete issues after they have been resolved</label>
+                    <mat-checkbox id="deleteIssues" formControlName="deleteIssues" ng-checked="form.deleteIssues">
+                    Delete issues after they have been resolved</mat-checkbox>
                 </div>
             </div>
 
@@ -34,19 +35,16 @@
             </div>
 
 
-            <div class="form-group">
+            <div class="md-form-field">
                 <div>
-                    <button type="submit" [disabled]="form.invalid" class="btn btn-primary-outline ">Submit</button>
+                    <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 class="md-form-field" style="margin-top:1em;"></div>
                 </div>
             </div>
         </div>
-
     </form>
 
-
-
-
-
     <div class="col-md-6">
         <div *ngIf="categories">
             <div class="form-group row">
@@ -58,7 +56,7 @@
                         name="categoryToAdd" value="{{categoryToAdd.value}}">
                 </div>
                 <div class="col-md-3">
-                    <button class="btn btn-primary-outline" (click)="addCategory()">Add</button>
+                    <button mat-raised-button (click)="addCategory()">Add</button>
                 </div>
             </div>
 
diff --git a/src/Ombi/ClientApp/src/app/settings/landingpage/landingpage.component.html b/src/Ombi/ClientApp/src/app/settings/landingpage/landingpage.component.html
index 5020f899f..a6c3f888d 100644
--- a/src/Ombi/ClientApp/src/app/settings/landingpage/landingpage.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/landingpage/landingpage.component.html
@@ -3,7 +3,7 @@
 <wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Landing-Page-Settings'"></wiki>
 <fieldset *ngIf="settings" class="container">
         <legend>Landing Page Configuration</legend>
-        
+        <div class="md-form-field" style="margin-top:1em;"></div>
         <div class="col-12">
                 <mat-checkbox [(ngModel)]="settings.enabled"> 
                 Enable
diff --git a/src/Ombi/ClientApp/src/app/settings/lidarr/lidarr.component.html b/src/Ombi/ClientApp/src/app/settings/lidarr/lidarr.component.html
index c3bc85fcb..34b622861 100644
--- a/src/Ombi/ClientApp/src/app/settings/lidarr/lidarr.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/lidarr/lidarr.component.html
@@ -2,7 +2,7 @@
   <div *ngIf="form" class="small-middle-container">
     <fieldset>
       <legend>Lidarr Settings</legend>
-
+      <div class="md-form-field" style="margin-top:1em;"></div>
       <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
 
         <div class="row">
@@ -13,6 +13,7 @@
           <div class="md-form-field">
             <mat-slide-toggle [ngModelOptions]="{standalone: true}" [(ngModel)]="advanced">Advanced</mat-slide-toggle>
           </div>
+          <div class="md-form-field" style="margin-top:1em;"></div>
         </div>
         </div>
         <div class="row">
@@ -32,6 +33,7 @@
               <mat-slide-toggle formControlName="ssl">
                 SSL
               </mat-slide-toggle>
+              <div class="md-form-field" style="margin-top:1em;"></div>
             </div>
             <div class="md-form-field">
               <mat-form-field appearance="outline" floatLabel=always>
@@ -52,6 +54,11 @@
               <h3>Interface</h3>
             </label>
             <div class="md-form-field">
+              <div class="md-form-field" style="display:inline;">
+                <button mat-raised-button (click)="getProfiles(form)" color="primary">Load Profiles <span
+                    *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
+              </div>
+              <div class="md-form-field" style="margin-top:1em;"></div>
               <mat-form-field appearance="outline" floatLabel=always>
                 <mat-label>Quality Profiles</mat-label>
                 <mat-select formControlName="defaultQualityProfile" required>
@@ -60,13 +67,16 @@
                   </mat-option>
                 </mat-select>
               </mat-form-field>
-              <div class="md-form-field" style="display:inline;">
-                <button mat-raised-button (click)="getProfiles(form)" color="primary">Load Profiles <span
-                    *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
-              </div>
             </div>
 
             <div class="md-form-field">
+              <div class="md-form-field" style="display:inline;">
+                <button mat-raised-button (click)="getRootFolders(form)" color="primary">Load Root Folders <span
+                    *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
+              </div>
+
+              <div class="md-form-field" style="margin-top:1em;"></div>
+
               <mat-form-field appearance="outline" floatLabel=always>
                 <mat-label>Default Root Folder</mat-label>
                 <mat-select formControlName="defaultRootPath" required>
@@ -75,13 +85,14 @@
                   </mat-option>
                 </mat-select>
               </mat-form-field>
-              <div class="md-form-field" style="display:inline;">
-                <button mat-raised-button (click)="getRootFolders(form)" color="primary">Load Root Folders <span
-                    *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
-              </div>
             </div>
 
             <div class="md-form-field">
+              <div class="md-form-field" style="display:inline;">
+                <button mat-raised-button (click)="getMetadataProfiles(form)" color="primary">Load Metadata <span
+                    *ngIf="metadataRunning" class="fa fa-spinner fa-spin"></span></button></div>
+                    <div class="md-form-field" style="margin-top:1em;"></div>
+            </div>
               <mat-form-field appearance="outline" floatLabel=always>
                 <mat-label>Metadata Profile</mat-label>
                 <mat-select formControlName="metadataProfileId" required>
@@ -90,16 +101,13 @@
                   </mat-option>
                 </mat-select>
               </mat-form-field>
-              <div class="md-form-field" style="display:inline;">
-                <button mat-raised-button (click)="getMetadataProfiles(form)" color="primary">Load Metadata <span
-                    *ngIf="metadataRunning" class="fa fa-spinner fa-spin"></span></button></div>
-            </div>
 
 
             <div class="md-form-field">
               <mat-slide-toggle formControlName="albumFolder">
                 Album Folder
               </mat-slide-toggle>
+              <div class="md-form-field" style="margin-top:1em;"></div>
             </div>
 
             <div class="md-form-field" *ngIf="advanced" style="color:#ff761b">
diff --git a/src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.html b/src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.html
index 5e9a56b3b..7524813e3 100644
--- a/src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.html
@@ -2,6 +2,7 @@
 <div *ngIf="form" class="small-middle-container">
     <fieldset>
         <legend>Radarr Settings</legend>
+        <div class="md-form-field" style="margin-top:1em;"></div>
         <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
             <div class="row">
                 <div class="col-md-12 col-12 col-sm-12">
@@ -15,6 +16,7 @@
                         <div class="md-form-field">
                             <mat-slide-toggle formControlName="scanForAvailability">Scan for Availability</mat-slide-toggle>
                         </div>
+                        <div class="md-form-field" style="margin-top:1em;"></div>
                     </div>
                 </div>
             </div>
@@ -34,6 +36,7 @@
                             SSL
                         </mat-slide-toggle>
                     </div>
+                    <div class="md-form-field" style="margin-top:1em;"></div>
                     <div class="md-form-field">
                         <mat-form-field appearance="outline" >
                             <mat-label>API key</mat-label>
@@ -50,6 +53,10 @@
                 <div class="col-md-5 col-4 col-sm-12">
                     <label for="username" class="control-label"><h3>Radarr Interface</h3></label>
                     <div class="md-form-field">
+                    <div class="md-form-field" style="display:inline;">
+                        <button mat-raised-button (click)="getProfiles(form)" color="primary">Load Profiles <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
+                    </div>
+                    <div class="md-form-field" style="margin-top:1em;"></div>
                         <mat-form-field appearance="outline" >
                             <mat-label>Quality Profiles</mat-label>
                             <mat-select formControlName="defaultQualityProfile" required>
@@ -58,11 +65,13 @@
                                 </mat-option>
                             </mat-select>
                         </mat-form-field>
-                        <div class="md-form-field" style="display:inline;">
-                            <button mat-raised-button (click)="getProfiles(form)" color="primary">Load Profiles <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
-                        </div>
+
                     </div>
                     <div class="md-form-field">
+                        <div class="md-form-field" style="display:inline;">
+                            <button mat-raised-button (click)="getRootFolders(form)" color="primary">Load Root Folders <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
+                        </div>
+                        <div class="md-form-field" style="margin-top:1em;"></div>
                         <mat-form-field appearance="outline" >
                             <mat-label>Default Root Folder</mat-label>
                             <mat-select formControlName="defaultRootPath" required>
@@ -71,9 +80,7 @@
                                 </mat-option>
                             </mat-select>
                         </mat-form-field>
-                        <div class="md-form-field" style="display:inline;">
-                            <button mat-raised-button (click)="getRootFolders(form)" color="primary">Load Root Folders <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
-                        </div>
+
                     </div>
                     <div class="md-form-field">
                         <mat-form-field appearance="outline" >
diff --git a/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.html b/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.html
index 60ddf9827..08b8abade 100644
--- a/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.html
@@ -1,7 +1,8 @@
-<settings-menu></settings-menu>
+<settings-menu></settings-menu>
 <div *ngIf="form" class="small-middle-container">
     <fieldset>
         <legend>Sonarr Settings</legend>
+        <div class="md-form-field" style="margin-top:1em;"></div>
         <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
             <div class="row top-spacing">
                 <div class="col-md-12 col-12 col-sm-12" >
@@ -20,6 +21,7 @@
                         <div class="md-form-field">
                             <mat-slide-toggle formControlName="scanForAvailability">Scan for Availability</mat-slide-toggle>
                         </div>
+                        <div class="md-form-field" style="margin-top:1em;"></div>
                     </div>
                 </div>
             </div>
@@ -38,6 +40,7 @@
                             <mat-error>The Port is required</mat-error>
                         </mat-form-field>
                         <mat-slide-toggle formControlName="ssl">SSL</mat-slide-toggle>
+                        <div class="md-form-field" style="margin-top:1em;"></div>
                     </div>
                     <div class="md-form-field">
                         <mat-form-field appearance="outline" floatLabel=always>
@@ -56,6 +59,13 @@
                 </div>
                 <div class="col-md-5 col-4 col-sm-12">
                     <label for="username" class="control-label"><h3>Sonarr Interface</h3></label>
+                    <div class="form-group col-md-12">
+                        <div id="profiles">
+                            <div class="md-form-field" style="display:inline;">
+                                <button mat-raised-button id="profiles" (click)="getProfiles(form)" class="mat-stroked-button load">
+                                        Load Qualities <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
+                                        <div class="md-form-field" style="margin-top:1em;"></div>
+                                </div>
                             <div class="md-form-field" style="display:contents;">
                                 <mat-form-field appearance="outline">
                                     <mat-label>Quality Profiles</mat-label>
@@ -65,7 +75,9 @@
                                     <mat-error>A Default Quality Profile is required</mat-error>
                                   </mat-form-field>
                             </div>
-                        <div class="md-form-field" id="qualityProfileAnime">
+
+                            </div>
+                        <div id="qualityProfileAnime">
                             <div class="md-form-field" style="display:contents;">
                                 <mat-form-field appearance="outline">
                                     <mat-label>Quality Profiles (Anime)</mat-label>
@@ -74,18 +86,17 @@
                                     </mat-select>
                                     <mat-error>A Default Quality Profile is required</mat-error>
                                 </mat-form-field>
-                                <div class="md-form-field" style="display:inline;">
-                                    <button mat-raised-button id="profiles" (click)="getProfiles(form)" class="mat-stroked-button load">
-                                            Load Qualities <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
-                                    </div>
-                                    </div>
                             </div>
                         </div>
                     </div>
 
 
-                    <div class="md-form-field">
+                    <div class="form-group col-md-12">
                         <div id="rootFolders">
+                            <div class="md-form-field" style="display:inline">
+                                <button mat-raised-button id="rootFolder" (click)="getRootFolders(form)" class="mat-stroked-button load">
+                                    Load Folders <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button><div class="md-form-field" style="margin-top:1em;"></div>
+                                </div>
                             <div class="md-form-field" style="display:contents;">
                                 <mat-form-field appearance="outline">
                                     <mat-label>Default Root Folders</mat-label>
@@ -95,10 +106,7 @@
                                     <mat-error>A Default Root Folder is required</mat-error>
                                   </mat-form-field>
                             </div>
-                            <div class="md-form-field" style="display:inline;">
-                            <button mat-raised-button id="rootFolder" (click)="getRootFolders(form)" class="mat-stroked-button load">
-                                Load Folders <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
-                            </div>
+
                         </div>
                         <div id="rootFoldersAnime">
                             <div class="md-form-field" style="display:contents;">
@@ -114,11 +122,15 @@
 
                     </div>
 
-                    <div class="md-form-field" *ngIf="form.controls.v3.value">
+                    <div class="form-group  col-md-12" *ngIf="form.controls.v3.value">
                         <label for="select" class="control-label">Language Profiles 
                             <i *ngIf="form.get('languageProfile').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="A Language Profile is required"></i>
                         </label>
                         <div id="langaugeProfile">
+                            <div class="md-form-field" style="display:inline">
+                                <button type="button" mat-raised-button (click)="getLanguageProfiles(form)" class="mat-stroked-button load">Load
+                                    Languages <span *ngIf="langRunning" class="fa fa-spinner fa-spin"> </span></button><div class="md-form-field" style="margin-top:1em;"></div>
+                                </div>
                             <div class="md-form-field" style="display:contents;">
                                 <mat-form-field appearance="outline">
                                     <mat-label>Language Profiles </mat-label>
@@ -128,37 +140,39 @@
                                     <mat-error>A Language Profile is required</mat-error>
                                   </mat-form-field>
                             </div>
-                            <div class="md-form-field" style="display:inline;">
-                            <button type="button" mat-raised-button (click)="getLanguageProfiles(form)" class="mat-stroked-button load">Load
-                                Languages <span *ngIf="langRunning" class="fa fa-spinner fa-spin"> </span></button>
-                            </div>
+
                         </div>
                     </div>
 
 
-                    <div class="md-form-field">
+                    <div class="form-group col-md-12">
                         <div class="checkbox">
                             <mat-slide-toggle id="SeasonFolders" name="SeasonFolders" formControlName="seasonFolders">Enable season folders</mat-slide-toggle>
-                        </div>
-                        <label>Enabled Season Folders to organize seasons into individual folders within a show.</label>
+                        </div><div class="md-form-field" style="margin-top:1em;"></div>
+                        <label>If enabled Sonarr will organize seasons into separate folders within a show.</label>
                     </div>
 
-                    <div class="md-form-field" *ngIf="advanced" style="color:#ff761b">
+                    <div class="form-group col-md-12" *ngIf="advanced" style="color:#ff761b">
                         <div class="checkbox">
                             <mat-slide-toggle id="addOnly" formControlName="addOnly">Do not search</mat-slide-toggle>
                         </div>
                     </div>
-                
-                <div class="row">
-                    <div class="col-12">
-                        <div div class="md-form-field">
-                            <button mat-raised-button type="button" [disabled]="form.invalid" (click)="test(form)">Test Connectivity <span id="spinner"></span></button>
+                </div>
+                <div class="col-md-4">
+                    <div class="form-group col-md-7">
+                        <div>
+                            <button mat-raised-button type="submit" class="mat-stroked-button accent mat-accent">Submit</button>
                         </div>
-                        <div class="md-form-field" style="margin-top:1em;">
-                            <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 class="form-group col-md-7">
+                        <div>
+                            <button mat-raised-button type="button" (click)="test(form)" class="mat-stroked-button">Test Connectivity
+                            <span id="spinner"> </span></button>
                         </div>
                     </div>
                 </div>
+            </div>
         </form>
     </fieldset>
 </div>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/settings/themoviedb/themoviedb.component.html b/src/Ombi/ClientApp/src/app/settings/themoviedb/themoviedb.component.html
index 1c972bf53..9b325f299 100644
--- a/src/Ombi/ClientApp/src/app/settings/themoviedb/themoviedb.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/themoviedb/themoviedb.component.html
@@ -2,11 +2,11 @@
 <div class="small-middle-container">
 <fieldset *ngIf="settings">
     <legend>The Movie Database</legend>
-    <div class="col-md-6">
+    <div class="md-form-field" style="margin-top:1em;">
         <div class="form-group">
             <div class="checkbox">
-                <input type="checkbox" id="showAdultMovies" name="showAdultMovies" [(ngModel)]="settings.showAdultMovies">
-                <label for="showAdultMovies" matTooltip="Include adult movies (pornography) in results">Show Adult Movies</label>
+                <mat-checkbox id="showAdultMovies" name="showAdultMovies" [(ngModel)]="settings.showAdultMovies" matTooltip="Include adult movies (pornography) in results">
+                Show Adult Movies</mat-checkbox>
             </div>
         </div>
 
@@ -66,7 +66,9 @@
 
         <div class="form-group">
             <div>
-                <button (click)="save()" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                <button mat-raised-button (click)="save()" type="submit" id="save" 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 class="md-form-field" style="margin-top:1em;"></div>
             </div>
         </div>
     </div>
diff --git a/src/Ombi/ClientApp/src/app/settings/usermanagement/usermanagement.component.html b/src/Ombi/ClientApp/src/app/settings/usermanagement/usermanagement.component.html
index d65dd377e..b22bf9bf1 100644
--- a/src/Ombi/ClientApp/src/app/settings/usermanagement/usermanagement.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/usermanagement/usermanagement.component.html
@@ -3,38 +3,29 @@
 <wiki [url]="'https://github.com/tidusjar/Ombi/wiki/User-Importer-Settings'"></wiki>
 <fieldset *ngIf="settings">
     <legend>User Importer Settings</legend>
-
+    <div class="md-form-field" style="margin-top:1em;"></div>
     <div class="col-md-6">
         <div *ngIf="plexEnabled">
 
             <div class="form-group">
-                <div class="checkbox">
-                    <input type="checkbox" id="importPlex" [(ngModel)]="settings.importPlexUsers">
-                    <label for="importPlex">Import Plex Users</label>
+                <div>
+                    <mat-checkbox id="importPlex" [(ngModel)]="settings.importPlexUsers">
+                    Import Plex Users</mat-checkbox>
                 </div>
             </div>
             
             <div class="form-group">
-                <div class="checkbox">
-                    <input type="checkbox" id="importAdmin" [(ngModel)]="settings.importPlexAdmin">
-                    <label for="importAdmin">Import Plex Admin</label>
+                <mat-checkbox id="importAdmin" [(ngModel)]="settings.importPlexAdmin">Import Plex Admin</mat-checkbox>
                 </div>
-            </div>
             <div *ngIf="plexUsers">
                 <p>Plex Users exclude from Import</p>
                 
                 <p-autoComplete [(ngModel)]="bannedPlexUsers" [suggestions]="filteredPlexUsers" [multiple]="true" field="username" (completeMethod)="filterPlexList($event)"></p-autoComplete>
             </div>
         </div>
-
         <div *ngIf="embyEnabled">
-
-
             <div class="form-group">
-                <div class="checkbox">
-                    <input type="checkbox" id="importEmbyUsers" [(ngModel)]="settings.importEmbyUsers">
-                    <label for="importEmbyUsers">Import Emby Users</label>
-                </div>
+                <mat-checkbox id="importEmbyUsers" [(ngModel)]="settings.importEmbyUsers">Import Emby Users</mat-checkbox>
             </div>
             
             <div *ngIf="embyUsers">
@@ -50,9 +41,9 @@
 
         <div *ngFor="let c of claims">
             <div class="form-group">
-                <div class="checkbox">
-                    <input type="checkbox" [(ngModel)]="c.enabled" [value]="c.value" id="create{{c.value}}" [attr.name]="'create' + c.value" ng-checked="c.enabled">
-                    <label for="create{{c.value}}">{{c.value | humanize}}</label>
+                <div>
+                    <mat-checkbox [(ngModel)]="c.enabled" [value]="c.value" id="create{{c.value}}" [attr.name]="'create' + c.value" ng-checked="c.enabled">
+                    {{c.value | humanize}}</mat-checkbox>
                 </div>
             </div>
         </div>
@@ -61,25 +52,23 @@
         <div class="form-group">
             <label for="movieRequestLimit" class="control-label">Movie Request Limit</label>
             <div>
-                <input type="text" [(ngModel)]="settings.movieRequestLimit" class="form-control form-small form-control-custom " id="movieRequestLimit" name="movieRequestLimit" value="{{settings?.movieRequestLimit}}">
+                <input type="text" [(ngModel)]="settings.movieRequestLimit" class="form-control form-small form-control-custom" id="movieRequestLimit" name="movieRequestLimit" value="{{settings?.movieRequestLimit}}">
             </div>
         </div>
 
         <div class="form-group">
             <label for="episodeRequestLimit" class="control-label">Episode Request Limit</label>
             <div>
-                <input type="text" [(ngModel)]="settings.episodeRequestLimit" class="form-control form-small form-control-custom " id="episodeRequestLimit" name="episodeRequestLimit" value="{{settings?.episodeRequestLimit}}">
+                <input type="text" [(ngModel)]="settings.episodeRequestLimit" class="form-control form-small form-control-custom" id="episodeRequestLimit" name="episodeRequestLimit" value="{{settings?.episodeRequestLimit}}">
             </div>
         </div>
 
     </div>
-    <div class="col-12">
         <div class="form-group">
             <button (click)="submit()" mat-raised-button="" type="submit" id="save" 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><button type="button" [disabled]="!enableImportButton" (click)="runImporter()" class="mat-focus-indicator mat-stroked-button mat-raised-button mat-button-base">Run Importer<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>
+        <div class="md-form-field" style="margin-top:1em;"></div>
 </fieldset>
-<div class="md-form-field" style="margin-top:1em;"></div>
 </div>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/settings/usermanagement/usermanagement.component.scss b/src/Ombi/ClientApp/src/app/settings/usermanagement/usermanagement.component.scss
index 5bc0ad204..1766c63b9 100644
--- a/src/Ombi/ClientApp/src/app/settings/usermanagement/usermanagement.component.scss
+++ b/src/Ombi/ClientApp/src/app/settings/usermanagement/usermanagement.component.scss
@@ -17,6 +17,10 @@
     font-weight: 400;
 }
 
+.form-control {
+    width: auto;
+}
+
 .row {
     display: block;
 }
diff --git a/src/Ombi/ClientApp/src/app/settings/vote/vote.component.html b/src/Ombi/ClientApp/src/app/settings/vote/vote.component.html
index 220dcf4c2..c8a0b5d25 100644
--- a/src/Ombi/ClientApp/src/app/settings/vote/vote.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/vote/vote.component.html
@@ -4,12 +4,11 @@
 
 <fieldset>
     <legend>Vote</legend>
-    <form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:2%;">
-        <div class="col-md-12">
+    <form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
+        <div class="md-form-field" style="margin-top:1em;"></div>
             <div class="form-group">
                 <div class="checkbox">
-                    <input type="checkbox" id="enable" formControlName="enabled" ng-checked="form.enabled">
-                    <label for="enable">Enable</label>
+                    <mat-checkbox id="enable" formControlName="enabled" ng-checked="form.enabled">Enable</mat-checkbox>
                 </div>
             </div>
 
@@ -37,10 +36,12 @@
 
             <div class="form-group">
                 <div>
-                    <button type="submit" [disabled]="form.invalid" class="btn btn-primary-outline ">Submit</button>
+                    <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 class="md-form-field" style="margin-top:1em;"></div>
                 </div>
             </div>
-        </div>
+     
 
     </form>
 </fieldset>
diff --git a/src/Ombi/ClientApp/src/app/settings/vote/vote.component.scss b/src/Ombi/ClientApp/src/app/settings/vote/vote.component.scss
index aa1beaebc..8644e48e5 100644
--- a/src/Ombi/ClientApp/src/app/settings/vote/vote.component.scss
+++ b/src/Ombi/ClientApp/src/app/settings/vote/vote.component.scss
@@ -8,4 +8,7 @@
 ::ng-deep .dark .btn:hover {
     box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
     color: inherit;
+}
+.form-control {
+    width: auto;
 }
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/styles/buttons.scss b/src/Ombi/ClientApp/src/styles/buttons.scss
index 01df07bac..c9b94cabf 100644
--- a/src/Ombi/ClientApp/src/styles/buttons.scss
+++ b/src/Ombi/ClientApp/src/styles/buttons.scss
@@ -18,4 +18,4 @@ $orange:#F57C00;
 
 .btn-orange {
     background-color: $orange;
-}
+}
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/styles/shared.scss b/src/Ombi/ClientApp/src/styles/shared.scss
index d420a71b9..34497f2a2 100644
--- a/src/Ombi/ClientApp/src/styles/shared.scss
+++ b/src/Ombi/ClientApp/src/styles/shared.scss
@@ -140,8 +140,4 @@ table {
 
 ::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
     color: $accent;
-}
-
-::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper {
-    margin: 0.5em;
 }
\ No newline at end of file