added styles for download transactions csv button

apps/block_scout_web/assets/css/components/_transaction.scss

@@ -4,3 +4,53 @@
   line-height: 1.2;
   margin: 0 0 12px;
 }
+
+.transaction-top-panel, .transaction-bottom-panel {
+	display: flex;
+	justify-content: space-between;
+	flex-direction: column;
+	@media (min-width: 500px) {
+		flex-direction: row;	
+	}
+}
+
+.transaction-top-panel {
+	.pagination-container {
+		margin-top: 30px;
+	}
+	@media (min-width: 500px) {
+		align-items: flex-start;	
+		.pagination-container {
+			margin-top: 0;
+		}
+	}
+}
+
+.transaction-bottom-panel {
+	@media (min-width: 500px) {
+		align-items: flex-end;	
+	}
+}
+
+.download-csv {
+	display: inline-block;
+	height: 24px;
+	background: #f5f6fa;
+	border-radius: 2px;
+	outline: none;
+	font-family: Nunito, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-size: 12px;
+    line-height: 25px;
+    padding: 0 10px;
+    font-weight: 600;
+    cursor: pointer;
+    color: #a3a9b5;
+    text-align: center;
+    transition: .1s ease-in;
+    text-decoration: none !important;
+    &:hover {
+    	background-color: $primary;
+    	color: #fff;
+    	border-color: $primary;
+    }
+}

apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex

@@ -6,7 +6,6 @@
     <div class="card">
       <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
       <div class="card-body" data-async-listing="<%= @current_path %>">
-        <a type="button" href=<%= address_transaction_path(@conn, :transactions_csv, %{"address_id" => to_string(@address.hash)}) %>><%= gettext("Download all transactions as csv") %></a>
         <div data-selector="channel-disconnected-message" style="display: none;">
           <div data-selector="reload-button" class="alert alert-danger">
             <a href="#" class="alert-link"><%= gettext "Connection Lost, click to load newer transactions" %></a>
@@ -51,8 +50,10 @@
             </div>
           </div>
         </div>
-
+        <div class="transaction-top-panel">
+          <a class="download-csv" href=<%= address_transaction_path(@conn, :transactions_csv, %{"address_id" => to_string(@address.hash)}) %>><%= gettext("Download All Transactions as CSV") %></a>
           <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
+        </div>
 
         <button data-error-message class="alert alert-danger col-12 text-left" style="display: none;">
           <span href="#" class="alert-link"><%= gettext("Something went wrong, click to reload.") %></span>
@@ -66,7 +67,10 @@
 
         <div data-items></div>
   
+        <div class="transaction-bottom-panel">
+          <a class="download-csv" href=<%= address_transaction_path(@conn, :transactions_csv, %{"address_id" => to_string(@address.hash)}) %>><%= gettext("Download All Transactions as CSV") %></a>
           <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
+        </div>
 
       </div>
     </div>

apps/block_scout_web/priv/gettext/default.pot

@@ -111,7 +111,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address_internal_transaction/index.html.eex:27
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:24
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:23
 #: lib/block_scout_web/views/address_internal_transaction_view.ex:8
 #: lib/block_scout_web/views/address_transaction_view.ex:8
 msgid "All"
@@ -244,7 +244,7 @@ msgid "Connection Lost, click to load newer internal transactions"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:12
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:11
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:15
 #: lib/block_scout_web/templates/transaction/index.html.eex:15
 msgid "Connection Lost, click to load newer transactions"
@@ -404,7 +404,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address_internal_transaction/index.html.eex:44
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:41
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:40
 #: lib/block_scout_web/views/address_internal_transaction_view.ex:7
 #: lib/block_scout_web/views/address_transaction_view.ex:7
 msgid "From"
@@ -742,7 +742,7 @@ msgid "There are no tokens."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:63
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:64
 msgid "There are no transactions for this address."
 msgstr ""
 
@@ -763,7 +763,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address_internal_transaction/index.html.eex:33
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:30
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:29
 #: lib/block_scout_web/views/address_internal_transaction_view.ex:6
 #: lib/block_scout_web/views/address_transaction_view.ex:6
 msgid "To"
@@ -867,7 +867,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address/_tabs.html.eex:3
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:16
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:15
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:10
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:18
 #: lib/block_scout_web/templates/chain/show.html.eex:108
@@ -1211,7 +1211,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_logs/index.html.eex:21
 #: lib/block_scout_web/templates/address_token/index.html.eex:13
 #: lib/block_scout_web/templates/address_token_transfer/index.html.eex:20
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:58
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:59
 #: lib/block_scout_web/templates/address_validation/index.html.eex:22
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:23
 #: lib/block_scout_web/templates/chain/show.html.eex:91
@@ -1696,6 +1696,7 @@ msgid "New Smart Contract Verification"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:9
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:54
-msgid "Download all transactions as csv"
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:71
+msgid "Download All Transactions as CSV"
 msgstr ""