ui enhancements and song state

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 {