Update style of create and edit component

src/app/admin/admin.component.html

@@ -12,7 +12,7 @@
 </div>
 
 <div class="container-fluid" style="padding-top: 60px;">
-    <div class="row mt-2">
+    <div class="row m-2">
         <ul class="nav nav-tabs">
             <li class="nav-item">
                 <a class="nav-link active" routerLink="/admin/main/products" routerLinkActive="active" aria-current="page" href="#">Products</a>

src/app/admin/productEditor.component.html

@@ -1,27 +1,26 @@
-<div  class="bg-primary p-2 text-white" [class.bg-warning]="editing" [class.text-dark]="editing">
-    <h5> {{ editing ? "Edit" : "Create" }} Product </h5>
-</div>
 <form novalidate #form="ngForm" (submit)="save(form)">
-    <div class="form-group">
+    <div class="form-group mt-3">
         <label>Name</label>
         <input class="form-control" name="name" [(ngModel)]="product.name"/>
     </div>
-    <div class="form-group">
+    <div class="form-group mt-2">
         <label>Category</label>
         <input class="form-control" name="category" [(ngModel)]="product.category"/>
     </div>
-    <div class="form-group">
+    <div class="form-group mt-2">
         <label>Description</label>
         <textarea class="form-control" name="description" [(ngModel)]="product.description"></textarea>
     </div>
-    <div class="form-group">
+    <div class="form-group mt-2">
         <label>Price</label>
         <input class="form-control" name="price" [(ngModel)]="product.price"/>
     </div>
-    <button type="submit" class="btn btn-primary" [class.btn-warning]="editing">
-        {{ editing ? "Save" : "Create" }}
-    </button>
-    <button type="reset" class="btn btn-secondary" routerLink="/admin/main/products">
-        Cancel
-    </button>
+    <div class="btn-group float-end mt-3" role="group" aria-label="Basic example">
+        <button type="submit" class="btn btn-primary text-white" style="background-color: #6768A9;border-color: #6768A9;" [class.btn-warning]="editing">
+            {{ editing ? "Save" : "Create" }}
+        </button>
+        <button type="reset" class="btn btn-secondary" routerLink="/admin/main/products">
+            Cancel
+        </button>
+    </div>
 </form>

src/app/admin/productTable.component.html

@@ -1,30 +1,33 @@
-<table class="table table-sm table-striped">
+<table class="table table-sm table-striped mt-2">
     <thead>
-        <tr>
-            <th>ID</th>
-            <th>Name</th>
-            <th>Category</th>
-            <th>Price</th>
-            <th></th>
+        <tr class="d-flex">
+            <th class="col-1">ID</th>
+            <th class="col-4">Name</th>
+            <th class="col-4">Category</th>
+            <th class="col-2">Price</th>
+            <th class="col-1"></th>
         </tr>
     </thead>
     <tbody>
-        <tr *ngFor="let product of getProducts()">
-            <td>{{ product.id }}</td>
-            <td>{{ product.name }}</td>
-            <td>{{ product.category }}</td>
-            <td>{{ product.price | currency:"USD":"symbol":"2.2-2" }}</td>
-            <td>
-                <button class="btn btn-sm btn-warning" [routerLink]="['/admin/main/products/edit', product.id]">
-                    Edit
-                </button>
-                <button class="btn btn-sm btn-danger" (click)="deleteProduct(product.id)">
-                    Delete
-                </button>
+        <tr *ngFor="let product of getProducts()" class="d-flex">
+            <td class="col-1">{{ product.id }}</td>
+            <td class="col-4">{{ product.name }}</td>
+            <td class="col-4">{{ product.category }}</td>
+            <td class="col-2">{{ product.price | currency:"USD":"symbol":"2.2-2" }}</td>
+            <td class="col-1">
+                <div class="btn-group float-end" role="group" aria-label="Basic example">
+                    <button class="btn btn-sm btn-warning" [routerLink]="['/admin/main/products/edit', product.id]">
+                        <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
+                    </button>
+                    <button class="btn btn-sm btn-danger" (click)="deleteProduct(product.id)">
+                        <i class="fa fa-trash-o" aria-hidden="true"></i>
+                    </button>
+                </div>
             </td>
         </tr>
     </tbody>
 </table>
-<button class="btn btn-primary" routerLink="/admin/main/products/create">
+<button class="btn btn-primary float-end" style="background-color: #6768A9;border-color: #6768A9;" routerLink="/admin/main/products/create">
+    <i class="fa fa-plus" aria-hidden="true"></i>
     Create New Product
 </button>