Transactions tab standarization

src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component.html

@@ -29,6 +29,8 @@
     <mat-card-content>
 
       <div fxLayout="row wrap" class="content">
+        <div fxFlex="100%" [ngClass]="transactionColor()">
+        </div>
 
         <div fxFlex="50%" class="mat-body-strong">
           {{"labels.inputs.Id" | translate}}
@@ -59,15 +61,15 @@
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.currency.name }}
+          {{ transactionData.currency.displayLabel }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Amount" | translate}}
+          {{"labels.inputs.Amount" | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.amount | currency:transactionData.currency.code }}
+          {{ transactionData.amount | currency:transactionData.currency.code:'symbol-narrow':'1.2-2' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="transactionData.note">

src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component.scss

@@ -1,3 +1,5 @@
+@import "assets/styles/helper";
+
 .container {
   max-width: 37rem;
   .content {
@@ -12,3 +14,18 @@
     }
   }
 }
+
+.active {
+  background-color: $status-active;
+  height: 4px;
+}
+
+.linked {
+  background-color: $status-approved;
+  height: 4px;
+}
+
+.undo {
+  background-color: $status-active-overdue;
+  height: 4px;
+}

src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component.ts

@@ -71,4 +71,10 @@ export class SavingsTransactionGeneralTabComponent implements OnInit {
     });
   }
 
+  transactionColor(): string {
+    if (this.transactionData.reversed) {
+      return 'undo';
+    }
+    return 'active';
+  }
 }

src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.html

@@ -2,7 +2,7 @@
   <nav mat-tab-nav-bar class="navigation-tabs">
     <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
       [active]="general.isActive">
-      General
+      {{'labels.heading.General' | translate}}
     </a>
     <ng-container *ngFor="let entityDatatable of entityDatatables">
       <a mat-tab-link [routerLink]="['./datatables',entityDatatable.registeredTableName]" routerLinkActive