ui enhancements and song state

src/app/widget-modules/components/card/card.component.html

@@ -1,4 +1,7 @@
 <div [class.padding]="padding" class="card">
+  <button *ngIf="closeLink" [routerLink]="closeLink" class="btn-close" mat-icon-button>
+    <fa-icon [icon]="faClose"></fa-icon>
+  </button>
   <div *ngIf="heading" class="heading">{{heading}}</div>
   <ng-content></ng-content>
 </div>

src/app/widget-modules/components/card/card.component.less

@@ -7,6 +7,7 @@
   background: #fffb;
   overflow: hidden;
   width: 800px;
+  position: relative;
 
   @media screen and (max-width: 860px) {
     width: 100vw;
@@ -25,4 +26,14 @@
 .heading {
   font-size: 20px;
   font-weight: bold;
+  margin-bottom: 20px;
+  margin-right: 20px;
+  opacity: 0.7;
+}
+
+.btn-close {
+  position: absolute;
+  right: 10px;
+  top: 15px;
+  opacity: 0.7;
 }

src/app/widget-modules/components/card/card.component.ts

@@ -1,18 +1,15 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input} from '@angular/core';
+import {faTimes} from '@fortawesome/free-solid-svg-icons/faTimes';
 
 @Component({
   selector: 'app-card',
   templateUrl: './card.component.html',
   styleUrls: ['./card.component.less']
 })
-export class CardComponent implements OnInit {
+export class CardComponent {
   @Input() padding = true;
   @Input() heading: string;
+  @Input() closeLink: string;
 
-  constructor() {
-  }
-
-  ngOnInit() {
-  }
-
+  public faClose = faTimes;
 }

src/app/widget-modules/components/card/card.module.ts

@@ -1,13 +1,19 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {CardComponent} from './card.component';
+import {MatButtonModule} from '@angular/material/button';
+import {RouterModule} from '@angular/router';
+import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 
 
 @NgModule({
   declarations: [CardComponent],
   exports: [CardComponent],
   imports: [
-    CommonModule
+    CommonModule,
+    MatButtonModule,
+    RouterModule,
+    FontAwesomeModule
   ]
 })
 export class CardModule {

src/app/widget-modules/components/song-text/song-text.component.html

@@ -1,9 +1,10 @@
 <div (click)="onClick()" *ngIf="sections" [@songSwitch]="sections" [class.chords]="_chordMode!=='hide'"
      class="song-text">
 
-  <div (click)="onChordClick()" *ngIf="showSwitch" class="menu">
+  <button (click)="onChordClick()" *ngIf="showSwitch" class="menu" mat-icon-button>
     <fa-icon [icon]="faLines"></fa-icon>
-  </div>
+  </button>
+
 
   <div [class.offset]="fullscreen" [style.top.px]="offset + 50">
     <div #section *ngFor="let section of sections; let i = index" [class.chorus]="section.type===1" class="section">

src/app/widget-modules/components/song-text/song-text.component.less

@@ -36,27 +36,8 @@
 
 .menu {
   position: absolute;
-  right: 0;
-  background: #eee;
-  border-radius: 50%;
-  padding: 5px;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: 300ms all ease-in-out;
-  cursor: pointer;
-  opacity: 0.1;
-
-  @media screen and (max-width: 860px) {
-    background: #0001;
-    opacity: 0.6;
-  }
-
-  &:hover {
-    background: #ddd;
-  }
+  right: -10px;
+  top: -10px;
 }
 
 .section {

src/app/widget-modules/components/song-text/song-text.module.ts

@@ -2,6 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {SongTextComponent} from './song-text.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
+import {MatButtonModule} from '@angular/material/button';
 
 
 @NgModule({
@@ -9,7 +10,8 @@ import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
   exports: [SongTextComponent],
   imports: [
     CommonModule,
-    FontAwesomeModule
+    FontAwesomeModule,
+    MatButtonModule
   ]
 })
 export class SongTextModule {