Chore: Moved the formatting to the main style sheet because it was used everywhere.

Also, moved to sass to get theme colors from the material design library

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

@@ -1,35 +0,0 @@
-.square-button {
-  min-width: 150px;
-  max-width: 150px;
-  min-height: 150px;
-  max-height: 150px;
-  cursor: pointer;
-  margin: 20px;
-}
-.item-name {
-  text-align: center;
-  padding: 0.5rem;
-}
-
-.center {
-  text-align: center;
-}
-
-.yellow300 {
-  background-color: #fff176;
-}
-
-.red700 {
-  background-color: #d32f2f;
-  color: #ffffff;
-}
-
-.grey800 {
-  background-color: #424242;
-  color: #ffffff;
-}
-
-.face {
-  background-color: #3f51b5;
-  color: #ffffff;
-}

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

@@ -2,26 +2,24 @@
   <mat-card-content>
     <div class="flex flex-row flex-wrap -mr-5 -mb-5">
       <mat-card
-        class="flex flex-col square-button mr-5, mb-5 red700"
+        class="flex flex-col square-button mr-5, mb-5 warn"
         matRipple
         [routerLink]="['../../menu-categories']"
         queryParamsHandling="preserve"
       >
-        <h3 class="item-name">Back</h3>
+        <h3>Back</h3>
       </mat-card>
       <mat-card
         class="flex flex-col square-button mr-5, mb-5"
         matRipple
         *ngFor="let item of list"
         (click)="addProduct(item)"
-        [class.yellow300]="item.hasHappyHour"
-        [class.grey800]="item.isNotAvailable"
-        [class.face]="!item.hasHappyHour && !item.isNotAvailable"
+        [class.accent]="item.hasHappyHour"
+        [class.strong-disabled]="item.isNotAvailable"
+        [class.primary]="!item.hasHappyHour && !item.isNotAvailable"
       >
-        <h3 class="item-name">{{ item.name }}</h3>
-        <mat-card-subtitle class="center" [class.face]="!item.hasHappyHour && !item.isNotAvailable">{{
-          item.price | currency : 'INR'
-        }}</mat-card-subtitle>
+        <h3>{{ item.name }}</h3>
+        <span>{{ item.price | currency : 'INR' }}</span>
       </mat-card>
     </div>
   </mat-card-content>