Refactor button class names

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

@@ -10,15 +10,15 @@
   -webkit-transition: all 0.25s;
   transition: all 0.25s;
 
-  &--primary {
+  &-primary {
     background-color: $primary;
     color: $white;
     border: 1px solid $primary;
 
     &:hover,
     &:focus {
-      background-color: $primary;
+      background-color: darken($primary, 10%);
-      border-color: $primary;
+      border-color: darken($primary, 10%);
       text-decoration: none;
     }
 
@@ -29,50 +29,51 @@
     }
   }
 
-  &--secondary {
+  &-secondary {
     border: 1px solid $tertiary;
     color: $tertiary;
     font-weight: 400;
 
     &:hover,
     &:focus {
-      background-color: darken($tertiary, 20%);
+      background-color: darken($tertiary, 10%);
-      border-color: darken($tertiary, 20%);
+      border-color: darken($tertiary, 10%);
       color: $white;
       text-decoration: none;
       outline: none !important;
     }
   }
 
-  &--xsmall {
+  &-xs {
     font-size: 11px;
     padding: 6px 9px 6px !important;
   }
 
-  &--small {
+  &-sm {
     font-size: 12px;
     padding: 10px 20px 10px;
   }
 
-  &--medium {
+  &-md {
     font-size: 1.5rem;
     padding: 15px 30px 15px;
   }
 
-  &--large {
+  &-lg {
     font-size: 1.5rem;
     padding: 20px 60px 20px;
   }
 
 // Block button
-// --------------------------------------------------
+// -------------------------
 
-  &--block {
+  &-block {
     display: block;
     width: 100%;
   }
 
-  &--disabled {
+  &-disabled,
+  &:disabled, {
     background-color: $gray-300;
     color: $gray-500;
     text-decoration: none;
@@ -81,6 +82,6 @@
 }
 
 // Vertically space out multiple block buttons
-.button--block + .button--block {
+.button-block + .button-block {
   margin-top: 5px;
 }

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

@@ -31,7 +31,8 @@ $grays: map-merge((
 
 $blue:    #4786ff !default;
 $indigo:  #5b33a1 !default;
-$purple:  #9987fc !default;
+// $purple:  #9987fc !default;
+$purple: #997fdc !default;
 $pink:    #e83e8c !default;
 $red:     #c74d39 !default;
 $orange:  #ef9a60 !default;

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

@@ -47,7 +47,7 @@
         <%= link(
               gettext("Verify and Publish"),
               to: address_verify_contract_path(@conn, :new, @conn.params["address_id"]),
-              class: "button button--primary button--sm float-right ml-3",
+              class: "button button-primary button-sm float-right ml-3",
               "data-test": "verify_and_publish"
             ) %>
       <% end %>
@@ -72,7 +72,7 @@
           <div class="d-flex justify-content-between align-items-baseline">
             <h3>Contract source code</h3>
             <span class="icon-links" data-clipboard-text="<%= @address.smart_contract.contract_source_code %>">
-              <button type="button" class="button button--secondary button--sm" id="button" data-toggle="tooltip" data-placement="top" title="<%= gettext("Copy Address") %>" aria-label="Copy Address">
+              <button type="button" class="button button-secondary button-sm" id="button" data-toggle="tooltip" data-placement="top" title="<%= gettext("Copy Address") %>" aria-label="Copy Address">
                 Copy Contract Source Code
               </button>
             </span>
@@ -90,7 +90,7 @@
           <div class="d-flex justify-content-between align-items-baseline">
             <h3>Contract ABI</h3>
             <span class="icon-links" data-clipboard-text="<%= format_smart_contract_abi(@address.smart_contract.abi) %>">
-              <button type="button" class="button button--secondary button--sm" id="button">
+              <button type="button" class="button button-secondary button-sm" id="button">
                 Copy Contract ABI
               </button>
             </span>
@@ -110,7 +110,7 @@
         <div class="d-flex justify-content-between align-items-baseline">
           <h3>Contract creation code</h3>
           <span class="icon-links" data-clipboard-text="<%= @address.contract_code %>">
-            <button type="button" class="button button--secondary button--sm" id="button">
+            <button type="button" class="button button-secondary button-sm" id="button">
               Copy Contract Creation Code
             </button>
           </span>

apps/block_scout_web/lib/block_scout_web/templates/address_contract_verification/new.html.eex

@@ -53,15 +53,15 @@
           name="button"
           id="loading"
           disabled="true"
-          class="d-none px-4 position-absolute button button--primary button--sm mr-2">
+          class="d-none px-4 position-absolute button button-primary button-sm mr-2">
           <i class="fa fa-spinner fa-spin"></i> <%= gettext("loading.....") %>
         </button>
-        <%= submit "Verify and publish", class: "button button--primary button--sm mr-2", "data-loading": "animation"  %>
+        <%= submit "Verify and publish", class: "button button-primary button-sm mr-2", "data-loading": "animation"  %>
-        <%= reset "Reset", class: "button button--secondary button--sm mr-2" %>
+        <%= reset "Reset", class: "button button-secondary button-sm mr-2" %>
         <%= link(
             "Cancel",
             to: address_contract_path(@conn, :index, @conn.params["address_id"]),
-            class: "button button--sm") %>
+            class: "button button-sm") %>
       <% end %>
     </div>
   </div>

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

@@ -89,7 +89,7 @@
           </div>
         </div>
         <div class="dropdown float-right u-push-sm">
-          <button data-test="filter_dropdown" class="button button--secondary button--xsmall dropdown-toggle" type="button"
+          <button data-test="filter_dropdown" class="button button-secondary button-xs dropdown-toggle" type="button"
             id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Filter: <%= format_current_filter(@filter) %>
           </button>
@@ -140,7 +140,7 @@
           <%= if @next_page_params do %>
             <%= link(
               gettext("Older"),
-              class: "button button--secondary button--sm float-right mt-3",
+              class: "button button-secondary button-sm float-right mt-3",
               to: address_internal_transaction_path(
                 @conn,
                 :index,

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

@@ -0,0 +1,122 @@
+<section class="container">
+
+  <%= render BlockScoutWeb.AddressView, "overview.html", assigns %>
+
+  <section>
+    <div class="card">
+      <div class="card-header">
+
+        <!-- DESKTOP TAB NAV -->
+        <ul class="nav nav-tabs card-header-tabs d-none d-md-inline-flex">
+          <li class="nav-item">
+            <%= link(
+                  gettext("Tokens"),
+                  class: "nav-link active",
+                  to: address_token_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"])
+                ) %>
+          </li>
+          <li class="nav-item">
+            <%= link(
+                  gettext("Transactions"),
+                  class: "nav-link",
+                  to: address_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"])
+                ) %>
+          </li>
+          <li class="nav-item"> <%= link(
+                  gettext("Internal Transactions"),
+                  class: "nav-link",
+                  "data-test": "internal_transactions_tab_link",
+                  to: address_internal_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"])
+                ) %>
+          </li>
+          <%= if contract?(@address) do %>
+            <li class="nav-item">
+              <%= link(
+                  to: address_contract_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"]),
+                  class: "nav-link") do %>
+                <%= gettext("Code") %>
+
+                <%= if smart_contract_verified?(@address) do %>
+                  <i class="far fa-check-circle"></i>
+                <% end %>
+              <% end %>
+            </li>
+          <% end %>
+          <%= if smart_contract_with_read_only_functions?(@address) do %>
+            <li class="nav-item">
+              <%= link(
+                  gettext("Read Contract"),
+                  to: address_read_contract_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"]),
+                  class: "nav-link")%>
+            </li>
+          <% end %>
+        </ul>
+
+        <!-- MOBILE DROPDOWN NAV -->
+        <ul class="nav nav-tabs card-header-tabs d-md-none">
+          <li class="nav-item dropdown flex-fill text-center">
+            <a class="nav-link active dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Tokens</a>
+            <div class="dropdown-menu">
+              <%= link(
+                    gettext("Token"),
+                    class: "dropdown-item",
+                    to: address_token_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"])
+                  ) %>
+              <%= link(
+                    gettext("Transactions"),
+                    class: "dropdown-item",
+                    to: address_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"])
+                  ) %>
+              <%= link(
+                    gettext("Internal Transactions"),
+                    class: "dropdown-item",
+                    "data-test": "internal_transactions_tab_link",
+                    to: address_internal_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"])
+                  ) %>
+              <%= if contract?(@address) do %>
+                <%= link(
+                    to: address_contract_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"]),
+                    class: "dropdown-item") do %>
+                  <%= gettext("Code") %>
+
+                  <%= if smart_contract_verified?(@address) do %>
+                    <i class="far fa-check-circle"></i>
+                  <% end %>
+                <% end %>
+              <% end %>
+            </div>
+          </li>
+        </ul>
+      </div>
+
+      <div class="card-body">
+        <h2 class="card-title"><%= gettext "Tokens" %></h2>
+        <%= if Enum.any?(@tokens) do %>
+          <%= for token <- @tokens do %>
+            <%= render "_tokens.html", conn: @conn, locale: @locale, token: token %>
+          <% end %>
+        <% else %>
+          <div class="tile tile-muted text-center">
+            <span><%= gettext "There are no tokens for this address." %></span>
+          </div>
+        <% end %>
+
+        <div>
+          <%= if @next_page_params do %>
+            <%= link(
+              gettext("Next"),
+              class: "button button-secondary button-sm float-right",
+              to: address_token_path(
+                @conn,
+                :index,
+                @conn.assigns.locale,
+                @address,
+                @next_page_params
+              )
+            ) %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </section>
+</section>

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

@@ -90,7 +90,7 @@
           </div>
         </div>
         <div class="dropdown float-right u-push-sm">
-          <button data-test="filter_dropdown" class="button button--secondary button--xsmall dropdown-toggle" type="button"
+          <button data-test="filter_dropdown" class="button button-secondary button-xs dropdown-toggle" type="button"
             id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Filter: <%= format_current_filter(@filter) %>
           </button>
@@ -141,7 +141,7 @@
         <%= if @next_page_params do %>
           <%= link(
             gettext("Older"),
-            class: "button button--secondary button--sm float-right mt-3",
+            class: "button button-secondary button-sm float-right mt-3",
             to: address_transaction_path(
               @conn,
               :index,

apps/block_scout_web/lib/block_scout_web/templates/api_docs/_action_tile.html.eex

@@ -18,8 +18,8 @@
     <div class="collapse multi-collapse" id="<%= action_tile_id(@module_name, @action.name) %>">
       <div class="card card-body pt-3 rounded">
         <h4 class="text-primary"><%= gettext "Parameters" %>
-          <button data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api" %>" role="button" class="button button--small button--primary float-right" style="width: 8rem" data-module="<%= @module_name %>" data-action="<%= @action.name %>"><%= gettext "Try it out" %></button>
+          <button data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api" %>" role="button" class="button button-sm button-primary float-right" style="width: 8rem" data-module="<%= @module_name %>" data-action="<%= @action.name %>"><%= gettext "Try it out" %></button>
-          <button data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-cancel" %>" role="button" class="collapse button button--small button--secondary float-right" style="width: 8rem" data-module="<%= @module_name %>" data-action="<%= @action.name %>"><%= gettext "Cancel" %></button>
+          <button data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-cancel" %>" role="button" class="collapse button button-sm button-secondary float-right" style="width: 8rem" data-module="<%= @module_name %>" data-action="<%= @action.name %>"><%= gettext "Cancel" %></button>
         </h4>
 
         <div class="mb-4">
@@ -89,10 +89,10 @@
             <% end %>
             <div class="row">
               <div class="col-sm-2 offset-sm-4 col-md-2 offset-md-2">
-                <button data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui" %>" data-try-api-ui-button-type="execute" role="button" class="collapse button button--primary w-100" data-module="<%= @module_name %>" data-action="<%= @action.name %>"><%= gettext "Execute" %></button>
+                <button data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui" %>" data-try-api-ui-button-type="execute" role="button" class="collapse button button-primary w-100" data-module="<%= @module_name %>" data-action="<%= @action.name %>"><%= gettext "Execute" %></button>
               </div>
               <div class="col-sm-2 col-md-2">
-                <button role="button" class="collapse button button--secondary" data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-clear" %>" data-module="<%= @module_name %>" data-action="<%= @action.name %>"><%= gettext "Clear" %></button>
+                <button role="button" class="collapse button button-secondary" data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-clear" %>" data-module="<%= @module_name %>" data-action="<%= @action.name %>"><%= gettext "Clear" %></button>
               </div>
             </div>
      <!-- /btn-group -->

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

@@ -13,7 +13,7 @@
       <%= if @next_page_params do %>
         <%= link(
           gettext("Older"),
-          class: "button button--secondary button--sm float-right mt-3",
+          class: "button button-secondary button-sm float-right mt-3",
           to: block_path(
             @conn,
             :index,

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

@@ -48,7 +48,7 @@
         <%= if @next_page_params do %>
           <%= link(
             gettext("Older"),
-            class: "button button--secondary button--sm float-right mt-3",
+            class: "button button-secondary button-sm float-right mt-3",
             to: transaction_path(
               @conn,
               :index,

apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex

@@ -52,7 +52,7 @@
 <section class="container">
   <div class="card card-chain-blocks">
     <div class="card-body">
-      <%= link(gettext("View All Blocks →"), to: block_path(BlockScoutWeb.Endpoint, :index), class: "button button--secondary button--xsmall float-right") %>
+      <%= link(gettext("View All Blocks →"), to: block_path(BlockScoutWeb.Endpoint, :index), class: "button button-secondary button-xsmall float-right") %>
       <h2 class="card-title"><%= gettext "Blocks" %></h2>
       <div class="row" data-selector="chain-block-list">
         <%= for block <- @blocks do %>
@@ -69,7 +69,7 @@
           <a href="#" class="alert-link"><span data-selector="channel-batching-count"></span> <%= gettext "More transactions have come in" %></a>
         </div>
       </div>
-      <%= link(gettext("View All Transactions →"), to: transaction_path(BlockScoutWeb.Endpoint, :index), class: "button button--secondary button--xsmall float-right") %>
+      <%= link(gettext("View All Transactions →"), to: transaction_path(BlockScoutWeb.Endpoint, :index), class: "button button-secondary button-xsmall float-right") %>
       <h2 class="card-title"><%= gettext "Transactions" %></h2>
       <span data-selector="transactions-list">
         <%= for transaction <- @transactions do %>

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

@@ -76,7 +76,7 @@
       <%= if @next_page_params do %>
         <%= link(
           gettext("Older"),
-          class: "button button--secondary button--sm float-right mt-3",
+          class: "button button-secondary button-sm float-right mt-3",
           to: pending_transaction_path(
             @conn,
             :index,

apps/block_scout_web/lib/block_scout_web/templates/smart_contract/_functions.html.eex

@@ -19,7 +19,7 @@
             </div>
           <% end %>
 
-          <input type="submit" value='<%= gettext("Query")%>' class="button button--secondary button--xsmall py-0 mt-2" />
+          <input type="submit" value='<%= gettext("Query")%>' class="button button-secondary button-xs py-0 mt-2" />
         </form>
 
         <div class='p-2 text-muted <%= if (queryable?(function["inputs"]) == true), do: "w-100" %>'>

apps/block_scout_web/lib/block_scout_web/templates/tokens/token/show.html.eex

@@ -69,7 +69,7 @@
         <%= if @next_page_params do %>
           <%= link(
             gettext("Older"),
-            class: "button button--secondary button--small float-right mt-4",
+            class: "button button-secondary button-small float-right mt-4",
             to: token_path(@conn, :show, @token.contract_address_hash, @next_page_params)
           ) %>
         <% end %>

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

@@ -64,7 +64,7 @@
       <%= if @next_page_params do %>
         <%= link(
           gettext("Older"),
-          class: "button button--secondary button--sm float-right mt-3",
+          class: "button button-secondary button-sm float-right mt-3",
           to: transaction_path(
             @conn,
             :index,

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

@@ -75,7 +75,7 @@
           <%= if @next_page_params do %>
             <%= link(
               gettext("Newer"),
-              class: "button button--secondary button--sm float-right mt-3",
+              class: "button button-secondary button-sm float-right mt-3",
               to: transaction_internal_transaction_path(
                 @conn,
                 :index,

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

@@ -120,7 +120,7 @@
         <%= if @next_page_params do %>
           <%= link(
             gettext("Newer"),
-            class: "button button--secondary button--sm u-float-right mt-3",
+            class: "button button-secondary button-sm u-float-right mt-3",
             to: transaction_log_path(
               @conn,
               :index,

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

@@ -70,7 +70,7 @@
   <%= if @next_page_params do %>
     <%= link(
       gettext("Older"),
-      class: "button button--secondary button--sm u-float-left mt-3",
+      class: "button button-secondary button-sm u-float-left mt-3",
       to: transaction_token_transfer_path(
         @conn,
         :index,