From e6f0edebf585badf593bd22d208e88bfa044d046 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?=
 <Sebastien.ANDRE@external.loccitane.com>
Date: Tue, 3 Mar 2020 15:08:30 +0100
Subject: [PATCH] Un peu de style

---
 .../src/app/summary/summary.component.css        |  7 ++++++-
 .../src/app/summary/summary.component.html       | 16 +++++++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/Front/skydivelogs-app/src/app/summary/summary.component.css b/Front/skydivelogs-app/src/app/summary/summary.component.css
index 1003f9d..bda661c 100644
--- a/Front/skydivelogs-app/src/app/summary/summary.component.css
+++ b/Front/skydivelogs-app/src/app/summary/summary.component.css
@@ -3,8 +3,13 @@
 }
 
 .labelTab {
-  margin: 5px;
+  padding: 5px;
   cursor: pointer;
   text-decoration: underline;
   font-weight: bold;
+  background-color: lightgray;
+}
+
+.labelTab.selected {
+  background-color: gray !important;
 }
diff --git a/Front/skydivelogs-app/src/app/summary/summary.component.html b/Front/skydivelogs-app/src/app/summary/summary.component.html
index 991d514..c078cba 100644
--- a/Front/skydivelogs-app/src/app/summary/summary.component.html
+++ b/Front/skydivelogs-app/src/app/summary/summary.component.html
@@ -14,13 +14,15 @@
 </div>
 
 <div style="display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 15px;">
-  <label (click)="showStats(1)" class="labelTab">Jumps in the last month</label>
-  <label (click)="showStats(2)" class="labelTab">Jumps in the last year</label>
-  <label (click)="showStats(3)" class="labelTab">By DZ</label>
-  <label (click)="showStats(4)" class="labelTab">By aircraft</label>
-  <label (click)="showStats(5)" class="labelTab">By gear</label>
-  <label (click)="showStats(6)" class="labelTab">By jump type</label>
-  <label (click)="showStats(7)" class="labelTab">By year</label>
+  <label (click)="showStats(1)" [ngClass]="statsToShow(1) ? 'labelTab selected': 'labelTab'">Jumps in the last
+    month</label>
+  <label (click)="showStats(2)" [ngClass]="statsToShow(2) ? 'labelTab selected': 'labelTab'">Jumps in the last
+    year</label>
+  <label (click)="showStats(3)" [ngClass]="statsToShow(3) ? 'labelTab selected': 'labelTab'">By DZ</label>
+  <label (click)="showStats(4)" [ngClass]="statsToShow(4) ? 'labelTab selected': 'labelTab'">By aircraft</label>
+  <label (click)="showStats(5)" [ngClass]="statsToShow(5) ? 'labelTab selected': 'labelTab'">By gear</label>
+  <label (click)="showStats(6)" [ngClass]="statsToShow(6) ? 'labelTab selected': 'labelTab'">By jump type</label>
+  <label (click)="showStats(7)" [ngClass]="statsToShow(7) ? 'labelTab selected': 'labelTab'">By year</label>
 </div>
 
 <div *ngIf="statsToShow(1)">