From f127e7c61a64f9d6807bd8afb8e8db1c4cc68436 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 9 Aug 2022 19:28:13 +0200
Subject: [PATCH] Feature/improve styling of benchmarks (#1131)

* Harmonize benchmark table styling

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../components/home-market/home-market.html   |  1 +
 .../lib/benchmark/benchmark.component.html    | 98 +++++++++----------
 .../src/lib/benchmark/benchmark.component.ts  |  1 +
 libs/ui/src/lib/benchmark/benchmark.module.ts |  8 +-
 5 files changed, 59 insertions(+), 50 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1bd17aead..32bce2498 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Simplified the initialization of the exchange rate service
+- Improved the styling of the benchmarks in the markets overview
 
 ## 1.177.0 - 04.08.2022
 
diff --git a/apps/client/src/app/components/home-market/home-market.html b/apps/client/src/app/components/home-market/home-market.html
index e8cf52bee..b0a01a43c 100644
--- a/apps/client/src/app/components/home-market/home-market.html
+++ b/apps/client/src/app/components/home-market/home-market.html
@@ -34,6 +34,7 @@
       <ngx-skeleton-loader
         *ngIf="isLoading"
         animation="pulse"
+        class="px-2 py-3"
         [theme]="{
           height: '1.5rem',
           width: '100%'
diff --git a/libs/ui/src/lib/benchmark/benchmark.component.html b/libs/ui/src/lib/benchmark/benchmark.component.html
index a0fa4c1cc..c6ec23f69 100644
--- a/libs/ui/src/lib/benchmark/benchmark.component.html
+++ b/libs/ui/src/lib/benchmark/benchmark.component.html
@@ -1,50 +1,50 @@
-<table class="gf-table w-100">
-  <thead>
-    <tr class="mat-header-row">
-      <th class="mat-header-cell px-1 py-2" i18n>Index</th>
-      <th class="mat-header-cell px-1 py-2 text-right">
-        <span class="d-none d-sm-block text-nowrap" i18n
-          >Change from All Time High</span
-        >
-        <span class="d-block d-sm-none text-nowrap" i18n>from ATH</span>
-      </th>
-      <th class="mat-header-cell px-1 py-2 text-right" i18n></th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr *ngFor="let benchmark of benchmarks" class="mat-row">
-      <td class="mat-cell px-1 py-2">
-        <div class="d-flex align-items-center">
-          {{ benchmark.name }}
-        </div>
-      </td>
-      <td class="mat-cell px-1 py-2 text-right">
-        <gf-value
-          class="d-inline-block justify-content-end"
-          size="medium"
-          [isPercent]="true"
-          [locale]="locale"
-          [ngClass]="{
-            'text-danger':
-              benchmark?.performances?.allTimeHigh?.performancePercent < 0,
-            'text-success':
-              benchmark?.performances?.allTimeHigh?.performancePercent > 0
-          }"
-          [value]="
-            benchmark?.performances?.allTimeHigh?.performancePercent ??
-            undefined
-          "
-        ></gf-value>
-      </td>
-      <td class="mat-cell px-1 py-2">
-        <div
-          *ngIf="benchmark?.marketCondition"
-          class="text-center"
-          [title]="benchmark?.marketCondition"
-        >
-          {{ resolveMarketCondition(benchmark.marketCondition).emoji }}
-        </div>
-      </td>
-    </tr>
-  </tbody>
+<table class="gf-table w-100" mat-table [dataSource]="benchmarks">
+  <ng-container matColumnDef="name">
+    <th *matHeaderCellDef class="px-2" i18n mat-header-cell>Index</th>
+    <td *matCellDef="let element" class="px-2" mat-cell>
+      {{ element?.name }}
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="change">
+    <th *matHeaderCellDef class="text-right" mat-header-cell>
+      <span class="d-none d-sm-block text-nowrap" i18n
+        >Change from All Time High</span
+      >
+      <span class="d-block d-sm-none text-nowrap" i18n>from ATH</span>
+    </th>
+    <td *matCellDef="let element" class="text-right" mat-cell>
+      <gf-value
+        class="d-inline-block justify-content-end"
+        size="medium"
+        [isPercent]="true"
+        [locale]="locale"
+        [ngClass]="{
+          'text-danger':
+            element?.performances?.allTimeHigh?.performancePercent < 0,
+          'text-success':
+            element?.performances?.allTimeHigh?.performancePercent > 0
+        }"
+        [value]="
+          element?.performances?.allTimeHigh?.performancePercent ?? undefined
+        "
+      ></gf-value>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="marketCondition">
+    <th *matHeaderCellDef mat-header-cell></th>
+    <td *matCellDef="let element" class="px-0" mat-cell>
+      <div
+        *ngIf="element?.marketCondition"
+        class="text-center"
+        [title]="element?.marketCondition"
+      >
+        {{ resolveMarketCondition(element.marketCondition).emoji }}
+      </div>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
 </table>
diff --git a/libs/ui/src/lib/benchmark/benchmark.component.ts b/libs/ui/src/lib/benchmark/benchmark.component.ts
index c1e35f438..a5c117c24 100644
--- a/libs/ui/src/lib/benchmark/benchmark.component.ts
+++ b/libs/ui/src/lib/benchmark/benchmark.component.ts
@@ -18,6 +18,7 @@ export class BenchmarkComponent implements OnChanges {
   @Input() benchmarks: Benchmark[];
   @Input() locale: string;
 
+  public displayedColumns = ['name', 'change', 'marketCondition'];
   public resolveMarketCondition = resolveMarketCondition;
 
   public constructor() {}
diff --git a/libs/ui/src/lib/benchmark/benchmark.module.ts b/libs/ui/src/lib/benchmark/benchmark.module.ts
index 3a0eeb5dd..1768aa39f 100644
--- a/libs/ui/src/lib/benchmark/benchmark.module.ts
+++ b/libs/ui/src/lib/benchmark/benchmark.module.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatTableModule } from '@angular/material/table';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfValueModule } from '../value';
@@ -8,7 +9,12 @@ import { BenchmarkComponent } from './benchmark.component';
 @NgModule({
   declarations: [BenchmarkComponent],
   exports: [BenchmarkComponent],
-  imports: [CommonModule, GfValueModule, NgxSkeletonLoaderModule],
+  imports: [
+    CommonModule,
+    GfValueModule,
+    MatTableModule,
+    NgxSkeletonLoaderModule
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfBenchmarkModule {}