From 307506965051db86b05c4b1d1fd6b0de1ff173fe Mon Sep 17 00:00:00 2001
From: smuddyx <smuddyx@gmail.com>
Date: Fri, 17 Apr 2020 15:33:08 +0200
Subject: [PATCH] show design fixes

---
 src/app/modules/shows/show/show.component.html      | 2 +-
 src/app/modules/shows/show/show.component.less      | 1 +
 src/app/modules/shows/show/song/song.component.html | 6 +++---
 src/app/modules/shows/show/song/song.component.less | 6 +++---
 src/styles/styles.less                              | 9 +++++++++
 5 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/app/modules/shows/show/show.component.html b/src/app/modules/shows/show/show.component.html
index 99c5188..b4cb3eb 100644
--- a/src/app/modules/shows/show/show.component.html
+++ b/src/app/modules/shows/show/show.component.html
@@ -24,7 +24,7 @@
           <mat-option *ngFor="let song of songs" [value]="song.id">{{song.title}}</mat-option>
         </mat-select>
       </mat-form-field>
-      <button mat-button>aus Übersicht</button>
+
     </div>
     <app-button-row>
       <button (click)="onArchive(true)" *ngIf="!show.archived" mat-button>Archivieren</button>
diff --git a/src/app/modules/shows/show/show.component.less b/src/app/modules/shows/show/show.component.less
index 2e41750..5f0b845 100644
--- a/src/app/modules/shows/show/show.component.less
+++ b/src/app/modules/shows/show/show.component.less
@@ -1,5 +1,6 @@
 .add-row {
   display: flex;
+  margin-top: 10px;
 
   .mat-form-field {
     width: 100%;
diff --git a/src/app/modules/shows/show/song/song.component.html b/src/app/modules/shows/show/song/song.component.html
index f857a20..80572b7 100644
--- a/src/app/modules/shows/show/song/song.component.html
+++ b/src/app/modules/shows/show/song/song.component.html
@@ -2,8 +2,8 @@
   <div *ngIf="show.published" class="title published">{{_song.title}}</div>
 
   <div *ngIf="!show.published" class="song">
-    <app-menu-button (click)="reorder(true)" [icon]="faUp" class="btnUp"></app-menu-button>
-    <app-menu-button (click)="reorder(false)" [icon]="faDown" class="btnDown"></app-menu-button>
+    <app-menu-button (click)="reorder(true)" [icon]="faUp" class="btn-up btn-icon"></app-menu-button>
+    <app-menu-button (click)="reorder(false)" [icon]="faDown" class="btn-down btn-icon"></app-menu-button>
     <span class="title">{{_song.title}}</span>
     <span class="keys">
     <span *ngIf="showSong.keyOriginal!==showSong.key">{{showSong.keyOriginal}}&nbsp;→&nbsp;</span>
@@ -13,7 +13,7 @@
         </mat-select>
       </mat-form-field>
   </span>
-    <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btnDelete"></app-menu-button>
+    <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btn-delete btn-icon"></app-menu-button>
   </div>
   <app-song-text (chordModeChanged)="onChordModeChanged($event)" *ngIf="showText || show.published"
                  [chordMode]="showSong.chordMode"
diff --git a/src/app/modules/shows/show/song/song.component.less b/src/app/modules/shows/show/song/song.component.less
index 5107f65..14bffee 100644
--- a/src/app/modules/shows/show/song/song.component.less
+++ b/src/app/modules/shows/show/song/song.component.less
@@ -20,11 +20,11 @@ mat-form-field {
   margin: -24px 0 -20px 0;
 }
 
-.btnUp {
+.btn-up {
   grid-area: up;
 }
 
-.btnDown {
+.btn-down {
   grid-area: down;
 }
 
@@ -42,7 +42,7 @@ mat-form-field {
   justify-content: flex-end;
 }
 
-.btnDelete {
+.btn-delete {
   grid-area: delete;
   justify-content: flex-end;
 }
diff --git a/src/styles/styles.less b/src/styles/styles.less
index 0ffbeff..33d3f58 100644
--- a/src/styles/styles.less
+++ b/src/styles/styles.less
@@ -47,3 +47,12 @@ h1, h2, h3, h4 {
   display: flex;
   justify-content: center;
 }
+
+.btn-icon {
+  opacity: 0.2;
+  transition: all 300ms ease-in-out;
+
+  &:hover {
+    opacity: 1;
+  }
+}