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/home/sales-home.component.html

@@ -1,6 +1,6 @@
 <div class="flex flex-row flex-wrap -mr-5 -mb-5">
   <mat-card
-    class="flex flex-col square-button mr-5, mb-5"
+    class="face flex flex-col square-button mr-5, mb-5"
     matRipple
     [routerLink]="['menu-categories']"
     queryParamsHandling="preserve"
@@ -12,6 +12,7 @@
     matRipple
     (click)="discount()"
     [class.disabled]="!discountAllowed()"
+    [class.face]="discountAllowed()"
   >
     <h3 class="item-name">Discount</h3>
   </mat-card>
@@ -20,6 +21,7 @@
     matRipple
     (click)="printKot()"
     [class.disabled]="!printKotAllowed()"
+    [class.face]="printKotAllowed()"
   >
     <h3 class="item-name">Print KOT</h3>
   </mat-card>
@@ -28,14 +30,11 @@
     matRipple
     (click)="printBill()"
     [class.disabled]="!printBillAllowed()"
+    [class.face]="printBillAllowed()"
   >
     <h3 class="item-name">Print Bill</h3>
   </mat-card>
-  <mat-card
-    class="flex flex-col square-button mr-5, mb-5 warn"
-    matRipple
-    [routerLink]="['/', 'sales', 'tables']"
-  >
+  <mat-card class="flex flex-col square-button mr-5, mb-5 warn" matRipple [routerLink]="['/', 'sales', 'tables']">
     <h3 class="item-name">Back to Tables</h3>
   </mat-card>
   <mat-card
@@ -43,6 +42,7 @@
     matRipple
     (click)="receivePayment()"
     [class.disabled]="!receivePaymentAllowed()"
+    [class.face]="receivePaymentAllowed()"
   >
     <h3 class="item-name">Receive Payment</h3>
   </mat-card>
@@ -51,6 +51,7 @@
     matRipple
     (click)="moveTable()"
     [class.disabled]="!moveTableAllowed()"
+    [class.face]="moveTableAllowed()"
   >
     <h3 class="item-name">Move Table</h3>
   </mat-card>
@@ -59,6 +60,7 @@
     matRipple
     (click)="voidBill()"
     [class.disabled]="!voidBillAllowed()"
+    [class.face]="voidBillAllowed()"
   >
     <h3 class="item-name">Void Bill</h3>
   </mat-card>
@@ -67,6 +69,7 @@
     matRipple
     (click)="splitBill()"
     [class.disabled]="!splitBillAllowed()"
+    [class.face]="splitBillAllowed()"
   >
     <h3 class="item-name">Split Bill</h3>
   </mat-card>