From b9680bb99aac17855499163948790ddd6c21d1ea Mon Sep 17 00:00:00 2001
From: twanariens <twanariens@gmail.com>
Date: Sun, 7 Feb 2021 16:11:40 +0100
Subject: [PATCH] Quick fix for buttons on notification pages (still needs a
 complete rework)

---
 .../notifications/cloudmobile.component.html  |   4 +-
 .../notifications/cloudmobile.coponent.ts     |   1 +
 .../notifications/gotify.component.html       |   4 +-
 .../notifications/mattermost.component.html   |   4 +-
 .../notifications/mobile.component.html       | 104 +++++++++---------
 .../notificationtemplate.component.scss       |  31 ++++--
 .../notifications/pushbullet.component.html   |   4 +-
 .../notifications/pushover.component.html     |   4 +-
 .../notifications/slack.component.html        |   4 +-
 .../notifications/telegram.component.html     |   4 +-
 .../notifications/webhook.component.html      |   4 +-
 src/Ombi/ClientApp/src/styles/Styles.scss     |  12 ++
 12 files changed, 105 insertions(+), 75 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/cloudmobile.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/cloudmobile.component.html
index a569a6ef4..dfb047fe8 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/cloudmobile.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/cloudmobile.component.html
@@ -1,6 +1,6 @@
 <settings-menu>
 </settings-menu>
-<div *ngIf="form" class="container">
+<div *ngIf="form" class="small-middle-container">
     <fieldset>
         <legend>Mobile Notifications</legend>
 
@@ -47,7 +47,7 @@
 
             <div class="md-form-field ">
                 <div>
-                    <button mat-raised-button type="submit " color="primary" [disabled]="form.invalid ">Submit</button>
+                    <button mat-raised-button type="submit " color="accent" [disabled]="form.invalid ">Submit</button>
                 </div>
             </div>
         </form>
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/cloudmobile.coponent.ts b/src/Ombi/ClientApp/src/app/settings/notifications/cloudmobile.coponent.ts
index e78860e09..3708f48a5 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/cloudmobile.coponent.ts
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/cloudmobile.coponent.ts
@@ -11,6 +11,7 @@ import { MatTableDataSource } from "@angular/material/table";
 
 @Component({
     templateUrl: "./cloudmobile.component.html",
+    styleUrls: ["./notificationtemplate.component.scss"]
 })
 export class CloudMobileComponent implements OnInit {
 
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/gotify.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/gotify.component.html
index 0b732fd74..9b2a7c938 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/gotify.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/gotify.component.html
@@ -42,7 +42,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" type="button" (click)="test(form)" class="btn btn-primary-outline">
+                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)" class="btn btn-primary-outline">
                             Test
                             <div id="spinner"></div>
                         </button>
@@ -53,7 +53,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save" class="btn btn-primary-outline">Submit</button>
                     </div>
                 </div>
             </form>
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/mattermost.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/mattermost.component.html
index ea18e07e5..d7998c417 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/mattermost.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/mattermost.component.html
@@ -47,7 +47,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" type="button" (click)="test(form)" class="btn btn-primary-outline">
+                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)" class="btn btn-primary-outline">
                             Test
                             <div id="spinner"></div>
                         </button>
@@ -58,7 +58,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save" class="btn btn-primary-outline">Submit</button>
                     </div>
                 </div>
             </form>
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/mobile.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/mobile.component.html
index b01a8b459..c5573c57e 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/mobile.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/mobile.component.html
@@ -3,71 +3,73 @@
 <div *ngIf="form" class="small-middle-container">
     <fieldset>
         <legend>Legacy Mobile Notifications</legend>
-        <div class="col-md-6">
-            <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
-                <div class="row">
-                    <div *ngIf="userList" class="col-md-8">
-                        <table class="table table-striped table-hover table-responsive table-condensed">
-                            <thead>
-                                <tr>
-                                    <th>
-                                        <a>Username/Alias</a>
-                                    </th>
-                                    <th>
-                                        <a>Mobile Devices Registered</a>
-                                    </th>
+        <div class="lmobile-container">
+            <div class="col-md-6">
+                <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
+                    <div class="row">
+                        <div *ngIf="userList" class="col-md-8">
+                            <table class="table table-striped table-hover table-responsive table-condensed">
+                                <thead>
+                                    <tr>
+                                        <th>
+                                            <a>Username/Alias</a>
+                                        </th>
+                                        <th>
+                                            <a>Mobile Devices Registered</a>
+                                        </th>
 
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr *ngFor="let user of userList">
-                                    <td>
-                                        {{user.username}}
-                                    </td>
-                                    <td>
-                                        {{user.devices}}
-                                    </td>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr *ngFor="let user of userList">
+                                        <td>
+                                            {{user.username}}
+                                        </td>
+                                        <td>
+                                            {{user.devices}}
+                                        </td>
 
-                            </tbody>
-                        </table>
+                                </tbody>
+                            </table>
+                        </div>
                     </div>
-                </div>
 
-                <div class="row">
-                    <div class="form-group">
-                        <label for="select" class="control-label">Users</label>
-                        <div>
-                            <select class="form-control form-control-custom" id="select" [(ngModel)]="testUserId" [ngModelOptions]="{standalone: true}">
-                                <option value="">Please select</option>    
-                                <option *ngFor="let x of userList" [value]="x.userId">{{x.username}}</option>
-                            </select>
+                    <div class="row lmobile-actions">
+                        <div class="form-group">
+                            <label for="select" class="control-label">Users</label>
+                            <div>
+                                <select class="form-control form-control-custom" id="select" [(ngModel)]="testUserId" [ngModelOptions]="{standalone: true}">
+                                    <option value="">Please select</option>    
+                                    <option *ngFor="let x of userList" [value]="x.userId">{{x.username}}</option>
+                                </select>
+                            </div>
                         </div>
-                    </div>
 
-                    <div class="form-group">
-                        <div>
-                            <button [disabled]="form.invalid" type="button" (click)="test(form)" class="btn btn-danger-outline">Send Test Notification</button>
+                        <div class="form-group">
+                            <div>
+                                <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)" class="btn btn-danger-outline">Send Test Notification</button>
+                            </div>
                         </div>
-                    </div>
-                    <div class="form-group">
-                        <div>
-                            <button [disabled]="form.invalid" type="button" (click)="remove(form)" class="btn btn-danger-outline">Remove User</button>
+                        <div class="form-group">
+                            <div>
+                                <button [disabled]="form.invalid" mat-raised-button type="button" (click)="remove(form)" class="btn btn-danger-outline">Remove User</button>
+                            </div>
                         </div>
-                    </div>
 
 
-                    <div class="form-group">
-                        <div>
-                            <button [disabled]="form.invalid" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                        <div class="form-group">
+                            <div>
+                                <button [disabled]="form.invalid" mat-raised-button type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </form>
-        </div>
+                </form>
+            </div>
 
 
-        <div class="col-md-6">
-            <notification-templates [templates]="templates" [showSubject]="false"></notification-templates>
+            <div class="col-md-6 issue-content">
+                <notification-templates [templates]="templates" [showSubject]="false"></notification-templates>
+            </div>
         </div>
     </fieldset>
 </div>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/notificationtemplate.component.scss b/src/Ombi/ClientApp/src/app/settings/notifications/notificationtemplate.component.scss
index 33f8a2d6c..1ffd9207b 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/notificationtemplate.component.scss
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/notificationtemplate.component.scss
@@ -1,15 +1,30 @@
 @import "~styles/shared.scss";
-::ng-deep ngb-accordion > div.card {
-    color:white;
-    padding-top: 0px;
-}
-
-::ng-deep ngb-accordion > div.card >  div.card-header {
-    padding:0px;
-}
 
 .small-middle-container{
 	margin: auto;
 	width: 95%;
 	margin-top:10px;
+}
+
+.lmobile-actions{
+    display:flex;
+    justify-content: left;
+    align-items:flex-end;
+}
+
+.lmobile-actions .form-group{
+    margin-right:10px;
+}
+
+.lmobile-container{
+    display:flex;
+    margin-top:10px;
+}
+
+.issue-content{
+    justify-content: flex-end;
+}
+
+.mat-raised-button{
+    margin-right:10px;
 }
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/pushbullet.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/pushbullet.component.html
index 3c4db7698..e8115e4f5 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/pushbullet.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/pushbullet.component.html
@@ -32,7 +32,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" type="button" (click)="test(form)" class="btn btn-primary-outline">
+                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)" class="btn btn-primary-outline">
                             Test
                             <div id="spinner"></div>
                         </button>
@@ -43,7 +43,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save" class="btn btn-primary-outline">Submit</button>
                     </div>
                 </div>
             </form>
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/pushover.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/pushover.component.html
index 8ce9b401d..926b344e0 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/pushover.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/pushover.component.html
@@ -74,7 +74,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" type="button" (click)="test(form)" class="btn btn-primary-outline">
+                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)" class="btn btn-primary-outline">
                             Test
                             <div id="spinner"></div>
                         </button>
@@ -85,7 +85,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save" class="btn btn-primary-outline">Submit</button>
                     </div>
                 </div>
             </form>
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/slack.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/slack.component.html
index 15ef796fc..378e48060 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/slack.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/slack.component.html
@@ -57,7 +57,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" type="button" (click)="test(form)" class="btn btn-primary-outline">
+                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)" class="btn btn-primary-outline">
                             Test
                             <div id="spinner"></div>
                         </button>
@@ -68,7 +68,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save" class="btn btn-primary-outline">Submit</button>
                     </div>
                 </div>
             </form>
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/telegram.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/telegram.component.html
index d89d14483..51e4c36d4 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/telegram.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/telegram.component.html
@@ -43,7 +43,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" type="button" (click)="test(form)" class="btn btn-primary-outline">
+                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)" class="btn btn-primary-outline">
                             Test
                             <div id="spinner"></div>
                         </button>
@@ -52,7 +52,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save" class="btn btn-primary-outline">Submit</button>
                     </div>
                 </div>
             </form>
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/webhook.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/webhook.component.html
index 8ab28cc3c..aab095953 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/webhook.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/webhook.component.html
@@ -31,7 +31,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" type="button" (click)="test(form)" class="btn btn-primary-outline">
+                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)" class="btn btn-primary-outline">
                             Test
                             <div id="spinner"></div>
                         </button>
@@ -40,7 +40,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save" class="btn btn-primary-outline">Submit</button>
                     </div>
                 </div>
             </form>
diff --git a/src/Ombi/ClientApp/src/styles/Styles.scss b/src/Ombi/ClientApp/src/styles/Styles.scss
index df9e6028d..55bc8657c 100644
--- a/src/Ombi/ClientApp/src/styles/Styles.scss
+++ b/src/Ombi/ClientApp/src/styles/Styles.scss
@@ -145,3 +145,15 @@
     hr{
         border-top: 1px solid $ombi-background-primary;
     }
+
+    .form-control{
+        background-color: $ombi-background-accent;
+        color:#FFF;
+        border: 1px solid $ombi-background-accent;
+    }
+
+    .form-control:focus{
+        background-color: $ombi-background-accent;
+        color:#FFF;
+        border: 1px solid $ombi-active;
+    }