Removed all mr-5, mb-5 and basis tailwind classes.

Will soon remove tailwind totally.

bookie/src/app/sales/bill-number/bill-number.component.html

@@ -1,7 +1,7 @@
 <mat-dialog-content>
   <form [formGroup]="form">
-    <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
-      <mat-form-field class="flex-auto basis-[15%] mr-5">
+    <div class="row-container sm:max-lg:flex-col">
+      <mat-form-field class="flex-auto basis-15">
         <mat-label>Regime</mat-label>
         <mat-select formControlName="regime">
           @for (r of regimes; track r) {

bookie/src/app/sales/bill-type/bill-type.component.html

@@ -1,8 +1,8 @@
 <h2 mat-dialog-title>Bill Type</h2>
 <mat-dialog-content>
-  <div class="flex flex-row flex-wrap -mr-5 -mb-5">
+  <div class="tables-grid">
     <mat-card
-      class="flex flex-col square-button mr-5, mb-5"
+      class="flex flex-col square-button"
       matRipple
       (click)="select('REGULAR_BILL')"
       [class.strong-primary]="selected === 'REGULAR_BILL'"
@@ -11,7 +11,7 @@
       <h3>Regular</h3>
     </mat-card>
     <mat-card
-      class="flex flex-col square-button mr-5, mb-5"
+      class="flex flex-col square-button"
       matRipple
       (click)="select('STAFF')"
       [class.strong-primary]="selected === 'STAFF'"
@@ -20,7 +20,7 @@
       <h3>Staff</h3>
     </mat-card>
     <mat-card
-      class="flex flex-col square-button mr-5, mb-5"
+      class="flex flex-col square-button"
       matRipple
       (click)="select('NO_CHARGE')"
       [class.strong-primary]="selected === 'NO_CHARGE'"

bookie/src/app/sales/bill-type/bill-type.component.sass

@@ -0,0 +1,8 @@
+.tables-grid
+  display: flex
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+  gap: 20px
+
+
+.tables-grid > h2
+  grid-column: 1 / -1

bookie/src/app/sales/bill-type/bill-type.component.ts

@@ -10,7 +10,7 @@ import { VoucherType } from '../bills/voucher-type';
 @Component({
   selector: 'app-bill-type',
   templateUrl: './bill-type.component.html',
-  styleUrls: ['./bill-type.component.css'],
+  styleUrls: ['./bill-type.component.sass'],
   imports: [CdkScrollableModule, MatButtonModule, MatCardModule, MatDialogModule, MatRippleModule],
 })
 export class BillTypeComponent {

bookie/src/app/sales/choose-customer/choose-customer.component.html

@@ -1,7 +1,7 @@
 <h2 mat-dialog-title>Customer</h2>
 <mat-dialog-content>
   <form [formGroup]="form" class="flex flex-col">
-    <div class="flex flex-row justify-around content-start items-start">
+    <div class="row-container">
       <mat-form-field class="flex-auto">
         <mat-label>Phone</mat-label>
         <input
@@ -24,25 +24,25 @@
         }
       </mat-autocomplete>
     </div>
-    <div class="flex flex-row justify-around content-start items-start">
+    <div class="row-container">
       <mat-form-field class="flex-auto">
         <mat-label>Name</mat-label>
         <input matInput formControlName="name" />
       </mat-form-field>
     </div>
-    <div class="flex flex-row justify-around content-start items-start">
+    <div class="row-container">
       <mat-form-field class="flex-auto">
         <mat-label>Address</mat-label>
         <textarea matInput formControlName="address"> </textarea>
       </mat-form-field>
     </div>
-    <div class="flex flex-row justify-around content-start items-start">
+    <div class="row-container">
       <mat-checkbox formControlName="printInBill">Print in Bill?</mat-checkbox>
     </div>
     <p></p>
     <div formArrayName="discounts" class="discounts">
       @for (r of item.discounts; track r; let i = $index) {
-        <div [formGroupName]="i" class="flex flex-row justify-around content-start items-start">
+        <div [formGroupName]="i" class="row-container">
           <mat-form-field class="flex-auto">
             <mat-label>Discount on {{ r.name }}</mat-label>
             <input matInput formControlName="discount" />

bookie/src/app/sales/home/sales-home.component.html

@@ -1,76 +1,80 @@
-<div class="flex flex-row flex-wrap -mr-5 -mb-5">
-  <mat-card
-    class="primary flex flex-col square-button mr-5, mb-5"
-    matRipple
-    [routerLink]="['menu-categories']"
-    queryParamsHandling="preserve"
-  >
-    <h3>Add Product</h3>
-  </mat-card>
-  <mat-card
-    class="flex flex-col square-button mr-5, mb-5"
-    matRipple
-    (click)="discount()"
-    [class.disabled]="!discountAllowed()"
-    [class.primary]="discountAllowed()"
-  >
-    <h3>Discount</h3>
-  </mat-card>
-  <mat-card
-    class="flex flex-col square-button mr-5, mb-5"
-    matRipple
-    (click)="printKot()"
-    [class.disabled]="!printKotAllowed()"
-    [class.primary]="printKotAllowed()"
-  >
-    <h3>Print KOT</h3>
-  </mat-card>
-  <mat-card
-    class="flex flex-col square-button mr-5, mb-5"
-    matRipple
-    (click)="printBill()"
-    [class.disabled]="!printBillAllowed()"
-    [class.primary]="printBillAllowed()"
-  >
-    <h3>Print Bill</h3>
-  </mat-card>
-  <mat-card class="flex flex-col square-button mr-5, mb-5 warn" matRipple [routerLink]="['/', 'sales', 'tables']">
-    <h3>Back to Tables</h3>
-  </mat-card>
-  <mat-card
-    class="flex flex-col square-button mr-5, mb-5"
-    matRipple
-    (click)="receivePayment()"
-    [class.disabled]="!receivePaymentAllowed()"
-    [class.primary]="receivePaymentAllowed()"
-  >
-    <h3>Receive Payment</h3>
-  </mat-card>
-  <mat-card
-    class="flex flex-col square-button mr-5, mb-5"
-    matRipple
-    (click)="moveTable()"
-    [class.disabled]="!moveTableAllowed()"
-    [class.primary]="moveTableAllowed()"
-  >
-    <h3>Move Table</h3>
-  </mat-card>
-  <mat-card
-    class="flex flex-col square-button mr-5, mb-5"
-    matRipple
-    (click)="cancelBill()"
-    [class.disabled]="!cancelBillAllowed()"
-    [class.primary]="cancelBillAllowed()"
-  >
-    <h3>Cancel Bill</h3>
-  </mat-card>
-  <mat-card
-    class="flex flex-col square-button mr-5, mb-5"
-    matRipple
-    (click)="splitBill()"
-    [class.disabled]="!splitBillAllowed()"
-    [class.primary]="splitBillAllowed()"
-  >
-    <h3>Split Bill</h3>
-  </mat-card>
-</div>
+<mat-card>
+  <mat-card-content>
+    <div class="tables-grid">
+      <mat-card
+        class="primary flex flex-col square-button"
+        matRipple
+        [routerLink]="['menu-categories']"
+        queryParamsHandling="preserve"
+      >
+        <h3>Add Product</h3>
+      </mat-card>
+      <mat-card
+        class="flex flex-col square-button"
+        matRipple
+        (click)="discount()"
+        [class.disabled]="!discountAllowed()"
+        [class.primary]="discountAllowed()"
+      >
+        <h3>Discount</h3>
+      </mat-card>
+      <mat-card
+        class="flex flex-col square-button"
+        matRipple
+        (click)="printKot()"
+        [class.disabled]="!printKotAllowed()"
+        [class.primary]="printKotAllowed()"
+      >
+        <h3>Print KOT</h3>
+      </mat-card>
+      <mat-card
+        class="flex flex-col square-button"
+        matRipple
+        (click)="printBill()"
+        [class.disabled]="!printBillAllowed()"
+        [class.primary]="printBillAllowed()"
+      >
+        <h3>Print Bill</h3>
+      </mat-card>
+      <mat-card class="flex flex-col square-button warn" matRipple [routerLink]="['/', 'sales', 'tables']">
+        <h3>Back to Tables</h3>
+      </mat-card>
+      <mat-card
+        class="flex flex-col square-button"
+        matRipple
+        (click)="receivePayment()"
+        [class.disabled]="!receivePaymentAllowed()"
+        [class.primary]="receivePaymentAllowed()"
+      >
+        <h3>Receive Payment</h3>
+      </mat-card>
+      <mat-card
+        class="flex flex-col square-button"
+        matRipple
+        (click)="moveTable()"
+        [class.disabled]="!moveTableAllowed()"
+        [class.primary]="moveTableAllowed()"
+      >
+        <h3>Move Table</h3>
+      </mat-card>
+      <mat-card
+        class="flex flex-col square-button"
+        matRipple
+        (click)="cancelBill()"
+        [class.disabled]="!cancelBillAllowed()"
+        [class.primary]="cancelBillAllowed()"
+      >
+        <h3>Cancel Bill</h3>
+      </mat-card>
+      <mat-card
+        class="flex flex-col square-button"
+        matRipple
+        (click)="splitBill()"
+        [class.disabled]="!splitBillAllowed()"
+        [class.primary]="splitBillAllowed()"
+      >
+        <h3>Split Bill</h3>
+      </mat-card>
+    </div>
+  </mat-card-content>
+</mat-card>

bookie/src/app/sales/home/sales-home.component.sass

@@ -0,0 +1,9 @@
+.tables-grid
+  margin-top: 10px
+  display: grid
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+  gap: 20px
+
+
+.tables-grid > h2
+  grid-column: 1 / -1

bookie/src/app/sales/home/sales-home.component.ts

@@ -27,7 +27,7 @@ import { TablesDialogComponent } from '../tables-dialog/tables-dialog.component'
 @Component({
   selector: 'app-sales-home',
   templateUrl: './sales-home.component.html',
-  styleUrls: ['./sales-home.component.css'],
+  styleUrls: ['./sales-home.component.sass'],
   imports: [MatCardModule, MatRippleModule, RouterLink],
 })
 export class SalesHomeComponent {

bookie/src/app/sales/menu-categories/menu-categories.component.html

@@ -1,8 +1,8 @@
 <mat-card>
   <mat-card-content>
-    <div class="flex flex-row flex-wrap -mr-5 -mb-5">
+    <div class="tables-grid">
       <mat-card
-        class="flex flex-col square-button mr-5, mb-5 warn"
+        class="flex flex-col square-button warn"
         matRipple
         [routerLink]="['../']"
         queryParamsHandling="preserve"
@@ -11,7 +11,7 @@
       </mat-card>
       @for (item of list; track item) {
         <mat-card
-          class="primary flex flex-col square-button mr-5, mb-5"
+          class="primary flex flex-col square-button"
           matRipple
           [routerLink]="['../products', item.id]"
           queryParamsHandling="preserve"

bookie/src/app/sales/menu-categories/menu-categories.component.sass

@@ -0,0 +1,8 @@
+.tables-grid
+  display: grid
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+  gap: 20px
+
+
+.tables-grid > h2
+  grid-column: 1 / -1

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

@@ -13,10 +13,10 @@
             }
           </mat-chip-listbox>
         </ng-template>
-        <div class="flex flex-row flex-wrap -mr-5 -mb-5">
+        <div class="tables-grid">
           @for (m of item.modifiers; track m.id) {
             <mat-card
-              class="flex flex-col square-button mr-5, mb-5"
+              class="flex flex-col square-button"
               matRipple
               (click)="select(m)"
               [class.primary]="selectedIds.indexOf(m.id) === -1"

bookie/src/app/sales/modifiers/modifiers.component.sass

@@ -0,0 +1,8 @@
+.tables-grid
+  display: grid
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+  gap: 20px
+
+
+.tables-grid > h2
+  grid-column: 1 / -1

bookie/src/app/sales/modifiers/modifiers.component.ts

@@ -16,7 +16,7 @@ import { ModifierCategory } from '../../core/modifier-category';
 @Component({
   selector: 'app-modifiers',
   templateUrl: './modifiers.component.html',
-  styleUrls: ['./modifiers.component.css'],
+  styleUrls: ['./modifiers.component.sass'],
   imports: [
     AsyncPipe,
     CdkScrollable,

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

@@ -1,7 +1,7 @@
 <h2 mat-dialog-title>Pax</h2>
 <mat-dialog-content>
   <form [formGroup]="form">
-    <div class="flex flex-row justify-around content-start items-start">
+    <div class="row-container">
       <mat-form-field class="flex-auto">
         <mat-label>Pax</mat-label>
         <input

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

@@ -1,8 +1,8 @@
 <mat-card>
   <mat-card-content>
-    <div class="flex flex-row flex-wrap -mr-5 -mb-5">
+    <div class="tables-grid">
       <mat-card
-        class="flex flex-col square-button mr-5, mb-5 warn"
+        class="flex flex-col square-button warn"
         matRipple
         [routerLink]="['../../menu-categories']"
         queryParamsHandling="preserve"
@@ -11,7 +11,7 @@
       </mat-card>
       @for (item of list; track item) {
         <mat-card
-          class="flex flex-col square-button mr-5, mb-5"
+          class="flex flex-col square-button"
           matRipple
           (click)="addProduct(item)"
           [class.accent]="item.hasHappyHour"

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

@@ -0,0 +1,8 @@
+.tables-grid
+  display: grid
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+  gap: 20px
+
+
+.tables-grid > h2
+  grid-column: 1 / -1

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

@@ -10,7 +10,7 @@ import { BillService } from '../bill.service';
 @Component({
   selector: 'app-products',
   templateUrl: './products.component.html',
-  styleUrls: ['./products.component.css'],
+  styleUrls: ['./products.component.sass'],
   imports: [CurrencyPipe, MatCardModule, MatRippleModule, RouterLink],
 })
 export class ProductsComponent implements OnInit {

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

@@ -1,6 +1,6 @@
 <mat-dialog-content>
   <form [formGroup]="form">
-    <div class="flex flex-row justify-around content-start items-start">
+    <div class="row-container">
       <mat-form-field class="flex-auto">
         <mat-label>Quantity</mat-label>
         <input

bookie/src/app/sales/running-tables/running-tables.component.html

@@ -3,10 +3,10 @@
     <mat-card-title>Running Tables</mat-card-title>
   </mat-card-header>
   <mat-card-content>
-    <div class="flex flex-row flex-wrap -mr-5 -mb-5">
+    <div class="tables-grid">
       @for (table of list; track table) {
         <mat-card
-          class="flex flex-col square-button mr-5, mb-5"
+          class="flex flex-col square-button"
           matRipple
           (click)="navigateToBill(table)"
           [class.primary]="table.status !== 'running' && table.status !== 'printed'"
@@ -24,7 +24,7 @@
           }
         </mat-card>
       }
-      <mat-card class="flex flex-col square-button mr-5, mb-5 strong-primary" matRipple (click)="openBill()">
+      <mat-card class="flex flex-col square-button strong-primary" matRipple (click)="openBill()">
         <h3>Open Bill</h3>
       </mat-card>
     </div>

bookie/src/app/sales/running-tables/running-tables.component.sass

@@ -0,0 +1,4 @@
+.tables-grid
+  display: grid
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+  gap: 20px

bookie/src/app/sales/split-bill/split-bill.component.html

@@ -3,7 +3,7 @@
   <form [formGroup]="form" class="flex flex-col">
     <div formArrayName="saleCategories">
       @for (sc of list; track sc; let i = $index) {
-        <div [formGroupName]="i" class="flex flex-row justify-around content-start items-start">
+        <div [formGroupName]="i" class="row-container">
           <mat-checkbox formControlName="saleCategory" class="flex-auto">{{ sc.name }}</mat-checkbox>
         </div>
       }

bookie/src/app/sales/tables-dialog/tables-dialog.component.html

@@ -1,9 +1,9 @@
 <h2 mat-dialog-title>Tables</h2>
 <mat-dialog-content>
-  <div class="flex flex-row flex-wrap -mr-5 -mb-5">
+  <div class="tables-grid">
     @for (table of list; track table) {
       <mat-card
-        class="flex flex-col square-button mr-5, mb-5"
+        class="flex flex-col square-button"
         matRipple
         (click)="select(table)"
         [class.primary]="table.status === 'running'"

bookie/src/app/sales/tables-dialog/tables-dialog.component.sass

@@ -0,0 +1,9 @@
+.tables-grid
+  display: flex
+  flex-wrap: wrap
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+  gap: 20px
+
+
+.tables-grid > h2
+  grid-column: 1 / -1