From d3da49b9badb4bd527248b667e826dfe22a7f0e6 Mon Sep 17 00:00:00 2001
From: raiper34 <raipergm34@gmail.com>
Date: Sat, 13 Jul 2024 16:03:38 +0200
Subject: [PATCH] icon titles

---
 .../playlist-box/playlist-box.component.html       |  6 +++++-
 .../track-list/track-list.component.html           | 14 +++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/app/components/playlist-box/playlist-box.component.html b/src/frontend/src/app/components/playlist-box/playlist-box.component.html
index 2534bdb..7832808 100644
--- a/src/frontend/src/app/components/playlist-box/playlist-box.component.html
+++ b/src/frontend/src/app/components/playlist-box/playlist-box.component.html
@@ -9,7 +9,11 @@
           <ng-template #noErrorTemplate>
             <span class="is-size-6 has-text-weight-semibold">{{playlist.name}}</span>
           </ng-template>&nbsp;
-          <a [href]="playlist.spotifyUrl" target="_blank" class="is-color-black"><i class="fa-brands fa-spotify"></i></a>
+          <a [href]="playlist.spotifyUrl"
+             target="_blank"
+             class="is-color-black" title="Link to Spotify url to be download from">
+            <i class="fa-brands fa-spotify"></i>
+          </a>
         </span>
     <span *ngIf="!playlist.error">
       <span class="is-size-6 has-text-weight-medium">{{trackCompletedCount$ | async}}/{{trackCount$ | async}}</span>&nbsp;
diff --git a/src/frontend/src/app/components/track-list/track-list.component.html b/src/frontend/src/app/components/track-list/track-list.component.html
index f9f535a..bc9297a 100644
--- a/src/frontend/src/app/components/track-list/track-list.component.html
+++ b/src/frontend/src/app/components/track-list/track-list.component.html
@@ -1,13 +1,21 @@
 <a class="panel-block is-flex is-justify-content-space-between" *ngFor="let track of tracks$ | async">
   <div>
     <span>{{ track.artist }} - {{ track.song }}</span>&nbsp;
-    <a [href]="track.spotifyUrl" target="_blank" class="is-color-primary margin-left">
+    <a [href]="track.spotifyUrl"
+       target="_blank"
+       class="is-color-primary margin-left" title="Spotify preview of track that will be downloaded">
       <i class="fa-brands fa-spotify"></i>
     </a>&nbsp;
-    <a [href]="track.youtubeUrl" target="_blank" class="is-color-danger is-color-black">
+    <a [href]="track.youtubeUrl"
+       target="_blank"
+       class="is-color-danger is-color-black" title="Youtube searched track that will be downloaded">
       <i class="fa-brands fa-youtube"></i>
     </a>&nbsp;
-    <a *ngIf="track.status === trackStatuses.Completed" href="api/track/download/{{track.id}}" class="is-color-info" download>
+    <a *ngIf="track.status === trackStatuses.Completed"
+       href="api/track/download/{{track.id}}"
+       class="is-color-info"
+       title="Download downloaded and locally saved file"
+       download>
       <i class="fa-solid fa-download"></i>
     </a>
   </div>