adding presentation background

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

@@ -3,7 +3,7 @@
 .card {
   margin: 20px;
   border-radius: 8px;
-  background: #fffb;
+  background: #fffe;
   backdrop-filter: blur(12px);
   overflow: hidden;
   width: 800px;
@@ -11,8 +11,8 @@
 
   @media screen and (max-width: 860px) {
     width: 100vw;
-    border-radius: 0px;
-    background: #fffa;
+    border-radius: 0;
+    background: #fffe;
     margin: 0;
   }
 

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

@@ -1,5 +1,5 @@
 import {Component, Input} from '@angular/core';
-import {faTimes} from '@fortawesome/free-solid-svg-icons/faTimes';
+import {faTimes} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-card',

src/app/widget-modules/components/list-header/list-header.component.ts

@@ -1,6 +1,5 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {faFilter} from '@fortawesome/free-solid-svg-icons/faFilter';
-import {faPlus} from '@fortawesome/free-solid-svg-icons/faPlus';
+import {faFilter, faPlus} from '@fortawesome/free-solid-svg-icons';
 import {fade} from '../../../animations';
 
 @Component({

src/app/widget-modules/components/menu-button/menu-button.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {IconProp} from '@fortawesome/fontawesome-svg-core';
-import {faCross} from '@fortawesome/free-solid-svg-icons/faCross';
+import {faCross} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-menu-button',

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

@@ -27,7 +27,7 @@
 
 .line {
   opacity: 1;
-  transition: 1000ms all ease-in-out;
+  transition: 100ms all ease-in-out;
 
   &.disabled {
     opacity: 0.5;
@@ -65,7 +65,7 @@
   left: 40px;
   right: 40px;
 
-  transition: 1000ms all ease-in-out;
+  transition: 1000ms top ease-in-out;
 }
 
 .error {

src/app/widget-modules/pipes/legal-owner-translator/legal-owner.pipe.ts

@@ -1,10 +1,11 @@
 import {Pipe, PipeTransform} from '@angular/core';
+import {SongLegalOwner} from '../../../modules/songs/services/song.service';
 
 @Pipe({
   name: 'legalOwner',
 })
 export class LegalOwnerPipe implements PipeTransform {
-  public transform(legalOwnerKey: string): string {
+  public transform(legalOwnerKey: SongLegalOwner): string {
     switch (legalOwnerKey) {
       case 'CCLI':
         return 'CCLI';

src/app/widget-modules/pipes/legal-type-translator/legal-type.pipe.ts

@@ -1,10 +1,11 @@
 import {Pipe, PipeTransform} from '@angular/core';
+import {SongLegalType} from '../../../modules/songs/services/song.service';
 
 @Pipe({
   name: 'legalType',
 })
 export class LegalTypePipe implements PipeTransform {
-  public transform(legalTypeKey: string): string {
+  public transform(legalTypeKey: SongLegalType): string {
     switch (legalTypeKey) {
       case 'open':
         return 'Klärung erforderlich ';

src/app/widget-modules/pipes/song-type-translater/song-type.pipe.ts

@@ -1,15 +1,18 @@
 import {Pipe, PipeTransform} from '@angular/core';
+import {SongType} from '../../../modules/songs/services/song.service';
 
 @Pipe({
   name: 'songType',
 })
 export class SongTypePipe implements PipeTransform {
-  public transform(songTypeKey: string): string {
+  public transform(songTypeKey: SongType): string {
     switch (songTypeKey) {
       case 'Worship':
         return 'Anbetung';
       case 'Praise':
         return 'Lobpreis';
+      case 'Misc':
+        return 'sonstiges';
       default:
         return '';
     }