More fixes

client/coral-embed-stream/src/components/Comment.css

@@ -157,3 +157,8 @@
 .enter {
   animation: enter 1000ms;
 }
+
+.timerIcon {
+  vertical-align: middle;
+  font-size: 14px;
+}

client/coral-embed-stream/src/components/EditableCommentContent.js

@@ -145,7 +145,7 @@ export class EditableCommentContent extends React.Component {
                       }
                     </span>
                   : <span>
-                      <Icon name="timer"/> {t('edit_comment.edit_window_timer_prefix')}
+                      <Icon name="timer" className={styles.timerIcon}/> {t('edit_comment.edit_window_timer_prefix')}
                       <CountdownSeconds
                         until={this.getEditableUntil()}
                         classNameForMsRemaining={(remainingMs) => (remainingMs <= 10 * 1000) ? styles.editWindowAlmostOver : '' }

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

@@ -271,11 +271,6 @@ body {
   float: left;
 }
 
-.comment__action-container .material-icons {
-  font-size: 12px;
-  margin-left: 3px;
-}
-
 button.comment__action-button,
 .comment__action-button button {
   cursor: pointer;

client/coral-plugin-best/BestButton.css

@@ -5,4 +5,10 @@
 
 .tagIcon {
   font-size: 12px;
+  vertical-align: middle;
+}
+
+.icon {
+  font-size: 12px;
+  vertical-align: middle;
 }

client/coral-plugin-best/BestButton.js

@@ -98,7 +98,7 @@ export class BestButton extends Component {
               disabled={disabled}
               className={cn(styles.button, `${name}-button`, `e2e__${isBest ? 'unset' : 'set'}-best-comment`)}
               aria-label={t(isBest ? 'unset_best' : 'set_best')}>
-        <Icon name={ isBest ? 'star' : 'star_border' } />
+        <Icon name={ isBest ? 'star' : 'star_border' } className={styles.icon} />
       </button>
     );
   }

client/coral-plugin-flags/components/FlagButton.js

@@ -155,7 +155,7 @@ export default class FlagButton extends Component {
               : <span className={`${name}-button-text`}>{t('report')}</span>
             }
             <i className={
-              cn(`${name}-icon`, 'material-icons', {
+              cn(`${name}-icon`, 'material-icons', styles.icon, {
                 flaggedIcon: flagged,
                 [styles.flaggedIcon]: flagged,
               })}

client/coral-plugin-flags/components/styles.css

@@ -6,3 +6,9 @@
 .flaggedIcon {
   color: #f00
 }
+
+.icon {
+  padding: 0 2px;
+  font-size: 12px;
+  vertical-align: middle;
+}

client/coral-plugin-history/Comment.css

@@ -75,3 +75,8 @@
   margin: inherit;
   color: inherit;
 }
+
+.iconView, .iconDate {
+  vertical-align: middle;
+  padding-bottom: 1px;
+}

client/coral-plugin-history/Comment.js

@@ -30,11 +30,11 @@ const Comment = (props) => {
         <ul>
           <li>
             <a onClick={props.link(`${props.asset.url}?commentId=${props.comment.id}`)}>
-              <Icon name="open_in_new" />{t('view_conversation')}
+              <Icon name="open_in_new" className={styles.iconView}/>{t('view_conversation')}
             </a>
           </li>
           <li>
-            <Icon name="schedule" />
+            <Icon name="schedule" className={styles.iconDate}/>
             <PubDate
               className={styles.pubdate}
               created_at={props.comment.created_at}

client/coral-plugin-replies/ReplyButton.css

@@ -8,3 +8,9 @@
     display: none;
   }
 }
+
+.icon {
+  padding: 0 2px;
+  font-size: 12px;
+  vertical-align: middle;
+}

client/coral-plugin-replies/ReplyButton.js

@@ -15,7 +15,7 @@ const ReplyButton = ({onClick}) => {
       <span className={cn(`${name}-label`, styles.label)}>
         {t('reply')}
       </span>
-      <i className={`${name}-icon material-icons`}
+      <i className={cn(`${name}-icon`, 'material-icons', styles.icon)}
         aria-hidden={true}>reply</i>
     </button>
   );

client/coral-ui/components/Icon.css

@@ -1,7 +1,3 @@
 
 .root {
-  vertical-align: middle;
-  width: 1em;
-  font-size: 1em;
-  overflow: hidden;
 }

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

@@ -25,7 +25,9 @@
 }
 
 .icon {
-  padding: 0 2px;
+  font-size: 12px;
+  padding: 0 2px 0 5px;
+  vertical-align: middle;
 }
 
 @media (max-width: 425px) {

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

@@ -25,7 +25,9 @@
 }
 
 .icon {
-  padding: 0 2px;
+  font-size: 12px;
+  padding: 0 2px 0 5px;
+  vertical-align: middle;
 }
 
 @media (max-width: 425px) {

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

@@ -26,7 +26,8 @@
 }
 
 .icon {
-  padding: 0 2px;
+  font-size: 12px;
+  padding: 0 3px;
 }
 
 @media (max-width: 425px) {

plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css

@@ -24,3 +24,8 @@
   list-style: none;
   white-space: nowrap;
 }
+
+.icon {
+  font-size: 14px;
+  vertical-align: middle;
+}

plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js

@@ -24,7 +24,7 @@ const ViewingOptions = (props) => {
       <div className={cn([styles.root, 'coral-plugin-viewing-options'])}>
         <div>
           <button className={styles.button} onClick={toggleOpen}>Viewing Options
-            {props.open ? <Icon name="arrow_drop_up"/> : <Icon name="arrow_drop_down"/>}
+            {props.open ? <Icon name="arrow_drop_up" className={styles.icon}/> : <Icon name="arrow_drop_down" className={styles.icon}/>}
           </button>
         </div>
         {

plugins/talk-plugin-permalink/client/components/PermalinkButton.js

@@ -72,7 +72,7 @@ export default class PermalinkButton extends React.Component {
             onClick={this.toggle}
             className={cn(`${name}-button`, styles.button)}>
               {t('permalink')}
-            <Icon name="link" />
+            <Icon name="link" className={styles.icon}/>
           </button>
 
           <div

plugins/talk-plugin-permalink/client/components/styles.css

@@ -82,3 +82,9 @@
 .active {
   display: block;
 }
+
+.icon {
+  padding: 0 2px;
+  font-size: 12px;
+  vertical-align: middle;
+}