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/products/products.component.css

@@ -28,3 +28,8 @@
   background-color: #424242;
   color: #ffffff;
 }
+
+.face {
+  background-color: #3f51b5;
+  color: #ffffff;
+}

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

@@ -10,7 +10,7 @@
         <h3 class="item-name">Back</h3>
       </mat-card>
       <mat-card
-        class="flex flex-col square-button mr-5, mb-5"
+        class="face flex flex-col square-button mr-5, mb-5"
         matRipple
         *ngFor="let item of list"
         (click)="addProduct(item)"
@@ -18,7 +18,7 @@
         [class.grey800]="item.isNotAvailable"
       >
         <h3 class="item-name">{{ item.name }}</h3>
-        <mat-card-subtitle class="center">{{ item.price | currency : 'INR' }}</mat-card-subtitle>
+        <mat-card-subtitle class="face center">{{ item.price | currency : 'INR' }}</mat-card-subtitle>
       </mat-card>
     </div>
   </mat-card-content>