Merge pull request #2281 from maxgrapps/master

Typo issues, dropdown issues

CHANGELOG.md

@@ -13,6 +13,7 @@
 - [#2266](https://github.com/poanetwork/blockscout/pull/2266) - allow excluding uncles from average block time calculation
 
 ### Fixes
+- [#2281](https://github.com/poanetwork/blockscout/pull/2281) - typo issues, dropdown issues
 - [#2278](https://github.com/poanetwork/blockscout/pull/2278) - increase threshold for scientific notation
 - [#2275](https://github.com/poanetwork/blockscout/pull/2275) - Description for networks selector
 - [#2263](https://github.com/poanetwork/blockscout/pull/2263) - added an ability to close network selector on outside click

apps/block_scout_web/assets/css/_typography.scss

@@ -73,8 +73,12 @@ textarea.form-control {
 }
 
 .contract-address {
-  border-bottom: 1px dashed currentColor;
   display: inline-block;
+  text-decoration: underline;
+  text-decoration-style: dashed;
+  &:hover {
+    text-decoration-style: none;
+  }
 }
 
 .text {

apps/block_scout_web/assets/css/components/_network-selector.scss

@@ -1,6 +1,7 @@
 $network-selector-overlay-background: $modal-overlay-color !default;
 $network-selector-close-color: $primary !default;
 $network-selector-horizontal-padding: 28px;
+$network-selector-horizontal-mobile-padding: 14px;
 $btn-network-selector-load-more-background: #fff !default;
 $btn-network-selector-load-more-color: $primary !default;
 $network-selector-search-input-color: #a3a9b5 !default;
@@ -143,7 +144,10 @@ $network-selector-item-icon-dimensions: 30px !default;
   border-bottom: 1px solid $base-border-color;
   display: flex;
   flex-shrink: 0;
-  margin: 0 $network-selector-horizontal-padding;
+  margin: 0 $network-selector-horizontal-mobile-padding;
+  @media (min-width: 375px) {
+    margin: 0 $network-selector-horizontal-padding;
+  }
 }
 
 .network-selector-tab {
@@ -277,7 +281,10 @@ $network-selector-item-icon-dimensions: 30px !default;
   flex-shrink: 1;
   min-height: 100px;
   overflow: auto;
-  padding: 0 $network-selector-horizontal-padding;
+  padding: 0 $network-selector-horizontal-mobile-padding;
+  @media (min-width: 375px) {
+    padding: 0 $network-selector-horizontal-padding;
+  }
 }
 
 .network-selector-load-more-container {

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

@@ -174,6 +174,11 @@ $tile-body-a-color: #5959d8 !default;
   .tile-body {
     a {
       color: $tile-body-a-color;
+      &:hover {
+        span {
+          text-decoration: underline;
+        }
+      }
     }
   }
 

apps/block_scout_web/assets/css/components/_token-balance-dropdown.scss

@@ -1,21 +1,61 @@
 .token-balance-dropdown {
-  min-width: 14.375rem;
+  min-width: 10rem;
   margin-top: 1rem;
-  background-color: $gray-100;
-  box-shadow: 0 2px 3px 2px $gray-200;
-  border: none;
+  background-color: #fff;
+
+  &.dropdown-menu {
+    border-radius: 4px !important;
+    box-shadow: 0 0.5rem 1rem rgba(202, 199, 226, .3) !important;
+    border: 1px solid #e2e5ec !important;
+  }
 
   .dropdown-items {
     overflow-y: auto;
     max-height: 18.5rem;
 
-    .dropdown-item:hover {
-      color: $white;
+    .dropdown-item {
+      &:hover {
+        color: $secondary;
+      }
+      .row:nth-child(2) {
+        p {
+          font-size: 12px;
+          opacity: .65;
+        }
+      }
     }
   }
 
-  &:after,
-  &:before {
+  .dropdown-header {
+    padding: 1.1rem 20px .9rem 20px;
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  .dropdown-search-field {
+    height: 50px;
+    border: 1px solid #f5f6fa;
+    background-color: #f5f6fa;
+    outline: none !important;
+    font-size: 14px;
+    color: #828ba0;
+    font-weight: 300;
+    padding-left: 52px;
+    &::placeholder {
+      color: rgba(#828ba0, .5);
+    }
+  }
+
+  .dropdown-search-icon {
+    left: 20px;
+    top: 50%;
+    margin-top: -8.5px;
+    path {
+      fill: #828ba0;
+    }
+  }
+
+  &:after {
     bottom: 100%;
     right: 14%;
     border: solid transparent;
@@ -26,8 +66,6 @@
   }
 
   &:before {
-    border-bottom-color: $gray-100;
-    border-width: 0.5rem;
-    margin-left: -0.5rem;
+    display: none;
   }
 }

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

@@ -27,19 +27,20 @@
 		margin-top: 30px;
 	}
 	.download-all-transactions-link {
+		display: inline-flex;
+		align-items: center;
 		text-decoration: none;
 		svg {
 			position: relative;
 			margin-left: 2px;
 			top: -3px;
+			left: 3px;
 			path {
 				fill: $primary;
 			}
 		}
 		&:hover {
-			span {
-				text-decoration: underline;
-			}
+			text-decoration: underline;
 		}
 	}
 }

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

@@ -64,4 +64,11 @@ $card-tab-active: $primary;
 // Badges
 $badge-neutral-color: $primary;
 $badge-neutral-background-color: rgba($primary, .1);
-$api-text-monospace-color: $primary;
+$api-text-monospace-color: $primary;
+
+// Tokens dropdown
+.token-balance-dropdown[aria-labelledby="dropdown-tokens"] {
+  .dropdown-items .dropdown-item:hover {
+    color: $primary !important;
+  }
+} 

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

@@ -64,4 +64,11 @@ $card-tab-active: $primary;
 // Badges
 $badge-neutral-color: $primary;
 $badge-neutral-background-color: rgba($primary, .1);
-$api-text-monospace-color: $primary;
+$api-text-monospace-color: $primary;
+
+// Tokens dropdown
+.token-balance-dropdown[aria-labelledby="dropdown-tokens"] {
+  .dropdown-items .dropdown-item:hover {
+    color: $primary !important;
+  }
+} 

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

@@ -18,8 +18,10 @@
 
 <div class="dropdown-menu dropdown-menu-right token-balance-dropdown p-0" aria-labelledby="dropdown-tokens">
   <div data-dropdown-items class="dropdown-items">
-    <div class="m-3 position-relative">
-      <i class="fas fa-search position-absolute dropdown-search-icon"></i>
+    <div class="position-relative">
+      <svg class="position-absolute dropdown-search-icon" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg" width="16" height="17" class="dropdown-search-icon position-absolute">
+        <path fill="#7DD79F" fill-rule="evenodd" d="M15.713 15.727a.982.982 0 0 1-1.388 0l-2.289-2.29C10.773 14.403 9.213 15 7.5 15A7.5 7.5 0 1 1 15 7.5c0 1.719-.602 3.284-1.575 4.55l2.288 2.288a.983.983 0 0 1 0 1.389zM7.5 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 1 0 0-11z"></path>
+      </svg>
       <%= text_input(
             :token_search,
             :name,

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

@@ -1,5 +1,5 @@
 <div class="text-nowrap row mt-3 mt-sm-0" data-test="token_transfer">
-  <span class="col-12 col-md-5">
+  <span class="col-xs-12 col-lg-5">
     <%= if from_or_to_address?(@token_transfer, @address) do %>
       <%= if @token_transfer.from_address_hash == @address.hash do %>
         <span data-test="transaction_type" class="text-danger">
@@ -19,7 +19,7 @@
     <%= @token_transfer |> BlockScoutWeb.AddressView.address_partial_selector(:to, @address, true) |> BlockScoutWeb.RenderHelpers.render_partial() %>
     </span>
   </span>
-  <span class="col-12 col-md-7 ml-3 ml-sm-0">
+  <span class="col-xs-12 col-lg-4 ml-3 ml-sm-0">
   <%= token_transfer_amount(@token_transfer) %>
   <%= link(token_symbol(@token_transfer.token), to: token_path(BlockScoutWeb.Endpoint, :show, @token_transfer.token.contract_address_hash)) %>
   </span>

apps/block_scout_web/priv/gettext/default.pot

@@ -674,7 +674,7 @@ msgstr ""
 
 #, elixir-format
 #:
-#: lib/block_scout_web/templates/address_token_balance/_token_balances.html.eex:28
+#: lib/block_scout_web/templates/address_token_balance/_token_balances.html.eex:30
 msgid "Search tokens"
 msgstr ""