Chore: Moved from css to sass, god knows what to do now.

Chore: Prettier line length changed to 120 from 100
Fix: Hard coded the face as the primary color to make the buttons stand out

bookie/src/app/sales/receive-payment/receive-payment.component.html

@@ -5,9 +5,7 @@
       <!-- Name Column -->
       <ng-container matColumnDef="name">
         <mat-header-cell *matHeaderCellDef class="bold">Amount</mat-header-cell>
-        <mat-cell *matCellDef="let row; let i = index" (click)="maxAmount(row, i)">{{
-          row.name
-        }}</mat-cell>
+        <mat-cell *matCellDef="let row; let i = index" (click)="maxAmount(row, i)">{{ row.name }}</mat-cell>
         <mat-footer-cell *matFooterCellDef class="bold">Balance</mat-footer-cell>
       </ng-container>
 
@@ -16,19 +14,12 @@
         <mat-header-cell *matHeaderCellDef class="center bold" class="flex-auto">{{
           amount | currency : 'INR'
         }}</mat-header-cell>
-        <mat-cell
-          *matCellDef="let row; let i = index"
-          class="center"
-          [formGroupName]="i"
-          class="flex-auto"
-        >
+        <mat-cell *matCellDef="let row; let i = index" class="center" [formGroupName]="i" class="flex-auto">
           <mat-form-field>
             <input matInput type="number" formControlName="amount" autocomplete="off" />
           </mat-form-field>
         </mat-cell>
-        <mat-footer-cell *matFooterCellDef class="bold">{{
-          balance | currency : 'INR'
-        }}</mat-footer-cell>
+        <mat-footer-cell *matFooterCellDef class="bold">{{ balance | currency : 'INR' }}</mat-footer-cell>
       </ng-container>
 
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>