sidemenu song list

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

@@ -1,4 +1,4 @@
-<div [class.fullscreen]="fullscreen" [class.padding]="padding" class="card">
+<div @fade [class.fullscreen]="fullscreen" [class.padding]="padding" class="card">
   @if (closeLink && !fullscreen) {
   <button [routerLink]="closeLink" class="btn-close" mat-icon-button>
     <fa-icon [icon]="closeIcon"></fa-icon>

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

@@ -70,9 +70,10 @@
 }
 
 .btn-close {
+  --icon-button-color: var(--text-soft);
+  --icon-button-hover-color: var(--text);
   position: absolute;
   right: 10px;
   top: 15px;
   opacity: 0.7;
-  color: var(--text-soft);
 }

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

@@ -4,12 +4,14 @@ import {faTimes} from '@fortawesome/free-solid-svg-icons';
 import {MatIconButton} from '@angular/material/button';
 import {RouterLink} from '@angular/router';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {fade} from '../../../animations';
 
 @Component({
   selector: 'app-card',
   templateUrl: './card.component.html',
   styleUrls: ['./card.component.less'],
   imports: [MatIconButton, RouterLink, FaIconComponent],
+  animations: [fade],
 })
 export class CardComponent {
   @Input() public padding = true;