diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index 3cc13174a..1e4802470 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/client/coral-embed-stream/src/Comment.js
@@ -26,6 +26,11 @@ const getActionSummary = (type, comment) => comment.action_summaries
.filter((a) => a.__typename === type)[0];
const isStaff = (tags) => !tags.every((t) => t.name !== 'STAFF') ;
+// hold actions links (e.g. Like, Reply) along the comment footer
+const ActionButton = ({children}) => {
+ return { children };
+};
+
class Comment extends React.Component {
constructor(props) {
@@ -135,36 +140,46 @@ class Comment extends React.Component {
-
-
setActiveReplyBox(comment.id)}
- parentCommentId={parentId || comment.id}
- currentUserId={currentUser && currentUser.id}
- banned={false} />
-
-
-
+
+
+
+
+ setActiveReplyBox(comment.id)}
+ parentCommentId={parentId || comment.id}
+ currentUserId={currentUser && currentUser.id}
+ banned={false} />
+
+
+
+
+
+
{
activeReplyBox === comment.id
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 6a8c58059..afc690f01 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -214,15 +214,17 @@ hr {
}
.comment__action-container .material-icons {
- font-size: 12px !important;
+ font-size: 12px;
margin-left: 3px;
}
-.comment__action-button {
+button.comment__action-button,
+.comment__action-button button {
cursor: pointer;
}
-.comment__action-button[disabled] {
+button.comment__action-button[disabled],
+.comment__action-button[disabled] button {
cursor: inherit;
}
diff --git a/client/coral-plugin-best/BestButton.js b/client/coral-plugin-best/BestButton.js
index 182bd27c2..ac0e75aaf 100644
--- a/client/coral-plugin-best/BestButton.js
+++ b/client/coral-plugin-best/BestButton.js
@@ -89,17 +89,13 @@ export class BestButton extends Component {
}
render() {
-
- // @TODO(bengo) Consider adding the comment__action--cursor-pointer to all buttons to add cursor:pointer and never wrap the icons
const {isBest, addBest, removeBest} = this.props;
const {isSaving} = this.state;
const disabled = isSaving || ! (isBest ? removeBest : addBest);
return (