From d6f85efa8adb61e80fc9d43a66b1864433970a51 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 9 Jul 2018 10:59:58 -0400
Subject: [PATCH] (css) Respect theme in sg-toggle-grid

Fixes #4500
---
 .../js/Common/sgToggleGrid.directive.js                |  5 +++--
 .../scss/components/gridList/grid-list.scss            | 10 +++-------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/UI/WebServerResources/js/Common/sgToggleGrid.directive.js b/UI/WebServerResources/js/Common/sgToggleGrid.directive.js
index 2492321cf..5cac49d5e 100644
--- a/UI/WebServerResources/js/Common/sgToggleGrid.directive.js
+++ b/UI/WebServerResources/js/Common/sgToggleGrid.directive.js
@@ -24,6 +24,7 @@
     };
 
     function compile(tElement, tAttrs) {
+      var CLASS_ACTIVE = 'md-default-theme md-accent md-bg md-bdr';
       return function postLink(scope, element, attr, controllers) {
         var tiles = tElement.find('md-grid-tile'),
             tile,
@@ -43,7 +44,7 @@
           // Toggle class on click event and call toggle function
           var tile = angular.element(this),
               day = tile.attr('value');
-          tile.toggleClass('sg-active');
+          tile.toggleClass(CLASS_ACTIVE);
           toggle(day);
         };
 
@@ -64,7 +65,7 @@
           _.forEach(tiles, function(o) {
             var tile = angular.element(o);
             if (_.includes(flattenedDays, tile.attr('value'))) {
-              tile.addClass('sg-active');
+              tile.addClass(CLASS_ACTIVE);
             }
           });
           ngModelCtrl.$validate();
diff --git a/UI/WebServerResources/scss/components/gridList/grid-list.scss b/UI/WebServerResources/scss/components/gridList/grid-list.scss
index a88d51f12..f3f713fe8 100644
--- a/UI/WebServerResources/scss/components/gridList/grid-list.scss
+++ b/UI/WebServerResources/scss/components/gridList/grid-list.scss
@@ -8,15 +8,11 @@ $sg-grid-border-width-focused: 2px;
     &.sg-icon-button {
       @extend .md-button;
       // Overwrite some styles of .md-button
-      border: 1px solid sg-color($sogoBlue, 300);
-      border-radius: 5%;
-      color: sg-color($sogoBlue, 600);
+      border: 1px solid $colorGrey600;
+      border-radius: 2px;
+      color: $colorGrey700;
       min-height: auto;
       position: absolute;
     }
-    &.sg-active {
-      background-color: sg-color($sogoBlue, 300);
-      color: #fff;
-    }
   }
 }