From df5fd3cd1d58f73bf4d42d5f0008b34ab16330ad Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Tue, 5 Dec 2017 12:48:16 +0100
Subject: [PATCH] fixed grey colors in light-theme, added new variables, played
 a bit with blue

---
 public/sass/_variables.dark.scss          | 10 ++-
 public/sass/_variables.light.scss         | 95 +++++++++--------------
 public/sass/components/_buttons.scss      |  2 +-
 public/sass/components/_filter-table.scss |  3 +-
 public/sass/components/_navbar.scss       |  6 +-
 public/sass/components/_tabs.scss         |  2 +-
 6 files changed, 51 insertions(+), 67 deletions(-)

diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 5ff2025a454..c0d1757dae7 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -139,6 +139,8 @@ $table-bg-accent:             $dark-3; // for striping
 $table-bg-hover:              $dark-4; // for hover
 $table-border:                $dark-3; // table and cell border
 
+$table-bg-odd:               $dark-2;
+
 // Buttons
 // -------------------------
 
@@ -160,6 +162,7 @@ $btn-danger-bg-hl:            darken($red, 8%);
 $btn-inverse-bg:              $dark-3;
 $btn-inverse-bg-hl:     	    lighten($dark-3, 4%);
 $btn-inverse-text-color:      $link-color;
+$btn-inverse-text-shadow:     0px 1px 0 rgba(0,0,0,.1);
 
 $btn-link-color:              $gray-3;
 
@@ -182,7 +185,7 @@ $input-border-focus:             $input-border-color !default;
 $input-box-shadow-focus:         rgba(102,175,233,.6) !default;
 $input-color-placeholder:        $gray-1 !default;
 $input-label-bg:				         $gray-blue;
-$input-label-border-color:       transparent;
+$input-label-border-color:       $gray-blue;
 $input-invalid-border-color:     lighten($red, 5%);
 
 // Search
@@ -241,6 +244,8 @@ $navbarDropdownShadow:            inset 0px 4px 10px -4px $body-bg;
 $navbarButtonBackground:          $navbarBackground;
 $navbarButtonBackgroundHighlight: $body-bg;
 
+$navbar-button-border:             #151515;
+
 // Sidemenu
 // -------------------------
 $side-menu-bg:            $black;
@@ -262,6 +267,9 @@ $page-nav-bg: $black;
 $page-nav-shadow: 5px 5px 20px -5px $black;
 $page-nav-breadcrumb-color: $gray-3;
 
+// Tabs
+// -------------------------
+$tab-border-color:          $dark-4;
 
 // Pagination
 // -------------------------
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index ab093a2531f..9711c0d68cf 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -13,34 +13,6 @@ $theme-name: light;
 $black:                 #000;
 
 // -------------------------
-/*$black:            #000;
-$dark-1:           #141414;
-$dark-2:           #1d1d1f;
-$dark-3:           #262628;
-$dark-4:           #373737;
-$dark-5:           #444444;
-$gray-1:           #555555;
-$gray-2:           #7B7B7B;
-$gray-3:           #b3b3b3;
-$gray-4:           #D8D9DA;
-$gray-5:           #ECECEC;
-$gray-6:           #f4f5f8;
-$gray-7:           #fbfbfb;*/
-
-/*$black:            #000;
-$dark-1:           #121314;
-$dark-2:           #1d1d1f;
-$dark-3:           #272729;
-$dark-4:           #38383b;
-$dark-5:           #444547;
-$gray-1:           #525357;
-$gray-2:           #7a7c80;
-$gray-3:           #b2b3b8;
-$gray-4:           #d5d6db;
-$gray-5:           #e9eaf0;
-$gray-6:           #f4f5f8;
-$gray-7:           #fafbfc;*/
-
 $black:            #000;
 $dark-1:           #13161d;
 $dark-2:           #1e2028;
@@ -49,18 +21,17 @@ $dark-4:           #35373f;
 $dark-5:           #41444b;
 $gray-1:           #52545c;
 $gray-2:           #767980;
-$gray-3:           #acaeb6;
-$gray-4:           #ced0d8;
-$gray-5:           #dfe3eb;
-//$gray-5:             #dfe7eb;
-$gray-6:           #ebedf2;
+$gray-3:           #acb6bf;
+$gray-4:           #c7d0d9;
+$gray-5:           #dde4ed;
+$gray-6:           #e9edf2;
 $gray-7:           #f7f8fa;
 
 $white:            #fff;
 
 // Accent colors
 // -------------------------
-$blue:             	   	#2AB2E4;
+$blue:                  #1ca4d6;
 $blue-dark:             #3CAAD6;
 $green:                 #3aa655;
 $red:                   #d44939;
@@ -68,7 +39,7 @@ $yellow:                #FF851B;
 $orange:                #Ff7941;
 $pink:                  #E671B8;
 $purple:                #9954BB;
-$variable:              #2AB2E4;
+$variable:              $blue;
 
 $brand-primary:         $orange;
 $brand-success:         $green;
@@ -84,8 +55,8 @@ $critical:              #EC2128;
 // Scaffolding
 // -------------------------
 
-$body-bg:  		  		    $white;
-$page-bg:  		  		    $white;
+$body-bg:  		  		    $gray-7;
+$page-bg:  		  		    $gray-7;
 $body-color:    		    $gray-1;
 $text-color:    		    $dark-4;
 $text-color-strong:	    $white;
@@ -99,11 +70,7 @@ $textShadow: none;
 
 // gradients
 $brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%);
-//$page-gradient: linear-gradient(120deg, transparent 40%, darken($gray-6, 4%) 98%);
-$page-gradient: linear-gradient(120deg, $gray-7 40%, $gray-6 98%);
-//$page-gradient: $gray-7;
-// $page-gradient: linear-gradient(-60deg, transparent 70%, darken($page-bg, 4%) 98%);
-$page-header-bg: linear-gradient(90deg, #292a2d, black);
+$page-gradient: linear-gradient(-60deg, transparent 70%, $gray-7 98%);
 
 // Links
 // -------------------------
@@ -130,7 +97,7 @@ $component-active-bg:    $brand-primary !default;
 // Panel
 // -------------------------
 
-$panel-bg: 		       $white;//$gray-7;
+$panel-bg: 		       $white;
 $panel-border-color: $gray-5;
 $panel-border:       solid 1px $panel-border-color;
 $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px);
@@ -138,9 +105,9 @@ $panel-header-hover-bg:       $gray-6;
 $panel-header-menu-hover-bg:  $gray-4;
 
 // Page header
-$page-header-bg: linear-gradient(90deg, #292a2d, black);
-$page-header-shadow: inset 0px -4px 14px $dark-2;
-$page-header-border-color: $dark-4;
+$page-header-bg: linear-gradient(90deg, $white, $gray-7);
+$page-header-shadow: inset 0px -3px 10px $gray-6;
+$page-header-border-color: $gray-4;
 
 $divider-border-color:	      $gray-2;
 
@@ -155,12 +122,12 @@ $code-tag-bg:       $gray-6;
 $code-tag-border:   darken($code-tag-bg, 3%);
 
 // cards
-$card-background: linear-gradient(135deg, #ccd2d9, #dde4ed);//linear-gradient(135deg, $gray-4, $gray-5);
+$card-background: linear-gradient(135deg, $gray-4, $gray-5);
 $card-background-hover: linear-gradient(135deg, $gray-6, $gray-7);
 $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
 
 // Lists
-$list-item-bg:         linear-gradient(135deg, #dde4ed, $gray-6);//$card-background;
+$list-item-bg:         linear-gradient(135deg, $gray-5, $gray-6);//$card-background;
 $list-item-hover-bg:   darken($gray-5, 5%);
 $list-item-link-color: $text-color;
 $list-item-shadow:     $card-shadow;
@@ -173,6 +140,8 @@ $table-bg-hover:             $gray-5; // for hover
 $table-bg-active:            $table-bg-hover !default;
 $table-border:               $gray-3; // table and cell border
 
+$table-bg-odd:               $gray-5;
+
 // Scrollbars
 $scrollbarBackground:   $gray-5;
 $scrollbarBackground2:  $gray-5;
@@ -195,9 +164,10 @@ $btn-warning-bg-hl:     darken($orange, 3%);
 $btn-danger-bg:         lighten($red, 3%);
 $btn-danger-bg-hl:      darken($red, 3%);
 
-$btn-inverse-bg:          #acb6bf;//#dae5f0;//$gray-5;
-$btn-inverse-bg-hl:       darken(#b8c2cc, 5%);
-$btn-inverse-text-color:  $gray-7;//$dark-4;
+$btn-inverse-bg:          $gray-6;
+$btn-inverse-bg-hl:       darken($gray-6, 5%);
+$btn-inverse-text-color:  $gray-1;
+$btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
 
 $btn-link-color: $gray-1;
 
@@ -213,28 +183,28 @@ $input-bg:                       $white;
 $input-bg-disabled:              $gray-5;
 
 $input-color:                    $dark-3;
-$input-border-color:             #dde4ed;//$gray-4;
+$input-border-color:             $gray-5;
 $input-box-shadow:               none;
 $input-border-focus:             $blue !default;
 $input-box-shadow-focus:         $blue !default;
 $input-color-placeholder:        $gray-4 !default;
-$input-label-bg:	        	     #dde4ed;//#dfe7f0;//#dae5f0;//#d8dfed;//$gray-5;#dde6f0;
-$input-label-border-color:       #dde4ed;//#dfe7f0;//#dae5f0;//#d8dfed;//$gray-5;#dde6f0;
+$input-label-bg:	        	     $gray-5;
+$input-label-border-color:       $gray-5;
 $input-invalid-border-color:     lighten($red, 5%);
 
 // Sidemenu
 // -------------------------
 $side-menu-bg:            $dark-3;
 $side-menu-item-hover-bg: $gray-1;
-$side-menu-shadow:        0 0 5px $dark-5;//0 0 5px #c2c2c2;
+$side-menu-shadow:        5px 0px 10px -5px $gray-1;
 $side-menu-link-color:    $gray-6;
 
 // Menu dropdowns
 // -------------------------
-$menu-dropdown-bg:            $white;
+$menu-dropdown-bg:            $gray-7;
 $menu-dropdown-hover-bg:      $gray-6;
 $menu-dropdown-border-color:  $gray-4;
-$menu-dropdown-shadow:        5px 5px 20px -5px $gray-4;
+$menu-dropdown-shadow:        5px 5px 10px -5px $gray-1;
 
 // Breadcrumb
 // -------------------------
@@ -243,9 +213,13 @@ $page-nav-shadow:           5px 5px 20px -5px $gray-4;
 $page-nav-breadcrumb-color: $black;
 $breadcrumb-hover-hl:       #d9dadd;
 
+// Tabs
+// -------------------------
+$tab-border-color:          $gray-5;
+
 // search
 $search-shadow: 0 5px 30px 0 $gray-4;
-$search-filter-box-bg: $gray-4;
+$search-filter-box-bg: $gray-7;
 
 // Dropdowns
 // -------------------------
@@ -309,6 +283,8 @@ $navbarBrandColor:                $navbarLinkColor;
 $navbarButtonBackground:          lighten($navbarBackground, 3%);
 $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
 
+$navbar-button-border:            $gray-4;
+
 
 // Pagination
 // -------------------------
@@ -352,7 +328,8 @@ $graph-tooltip-bg:        $gray-5;
 $checkboxImageUrl: '../img/checkbox_white.png';
 
 // info box
-$info-box-background: linear-gradient(135deg, #f1fbff, #d7ebff);
+// $info-box-background: linear-gradient(135deg, #f1fbff, #d7ebff);
+$info-box-background: linear-gradient(135deg, $blue, $blue-dark);
 
 // footer
 $footer-link-color:   $gray-3;
diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss
index cea04c28cd7..5f15a02a52f 100644
--- a/public/sass/components/_buttons.scss
+++ b/public/sass/components/_buttons.scss
@@ -95,7 +95,7 @@
 }
 // Inverse appears as dark gray
 .btn-inverse {
-  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
+  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
   //background: $card-background;
   box-shadow: $card-shadow;
   //border: 1px solid $tight-form-func-highlight-bg;
diff --git a/public/sass/components/_filter-table.scss b/public/sass/components/_filter-table.scss
index 0d81c4a74d0..25e92015c7d 100644
--- a/public/sass/components/_filter-table.scss
+++ b/public/sass/components/_filter-table.scss
@@ -17,8 +17,7 @@
 
   tbody {
     tr:nth-child(odd) {
-      //background: $dark-2;
-      background: $gray-6;
+      background: $table-bg-odd;
     }
   }
 
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index c6416421be4..25d7c6ffa82 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -74,15 +74,15 @@
 }
 
 .navbar-button {
-  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
+  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
 
   display: inline-block;
   font-weight: $btn-font-weight;
   padding: 8px 11px;
   line-height: 16px;
   color: $text-muted;
-  border: 1px solid #151515;
-  margin-right: 1px;
+  border: 1px solid $navbar-button-border;
+  margin-right: 3px;
   white-space: nowrap;
 
   .gicon {
diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss
index fee6d2cb7b8..80874241b79 100644
--- a/public/sass/components/_tabs.scss
+++ b/public/sass/components/_tabs.scss
@@ -31,7 +31,7 @@
   &.active,
   &.active:hover,
   &.active:focus {
-    border-color: $orange $dark-4 transparent;
+    border-color: $orange $tab-border-color transparent;
     background: $page-bg;
     color: $link-color;
   }