Improve UI

apps/client/src/app/components/transactions-table/transactions-table.component.html

@@ -1,4 +1,4 @@
-<mat-form-field class="w-100">
+<mat-form-field appearance="outline" class="w-100">
   <ion-icon class="mr-1" matPrefix name="search-outline"></ion-icon>
   <mat-chip-list #chipList aria-label="Search keywords">
     <mat-chip
@@ -8,12 +8,12 @@
       matChipRemove
     >
       {{ searchKeyword }}
-      <ion-icon class="mr-1" matPrefix name="close-outline"></ion-icon>
+      <ion-icon class="ml-2" matPrefix name="close-outline"></ion-icon>
     </mat-chip>
     <input
-      placeholder="Search for transactions..."
-      name="close-outline"
       #searchInput
+      name="close-outline"
+      placeholder="Search for account, type, symbol or currency..."
       [formControl]="searchControl"
       [matAutocomplete]="auto"
       [matChipInputFor]="chipList"

apps/client/src/app/components/transactions-table/transactions-table.component.scss

@@ -7,6 +7,10 @@
     }
   }
 
+  .mat-chip {
+    cursor: pointer;
+  }
+
   .mat-table {
     td {
       border: 0;

apps/client/src/app/components/transactions-table/transactions-table.module.ts

@@ -15,7 +15,7 @@ import { GfValueModule } from '../value/value.module';
 import { TransactionsTableComponent } from './transactions-table.component';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [TransactionsTableComponent],
@@ -34,8 +34,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
     MatSortModule,
     MatTableModule,
     NgxSkeletonLoaderModule,
-    RouterModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    RouterModule
   ],
   providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]