From bdc3a79b27a8abbf9c07fac3f9729140ca19d4d7 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 4 Apr 2017 13:04:58 +0700
Subject: [PATCH] Adjust respect button styles

---
 .../client/components/Icon.js                 |  5 +-
 plugins/coral-plugin-respect/client/index.js  |  8 ++--
 plugins/coral-plugin-respect/client/style.css | 47 ++++++++++---------
 3 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/plugins/coral-plugin-respect/client/components/Icon.js b/plugins/coral-plugin-respect/client/components/Icon.js
index 1e4dd30b9..c24841e97 100644
--- a/plugins/coral-plugin-respect/client/components/Icon.js
+++ b/plugins/coral-plugin-respect/client/components/Icon.js
@@ -1,5 +1,6 @@
 import React from 'react';
+import cn from 'classnames';
 
-export default () => (
-  <i className="fa fa-handshake-o" aria-hidden="true"/>
+export default ({className}) => (
+  <i className={cn('fa', 'fa-handshake-o', className)} aria-hidden="true"/>
 );
diff --git a/plugins/coral-plugin-respect/client/index.js b/plugins/coral-plugin-respect/client/index.js
index de23f994b..ca93c6e6d 100644
--- a/plugins/coral-plugin-respect/client/index.js
+++ b/plugins/coral-plugin-respect/client/index.js
@@ -3,7 +3,9 @@ import styles from './style.css';
 import Icon from './components/Icon';
 
 import {I18n} from 'coral-framework';
+import cn from 'classnames';
 import translations from './translations.json';
+
 const lang = new I18n(translations);
 
 import {getActionSummary} from 'coral-framework/utils';
@@ -73,12 +75,12 @@ class RespectButton extends React.Component {
     if (localDelete) {count -= 1;}
 
     return (
-      <div className={styles.Respect}>
+      <div className={styles.respect}>
         <button
-          className={respected ? styles.respected : ''}
+          className={cn(styles.button, {[styles.respected]: respected})}
           onClick={this.handleClick} >
           <span>{lang.t(respected ? 'respected' : 'respect')}</span>
-          <Icon />
+          <Icon className={cn(styles.icon, {[styles.respected]: respected})} />
           {count > 0 && count}
         </button>
       </div>
diff --git a/plugins/coral-plugin-respect/client/style.css b/plugins/coral-plugin-respect/client/style.css
index 485315bfa..32f9a8959 100644
--- a/plugins/coral-plugin-respect/client/style.css
+++ b/plugins/coral-plugin-respect/client/style.css
@@ -1,27 +1,30 @@
-.Respect {
-    display: inline-block;
-    button {
-        color: #161616;
-        margin: 5px 10px 5px 0px;
-        background: none;
-        padding: 0px;
-        border: none;
-        font-size: inherit;
+.respect {
+  display: inline-block;
+ }
 
-        &:hover {
-          color: #d6ab00;
-          cursor: pointer;
-         }
-    }
+.button {
+  color: #2a2a2a;
+  margin: 5px 10px 5px 0px;
+  background: none;
+  padding: 0px;
+  border: none;
+  font-size: inherit;
 
-    .respected {
-        color: #ffcc00;
-        i {
-          color: #161616;
-        }
-    }
+  &:hover {
+    color: #767676;
+    cursor: pointer;
+  }
 
-    i {
-        padding: 0 5px;
+  &.respected {
+    color: #c98211;
+
+    &:hover {
+      color: #e59614;
+      cursor: pointer;
     }
+  }
+}
+
+.icon {
+  padding: 0 5px;
 }