Add icon

apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.component.ts

@@ -30,9 +30,9 @@ import { CreateOrUpdateTransactionDialogParams } from './interfaces/interfaces';
 })
 export class CreateOrUpdateTransactionDialog {
   public currencies: Currency[] = [];
+  public currentMarketPrice = null;
   public filteredLookupItems: Observable<LookupItem[]>;
   public isLoading = false;
-  public currentMarketPrice = null;
   public platforms: { id: string; name: string }[];
   public searchSymbolCtrl = new FormControl(
     this.data.transaction.symbol,
@@ -80,7 +80,6 @@ export class CreateOrUpdateTransactionDialog {
 
   public applyCurrentMarketPrice() {
     this.data.transaction.unitPrice = this.currentMarketPrice;
-    this.cd.markForCheck();
   }
 
   public onCancel(): void {

apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.html

@@ -81,7 +81,13 @@
           [matDatepicker]="date"
           [(ngModel)]="data.transaction.date"
         />
-        <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
+        <mat-datepicker-toggle matSuffix [for]="date">
+          <ion-icon
+            class="text-muted"
+            matDatepickerToggleIcon
+            name="calendar-clear-outline"
+          ></ion-icon>
+        </mat-datepicker-toggle>
         <mat-datepicker #date disabled="false"></mat-datepicker>
       </mat-form-field>
     </div>
@@ -110,7 +116,7 @@
       </mat-form-field>
     </div>
     <div>
-      <mat-form-field appearance="outline" class="w-100 mb-4">
+      <mat-form-field appearance="outline" class="unit-price w-100">
         <mat-label i18n>Unit Price</mat-label>
         <input
           matInput
@@ -119,14 +125,15 @@
           type="number"
           [(ngModel)]="data.transaction.unitPrice"
         />
-        <mat-hint
+        <button
           *ngIf="currentMarketPrice"
-          align="start"
+          mat-icon-button
-          class="hint-action"
+          matSuffix
+          title="Apply current market price"
           (click)="applyCurrentMarketPrice()"
-          >Use current market price from {{ data.transaction.dataSource
-          }}</mat-hint
         >
+          <ion-icon class="text-muted" name="refresh-outline"></ion-icon>
+        </button>
       </mat-form-field>
     </div>
     <div>

apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.module.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
@@ -30,6 +30,7 @@ import { CreateOrUpdateTransactionDialog } from './create-or-update-transaction-
     MatSelectModule,
     ReactiveFormsModule
   ],
-  providers: []
+  providers: [],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class CreateOrUpdateTransactionDialogModule {}

apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.scss

@@ -14,6 +14,18 @@
       }
     }
 
+    .mat-form-field-appearance-outline {
+      ::ng-deep {
+        .mat-form-field-suffix {
+          top: -0.3rem;
+        }
+      }
+
+      ion-icon {
+        font-size: 130%;
+      }
+    }
+
     .mat-select {
       &.no-arrow {
         ::ng-deep {
@@ -29,14 +41,6 @@
         color: var(--dark-primary-text);
       }
     }
-
-    .hint-action {
-      color: var(--dark-primary-text);
-      text-decoration: underline;
-      &:hover {
-        cursor: pointer;
-      }
-    }
   }
 }