From ecc26e96cbbb9fec4b124d219e9046c922103d62 Mon Sep 17 00:00:00 2001
From: Zak Timson <zaktimson@gmail.com>
Date: Tue, 6 Nov 2018 19:40:42 -0500
Subject: [PATCH] More styling

---
 .../formulaManager.component.html             | 17 ++----
 .../newComponent/newComponent.component.html  |  5 +-
 .../newFormula/newFormula.component.html      |  6 +-
 .../viewComponents.component.html             | 61 ++++++++++---------
 4 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/src/app/formulaManager/formulaManager.component.html b/src/app/formulaManager/formulaManager.component.html
index 7a6e528..e929d60 100644
--- a/src/app/formulaManager/formulaManager.component.html
+++ b/src/app/formulaManager/formulaManager.component.html
@@ -43,9 +43,9 @@
             </mat-card-header>
             <mat-card-content>
                 <p class="ml-3 lead text-white-50">Tired of using your browser? Download the standalone version of the Formula Manager.</p>
-                <button mat-raised-button class="button-fix ml-3"><i class="fab fa-windows mr-1 mb-1"></i> Windows</button>
-                <button mat-raised-button class="button-fix ml-2"><i class="fab fa-apple mr-1 mb-1"></i> MacOS</button>
-                <button mat-raised-button class="button-fix ml-2"><i class="fab fa-linux mr-1 mb-1"></i> Linux</button>
+                <button mat-button class="button-fix"><i class="fab fa-windows mr-1 mb-1"></i> Windows</button>
+                <button mat-button class="button-fix ml-2"><i class="fab fa-apple mr-1 mb-1"></i> MacOS</button>
+                <button mat-button class="button-fix ml-2"><i class="fab fa-linux mr-1 mb-1"></i> Linux</button>
             </mat-card-content>
         </mat-card>
         <mat-card *ngIf="formula" class="my-4 mx-auto" style="max-width: 600px">
@@ -101,15 +101,10 @@
             </mat-card-content>
             <mat-card-actions *ngIf="store.user" style="overflow: hidden">
                 <mat-divider></mat-divider>
-                <button *ngIf="!formula.approved" mat-raised-button class="m-1 mt-3" (click)="approve(formula)">
-                    <mat-icon>check</mat-icon> Approve
-                </button>
+                <button *ngIf="!formula.approved" mat-button class="m-1 mt-3" (click)="approve(formula)">Approve</button>
                 <div class="float-right m-1 mt-3">
-                    <button mat-raised-button (click)="edit(formula)">
-                        <mat-icon>edit</mat-icon> Edit</button>
-                    <button mat-raised-button class="ml-2" color="warn" (click)="delete(formula)">
-                        <mat-icon>delete</mat-icon> Delete
-                    </button>
+                    <button mat-button (click)="edit(formula)">Edit</button>
+                    <button mat-button class="ml-2" color="warn" (click)="delete(formula)">Delete</button>
                 </div>
             </mat-card-actions>
         </mat-card>
diff --git a/src/app/formulaManager/newComponent/newComponent.component.html b/src/app/formulaManager/newComponent/newComponent.component.html
index abdd4b5..37c449f 100644
--- a/src/app/formulaManager/newComponent/newComponent.component.html
+++ b/src/app/formulaManager/newComponent/newComponent.component.html
@@ -15,8 +15,9 @@
         </mat-form-field>
     </form>
 </mat-dialog-content>
-<mat-dialog-actions>
-    <button mat-raised-button type="submit" form="createForm" color="primary" (click)="submit()">
+<mat-divider></mat-divider>
+<mat-dialog-actions class="justify-content-end">
+    <button mat-button type="submit" form="createForm" (click)="submit()" [disabled]="!name || !cost">
         <span *ngIf="data">Update</span>
         <span *ngIf="!data">Create</span>
     </button>
diff --git a/src/app/formulaManager/newFormula/newFormula.component.html b/src/app/formulaManager/newFormula/newFormula.component.html
index 251596e..58de9f9 100644
--- a/src/app/formulaManager/newFormula/newFormula.component.html
+++ b/src/app/formulaManager/newFormula/newFormula.component.html
@@ -20,7 +20,7 @@
             </mat-select>
         </mat-form-field>
         <mat-form-field style="width: 75px">
-            <input matInput type="number" placeholder="Amount" [(ngModel)]="amount">
+            <input matInput type="number" placeholder="Amount" min="1" [(ngModel)]="amount">
         </mat-form-field>
         <mat-form-field style="width: 40px">
             <mat-select placeholder="Unit" [(ngModel)]="unit">
@@ -58,9 +58,7 @@
 </mat-dialog-content>
 <mat-divider></mat-divider>
 <mat-dialog-actions class="justify-content-end">
-    <button mat-raised-button type="submit" form="createForm" (click)="submit()" [disabled]="components.length < 1 || !name">
-        <mat-icon *ngIf="data" class="mr-1">edit</mat-icon>
-        <mat-icon *ngIf="!data" class="mr-1">add</mat-icon>
+    <button mat-button type="submit" form="createForm" (click)="submit()" [disabled]="components.length < 1 || !name">
         <span *ngIf="data">Update</span>
         <span *ngIf="!data">Create</span>
     </button>
diff --git a/src/app/formulaManager/viewComponents/viewComponents.component.html b/src/app/formulaManager/viewComponents/viewComponents.component.html
index fc61b88..f9af927 100644
--- a/src/app/formulaManager/viewComponents/viewComponents.component.html
+++ b/src/app/formulaManager/viewComponents/viewComponents.component.html
@@ -1,32 +1,37 @@
-<button mat-raised-button class="float-right mb-3" (click)="createComponent()">
-    <mat-icon>add</mat-icon> Create</button>
-<table class="table">
+<div class="bg-white text-right p-2" style="overflow: auto">
+    <button mat-raised-button class="float-right mb-3" (click)="createComponent()">
+        <mat-icon>add</mat-icon> Create
+    </button>
+</div>
+<div class="px-2">
+    <table class="table">
     <thead>
-        <tr>
-            <th>Name</th>
-            <th>Description</th>
-            <th>Created</th>
-            <th>Cost Per Kg</th>
-            <th></th>
-            <th></th>
-        </tr>
+    <tr>
+        <th>Name</th>
+        <th>Description</th>
+        <th>Created</th>
+        <th>Cost Per Kg</th>
+        <th></th>
+        <th></th>
+    </tr>
     </thead>
     <tbody>
-        <tr *ngFor="let c of store.components | async">
-            <td>{{c.name}}</td>
-            <td>{{c.description}}</td>
-            <td>{{c.created | date}}</td>
-            <td class="text-center">{{c.cost | currency}}</td>
-            <td>
-                <button mat-icon-button (click)="createComponent(c)">
-                    <mat-icon class="curs-pointer">edit</mat-icon>
-                </button>
-            </td>
-            <td>
-                <button mat-icon-button (click)="delete(c)">
-                    <mat-icon class="curs-pointer">delete</mat-icon>
-                </button>
-            </td>
-        </tr>
+    <tr *ngFor="let c of store.components | async">
+        <td>{{c.name}}</td>
+        <td>{{c.description}}</td>
+        <td>{{c.created | date}}</td>
+        <td class="text-center">{{c.cost | currency}}</td>
+        <td>
+            <button mat-icon-button (click)="createComponent(c)">
+                <mat-icon class="curs-pointer">edit</mat-icon>
+            </button>
+        </td>
+        <td>
+            <button mat-icon-button (click)="delete(c)">
+                <mat-icon class="curs-pointer">delete</mat-icon>
+            </button>
+        </td>
+    </tr>
     </tbody>
-</table>
\ No newline at end of file
+    </table>
+</div>