Merge pull request blockscout#21 from Pedro-vk/feature/celo_theme_2

Celo blockscout theme.
mrsmkl · Oct 28, 2019 · 8be64ad · 8be64ad
2 parents 56fc48e + 42f0023
commit 8be64ad
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 16 deletions.
diff --git a/apps/block_scout_web/assets/css/components/_network-selector.scss b/apps/block_scout_web/assets/css/components/_network-selector.scss
@@ -292,6 +292,9 @@ $network-selector-item-icon-dimensions: 30px !default;
   &-celo-betanet {
     background-image: url(/images/network-selector-icons/celo.svg)
   }
+  &-celo {
+    background-image: url(/images/network-selector-icons/celo.svg)
+  }
 }
 
 .network-selector-item-title {

diff --git a/apps/block_scout_web/assets/css/theme/_celo_variables.scss b/apps/block_scout_web/assets/css/theme/_celo_variables.scss
@@ -3,11 +3,26 @@ $primary: #35D07F;
 $secondary: #FBCC5C;
 $tertiary: #fff;
 $additional-font: #fff;
+$white: #fff;
+$celo-dark: #2E3338;
+
+$purple: #BF97FF;
+$orange: #FFB765;
+$cyan: #7ADEFF;
+$green: #35D07F;
+
+// Tile
 
 $tile-body-a-color: $primary;
 $tile-type-block-color: $primary;
 $tile-type-progress-bar-color: $primary;
-a.tile-title { color: $primary !important; }
+.tile {
+    a.tile-title {
+        color: $primary !important;
+        font-size: 16px !important;
+    }
+    .tile-bottom-contents { background: none !important; }
+}
 
 // footer
 $footer-background-color: #282d31;
@@ -16,6 +31,18 @@ $footer-text-color: $additional-font;
 $footer-item-disc-color: $secondary;
 $footer-social-icon-color: $secondary;
 
+.footer-logo { filter: none !important; }
+.footer-list ul li {
+    &:before {
+        background-color: $white !important;
+    }
+}
+.footer {
+    .fa, .fas, .far, .fal, .fab {
+        color: $white !important;
+    }
+}
+
 // dashboard
 $dashboard-line-color-price: #fff; // price left border
 
@@ -24,21 +51,36 @@ $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-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
 
+.layout-container .dashboard-banner-container {
+    background: $celo-dark !important;
+}
+.dashboard-banner-network-plain-container,
+.dashboard-banner-network-plain-container::after {
+    content: none !important;
+    background: none !important;
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+}
+
 
 // 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-background-color: #2e3338;
+.navbar { box-shadow: none; } // header shadow
+$dropdown-menu-item-hover-color: $primary;
+$dropdown-menu-item-hover-background: rgba($primary, .1);
 $header-icon-border-color-hover: $primary;
+$header-icon-color: $white;
+$header-icon-color-hover: mix($white, $header-background-color, 75%);
+$header-links-color: $white;
+$header-links-color-active: rgba($white, 0.75);
 
 // buttons
 $btn-line-bg: #fff; // button bg
@@ -47,6 +89,10 @@ $btn-copy-color: $primary; // btn copy
 $btn-qr-color: $primary; // btn qr-code
 $btn-address-card-icon-color: $primary; // btn address color
 
+.card .btn-line {
+  @include btn-line($btn-line-color, $btn-line-bg);
+}
+
 //links & tile
 $tile-body-a-color: $primary;
 $tile-type-block-color: $primary;
@@ -58,13 +104,13 @@ $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
-	  );
-	}
+    .dashboard-banner-container {
+      background-image: linear-gradient(
+        to bottom,
+        $dashboard-banner-gradient-start,
+        $dashboard-banner-gradient-end
+      );
+    }
 }
 
 // Badges
@@ -79,6 +125,34 @@ $api-text-monospace-color: $primary;
   }
 }
 
+// Network selection
+.network-selector-overlay {
+  background-color: rgba($primary, 0.6) !important;
+}
+
+form.network-selector-search-container {
+    margin: 0px 20px;
+    background: white;
+    border: 1px solid rgba(61,61,61,0.20);
+    border-radius: 4px;
+
+    &:hover {
+        border-color: $primary;
+    }
+}
+.network-selector-close path {
+    fill: $celo-dark !important;
+}
+
+// Radio button
+.radio input[type="radio"]:checked + .radio-icon {
+    border-color: $secondary !important;
+
+    &:before {
+        background: $secondary !important;
+    }
+}
+
 // Dark theme
 $dark-primary: #2b9f7a;
 $dark-secondary: #20745a;

diff --git a/apps/block_scout_web/assets/static/images/celo_logo.svg b/apps/block_scout_web/assets/static/images/celo_logo.svg
diff --git a/apps/block_scout_web/lib/block_scout_web/views/layout_view.ex b/apps/block_scout_web/lib/block_scout_web/views/layout_view.ex
@@ -30,12 +30,12 @@ defmodule BlockScoutWeb.LayoutView do
   end
 
   def logo do
-    Keyword.get(application_config(), :logo) || "/images/blockscout_logo.svg"
+    Keyword.get(application_config(), :logo) || "/images/celo_logo.svg"
   end
 
   def logo_footer do
     Keyword.get(application_config(), :logo_footer) || Keyword.get(application_config(), :logo) ||
-      "/images/blockscout_logo.svg"
+      "/images/celo_logo.svg"
   end
 
   def subnetwork_title do