From fc24fcfa8a1a8f0d176f44028d1f22ec045ad07f Mon Sep 17 00:00:00 2001
From: Jamie Rees <tidusjar@gmail.com>
Date: Mon, 1 Jul 2019 12:57:09 +0100
Subject: [PATCH] !wip on customization page

---
 .../customization.component.html              | 105 ++++++------------
 .../landingpage/landingpage.component.html    |   4 +-
 2 files changed, 35 insertions(+), 74 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/settings/customization/customization.component.html b/src/Ombi/ClientApp/src/app/settings/customization/customization.component.html
index 1f7a158ae..6b46ad46c 100644
--- a/src/Ombi/ClientApp/src/app/settings/customization/customization.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/customization/customization.component.html
@@ -3,43 +3,20 @@
 
 <fieldset *ngIf="settings">
     <legend>Customization</legend>
-    <!-- <div class="row">
-        <div class="col-md-2 col-md-push-10">
-            <span style="vertical-align: top;">Advanced</span>
-            <p-inputSwitch id="customInputSwitch" [(ngModel)]="advanced"></p-inputSwitch>
-        </div>
-    </div> -->
-    <div class="col-md-5">
-        <div class="form-group">
-            <label for="applicationName" class="control-label">Application Name</label>
-            <div>
-                <input type="text" [(ngModel)]="settings.applicationName" class="form-control form-control-custom " id="applicationName"
-                    name="applicationName" placeholder="Ombi" value="{{settings.applicationName}}">
-            </div>
-        </div>
 
-        <div class="form-group">
-            <label for="applicationurl" class="control-label">Application URL</label>
-            <div>
-                <input type="text" [(ngModel)]="settings.applicationUrl" class="form-control form-control-custom " id="applicationurl"
-                    name="applicationurl" placeholder="http://ombi.io/" value="{{settings.applicationUrl}}">
-            </div>
-        </div>
+    <div class="col-5">
+            <mat-form-field>
+                    <input matInput placeholder="Application Name" [(ngModel)]="settings.applicationName">
+            </mat-form-field>
 
-        <!-- <div class="form-group">
-            <div class="checkbox">
-                <input type="checkbox" id="enable" [(ngModel)]="settings.recentlyAddedPage" [checked]="settings.recentlyAddedPage">
-                <label for="enable">Enable Recently Added Page</label>
-            </div>
-        </div> -->
+            <mat-form-field>
+                    <input matInput placeholder="Application URL" [(ngModel)]="settings.applicationurl">
+            </mat-form-field>
+
+            <mat-form-field>
+                    <input matInput placeholder="Custom Logo" [(ngModel)]="settings.logo">
+            </mat-form-field>
 
-        <div class="form-group">
-            <label for="logo" class="control-label">Custom Logo</label>
-            <div>
-                <input type="text" [(ngModel)]="settings.logo" class="form-control form-control-custom " id="logo" name="logo"
-                    value="{{settings.logo}}" tooltipPosition="top" pTooltip="Use a URL e.g. www.google.com/logo.png">
-            </div>
-        </div>
         <div *ngIf="settings.logo" class="form-group">
             <label for="logo" class="control-label">Logo Preview:</label>
             <div>
@@ -47,50 +24,32 @@
             </div>
         </div>
 
-        <div class="form-group">
-            <div class="checkbox">
-                <input type="checkbox" id="enableCustomDonations" name="enableCustomDonations" [(ngModel)]="settings.enableCustomDonations">
-                <label for="enableCustomDonations" tooltipPosition="top" pTooltip="Enable to show a custom donation link in the navigation bar">Enable
-                    custom donation link</label>
-            </div>
-        </div>
-
-        <div class="form-group" *ngIf="settings.enableCustomDonations">
-            <label for="customDonation" class="control-label">Custom Donation URL</label>
-            <div>
-                <input [disabled]="!settings.enableCustomDonations" type="text" [(ngModel)]="settings.customDonationUrl"
-                    class="form-control form-control-custom " name="customDonation" value="{{settings.customDonationUrl}}"
-                    tooltipPosition="top" pTooltip="A link to a Paypal address, or your custom donation url.">
-            </div>
-        </div>
+        <mat-checkbox [(ngModel)]="settings.enableCustomDonations" matTooltip="Enable to show a custom donation link in the navigation bar"> 
+               Enable Custom Donation Link
+              </mat-checkbox>
+
+              
+              <mat-form-field  *ngIf="settings.enableCustomDonations">
+                    <input matInput placeholder="Custom Donation URL" [(ngModel)]="settings.customDonationUrl"
+                    matTooltip="A link to a Paypal address, or your custom donation url.">
+            </mat-form-field>
+            <mat-form-field  *ngIf="settings.enableCustomDonations">
+                    <input matInput placeholder="Custom Donation URL" [(ngModel)]="settings.enableCustomDonations"
+                    matTooltip="Set a custom message to be displayed in the navigation bar.">
+            </mat-form-field>
+
+            
+        <mat-checkbox [(ngModel)]="settings.useCustomPage" matTooltip="Enabled a custom page where you can fully edit. You will need the Edit Custom Page role."> 
+                Enable Custom Page
+               </mat-checkbox>
+ 
 
-        <div class="form-group" *ngIf="settings.enableCustomDonations">
-            <label for="customDonationMessage" class="control-label">Donation Button Message</label>
-            <div>
-                <input [disabled]="!settings.enableCustomDonations" type="text" [(ngModel)]="settings.customDonationMessage"
-                    class="form-control form-control-custom " name="customDonationMessage" value="{{settings.customDonationMessage}}"
-                    tooltipPosition="top" pTooltip="Set a custom message to be displayed in the navigation bar.">
-            </div>
-        </div>
         <div class="form-group">
-            <div class="checkbox">
-                <input type="checkbox" id="useCustomPage" name="useCustomPage" [(ngModel)]="settings.useCustomPage">
-                <label for="useCustomPage" tooltipPosition="top" pTooltip="Enabled a custom page where you can fully edit. You will need the Edit Custom Page role.">Use
-                    Custom Page</label>
-
-            </div>
-        </div>
-
-
-
-        <div class="form-group">
-            <div>
-                <button (click)="save()" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
-            </div>
+                <button mat-raised-button (click)="save()" type="submit" type="submit" id="save" color="accent">Submit</button>
         </div>
 
     </div>
-    <div class="col-md-7">
+    <div class="col-7">
         <div>
             <div class="form-group">
                 <label for="customCss" class="control-label">Custom CSS</label>
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 2937354c3..26711c6e5 100644
--- a/src/Ombi/ClientApp/src/app/settings/landingpage/landingpage.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/landingpage/landingpage.component.html
@@ -6,7 +6,9 @@
     <fieldset>
         <legend>Landing Page Configuration</legend>
 
-
+        <mat-checkbox [(ngModel)]="settings.enabled"> 
+                Enable
+              </mat-checkbox>
         <div class="form-group">
             <div class="checkbox">
                 <input type="checkbox" id="enable" name="enable" [(ngModel)]="settings.enabled" ng-checked="settings.enabled">