From 1f294686f016bb34fb55c1482835a4c476cfbc73 Mon Sep 17 00:00:00 2001
From: F-Node-Karlsruhe <christian.fries@eecc.de>
Date: Fri, 10 Feb 2023 15:43:31 +0100
Subject: [PATCH] add download icon on hover

---
 CHANGELOG.md                           | 3 +++
 frontend/src/views/ProductPassport.vue | 7 +++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3bec7db..dbb752c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,8 +4,11 @@ VC Verifier Changelog
 WIP
 ---
 
+- UI improvements
+
 1.1.0 (2023-02-10)
 ---
+
 - add PDF download of verified product passport
 - use UTC time for credential PDF
 - UI improvements
diff --git a/frontend/src/views/ProductPassport.vue b/frontend/src/views/ProductPassport.vue
index 0849959..58b0bcf 100644
--- a/frontend/src/views/ProductPassport.vue
+++ b/frontend/src/views/ProductPassport.vue
@@ -6,13 +6,15 @@
                     <h5 class="mb-0">Verified Product Passport</h5>
                 </div>
                 <div class="col-3 text-end">
-                    <button :disabled="renderingPDF" @click="downloadProductPassportPDF"
+                    <button @mouseover="hoverdownload = true" @mouseleave="hoverdownload = false"
+                        :disabled="renderingPDF" @click="downloadProductPassportPDF"
                         class="btn btn-sm btn-outline-success">
                         <div v-if="renderingPDF" class="spinner-border text-secondary" role="status"
                             style="width: 1rem; height: 1rem;">
                             <span class="visually-hidden">Verifying...</span>
                         </div>
-                        <i v-else class="bi-filetype-pdf" role="img" aria-label="PDF Download"></i>
+                        <i v-else :class="[hoverdownload ? 'bi-cloud-download' : 'bi-filetype-pdf']" role="img"
+                            aria-label="PDF Download"></i>
                     </button>
                 </div>
             </div>
@@ -95,6 +97,7 @@ export default {
     data() {
         return {
             toast: useToast(),
+            hoverdownload: false,
             renderingPDF: false,
             mainProps: {
                 'brand': 'Brand',