From 8fc0dc16d482730f0170651f21b174c08c65b54d Mon Sep 17 00:00:00 2001
From: ztimson <zaktimson@gmail.com>
Date: Wed, 6 Feb 2019 21:34:01 -0500
Subject: [PATCH] Made new formula dialog more pretty

---
 .../newFormula/newFormula.component.html      | 48 +++++++------------
 1 file changed, 17 insertions(+), 31 deletions(-)

diff --git a/src/app/formulaManager/newFormula/newFormula.component.html b/src/app/formulaManager/newFormula/newFormula.component.html
index 6bf8751..f684bfc 100644
--- a/src/app/formulaManager/newFormula/newFormula.component.html
+++ b/src/app/formulaManager/newFormula/newFormula.component.html
@@ -1,17 +1,13 @@
 <mat-dialog-content>
-    <h3 mat-dialog-title>
-        <span *ngIf="data">Update</span>
-        <span *ngIf="!data">Create</span> Formula
-    </h3>
-    <div class="mb-4">
-        <mat-form-field class="w-100">
-            <input matInput placeholder="Name" name="name" [(ngModel)]="name">
+    <div class="mb-5">
+        <mat-form-field class="d-inline">
+            <input matInput placeholder="Formula Name" name="name" [(ngModel)]="name">
         </mat-form-field>
         <div class="text-right">
             <mat-checkbox [(ngModel)]="approved">Approved</mat-checkbox>
         </div>
     </div>
-    <div>
+    <div class="border-bottom w-100 py-2 text-center">
         <mat-form-field>
             <mat-select placeholder="Component" [(ngModel)]="component">
                 <mat-option *ngFor="let c of componentsList" [value]="c.name">
@@ -30,30 +26,20 @@
                 <mat-option value="lb">lb</mat-option>
             </mat-select>
         </mat-form-field>
-        <button mat-raised-button class="ml-3" (click)="add()">Add</button>
+        <button mat-raised-button color="primary" class="ml-3" (click)="add()" [disabled]="!component || !amount">Add</button>
     </div>
-    <table class="w-100 table">
-        <thead>
-            <tr>
-                <th>Name</th>
-                <th>Quantity</th>
-                <th style="width: 50px"></th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr *ngFor="let c of components; let i = index">
-                <td>{{c.component.name}}</td>
-                <td>{{c.quantity | convertFromG: unit}} {{unit}}</td>
-                <td>
-                    <button mat-icon-button (click)="remove(i)">
-                        <mat-icon>delete</mat-icon>
-                    </button>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-    <div class="text-right mb-3">
-        <strong>Yield: </strong>{{total() | convertFromG: unit}} {{unit}}
+    <div>
+        <div class="border-bottom font-weight-bold d-flex w-100" style="border-width: 3px !important;">
+            <div class="p-2" style="flex-grow: 1">Name</div>
+            <div class="p-2">Quantity</div>
+        </div>
+        <div *ngFor="let c of components; let i = index" class="border-bottom d-flex w-100 py-2">
+            <div class="px-2" style="flex-grow: 1">{{c.component.name}}</div>
+            <div class="px-2">{{c.quantity | convertFromG: unit}} {{unit}}</div>
+        </div>
+    </div>
+    <div class="text-right m-2">
+        <strong>Total Yield: </strong>{{total() | convertFromG: unit}} {{unit}}
     </div>
 </mat-dialog-content>
 <mat-divider></mat-divider>