From 0d74e5dd39ee85500dff948e944cd8f07551a118 Mon Sep 17 00:00:00 2001
From: ivan <ivan@opensupports.com>
Date: Sun, 19 Mar 2017 19:29:15 -0300
Subject: [PATCH] Ivan - Fix stats toggle button colors [skip ci]

---
 client/src/app-components/stats.js          |  4 +++-
 client/src/app-components/stats.scss        | 21 +++++++++++++++++++++
 client/src/core-components/toggle-list.js   |  6 ++++--
 client/src/core-components/toggle-list.scss |  2 +-
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/client/src/app-components/stats.js b/client/src/app-components/stats.js
index 4402a29e..92139e82 100644
--- a/client/src/app-components/stats.js
+++ b/client/src/app-components/stats.js
@@ -70,11 +70,13 @@ class Stats extends React.Component {
             type: this.props.type === 'general' ? 'default' : 'small',
             items: this.getStrokes().map((name) => {
                 return {
-                    content:
+                    className: 'stats__toggle-list_' + name,
+                    content: (
                         <div className="stats__toggle-list-item">
                             <div className="stats__toggle-list-item-value">{this.state.stats[name]}</div>
                             <div className="stats__toggle-list-item-name">{i18n('CHART_' + name)}</div>
                         </div>
+                    )
                 }
             })
         };
diff --git a/client/src/app-components/stats.scss b/client/src/app-components/stats.scss
index c1557e9e..1ce141de 100644
--- a/client/src/app-components/stats.scss
+++ b/client/src/app-components/stats.scss
@@ -23,6 +23,27 @@
                 line-height: 20px;
             }
         }
+
+        &_CREATE_TICKET.toggle-list__selected {
+            box-shadow: inset 0 -5px 0px 0px rgba(20, 150, 20, 0.6);
+        }
+
+        &_CLOSE.toggle-list__selected {
+            box-shadow: inset 0 -5px 0px 0px rgba(150, 20, 20, 0.6);
+        }
+
+        &_SIGNUP.toggle-list__selected {
+            box-shadow: inset 0 -5px 0px 0px rgba(20, 20, 150, 0.6);
+        }
+
+        &_COMMENT.toggle-list__selected {
+            box-shadow: inset 0 -5px 0px 0px rgba(20, 200, 200, 0.6);
+        }
+
+        &_ASSIGN.toggle-list__selected {
+            box-shadow: inset 0 -5px 0px 0px rgba(20, 150, 20, 0.6);
+        }
+
     }
 
     &_staff {
diff --git a/client/src/core-components/toggle-list.js b/client/src/core-components/toggle-list.js
index edf16ada..259779a8 100644
--- a/client/src/core-components/toggle-list.js
+++ b/client/src/core-components/toggle-list.js
@@ -36,13 +36,13 @@ class ToggleList extends React.Component {
     renderItem(obj, index) {
 
         return (
-            <div className={this.getItemClass(index)} onClick={this.selectItem.bind(this, index)} key={index}>
+            <div className={this.getItemClass(index, obj)} onClick={this.selectItem.bind(this, index)} key={index}>
                 {obj.content}
             </div>
         );
     }
 
-    getItemClass(index) {
+    getItemClass(index, obj) {
         let classes = {
             'toggle-list__item': true,
             'toggle-list__first-item': (index === 0),
@@ -50,6 +50,8 @@ class ToggleList extends React.Component {
             'toggle-list__selected': _.includes(this.getSelectedList(), index)
         };
 
+        classes[obj.className] = (obj.className);
+
         return classNames(classes);
     }
 
diff --git a/client/src/core-components/toggle-list.scss b/client/src/core-components/toggle-list.scss
index 1ba34f67..196de2b4 100644
--- a/client/src/core-components/toggle-list.scss
+++ b/client/src/core-components/toggle-list.scss
@@ -14,7 +14,7 @@
     }
 
     &__selected {
-        box-shadow: inset 0 -5px 40px 10px rgba(0, 0, 0, 0.08);
+        box-shadow: inset 0 2px 12px -5px rgba(0, 0, 0, 0.7);
     }
 
     &__first-item {