styling changes for light theme

public/sass/_variables.light.scss

@@ -13,7 +13,7 @@ $theme-name: light;
 $black:                 #000;
 
 // -------------------------
-$black:            #000;
+/*$black:            #000;
 $dark-1:           #141414;
 $dark-2:           #1d1d1f;
 $dark-3:           #262628;
@@ -25,7 +25,21 @@ $gray-3:           #b3b3b3;
 $gray-4:           #D8D9DA;
 $gray-5:           #ECECEC;
 $gray-6:           #f4f5f8;
-$gray-7:           #fbfbfb;
+$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;
 
 $white:            #fff;
 
@@ -185,8 +199,8 @@ $input-invalid-border-color:     lighten($red, 5%);
 
 // Sidemenu
 // -------------------------
-$side-menu-bg:            $body-bg;
-$side-menu-item-hover-bg: $gray-6;
+$side-menu-bg:            $gray-7;
+$side-menu-item-hover-bg: $gray-5;
 $side-menu-shadow:        0 0 5px #c2c2c2;
 
 // Menu dropdowns
@@ -198,7 +212,7 @@ $menu-dropdown-shadow:        5px 5px 20px -5px $gray-4;
 
 // Breadcrumb
 // -------------------------
-$page-nav-bg:               #eaebee;
+$page-nav-bg:               $gray-5;
 $page-nav-shadow:           5px 5px 20px -5px $gray-4;
 $page-nav-breadcrumb-color: $black;
 $breadcrumb-hover-hl:       #d9dadd;
@@ -250,8 +264,8 @@ $wellBackground:                  $gray-3;
 // -------------------------
 
 $navbarHeight:                    52px;
-$navbarBackgroundHighlight:       #f8f8f8;
-$navbarBackground:                #f2f3f7;
+$navbarBackgroundHighlight:       white;
+$navbarBackground:                $white;
 $navbarBorder:                    1px solid $gray-4;
 $navbarShadow:                    0 0 3px #c1c1c1;
 

public/sass/components/_filter-table.scss

@@ -17,7 +17,8 @@
 
   tbody {
     tr:nth-child(odd) {
-      background: $dark-2;
+      //background: $dark-2;
+      background: $gray-6;
     }
   }
 
@@ -34,7 +35,8 @@
     padding: $table-cell-padding;
     line-height: 30px;
     height: 30px;
-    border-bottom: 1px solid black;
+    //border-bottom: 1px solid black;
+    border-bottom: 1px solid #ECECEC;
     white-space: nowrap;
 
     &.filter-table__switch-cell {

public/sass/layout/_page.scss

@@ -144,6 +144,7 @@
   line-height: 36px;
   padding: 0 7px 0 37px;
   @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
+  //background:linear-gradient(#edeff2, #e3e4e7);
   position: relative;
   box-shadow: $card-shadow;
 
@@ -164,14 +165,14 @@
 
   &.active,
   &:hover {
-    background: #333;
-    background: linear-gradient(#333, #000);
+    background: #fff;//#333;
+    background: linear-gradient($gray-4, darken($gray-4, 5%)); //linear-gradient(#333, #000);
   }
 
   &.active:after,
   &:hover:after {
-    background: #333;
-    background: linear-gradient(135deg, #333, #000);
+    background: #fff;//#333;
+    background: linear-gradient(135deg, $gray-4,darken($gray-4, 5%));////linear-gradient(135deg, #333, #000);
   }
 
   &:after {
@@ -192,7 +193,7 @@
     background: linear-gradient(135deg, $btn-inverse-bg, $btn-inverse-bg-hl);
 
     // stylish arrow design using box shadow
-    box-shadow: 2px -2px 0 2px rgb(35, 31, 31), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
+    box-shadow: 2px -2px 0 2px rgb(250, 250, 250), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
 
     // 5px - for rounded arrows and
     // 50px - to prevent hover glitches on the border created using shadows*/