Add war list mouseover and background color select state

static/src/app/statistic/war/war-list/war-item.component.css

@@ -3,6 +3,11 @@
   border-right: 1px solid #dadada;
 }
 
+.war-item:hover, .selected{
+  background: linear-gradient(80deg, white 0%, #e7e7e7 120%);
+  border-bottom: 1px solid #dadada;
+}
+
 .war-item-box {
   padding-top: 15px;
 }

static/src/app/statistic/war/war-list/war-list.component.css

@@ -9,6 +9,21 @@
   cursor: pointer;
 }
 
+.list-header:hover, .selected{
+  background: linear-gradient(80deg, white 0%, #e7e7e7 120%);
+}
+
+.list-header-battles {
+  border-bottom: 1px solid #dadada;
+  border-right: 1px solid #dadada;
+  border-left: 4px solid transparent;
+  padding: 25px;
+  font-size: 16px;
+  text-transform: uppercase;
+  color: #333333;
+  border-bottom: 1px solid #f1f1f1;
+}
+
 .mat-icon {
   color: #666666;
   vertical-align: middle;

static/src/app/statistic/war/war-list/war-list.component.html

@@ -1,13 +1,14 @@
-<div class="war-list-header" *ngIf="!collapsed && loginService.hasPermission(3)">
+<div class="war-menu">
+  <div class="war-list-header" *ngIf="!collapsed && loginService.hasPermission(3)">
     <button mat-stroked-button (click)="selectNewCampaign()">
       {{'stats.sidebar.campaign.add' | translate}}
     </button>
     <button mat-stroked-button (click)="selectNewWar()">
       {{'stats.sidebar.battle.add' | translate}}
     </button>
-</div>
+  </div>
 
-<div class="list-header"
+  <div class="list-header"
        [ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
     <div class="select-indicator-container">
       <div class="select-indicator"></div>
@@ -16,9 +17,9 @@
               matTooltipPosition="right"
               svgIcon="stats-chart"></mat-icon>
     <span *ngIf="!collapsed">{{'stats.sidebar.overview' | translate}}</span>
-</div>
+  </div>
 
-<div class="list-header"
+  <div class="list-header"
        [ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)">
     <div class="select-indicator-container">
       <div class="select-indicator"></div>
@@ -27,16 +28,16 @@
               matTooltipPosition="right"
               svgIcon="highscore"></mat-icon>
     <span *ngIf="!collapsed">{{'stats.sidebar.highscore' | translate}}</span>
-</div>
+  </div>
 
-<div class="list-header" style="cursor: default; border-bottom: 1px solid #f1f1f1;">
+  <div class="list-header-battles">
     <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.battles'] : ''"
               matTooltipPosition="right"
               svgIcon="battle"></mat-icon>
     <span *ngIf="!collapsed">{{'stats.sidebar.battles' | translate}}</span>
-</div>
+  </div>
 
-<div class="battle-list">
+  <div class="battle-list">
     <div *ngFor="let war of campaign.wars$ | async">
       <cc-war-item
         [war]="war"
@@ -47,8 +48,9 @@
         [selected]="war._id == selectedWarId">
       </cc-war-item>
     </div>
-</div>
+  </div>
 
-<div class="fill-vertical-border"
+  <div class="fill-vertical-border"
        [ngClass]="{collapsed: collapsed}">
+  </div>
 </div>