Styles, utils and state

client/coral-embed-stream/style/default.css

@@ -254,13 +254,13 @@ hr {
 .commentActionsRight, .replyActionsRight {
   display: flex;
   justify-content: flex-end;
-  width: 50%;
+  width: 30%;
 }
 .commentActionsLeft, .replyActionsLeft {
   display: flex;
   justify-content: flex-start;
   float: left;
-  width: 50%;
+  width: 70%;
 }
 
 .comment__action-container .material-icons {

client/coral-framework/utils/index.js

@@ -0,0 +1,2 @@
+export const getActionSummary = (type, comment) => comment.action_summaries
+  .filter((a) => a.__typename === type)[0];

plugins/coral-plugin-respect/client/components/Icon.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default () => (
+  <i className="fa fa-handshake-o" aria-hidden="true"></i>
+);

plugins/coral-plugin-respect/client/index.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import styles from './style.css';
-import {Icon} from 'coral-ui';
+import Icon from './components/Icon';
 
-const getActionSummary = (type, comment) => comment.action_summaries
-  .filter((a) => a.__typename === type)[0];
+import {getActionSummary} from 'coral-framework/utils';
 
 export default (props) => {
   const {comment} = props.context;
@@ -22,7 +21,7 @@ export default (props) => {
       <button
         onClick={handleClick}>
         Respect
-        <Icon name="done"/>
+        <Icon />
         {respectActionSummary ? <span>{respectActionSummary.count}</span> : null}
       </button>
     </div>

plugins/coral-plugin-respect/client/style.css

@@ -7,9 +7,18 @@
         padding: 0px;
         border: none;
         font-size: inherit;
+
+        &:hover {
+          color: #d6ab00;
+          cursor: pointer;
+         }
     }
 
     .clicked {
         color: #ffcc00;
     }
+
+    i {
+        padding: 0 5px;
+    }
 }

views/embed/stream.ejs

@@ -5,6 +5,7 @@
     <link rel="stylesheet" type="text/css" href="/client/embed/stream/default.css">
     <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
     <% if (locals.customCssUrl) { %>
       <link href="<%= customCssUrl %>" rel="stylesheet" type="text/css">
     <% } %>