(add) address details and account balance styles

apps/block_scout_web/assets/css/_mixins.scss

@@ -168,3 +168,31 @@
     }
   }
 }
+
+@mixin square-icon-button($color, $dimensions) {
+  border: 1px solid $color;
+  border-radius: 2px;
+  cursor: pointer;
+  display: inline-block;
+  height: $dimensions;
+  transition: all 0.15s;
+  width: $dimensions;
+
+  svg {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+
+  path {
+    fill: $color;
+  }
+
+  &:hover {
+    background-color: $color;
+
+    path {
+      fill: #fff;
+    }
+  }
+}

apps/block_scout_web/assets/css/app.scss

@@ -111,6 +111,8 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/modal_bottom_disclaimer";
 @import "components/modal_become_candidate";
 @import "components/modal_stake";
+@import "components/btn_copy";
+@import "components/btn_qr";
 
 :export {
   primary: $primary;

apps/block_scout_web/assets/css/components/_address-overview.scss

@@ -1,3 +1,22 @@
+.address-detail-hash-title {
+  color: #333;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 1.2;
+  margin: 0 0 12px;
+  text-align: left;
+}
+
+.overview-title-item {
+  display: inline-block;
+  height: fit-content;
+  margin-right: 9px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
 .address-overview {
   .card-section {
     margin-bottom: 3rem;
@@ -14,7 +33,28 @@
 }
 
 .address-detail-item {
-  display: inline-block;
-  padding-bottom: 0.5em;
   margin-right: 1em;
+  padding-bottom: 0.5em;
+}
+
+.address-balance-text {
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 1.2;
+  margin: 0 0 12px;
 }
+
+.address-current-balance {
+  font-size: 12px;
+  font-weight: 200;
+  line-height: 1.2;
+  margin: 0 0 12px;
+
+  small {
+    font-size: 11px;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}

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

@@ -0,0 +1,6 @@
+$btn-copy-color: $primary !default;
+$btn-copy-dimensions: 31px !default;
+
+.btn-copy-icon {
+  @include square-icon-button($btn-copy-color, $btn-copy-dimensions);
+}

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

@@ -0,0 +1,6 @@
+$btn-qr-color: $primary !default;
+$btn-qr-dimensions: 31px !default;
+
+.btn-qr-icon {
+  @include square-icon-button($btn-qr-color, $btn-qr-dimensions);
+}

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

@@ -3,6 +3,8 @@ $card-tab-active: $primary !default;
 $card-default-border-radius: 10px !default;
 $card-horizontal-padding: 30px;
 $card-vertical-padding: 30px;
+$card-background-1: $primary !default;
+$card-background-1-text-color: #fff !default;
 
 .card {
   background-color: $card-background-color;
@@ -10,10 +12,11 @@ $card-vertical-padding: 30px;
   border: none;
   box-shadow: 0 0 30px 0 rgba(202, 199, 226, 0.5);
   margin-bottom: 3rem;
+}
 
-  &-primary {
+.card-background-1 {
-    background-color: $primary;
+  background-color: $card-background-1;
-  }
+  color: $card-background-1-text-color;
 }
 
 .card-header {
@@ -25,12 +28,15 @@ $card-vertical-padding: 30px;
 }
 
 .card-title {
-  color: #333;
   font-size: 18px;
   font-weight: normal;
   line-height: 2.2rem;
   margin-bottom: 2rem;
 
+  &.margin-bottom-md {
+    margin-bottom: 20px;
+  }
+
   .card-title-container & {
     line-height: 1.2;
     margin: 0;

apps/block_scout_web/assets/css/theme/_lukso_variables.scss

@@ -25,4 +25,7 @@ $btn-line-color: $primary;
 $dashboard-stats-item-color: $primary;
 $dashboard-stats-item-border-color: $primary;
 $stakes-stats-item-color: $primary;
-$stakes-stats-item-border-color: $primary;
+$stakes-stats-item-border-color: $primary;
+
+$card-background-1: $secondary;
+$card-background-1-text-color: $primary;

apps/block_scout_web/lib/block_scout_web/templates/address/_balance_card.html.eex

@@ -1,33 +1,37 @@
-<div class="card card-primary" data-test="outside_of_dropdown">
+<div class="card card-background-1" data-test="outside_of_dropdown">
   <div class="card-body">
-    <span></span>
+    <h2 class="card-title balance-card-title"><%= gettext "Balance" %></h2>
-    <h2 class="card-title text-white balance-card-title"><%= gettext "Balance" %></h2>
     <div class="text-right">
-      <h3 class="text-white" data-test="address_balance"><%= balance(@address) %></h3>
+      <h3
+        class="address-balance-text"
+        data-test="address_balance"
+      ><%= balance(@address) %></h3>
       <%= if !match?({:pending, _}, @coin_balance_status) && !empty_exchange_rate?(@exchange_rate) do %>
-        <span class="text-white text-faded">
+        <p class="address-current-balance">
-          <span class="current-balance-in-wei"
+          <span
             data-wei-value="<%= if @address.fetched_coin_balance, do: @address.fetched_coin_balance.value %>"
-              data-usd-exchange-rate="<%= @exchange_rate.usd_value %>">
+            data-usd-exchange-rate="<%= @exchange_rate.usd_value %>"
-          </spanc>
+          ></span>
           <small>(@ <span data-usd-unit-price="<%= @exchange_rate.usd_value %>"></span>/<%= gettext("Ether") %>)</small>
-          <br>
+        </p>
-        </span>
       <% end %>
 
-      <div class="mt-3" data-token-balance-dropdown data-api_path="<%= address_token_balance_path(BlockScoutWeb.Endpoint, :index, @address.hash) %>">
+      <p
-          <div data-loading class="mb-0 text-white text-faded">
+        class="address-current-balance"
+        data-token-balance-dropdown
+        data-api_path="<%= address_token_balance_path(BlockScoutWeb.Endpoint, :index, @address.hash) %>"
+      >
+          <span data-loading class="mb-0">
             <span class="loading-spinner-small mr-2">
               <span class="loading-spinner-block-1"></span>
               <span class="loading-spinner-block-2"></span>
             </span>
             <%= gettext("Fetching tokens...") %>
-          </div>
+          </span>
-
+          <span data-error-message class="mb-0" style="display: none;">
-          <div data-error-message class="mb-0 text-white text-faded" style="display: none;">
             <%= gettext("Error trying to fetch balances.") %>
-          </div>
+          </span>
-      </div>
+      </p>
     </div>
   </div>
 </div>

apps/block_scout_web/lib/block_scout_web/templates/address/overview.html.eex

@@ -1,29 +1,52 @@
 <section class="address-overview" data-page="address-details" data-page-address-hash="<%= @address.hash %>">
   <div class="row">
+    <!-- Address details -->
     <div class="card-section col-md-12 col-lg-8">
       <div class="card">
         <div class="card-body">
-          <div class="icon-links float-right">
+          <h1 class="card-title">
-            <span data-clipboard-text="<%= @address %>">
+            <%= address_title(@address) %> <%= gettext "Details" %>
-              <button type="button" class="icon-link" id="button" data-toggle="tooltip" data-placement="top" title="<%= gettext("Copy Address") %>" aria-label="<%= gettext("Copy Address") %>">
+            <!-- buttons -->
-                <i class="fas fa-clone"></i>
+            <div class="overview-title-buttons float-right">
-              </button>
+              <span class="overview-title-item" data-clipboard-text="<%= @address %>">
-            </span>
+                <span
-            <span data-toggle="modal" data-target="#qrModal">
+                  aria-label='<%= gettext("Copy Address") %>'
-              <button type="button" class="icon-link"  data-toggle="tooltip" data-placement="top" title="<%= gettext("QR Code") %>" aria-label="<%= gettext("Show QR Code") %>">
+                  class="btn-copy-icon"
-                <i class="fas fa-qrcode"></i>
+                  data-placement="top"
-              </button>
+                  data-toggle="tooltip"
-            </span>
+                  title='<%= gettext("Copy Address") %>'
-            <%= if validator_metadata = primary_validator_metadata(@address) do %>
+                >
-              <span data-toggle="modal" data-target="#validatorModal">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="32" height="32">
-                <button type="button" class="icon-link"  data-toggle="tooltip" data-placement="top" title="<%= gettext("Validator Info") %>" aria-label="<%= gettext("Show Validator Info") %>">
+                      <path fill-rule="evenodd" d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"/>
-                  <i class="fas fa-address-card"></i>
+                  </svg>
-                </button>
+                </span>
               </span>
-            <% end %>
+              <span
-          </div>
+                data-target="#qrModal"
-          <h1 class="card-title"><%= address_title(@address) %> <%= gettext "Details" %> </h1>
+                data-toggle="modal"
-          <h3 class="<%= if BlockScoutWeb.AddressView.contract?(@address) do %>contract-address<% end %>" data-test="address_detail_hash"><%= @address %></h3>
+              >
+                <span
+                  class="btn-qr-icon"
+                  data-toggle="tooltip"
+                  data-placement="top"
+                  title='<%= gettext("QR Code") %>'
+                  aria-label='<%= gettext("Show QR Code") %>'
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="32" height="32">
+                    <path fill-rule="evenodd" d="M22.5 24.5v-2h2v2h-2zm-1-4v-1h1v1h-1zm1-3h2v2h-2v-2zm1-2h-5a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1zm-1-5h-3v3h3v-3zm-8 14h-5a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1zm-1-5h-3v3h3v-3zm1-4h-5a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1zm-1-5h-3v3h3v-3zm6 9h-2v-2h2v2zm1 1h-1v-1h1v1zm0 1v1h-1v-1h1zm-1 3h-2v-2h2v2z"/>
+                  </svg>
+                </span>
+              </span>
+              <%= if validator_metadata = primary_validator_metadata(@address) do %>
+                <span data-toggle="modal" data-target="#validatorModal">
+                  <button type="button" class="icon-link"  data-toggle="tooltip" data-placement="top" title="<%= gettext("Validator Info") %>" aria-label="<%= gettext("Show Validator Info") %>">
+                    <i class="fas fa-address-card"></i>
+                  </button>
+                </span>
+              <% end %>
+            </div>
+          </h1>
+          <h3 class="address-detail-hash-title <%= if BlockScoutWeb.AddressView.contract?(@address) do %>contract-address<% end %>" data-test="address_detail_hash"><%= @address %></h3>
           <div class="d-flex flex-column flex-lg-row justify-content-start text-muted">
             <%= if address_name = primary_name(@address) do %>
               <strong class="mr-4 mb-2 text-primary"><%= address_name %></strong>
@@ -87,6 +110,7 @@
         </div>
       </div>
     </div>
+    <!-- Balance -->
     <div class="card-section col-md-12 col-lg-4" data-selector="balance-card">
       <%= render BlockScoutWeb.AddressView, "_balance_card.html", conn: @conn, address: @address, exchange_rate: @exchange_rate, coin_balance_status: @coin_balance_status %>
     </div>

apps/block_scout_web/lib/block_scout_web/templates/address_token_balance/_token_balances.html.eex

@@ -13,7 +13,7 @@
      <span data-tokens-count><%= tokens_count_title(@token_balances) %></span>
   </a>
 <% else %>
-   <span data-tokens-count class="text-white text-faded"><%= tokens_count_title(@token_balances) %></span>
+   <span data-tokens-count><%= tokens_count_title(@token_balances) %></span>
 <% end %>
 
 <div class="dropdown-menu dropdown-menu-right token-balance-dropdown p-0" aria-labelledby="dropdown-tokens">

apps/block_scout_web/lib/block_scout_web/templates/block/overview.html.eex

@@ -114,7 +114,7 @@
 
     <div class="col-md-12 col-lg-4 d-flex flex-column flex-md-row flex-lg-column">
       <!-- Validator -->
-      <div class="card card-primary flex-grow-1">
+      <div class="card card-background-1 flex-grow-1">
         <div class="card-body">
           <h2 class="card-title text-white"> <%= gettext "Miner" %> </h2>
           <div class="text-right">

apps/block_scout_web/lib/block_scout_web/templates/tokens/overview/_details.html.eex

@@ -49,7 +49,7 @@
 
     <%= if total_supply?(@token) do %>
       <div class="col-md-6 col-lg-4">
-        <div class="card card-primary">
+        <div class="card card-background-1">
           <div class="card-body">
             <h2 class="card-title text-white"><%= gettext "Total Supply" %></h2>
 

apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex

@@ -140,7 +140,7 @@
 
     <div class="col-md-12 col-lg-4 d-flex flex-column flex-md-row flex-lg-column">
       <!-- Value -->
-      <div class="card card-primary flex-grow-1">
+      <div class="card card-background-1 flex-grow-1">
         <div class="card-body">
           <h2 class="card-title text-white"><%= gettext "Ether" %> <%= gettext "Value" %></h2>
           <div class="text-right">