From 05d643d3c30954905bf6dfb2e2b9df062d03dfd4 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 8 Sep 2017 08:35:57 -0300
Subject: [PATCH] Styling

---
 .../client/components/ApproveCommentAction.js |  4 ++--
 .../client/components/ModerationActions.js    |  3 +--
 .../client/components/RejectCommentAction.css | 19 -------------------
 .../client/components/RejectCommentAction.js  |  4 ++--
 .../client/components/Tooltip.css             |  3 ++-
 .../client/components/Tooltip.js              |  1 -
 .../{ApproveCommentAction.css => styles.css}  | 14 ++++++++++----
 7 files changed, 17 insertions(+), 31 deletions(-)
 delete mode 100644 plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.css
 rename plugins/talk-plugin-moderation-actions/client/components/{ApproveCommentAction.css => styles.css} (54%)

diff --git a/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js
index a777b70c3..f75a98c27 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import styles from './ApproveCommentAction.css';
+import styles from './styles.css';
 import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 import cn from 'classnames';
 
-const isApproved = (status) => (status === "ACCEPTED");
+const isApproved = (status) => (status === 'ACCEPTED');
 
 export default ({approveComment, comment: {status}}) => (
   <button className={cn(styles.button, 'talk-plugin-moderation-actions-reject')} onClick={approveComment}>
diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
index 8caec1343..6309cb14d 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
@@ -2,7 +2,6 @@ import React from 'react';
 import cn from 'classnames';
 import Tooltip from './Tooltip';
 import styles from './ModerationActions.css';
-import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 import ClickOutside from 'coral-framework/components/ClickOutside';
 import RejectCommentAction from '../containers/RejectCommentAction';
@@ -17,7 +16,7 @@ export default class ModerationActions extends React.Component {
     };
   }
 
-  toogleTooltip = (e) => {
+  toogleTooltip = () => {
     const {tooltip} = this.state;
     this.setState({
       tooltip: !tooltip
diff --git a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.css b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.css
deleted file mode 100644
index 2e7891cf8..000000000
--- a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.root {
-  white-space: nowrap;
-}
-
-.button {
-  composes: buttonReset from "coral-framework/styles/reset.css";
-  padding: 6px;
-  font-size: 14px;
-  transition: color 100ms, background 100ms;
-  border-radius: 3px;
-
-  &:hover {
-    background-color: #efefef;
-  }
-}
-
-.icon {
-  margin-right: 15px;
-}
\ No newline at end of file
diff --git a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js
index aa593f69e..827820a7a 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import styles from './RejectCommentAction.css';
+import cn from 'classnames';
+import styles from './styles.css';
 import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
-import cn from 'classnames';
 
 export default ({rejectComment}) => (
   <button className={cn(styles.button, 'talk-plugin-moderation-actions-reject')} onClick={rejectComment}>
diff --git a/plugins/talk-plugin-moderation-actions/client/components/Tooltip.css b/plugins/talk-plugin-moderation-actions/client/components/Tooltip.css
index bdf877ee5..def7cac82 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/Tooltip.css
+++ b/plugins/talk-plugin-moderation-actions/client/components/Tooltip.css
@@ -41,6 +41,7 @@
   padding: 0;
   font-size: 1em;
   vertical-align: middle;
-  margin-bottom: 2px;
+  margin-bottom: 4px;
   line-height: 22px;
+  letter-spacing: 0.3px;
 }
\ No newline at end of file
diff --git a/plugins/talk-plugin-moderation-actions/client/components/Tooltip.js b/plugins/talk-plugin-moderation-actions/client/components/Tooltip.js
index 95486271d..db7e56c1e 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/Tooltip.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/Tooltip.js
@@ -2,7 +2,6 @@ import React from 'react';
 import cn from 'classnames';
 import styles from './Tooltip.css';
 import {t} from 'plugin-api/beta/client/services';
-import {Icon} from 'plugin-api/beta/client/components/ui';
 
 export default ({className = '', children}) => (
   <div className={cn(styles.tooltip, className)}>
diff --git a/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.css b/plugins/talk-plugin-moderation-actions/client/components/styles.css
similarity index 54%
rename from plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.css
rename to plugins/talk-plugin-moderation-actions/client/components/styles.css
index 7a8fbf502..1eb919166 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.css
+++ b/plugins/talk-plugin-moderation-actions/client/components/styles.css
@@ -1,21 +1,27 @@
 .root {
   white-space: nowrap;
-} 
-  
+}
+
 .button {
   composes: buttonReset from "coral-framework/styles/reset.css";
   padding: 6px;
   font-size: 14px;
-  transition: color 100ms, background 100ms;
+  transition: color 100ms, background-color 100ms;
   border-radius: 3px;
+  color: #383A43;
+  width: 100%;
+  text-align: left;
+  font-weight: bold;
+  letter-spacing: 0.3px;
 
   &:hover {
-    background-color: #efefef;
+    background-color: #D8D8D8;
   }
 }
 
 .icon {
   margin-right: 15px;
+  font-size: 16px;
 }
 
 .approved {