From 3fb37edf6a6bf9fb5c66ec7b6d0b3fe5088e006d Mon Sep 17 00:00:00 2001
From: mariyaraj <rajendran.mariya@gmail.com>
Date: Thu, 17 Oct 2024 22:31:39 +0200
Subject: [PATCH] Dowload Button name and tooltip added

Signed-off-by: mariyaraj <rajendran.mariya@gmail.com>
---
 src/components/DownloadButton.vue              |  4 +++-
 src/components/download/DownloadDialog.vue     |  3 ++-
 .../download/TransactionDownloadDialog.vue     | 18 +++++++++++++++++-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/DownloadButton.vue b/src/components/DownloadButton.vue
index cdea4899c..b697bce4f 100644
--- a/src/components/DownloadButton.vue
+++ b/src/components/DownloadButton.vue
@@ -26,8 +26,10 @@
 
   <button
       class="button is-small has-text-white ml-2"
+      title="Download Transaction History"
       data-cy="downloadButton"
-      style="background-color: #202532; width: 26px; height: 26px; border:1px solid white; border-radius: 0">
+      style="background-color: #202532; border:1px solid white; border-radius: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; height: 26px;">
+    <span style="margin-right: 8px;"> Download Transaction History</span>
     <i class="fas fa-download"></i>
   </button>
 
diff --git a/src/components/download/DownloadDialog.vue b/src/components/download/DownloadDialog.vue
index f1a89a458..044be27d7 100644
--- a/src/components/download/DownloadDialog.vue
+++ b/src/components/download/DownloadDialog.vue
@@ -62,7 +62,8 @@
 
     <template v-slot:dialogInputButtons>
       <DialogButton :controller="controller">CANCEL</DialogButton>
-      <CommitButton :controller="controller" :enabled="downloadEnabled" @action="handleDownload">DOWNLOAD</CommitButton>
+      <CommitButton title=" Download the transaction history of account exported as a CSV file. This is useful for record keeping and tax reporting." 
+      :controller="controller" :enabled="downloadEnabled" @action="handleDownload">DOWNLOAD</CommitButton>
     </template>
 
 
diff --git a/src/components/download/TransactionDownloadDialog.vue b/src/components/download/TransactionDownloadDialog.vue
index d54fe0640..69e840dde 100644
--- a/src/components/download/TransactionDownloadDialog.vue
+++ b/src/components/download/TransactionDownloadDialog.vue
@@ -27,7 +27,12 @@
 
     <!-- title -->
     <template v-slot:dialogTitle>
-      <DialogTitle>{{ dialogTitle }}</DialogTitle>
+      <div class="dialog-title-container">
+    <DialogTitle>{{ dialogTitle }}</DialogTitle>
+    <span class="dialog-subtitle">
+      Download the transaction history of the account exported as a CSV file. <br />This is useful for record keeping and tax reporting.
+    </span>
+  </div>
     </template>
 
     <!-- input -->
@@ -298,6 +303,16 @@ export default defineComponent({
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 
 <style>
+.dialog-title-container {
+  text-align: center;
+}
+.dialog-subtitle {
+  display: block; 
+  text-align: center; 
+  font-size: 0.9rem; 
+  color: #666; 
+  margin-top: 0.5rem; 
+}
 .dp__theme_dark {
   --dp-background-color: var(--h-theme-box-background-color);
   --dp-primary-color: #575757;
@@ -312,4 +327,5 @@ export default defineComponent({
   --dp-font-size: 11px;
   --dp-input-padding: 3.5px 30px 3.5px 12px
 }
+
 </style>
\ No newline at end of file