Styling

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}>

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

plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.css

@@ -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;
-}

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}>

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;
 }

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)}>

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 {