CSS Class updation

bookie/src/app/customers/customer-detail/customer-detail.component.html

@@ -1,24 +1,24 @@
 <h2>Customer</h2>
 <form [formGroup]="form" class="flex-col">
-  <div class="flex-row">
+  <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Name</mat-label>
       <input matInput #nameElement formControlName="name" />
     </mat-form-field>
   </div>
-  <div class="flex-row">
+  <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Phone</mat-label>
       <input matInput formControlName="phone" />
     </mat-form-field>
   </div>
-  <div class="flex-row">
+  <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Address</mat-label>
       <textarea matInput formControlName="address"> </textarea>
     </mat-form-field>
   </div>
-  <div class="flex-row">
+  <div class="row-container">
     <mat-checkbox formControlName="printInBill">Print in Bill?</mat-checkbox>
   </div>
   <mat-divider></mat-divider>
@@ -27,7 +27,7 @@
       <mat-form-field [formGroupName]="i">
         <mat-label>Discount on {{ r.name }}</mat-label>
         <input matInput formControlName="discount" />
-        <span matSuffix>%</span>
+        <span matTextSuffix>%</span>
         <mat-hint>Max {{ r.limit | percent: '1.2-2' }}</mat-hint>
       </mat-form-field>
     }

bookie/src/app/customers/customer-list/customer-list.component.html

@@ -6,7 +6,7 @@
   </a>
 </h2>
 <form [formGroup]="form" class="flex-col">
-  <div class="flex-row">
+  <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Filter</mat-label>
       <input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />

bookie/src/app/devices/device-detail/device-detail.component.html

@@ -1,12 +1,12 @@
 <h2>Device</h2>
 <form [formGroup]="form" class="flex-col">
-  <div class="flex-row">
+  <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Name</mat-label>
       <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
     </mat-form-field>
   </div>
-  <div class="flex-row">
+  <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Section</mat-label>
       <mat-select formControlName="section">
@@ -18,7 +18,7 @@
       </mat-select>
     </mat-form-field>
   </div>
-  <div class="flex-row">
+  <div class="row-container">
     <mat-checkbox formControlName="enabled" class="flex-auto">Enabled?</mat-checkbox>
   </div>
 </form>

bookie/src/app/discount-report/discount-report.component.html

@@ -8,7 +8,6 @@
     <mat-icon>print</mat-icon>
   </button>
 </h2>
-
 <form [formGroup]="form" class="flex-col">
   <div class="row-container sm:max-lg:flex-col">
     <mat-form-field class="flex-auto basis-2-5">

bookie/src/app/header-footer/header-footer.component.html

@@ -11,12 +11,12 @@
       </mat-select>
     </mat-form-field>
   </div>
-  <mat-form-field>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
       <mat-label>Text</mat-label>
       <textarea matInput matAutosizeMinRows="5" formControlName="text"></textarea>
     </mat-form-field>
-
+  </div>
-  <mat-divider></mat-divider>
 </form>
 <div class="row-container">
   <button mat-raised-button color="primary" (click)="save()">Save</button>

bookie/src/app/nav-bar/nav-bar.component.css

@@ -1,5 +0,0 @@
-.fill-remaining-space {
-  /* This fills the remaining space, by using flexbox.
-     Every toolbar row uses a flexbox row layout. */
-  flex: 1 1 auto;
-}

bookie/src/app/nav-bar/nav-bar.component.html

@@ -15,7 +15,7 @@
       Sales
     </a>
   }
-  <span class="fill-remaining-space"></span>
+  <span class="spacer"></span>
   @if ((auth.currentUser | async) === null) {
     <button mat-button [routerLink]="['/', 'login']">
       <mat-icon>account_box</mat-icon>

bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.html

@@ -10,7 +10,7 @@
     <mat-form-field class="flex-auto">
       <mat-label>Discount Limit</mat-label>
       <input matInput type="number" formControlName="discountLimit" class="right-align" />
-      <span matSuffix>%</span>
+      <span matTextSuffix>%</span>
     </mat-form-field>
   </div>
   <div class="row-container">

bookie/src/app/sales/bills/bills.component.html

@@ -1,4 +1,4 @@
-<span>Bill</span>
+<h2>Bill</h2>
 
 <table mat-table #table [dataSource]="dataSource" aria-label="Elements" class="mat-elevation-z8">
   <ng-container matColumnDef="bill-no-title">

bookie/src/app/sales/choose-customer/choose-customer.component.html

@@ -46,7 +46,7 @@
           <mat-form-field class="flex-auto">
             <mat-label>Discount on {{ r.name }}</mat-label>
             <input matInput formControlName="discount" />
-            <span matSuffix>%</span>
+            <span matTextSuffix>%</span>
           </mat-form-field>
         </div>
       }

bookie/src/app/sales/discount/discount.component.html

@@ -14,7 +14,7 @@
         <mat-cell *matCellDef="let row; let i = index" class="center" [formGroupName]="i" class="flex-auto">
           <mat-form-field class="flex-auto">
             <input matInput type="number" formControlName="discount" autocomplete="off" />
-            <span matSuffix>%</span>
+            <span matTextSuffix>%</span>
             <mat-hint>Cust: {{ row.customer | percent: '1.2-2' }}</mat-hint>
             <mat-hint align="end">Max: {{ row.limit | percent: '1.2-2' }}</mat-hint>
           </mat-form-field>

bookie/src/app/section-printers/section-printer.component.html

@@ -1,3 +1,4 @@
+<h2>Section Printer</h2>
 <form [formGroup]="form" class="flex-col">
   <div class="row-container">
     <mat-form-field class="flex-auto">

bookie/src/app/taxes/tax-detail/tax-detail.component.html

@@ -11,7 +11,7 @@
     <mat-form-field class="flex-auto">
       <mat-label>Rate</mat-label>
       <input matInput type="number" formControlName="rate" class="right-align" />
-      <span matSuffix>%</span>
+      <span matTextSuffix>%</span>
     </mat-form-field>
   </div>
   <div class="row-container">

bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html

@@ -1,6 +1,4 @@
-<h2 class="row-container space-between">
+<h2>Temporal Products</h2>
-  <span>Temporal Products</span>
-</h2>
 <form [formGroup]="form" class="flex-col">
   <div class="row-container sm:max-lg:flex-col">
     <mat-form-field class="flex-auto basis-2-5">