Bisq dashboard: Change color between red/green when price changes

frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.html

@@ -8,7 +8,9 @@
         <div class="card-body">
           <h5 class="card-title" i18n="bisq-dashboard.price-index-title">Bisq Price Index</h5>
           <div class="big-fiat">
-            <span class="green-color" *ngIf="usdPrice$ | async as usdPrice; else loading">{{ usdPrice | currency:'USD':'symbol':'1.2-2' }}</span>
+            <span *ngIf="usdPrice$ | async as usdPrice; else loading">
+              <span [appColoredPrice]="usdPrice">{{ usdPrice | currency:'USD':'symbol':'1.2-2' }}</span>
+            </span>
           </div>
         </div>
       </div>
@@ -18,7 +20,9 @@
         <div class="card-body">
           <h5 class="card-title" i18n="bisq-dashboard.market-price-title">Bisq Market Price</h5>
           <div class="big-fiat">
-            <span class="green-color" *ngIf="bisqMarketPrice; else loading">{{ bisqMarketPrice | currency:'USD':'symbol':'1.2-2' }}</span>
+            <span class="green-color" *ngIf="bisqMarketPrice; else loading">
+              <span [appColoredPrice]="bisqMarketPrice">{{ bisqMarketPrice | currency:'USD':'symbol':'1.2-2' }}</span>
+            </span>
           </div>
         </div>
       </div>

frontend/src/app/shared/directives/colored-price.directive.ts

@@ -0,0 +1,22 @@
+import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
+
+@Directive({
+  selector: '[appColoredPrice]',
+})
+export class ColoredPriceDirective implements OnChanges {
+  @Input() appColoredPrice: number;
+  previousValue = null;
+
+  constructor(
+    private element: ElementRef
+  ) { }
+
+  ngOnChanges() {
+    if (this.previousValue && this.appColoredPrice < this.previousValue) {
+      this.element.nativeElement.classList.add('red-color');
+    } else {
+      this.element.nativeElement.classList.remove('red-color');
+    }
+    this.previousValue = this.appColoredPrice;
+  }
+}

frontend/src/app/shared/shared.module.ts

@@ -19,6 +19,7 @@ import { TxFeaturesComponent } from '../components/tx-features/tx-features.compo
 import { TxFeeRatingComponent } from '../components/tx-fee-rating/tx-fee-rating.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { LanguageSelectorComponent } from '../components/language-selector/language-selector.component';
+import { ColoredPriceDirective } from './directives/colored-price.directive';
 
 @NgModule({
   declarations: [
@@ -39,6 +40,7 @@ import { LanguageSelectorComponent } from '../components/language-selector/langu
     CeilPipe,
     ShortenStringPipe,
     Decimal2HexPipe,
+    ColoredPriceDirective,
   ],
   imports: [
     CommonModule,
@@ -77,6 +79,7 @@ import { LanguageSelectorComponent } from '../components/language-selector/langu
     CeilPipe,
     ShortenStringPipe,
     Decimal2HexPipe,
+    ColoredPriceDirective,
   ]
 })
 export class SharedModule {}

frontend/src/styles.scss

@@ -218,6 +218,10 @@ body {
   color: #3bcc49;
 }
 
+.red-color {
+  color: #dc3545;
+}
+
 .yellow-color { 
   color: #ffd800;
 }