Make all comment action buttons use cursor:pointer and nowrap (sam said ok)

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 <span className="comment__action-button comment__action-button--nowrap">{ children }</span>;
+};
+
 class Comment extends React.Component {
 
   constructor(props) {
@@ -135,36 +140,46 @@ class Comment extends React.Component {
         <PubDate created_at={comment.created_at} />
         <Content body={comment.body} />
           <div className="commentActionsLeft comment__action-container">
-              <LikeButton
-                like={like}
-                id={comment.id}
-                postLike={postLike}
-                deleteAction={deleteAction}
-                showSignInDialog={showSignInDialog}
-                currentUser={currentUser} />
-              <ReplyButton
-                onClick={() => setActiveReplyBox(comment.id)}
-                parentCommentId={parentId || comment.id}
-                currentUserId={currentUser && currentUser.id}
-                banned={false} />
-              <IfUserCanModifyBest user={currentUser}>
-                <BestButton
-                  isBest={commentIsBest(comment)}
-                  addBest={addBestTag}
-                  removeBest={removeBestTag} />
-              </IfUserCanModifyBest>
+              <ActionButton>
+                <LikeButton
+                  like={like}
+                  id={comment.id}
+                  postLike={postLike}
+                  deleteAction={deleteAction}
+                  showSignInDialog={showSignInDialog}
+                  currentUser={currentUser} />
+              </ActionButton>
+              <ActionButton>
+                <ReplyButton
+                  onClick={() => setActiveReplyBox(comment.id)}
+                  parentCommentId={parentId || comment.id}
+                  currentUserId={currentUser && currentUser.id}
+                  banned={false} />
+              </ActionButton>
+              <ActionButton>
+                <IfUserCanModifyBest user={currentUser}>
+                  <BestButton
+                    isBest={commentIsBest(comment)}
+                    addBest={addBestTag}
+                    removeBest={removeBestTag} />
+                </IfUserCanModifyBest>
+              </ActionButton>
             </div>
         <div className="commentActionsRight comment__action-container">
-          <PermalinkButton articleURL={asset.url} commentId={comment.id} />
-          <FlagComment
-            flag={flag && flag.current_user ? flag : dontagree}
-            id={comment.id}
-            author_id={comment.user.id}
-            postFlag={postFlag}
-            postDontAgree={postDontAgree}
-            deleteAction={deleteAction}
-            showSignInDialog={showSignInDialog}
-            currentUser={currentUser} />
+          <ActionButton>
+            <PermalinkButton articleURL={asset.url} commentId={comment.id} />
+          </ActionButton>
+          <ActionButton>
+            <FlagComment
+              flag={flag && flag.current_user ? flag : dontagree}
+              id={comment.id}
+              author_id={comment.user.id}
+              postFlag={postFlag}
+              postDontAgree={postDontAgree}
+              deleteAction={deleteAction}
+              showSignInDialog={showSignInDialog}
+              currentUser={currentUser} />
+          </ActionButton>
         </div>
         {
           activeReplyBox === comment.id

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

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 (
       <button onClick={isBest ? this.onClickRemoveBest : this.onClickAddBest}
               disabled={disabled}
-              className={classnames('comment__action-button', `${name}-button`,
-                                    'comment__action-button--nowrap', /* Can I do this to all buttons? 'comment__action-button--cursor-pointer', */
-                                    `e2e__${isBest ? 'unset' : 'set'}-best-comment`)}
+              className={classnames(`${name}-button`, `e2e__${isBest ? 'unset' : 'set'}-best-comment`)}
               aria-label={lang.t(isBest ? 'unsetBest' : 'setBest')}>
         <i className={`${name}-icon material-icons`} aria-hidden={true}>
           { isBest ? 'favorite' : 'favorite_border' }

client/coral-plugin-replies/ReplyButton.js

@@ -8,7 +8,7 @@ const name = 'coral-plugin-replies';
 const ReplyButton = ({banned, onClick}) => {
   return (
     <button
-      className={classnames(`${name}-reply-button`, 'comment__action-button--nowrap')}
+      className={classnames(`${name}-reply-button`)}
       onClick={onClick}>
       {lang.t('reply')}
       <i className={`${name}-icon material-icons`}