adjust sidebar coloring

src/client/js/components/Sidebar/SidebarNav.jsx

@@ -37,7 +37,7 @@ class SidebarNav extends React.Component {
         <div className={`${className} grw-global-item-container ${isSelected ? 'active' : ''}`}>
           <button
             type="button"
-            className="btn btn-primary btn-lg"
+            className={`btn btn-primary btn-lg ${isSelected ? 'active' : ''}`}
             onClick={() => this.itemSelectedHandler(id)}
           >
             <i className={iconClassNames}></i>

src/client/styles/scss/theme/_apply-colors.scss

@@ -5,6 +5,8 @@
 // determine optional variables
 $border-image-navbar: linear-gradient(to right, #ccc 0%, #ccc 100%) !default;
 $bgcolor-search-top-dropdown: $secondary !default;
+$bgcolor-sidebar-item-active: darken($bgcolor-sidebar, 10%) !default;
+$text-shadow-sidebar-item-active: 1px 1px 2px $primary !default;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -139,10 +141,25 @@ $input-focus-color: $color-global;
     }
   }
 
+  .grw-global-item-container {
+    .btn {
+      @include button-variant(
+        $bgcolor-sidebar,
+        $bgcolor-sidebar,
+        darken($bgcolor-sidebar, 7.5%),
+        darken($bgcolor-sidebar, 10%),
+        $bgcolor-sidebar-item-active,
+        $bgcolor-sidebar-item-active
+      );
+    }
+  }
   .grw-global-item-container.active {
-    button:after {
+    .btn:after {
       // fukidashi color
-      border-right-color: darken($bgcolor-global, 4%);
+      border-right-color: $bgcolor-sidebar-context;
+    }
+    i {
+      text-shadow: $text-shadow-sidebar-item-active;
     }
   }
   div[data-testid='GlobalNavigation'] {

src/client/styles/scss/theme/default.scss

@@ -53,6 +53,8 @@ html[light] {
   $bgcolor-sidebar: #122c55;
   $color-sidebar-context: $color-global;
   $bgcolor-sidebar-context: #f4f6fc;
+  $bgcolor-sidebar-item-active: rgba(#000000, 0.3); // optional
+  $text-shadow-sidebar-item-active: 0px 0px 10px #0099ff; // optional
   // Sidebar resize button
   $color-resize-button: $color-reversal;
   $bgcolor-resize-button: #209fd8;
@@ -122,8 +124,10 @@ html[dark] {
 
   // Sidebar
   $bgcolor-sidebar: #122c55;
-  $color-sidebar-context: $color-global;
   $bgcolor-sidebar-context: #111d2f;
+  $color-sidebar-context: $color-global;
+  $bgcolor-sidebar-item-active: rgba(#969494, 0.3); // optional
+  $text-shadow-sidebar-item-active: 0px 0px 10px #0099ff; // optional
   // Sidebar resize button
   $color-resize-button: $color-global;
   $bgcolor-resize-button: $primary;