(add) footer styles

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

@@ -1,13 +1,15 @@
 $footer-background-color: $secondary !default;
-$footer-padding: 1em !default;
+$footer-title-color: #fff !default;
 $footer-text-color: rgba(#fff, 0.7) !default;
+$footer-item-disc-color: $primary !default;
 
 .footer {
   background: $footer-background-color;
   color: $footer-text-color;
   font-size: 12px;
+  line-height: 1.67;
   margin: 0;
-  padding: $footer-padding;
+  padding: 40px 0;
   position: relative;
 
   @media (max-width: $breakpoint-md) {
@@ -15,12 +17,20 @@ $footer-text-color: rgba(#fff, 0.7) !default;
   }
 }
 
+.footer-logo-row {
+  margin-bottom: 30px;
+}
+
 .footer-logo {
   height: 2rem;
 }
 
+.footer-info-text {
+  margin: 0 0 25px;
+  padding: 0 20px 0 0;
+}
+
 .footer-social-icons {
-  // float: right;
   padding-top: 0.5em;
 }
 
@@ -29,37 +39,45 @@ $footer-text-color: rgba(#fff, 0.7) !default;
 }
 
 .footer-link {
-  color: inherit;
-}
+  color: $footer-text-color;
 
-.footer-link:hover {
-  color: white;
+  &:hover {
+    color: $footer-text-color;
+    text-decoration: underline;
+  }
 }
 
 .footer-list {
-  padding-top: 1em;
+  padding-top: 0;
 
   h3 {
-    margin-bottom: 0;
-    // text-align: center;
-  }
-
-  hr {
-    margin-top: 0;
-    margin-bottom: 1em;
-    border: 0;
-    height: 0;
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    color: $footer-title-color;
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 1.4;
+    margin: 0 0 15px;
   }
 
   ul {
     list-style-type: none;
-    padding-left: 0;
-    margin-left: 0;
+    margin: 0;
+    padding: 0;
 
     li {
-      padding-bottom: 0.5em;
+      align-items: center;
+      display: flex;
+      line-height: 2.5;
+      padding: 0;
+
+      &::before {
+        background-color: $footer-item-disc-color;
+        border-radius: 50%;
+        content: "";
+        display: block;
+        height: 6px;
+        margin: 0 10px 0 0;
+        width: 6px;
+      }
     }
   }
 }

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

@@ -10,3 +10,6 @@ $dashboard-line-color-price: $secondary;
 $dashboard-line-color-market: $primary;
 
 $tile-type-block-border-color: $secondary;
+
+$footer-background-color: #173250;
+$footer-text-color: #909dac;

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

@@ -1,7 +1,7 @@
 <footer class="footer">
   <div class="footer-body container">
     <!-- Logo -->
-    <div class="row">
+    <div class="row footer-logo-row">
       <div class="col-md-12">
         <%= link to: chain_path(@conn, :show), class: "footer-brand" do %>
           <img class="footer-logo" src="<%= logo_footer() %>" alt="<%= subnetwork_title() %>" />
@@ -14,7 +14,7 @@
 
     <div class="row">
       <div class="col-md-<%= col_size %>">
-        <p><%= gettext("Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.") %></p>
+        <p class="footer-info-text"><%= gettext("Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.") %></p>
         <div class="icon-links icon-links-primary footer-social-icons">
           <a href="https://github.com/poanetwork" rel="noreferrer" target="_blank" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("Github") %>">
             <i class="fab fa-github"></i>
@@ -30,7 +30,6 @@
 
       <div class="col-md-<%= col_size %> footer-list">
         <h3>BlockScout</h3>
-        <hr>
         <ul>
           <li><a href="<%= issue_link(@conn) %>" rel="noreferrer" class="footer-link" target="_blank"><%= gettext("Submit an Issue") %></a></li>
           <li><a href="https://github.com/poanetwork/blockscout" rel="noreferrer" class="footer-link"><%= gettext("Contribute") %></a></li>
@@ -43,7 +42,6 @@
       <%= unless Enum.empty?(main_nets) do %>
         <div class="col-md-<%= col_size %> footer-list">
           <h3><%= gettext("Main Networks") %></h3>
-          <hr>
           <ul>
             <%= for %{title: title, url: url} <- main_nets do %>
               <li><a href="<%= url%>" rel="norefferer" class="footer-link"> <%= title %> </a></li>
@@ -57,7 +55,6 @@
       <%= unless Enum.empty?(test_nets) do %>
         <div class="col-md-<%= col_size %> footer-list">
           <h3><%= gettext("Test Networks") %></h3>
-          <hr>
           <ul>
             <%= for %{title: title, url: url} <- test_nets do %>
               <li><a href="<%= url%>" rel="noreferrer" class="footer-link"> <%= title %> </a></li>
@@ -69,7 +66,6 @@
       <%= unless Enum.empty?(other_explorers) do %>
         <div class="col-md-<%= col_size %> footer-list">
           <h3><%= gettext("Other Explorers") %></h3>
-          <hr>
           <ul>
             <%= for {name, url} <- other_explorers do %>
               <li><a href="<%= url%>" rel="noreferrer" class="footer-link"> <%= name %> </a></li>