CSS Class updation

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>