Hide action labels on mobile

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

@@ -459,14 +459,3 @@ button.comment__action-button[disabled],
   width: initial;
 }
 
-
-@media (min-device-width : 300px) and (max-device-width : 420px) {
-  .commentActionsLeft.comment__action-container .coral-plugin-replies-reply-button {
-    visibility: collapse;
-    margin-left: -30px;
-  }
-
-  .commentActionsLeft.comment__action-container .coral-plugin-replies-reply-button .coral-plugin-replies-icon {
-    visibility: visible;
-  }
-}

client/coral-plugin-replies/ReplyButton.css

@@ -0,0 +1,5 @@
+@media (max-width: 425px) {
+  .label {
+    display: none;
+  }
+}

client/coral-plugin-replies/ReplyButton.js

@@ -2,16 +2,19 @@ import React, {PropTypes} from 'react';
 
 import t from 'coral-framework/services/i18n';
 
-import classnames from 'classnames';
+import cn from 'classnames';
+import styles from './ReplyButton.css';
 
 const name = 'coral-plugin-replies';
 
 const ReplyButton = ({onClick}) => {
   return (
     <button
-      className={classnames(`${name}-reply-button`)}
+      className={cn(`${name}-reply-button`)}
       onClick={onClick}>
-      {t('reply')}
+      <span className={cn(`${name}-label`, styles.label)}>
+        {t('reply')}
+      </span>
       <i className={`${name}-icon material-icons`}
         aria-hidden={true}>reply</i>
     </button>

plugins/coral-plugin-like/client/LikeButton.js

@@ -45,7 +45,9 @@ class LikeButton extends React.Component {
           className={cn(styles.button, {[styles.liked]: alreadyReacted}, `${plugin}-button`)}
           onClick={this.handleClick}
         >
-          <span>{t(alreadyReacted ? 'coral-plugin-like.liked' : 'coral-plugin-like.like')}</span>
+          <span className={cn(`${plugin}-label`, styles.label)}>
+            {t(alreadyReacted ? 'coral-plugin-like.liked' : 'coral-plugin-like.like')}
+          </span>
           <Icon name="thumb_up" className={`${plugin}-icon`} />
           <span className={`${plugin}-count`}>{count > 0 && count}</span>
         </button>

plugins/coral-plugin-like/client/styles.css

@@ -23,3 +23,9 @@
     }
   }
 }
+
+@media (max-width: 425px) {
+  .label {
+    display: none;
+  }
+}

plugins/coral-plugin-love/client/LoveButton.js

@@ -45,7 +45,9 @@ class LoveButton extends React.Component {
           className={cn(styles.button, {[styles.loved]: alreadyReacted}, `${plugin}-button`)}
           onClick={this.handleClick}
         >
-          <span>{t(alreadyReacted ? 'coral-plugin-love.loved' : 'coral-plugin-love.love')}</span>
+          <span className={cn(`${plugin}-label`, styles.label)}>
+            {t(alreadyReacted ? 'coral-plugin-love.loved' : 'coral-plugin-love.love')}
+          </span>
           <Icon name="favorite" className={`${plugin}-icon`} />
           <span className={`${plugin}-count`}>{count > 0 && count}</span>
         </button>

plugins/coral-plugin-love/client/styles.css

@@ -23,3 +23,9 @@
     }
   }
 }
+
+@media (max-width: 425px) {
+  .label {
+    display: none;
+  }
+}

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

@@ -45,11 +45,11 @@ class RespectButton extends React.Component {
           className={cn(styles.button, {[styles.respected]: alreadyReacted}, `${plugin}-button`)}
           onClick={this.handleClick}
         >
-          <span className={`${plugin}-button-text`}>
+          <span className={cn(`${plugin}-label`, styles.label)}>
             {t(alreadyReacted ? 'coral-plugin-respect.respected' : 'coral-plugin-respect.respect')}
           </span>
           <Icon className={cn(styles.icon, `${plugin}-icon`)} />
-          <span className={cn(styles.icon, `${plugin}-count`)}>{count > 0 && count}</span>
+          <span className={cn(`${plugin}-count`)}>{count > 0 && count}</span>
         </button>
       </div>
     );

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

@@ -28,3 +28,9 @@
 .icon {
   padding: 0 5px;
 }
+
+@media (max-width: 425px) {
+  .label {
+    display: none;
+  }
+}