Changed background color of active menu items

app/modules/components/filter/filter.scss

@@ -1,6 +1,5 @@
 tg-filter {
     background-color: $mass-white;
-    box-shadow: 1px 1px 5px rgba($primary, .2);
     display: block;
     left: 0;
     min-height: 100%;
@@ -40,6 +39,7 @@ tg-filter {
         top: .7rem;
     }
     &.open {
+        box-shadow: 1px 1px 5px rgba($primary, .2);
         transform: translateX(0);
     }
 }

app/styles/modules/common/nav.scss

@@ -86,11 +86,12 @@ tg-project-menu {
         @include font-size(large);
     }
     .active {
-        background: rgba($black, .2);
-        color: $primary-light;
-        svg path {
-            fill: $primary-light;
+        background: rgba($white, .95);
+        color: $secondary-dark;
+        svg {
+            fill: $secondary-dark;
             opacity: 1;
+            stroke: $secondary-dark;
         }
     }
 }

app/themes/high-contrast/variables.scss

@@ -19,6 +19,8 @@ $primary: #000;
 $primary-dark: #000;
 $primary-background: #dfdfdf;
 
+$secondary-dark: #000;
+
 // Mass white
 $mass-white: #f5f5f5;
 

app/themes/material-design/variables.scss

@@ -22,6 +22,8 @@ $primary: #3f51b5;
 $primary-dark: #1a237e;
 $primary-background: #929dd8;
 
+$secondary-dark: #1a237e;
+
 // Status colors
 $red-light: #ff5252;
 $red: #f44336;

app/themes/taiga/variables.scss

@@ -22,6 +22,8 @@ $primary: #5b8200;
 $primary-dark: #879b89;
 $primary-background: #E8F5E3;
 
+$secondary-dark: #627695;
+
 //Status colors
 $red-light: #ff8282;
 $red: #f00;