[blockscout] apply celo theme (1) (blockscout#13)

* Theme modifications for Celo theme

* Added theme variable file

* apply celo theme and images

* add integration and betanet

apps/block_scout_web/assets/css/_images-preload.scss

@@ -14,4 +14,7 @@ body:after {
 		url(/images/network-selector-icons/xdai-chain.svg)
 		url(/images/network-selector-icons/lukso-l14-testnet.svg)
 		url(/images/network-selector-icons/circle-xusdt.svg)
+		url(/images/network-selector-icons/celo.svg)
+		url(/images/network-selector-icons/alfajores.svg)
+		url(/images/network-selector-icons/betanet.svg)
 };

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

@@ -233,7 +233,7 @@ $network-selector-item-icon-dimensions: 30px !default;
 }
 
 .network-selector-item-icon {
-  background-color: #dfdfdf;
+  background-color: white;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: contain;
@@ -283,6 +283,15 @@ $network-selector-item-icon-dimensions: 30px !default;
   &-xusdt-chain {
     background-image: url(/images/network-selector-icons/circle-xusdt.svg)
   }
+  &-celo-alfajores {
+    background-image: url(/images/network-selector-icons/celo.svg)
+  }
+  &-celo-integration {
+    background-image: url(/images/network-selector-icons/celo.svg)
+  }
+  &-celo-betanet {
+    background-image: url(/images/network-selector-icons/celo.svg)
+  }
 }
 
 .network-selector-item-title {

apps/block_scout_web/assets/css/theme/_celo_variables-non-critical.scss

@@ -0,0 +1,7 @@
+// general
+$primary: #2b9f7a;
+$secondary: #20745a;
+$tertiary: #fff;
+$additional-font: #fff;
+
+$btn-line-color: $secondary; // button border and font color && hover bg color

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

@@ -0,0 +1,97 @@
+// general
+$primary: #35D07F;
+$secondary: #FBCC5C;
+$tertiary: #fff;
+$additional-font: #fff;
+
+$tile-body-a-color: $primary;
+$tile-type-block-color: $primary;
+$tile-type-progress-bar-color: $primary;
+a.tile-title { color: $primary !important; }
+
+// footer
+$footer-background-color: #282d31;
+$footer-title-color: #fff;
+$footer-text-color: $additional-font;
+$footer-item-disc-color: $secondary;
+$footer-social-icon-color: $secondary;
+
+// dashboard
+$dashboard-line-color-price: #fff; // price left border
+
+$dashboard-banner-chart-legend-label-color: #fff;
+$dashboard-stats-item-label-color: $dashboard-banner-chart-legend-label-color;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
+
+$dashboard-stats-item-border-color: $secondary; // stat border	
+
+$dashboard-banner-gradient-start: $primary; // gradient begin
+
+$dashboard-banner-gradient-end: #289371; // gradient end
+
+$dashboard-banner-network-plain-container-background-color: #2ea780; // stats bg
+
+
+// navigation
+.navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow
+$dropdown-menu-item-hover-color: $primary !default;
+$dropdown-menu-item-hover-background: rgba($primary, .1) !default;
+$header-icon-color-hover: $primary;
+$header-icon-border-color-hover: $primary;
+
+// buttons
+$btn-line-bg: #fff; // button bg
+$btn-line-color: $primary; // button border and font color && hover bg color
+$btn-copy-color: $primary; // btn copy
+$btn-qr-color: $primary; // btn qr-code
+$btn-address-card-icon-color: $primary; // btn address color
+
+//links & tile
+$tile-body-a-color: $primary;
+$tile-type-block-color: $primary;
+$tile-type-progress-bar-color: $primary;
+a.tile-title { color: $primary !important; }
+
+// card
+$card-background-1: $primary;
+$card-tab-active: $primary;
+
+.layout-container {
+	.dashboard-banner-container {
+	  background-image: linear-gradient(
+	    to bottom,
+	    $dashboard-banner-gradient-start,
+	    $dashboard-banner-gradient-end
+	  );
+	}
+}
+
+// Badges
+$badge-neutral-color: $primary;
+$badge-neutral-background-color: rgba($primary, .1);
+$api-text-monospace-color: $primary;
+
+// Tokens dropdown
+.token-balance-dropdown[aria-labelledby="dropdown-tokens"] {
+  .dropdown-items .dropdown-item:hover {
+    color: $primary !important;
+  }
+}
+
+// Dark theme
+$dark-primary: #2b9f7a;
+$dark-secondary: #20745a;
+$dark-primary-alternate: #2b9f7a; 
+
+.dark-theme-applied .dashboard-banner-chart-legend .dashboard-banner-chart-legend-item:nth-child(1)::before {
+    background-color: white!important;
+}
+
+.dark-theme-applied .dashboard-banner-chart-legend .dashboard-banner-chart-legend-item:nth-child(2)::before {
+    background-color: $primary!important;
+}
+
+.dark-theme-applied .tile .tile-body a, .dark-theme-applied .tile span[data-address-hash] {
+    color: #2b9f7a;
+}

apps/block_scout_web/assets/css/theme/_variables-non-critical.scss

@@ -1,5 +1,6 @@
 @import "theme/base_variables";
 @import "neutral_variables-non-critical";
+// @import "celo_variables-non-critical";
 // @import "xusdt_variables-non-critical";
 // @import "dai_variables-non-critical";
 // @import "ethereum_classic_variables-non-critical";

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

@@ -1,5 +1,6 @@
 @import "theme/base_variables";
 @import "neutral_variables";
+@import "celo_variables";
 // @import "xusdt_variables";
 // @import "dai_variables";
 // @import "ethereum_classic_variables";

apps/block_scout_web/lib/block_scout_web/views/layout_view.ex

@@ -4,18 +4,23 @@ defmodule BlockScoutWeb.LayoutView do
   alias Plug.Conn
   alias Poison.Parser
 
-  @issue_url "https://github.com/poanetwork/blockscout/issues/new"
+  @issue_url "https://github.com/celo-org/blockscout/issues/new"
   @default_other_networks [
     %{
-      title: "Alfajores",
+      title: "Celo Alfajores",
       url: "https://alfajores-blockscout.celo-testnet.org/",
-      test_net?: false
+      test_net?: true
     },
     %{
-      title: "Betanet",
-      url: "https://blockscout.com/poa/sokol",
+      title: "Celo Integration",
+      url: "https://integration-blockscout.celo-testnet.org/",
       test_net?: true
-    }
+    },
+    %{
+      title: "Celo Betanet",
+      url: "https://betanet-blockscout.celo-testnet.org/",
+      test_net?: true
+    },
   ]
 
   alias BlockScoutWeb.SocialMedia