(fix): Alignment of buttons and boxes missing on Clients, Groups and Centers page

src/app/clients/clients.component.html

@@ -22,10 +22,10 @@
         [routerLink]="['../', 'organization', 'bulk-import', 'Clients']"
         *mifosxHasPermission="'CREATE_CLIENT'"
       >
-        <fa-icon icon="download" class="m-r-10"></fa-icon>{{ 'labels.buttons.Import Client' | translate }}
+        <fa-icon icon="download" class="m-r-20"></fa-icon>{{ 'labels.buttons.Import Client' | translate }}
       </button>
       <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CLIENT'">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Create Client' | translate }}
+        <fa-icon icon="plus" class="m-r-20"></fa-icon>{{ 'labels.buttons.Create Client' | translate }}
       </button>
     </div>
   </div>
@@ -34,7 +34,7 @@
     <div *ngIf="isLoading">
       <mat-progress-bar mode="indeterminate"></mat-progress-bar>
     </div>
-    <table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortChanged($event)">
+    <table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortChanged($event)" class="bordered-table">
       <!-- Name Column -->
       <ng-container matColumnDef="displayName">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>

src/app/clients/clients.component.scss

@@ -1,164 +1 @@
-.container {
-  .action-button {
-    margin-left: auto;
-  }
-
-  .search-button {
-    min-width: 30px;
-    margin: 4px;
-  }
-
-  .search-box {
-    min-width: 320px;
-  }
-
-  .filter-box {
-    min-width: 280px;
-  }
-}
-
-table {
-  tr.select-row:hover {
-    cursor: pointer;
-  }
-
-  tr:nth-child(odd).td {
-    color: black;
-  }
-}
-
-$bar: 150px;
-$foo: $bar * 8;
-$color: #e2e4ec;
-
-.sidenav {
-  overflow-x: hidden;
-}
-
-@keyframes move {
-  0% {
-    left: 0;
-  }
-
-  16.7% {
-    left: 0;
-  }
-
-  33.3% {
-    left: calc($foo / 2);
-  }
-
-  50% {
-    left: $foo - $bar;
-  }
-
-  66.7% {
-    left: calc($foo / 2);
-  }
-
-  83.3% {
-    left: 0;
-  }
-
-  100% {
-    left: 0;
-  }
-}
-
-@keyframes grow {
-  0% {
-    width: $bar;
-  }
-
-  16.7% {
-    width: calc($foo / 2);
-  }
-
-  33.3% {
-    width: calc($foo / 2);
-  }
-
-  50% {
-    width: $bar;
-  }
-
-  66.7% {
-    width: calc($foo / 2);
-  }
-
-  83.3% {
-    width: calc($foo / 2);
-  }
-
-  100% {
-    width: $bar;
-  }
-}
-
-@media (max-width <= 768px) {
-  .container {
-    .search-box,
-    .filter-box,
-    .action-button {
-      width: 100%;
-      margin-bottom: 15px;
-    }
-
-    .search-box mat-form-field {
-      width: 100%;
-    }
-
-    .action-button {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      align-items: stretch;
-    }
-
-    .filter-box {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  table {
-    width: 100%;
-    overflow-x: auto;
-    display: block;
-
-    thead,
-    tbody,
-    tr,
-    th,
-    td {
-      white-space: nowrap;
-    }
-  }
-
-  .mat-paginator {
-    overflow-x: auto;
-    display: block;
-  }
-
-  .alert {
-    text-align: center;
-    padding: 10px;
-  }
-}
-
-@media screen and (max-width > 768px) {
-  .action-button {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-
-    button {
-      width: 100%;
-    }
-  }
-}
-
-.client-list {
-  padding: 1%;
-}
+@use '../shared/styles/list-layout' as *;