(refactor) navbar to give sensible defaults in case we are using a network lacking an updated theme

apps/block_scout_web/assets/css/_mixins.scss

@@ -0,0 +1,14 @@
+@mixin textfield-placeholder($color: #a3a9b5) {
+    &::-webkit-input-placeholder {
+        color: $color;
+    }
+    &::-moz-placeholder {
+        color: $color;
+    }
+    &:-ms-input-placeholder {
+        color: $color;
+    }
+    &:-moz-placeholder {
+        color: $color;
+    }
+}

apps/block_scout_web/assets/css/app.scss

@@ -1,3 +1,4 @@
+@import "./mixins";
 
 /* Phoenix flash messages */
 .alert:empty { display: none; }

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

@@ -1,5 +1,4 @@
 .nav-tabs {
-
   .nav-link {
     border-top-left-radius: 0;
     border-top-right-radius: 0;

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

@@ -1,115 +1,109 @@
-.navbar {
+// Default variables
+$header-background-color: #fff !default;
+$header-links-color: #a3a9b5 !default;
+$header-links-color-active: $primary !default;
+$header-icon-color: $header-links-color !default;
+$header-icon-color-hover: $primary !default;
+$header-toggler-icon: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{transparentize($primary, 0.5)}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E" !default;
+$header-textfield-text-color: $header-links-color !default;
+$header-textfield-background-color: #f5f6fa !default;
+$header-textfield-magnifier-color: $header-links-color !default;
+
+$header-link-horizontal-padding: 0.71rem;
+
+.navbar.navbar-primary {
+    background-color: $header-background-color;
     position: relative;
     z-index: 100;
 
-    &-primary {
+    .nav-item {
-        background-color: $primary;
+        font-size: 14px;
-    }
-}
-
-.navbar-collapse.collapsing,
-.navbar-collapse.collapse.show {
-    display: flex;
-    flex-direction: column;
-
-    .search-form {
-        align-items: center;
-        order: -1;
-        width: 100%;
-
-        form {
-            flex-grow: 1;
-        }
-    }
-    .input-group {
-        width: 100%;
     }
     .navbar-nav {
-        white-space: nowrap;
+        .nav-link {
-    }
+            align-items: center;
-}
+            color: $header-links-color;
+            display: flex;
+            font-size: 14px;
+            position: relative;
 
-.navbar-brand {
+            &:before {
-    margin-left: 0;
+                background-color: $primary;
-}
+                border-radius: 0 0 4px 4px;
+                top: -10px;
+                content: "";
+                display: block;
+                height: 0.25rem;
+                left: 50%;
+                opacity: 0;
+                position: absolute;
+                transform: translateX(-50%);
+                transition: all 0.2s ease;
+                width: calc(100% - #{ $header-link-horizontal-padding } - #{ $header-link-horizontal-padding });
+            }
 
-.navbar-logo {
+            &.active,
-    height: 1.5em;
+            &:hover {
-}
+                @include media-breakpoint-up(lg) {
+                    &:before {
+                        opacity: 1;
+                    }
+                }
+            }
 
-@include media-breakpoint-up(md) {
+            &.active,
-    .navbar-expand-lg .navbar-nav .nav-link {
+            &:hover,
-        padding-left: 0.71rem;
+            &.active-icon {
-        padding-right: 0.71rem;
+                color: $header-links-color-active;
-    }
+                .nav-link-icon {
-}
+                    * {
+                        fill: $header-icon-color-hover;
+                    }
+                }
+            }
 
-.navbar {
+            .nav-link-icon {
-    .nav-item {
+                align-items: center;
-        font-size: 14px;
+                display: flex;
-    }
+                margin-right: 0.71em;
-}
+                position: relative;
+                top: -1px;
 
-.navbar-dark {
+                path {
-    .navbar-nav {
+                    fill: $header-icon-color;
-        .nav-link {
+                }
-            color: $white;
+            }
         }
     }
-}
-
-.navbar-nav {
-    .nav-link {
-        align-items: center;
-        display: flex;
-        font-size: 14px;
-    }
-}
 
-.nav-link-icon {
+    .navbar-toggler {
-    align-items: center;
+        border-color: $primary;
-    display: flex;
+        color: $primary;
-    margin-right: 0.71em;
-    position: relative;
-    top: -1px;
 
-    path {
+        .navbar-toggler-icon {
-        fill: $secondary;
+            background-image: url($header-toggler-icon);
-    }
+        }
-
-    &.m-r-0 {
-      margin-right: 0;
     }
-}
-
-.navbar {
     .search-form {
         display: flex;
-    }
-}
 
-.navbar {
+        @include media-breakpoint-up(xl) {
-    .search-form {
+            height: 57px;
-      @include media-breakpoint-up(xl) {
+            margin-bottom: -8px;
-        height: 57px;
+            margin-top: -8px;
-        margin-bottom: -8px;
+        }
-        margin-top: -8px;
-      }
     }
-
     .form-inline {
-      height: 100%;
+        height: 100%;
     }
-
     .input-group {
-      height: 100%;
+        height: 100%;
-      position: relative;
+        position: relative;
     }
-
     .form-control {
-        background: #f5f6fa;
+        background: $header-textfield-background-color;
-        border-color: #f5f6fa;
+        border-color: $header-textfield-background-color;
-        color: #a3a9b5;
+        color: $header-textfield-text-color;
         font-size: 14px;
         height: 100%;
         padding-left: 38px;
@@ -118,22 +112,8 @@
         width: 100%;
         z-index: 1;
 
-        &::-webkit-input-placeholder {
+        @include textfield-placeholder();
-            /* Chrome/Opera/Safari */
+
-            color: #a3a9b5;
-        }
-        &::-moz-placeholder {
-            /* Firefox 19+ */
-            color: #a3a9b5;
-        }
-        &:-ms-input-placeholder {
-            /* IE 10+ */
-            color: #a3a9b5;
-        }
-        &:-moz-placeholder {
-            /* Firefox 18- */
-            color: #a3a9b5;
-        }
         &:focus {
             box-shadow: none;
         }
@@ -142,7 +122,6 @@
             width: 280px;
         }
     }
-
     .input-group-append {
         height: 38px;
         left: 0;
@@ -152,49 +131,55 @@
         width: 38px;
         z-index: 5;
 
-        path {
+        * {
-            fill: #a3a9b5;
+            fill: $header-textfield-magnifier-color;
         }
     }
-
     .input-group-text {
-      align-items: center;
+        align-items: center;
-      background: none;
+        background: none;
-      border-color: transparent;
+        border-color: transparent;
-      display: flex;
+        display: flex;
-      height: 100%;
+        height: 100%;
-      justify-content: center;
+        justify-content: center;
-      padding: 0;
+        padding: 0;
-      width: 100%;
+        width: 100%;
-  }
+    }
 }
 
-.topnav-nav-link {
+.navbar-collapse.collapsing,
-    color: $white;
+.navbar-collapse.collapse.show {
-    position: relative;
+    display: flex;
+    flex-direction: column;
 
-    &:before {
+    .search-form {
-        background-color: $secondary;
+        align-items: center;
-        border-radius: 0 0 4px 4px;
+        order: -1;
-        top: -10px;
+        width: 100%;
-        content: "";
+
-        display: block;
+        form {
-        height: 0.25rem;
+            flex-grow: 1;
-        left: 50%;
+        }
-        opacity: 0;
+    }
-        position: absolute;
+    .input-group {
-        transform: translateX(-50%);
+        width: 100%;
-        transition: all 0.2s ease;
+    }
-        width: 75%;
+    .navbar-nav {
+        white-space: nowrap;
     }
 }
 
-@include media-breakpoint-up(lg) {
+.navbar-brand {
-    .topnav-nav-link {
+    margin-left: 0;
-        &:hover {
+}
-            &:before {
+
-                opacity: 1;
+.navbar-logo {
-            }
+    height: 1.5em;
-        }
+}
+
+@include media-breakpoint-up(md) {
+    .navbar-expand-lg .navbar-nav .nav-link {
+        padding-left: $header-link-horizontal-padding;
+        padding-right: $header-link-horizontal-padding;
     }
 }

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

@@ -1,3 +1,5 @@
 $primary:       #5b389f;
 $secondary:     #7dd79f;
 $tertiary:      #997fdc;
+
+$header-links-color-active: #333;

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

@@ -1,36 +1,8 @@
-$primary : #fff;
+$primary: #15bba6;
-$secondary : #15bba6;
+$secondary: #ff0000;
-$tertiary : #15bba6;
+$tertiary: #00FF00;
 
-// Navbar elements
+$header-links-color-active: #333;
-.navbar.navbar-primary {
-    &.navbar-dark {
-        .navbar-nav {
-            .nav-link {
-                color: #a3a9b5;
-                &:hover {
-                    color: #333;
-                }
-            }
-            .nav-link-icon {
-                circle {
-                    fill: $secondary;
-                }
-            }
-        }
-        .navbar-toggler {
-            border-color: $secondary;
-            color: $secondary;
-            .navbar-toggler-icon {
-                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{transparentize($secondary, 0.5)}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
-            }
-        }
-    }
-}
 
-
+$gradient-start: #17314f;
-.topnav-nav-link {
+$gradient-end: #1e4168;
-    &:before {
-        background-color: $secondary;
-    }
-}

apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

@@ -81,7 +81,7 @@
             <span class="nav-link-icon">
               <%= render BlockScoutWeb.IconsView, "_apps_icon.html" %>
             </span>
-            <%= gettext("Apps") %>
+            <%= gettext("Stakes") %>
           </a>
           <div class="dropdown-menu" aria-labeledby="navbarTransactionsDropdown">
             <%= link(
@@ -97,23 +97,17 @@
           </div>
         </li>
         <li class="nav-item dropdown">
-          <a href="#" role="button" id="navbarAPIsDropdown" class="nav-link topnav-nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <a class="nav-link topnav-nav-link dropdown-toggle active-icon" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <!-- ICON FOR MAINNET -->
             <span class="nav-link-icon">
               <%= render BlockScoutWeb.IconsView, "_posdao_icon.html" %>
             </span>
-            <%= gettext("POSDAO") %>
+            <%= subnetwork_title() %>
           </a>
-          <div class="dropdown-menu" aria-labeledby="navbarTransactionsDropdown">
+          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <%= link(
+            <%= for %{url: url, title: title} <- other_networks() do %>
-                  gettext("Item 1"),
+              <a class="dropdown-item" href="<%= url%>"><%= title %></a>
-                  class: "dropdown-item",
+            <% end %>
-                  to: "/#"
-                ) %>
-            <%= link(
-                gettext("Item 2"),
-                class: "dropdown-item",
-                to: "/#"
-              ) %>
           </div>
         </li>
       </ul>
@@ -131,26 +125,6 @@
           <button class="btn btn-outline-success my-2 my-sm-0 sr-only hidden" type="submit"><%= gettext "Search" %></button>
         <% end %>
       </div>
-      <ul class="navbar-nav mr-auto">
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle pl-lg-2" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <!-- ICON FOR MAINNET -->
-            <span class="nav-link-icon m-r-0">
-              <%= render BlockScoutWeb.IconsView, network_icon_partial() %>
-            </span>
-            <!-- ICON FOR TESTNET -->
-            <!-- <span class="nav-link-icon">
-              <%= render BlockScoutWeb.IconsView, "_test_network_icon.html" %>
-            </span> -->
-            <!-- <%= subnetwork_title() %> -->
-          </a>
-          <div class="dropdown-menu right" aria-labelledby="navbarDropdown">
-            <%= for %{url: url, title: title} <- other_networks() do %>
-              <a class="dropdown-item" href="<%= url%>"><%= title %></a>
-            <% end %>
-          </div>
-        </li>
-      </ul>
     </div>
   </div>
 </nav>