Dowload Button name and tooltip added

Signed-off-by: mariyaraj <[email protected]>
hashgraph · Oct 17, 2024 · 3fb37ed · 3fb37ed
1 parent 6b0f8ab
commit 3fb37ed
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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>