From 1280b16bcdb1378579a0e0155856426664815442 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 13 Jul 2017 20:47:30 +0700
Subject: [PATCH 1/2] Remove some global css, fix some styling issues

---
 client/coral-embed-stream/src/components/Stream.css |  3 +++
 client/coral-embed-stream/style/default.css         | 12 ------------
 client/coral-plugin-best/BestButton.css             |  4 ++++
 client/coral-plugin-best/BestButton.js              |  2 +-
 client/coral-ui/components/Icon.css                 |  7 +++++++
 client/coral-ui/components/Icon.js                  |  4 +++-
 6 files changed, 18 insertions(+), 14 deletions(-)
 create mode 100644 client/coral-ui/components/Icon.css

diff --git a/client/coral-embed-stream/src/components/Stream.css b/client/coral-embed-stream/src/components/Stream.css
index 06f1efd1f..8c5a4250b 100644
--- a/client/coral-embed-stream/src/components/Stream.css
+++ b/client/coral-embed-stream/src/components/Stream.css
@@ -22,5 +22,8 @@
 }
 
 .tabContainer {
+  position: relative;
   margin-top: 28px;
+  padding-bottom: 50px;
+  min-height: 600px;
 }
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 887b780ce..437397a98 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -21,18 +21,6 @@ body {
   padding: 4px;
 }
 
-.talk-stream-tab-container {
-  padding-bottom: 50px;
-  min-height: 600px;
-}
-
-.talk-stream-tab-container .material-icons {
-  vertical-align: middle;
-  width: 1em;
-  font-size: 1em;
-  overflow: hidden;
-}
-
 .expandForSignin {
   min-height: 600px;
 }
diff --git a/client/coral-plugin-best/BestButton.css b/client/coral-plugin-best/BestButton.css
index b1f169ff6..d1660ad5a 100644
--- a/client/coral-plugin-best/BestButton.css
+++ b/client/coral-plugin-best/BestButton.css
@@ -2,3 +2,7 @@
   composes: buttonReset from "coral-framework/styles/reset.css";
   margin: 5px 10px 5px 0px;
 }
+
+.tagIcon {
+  font-size: 12px;
+}
diff --git a/client/coral-plugin-best/BestButton.js b/client/coral-plugin-best/BestButton.js
index ac6d03fd8..c5ebeb907 100644
--- a/client/coral-plugin-best/BestButton.js
+++ b/client/coral-plugin-best/BestButton.js
@@ -18,7 +18,7 @@ const canModifyBestTag = ({roles = []} = {}) => roles && ['ADMIN', 'MODERATOR'].
 
 // Put this on a comment to show that it is best
 
-export const BestIndicator = ({children = <Icon name='star'/>}) => (
+export const BestIndicator = ({children = <Icon name='star' className={styles.tagIcon} />}) => (
   <span aria-label={t('comment_is_best')}>
     { children }
   </span>
diff --git a/client/coral-ui/components/Icon.css b/client/coral-ui/components/Icon.css
new file mode 100644
index 000000000..ec9a9dabc
--- /dev/null
+++ b/client/coral-ui/components/Icon.css
@@ -0,0 +1,7 @@
+
+.root {
+  vertical-align: middle;
+  width: 1em;
+  font-size: 1em;
+  overflow: hidden;
+}
diff --git a/client/coral-ui/components/Icon.js b/client/coral-ui/components/Icon.js
index b7c49a799..025b6df9e 100644
--- a/client/coral-ui/components/Icon.js
+++ b/client/coral-ui/components/Icon.js
@@ -1,8 +1,10 @@
 import React, {PropTypes} from 'react';
 import {Icon as IconMDL}  from 'react-mdl';
+import cn from 'classnames';
+import styles from './Icon.css';
 
 const Icon = ({className = '', name}) => (
-  <IconMDL className={className} name={name} />
+  <IconMDL className={cn(styles.root, className)} name={name} />
 );
 
 Icon.propTypes = {

From 83832abd726f52891f025c86abb8a7ab3961f8ae Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 13 Jul 2017 21:37:08 +0700
Subject: [PATCH 2/2] More fixes

---
 client/coral-embed-stream/src/components/Comment.css        | 5 +++++
 .../src/components/EditableCommentContent.js                | 2 +-
 client/coral-embed-stream/style/default.css                 | 5 -----
 client/coral-plugin-best/BestButton.css                     | 6 ++++++
 client/coral-plugin-best/BestButton.js                      | 2 +-
 client/coral-plugin-flags/components/FlagButton.js          | 2 +-
 client/coral-plugin-flags/components/styles.css             | 6 ++++++
 client/coral-plugin-history/Comment.css                     | 5 +++++
 client/coral-plugin-history/Comment.js                      | 4 ++--
 client/coral-plugin-replies/ReplyButton.css                 | 6 ++++++
 client/coral-plugin-replies/ReplyButton.js                  | 2 +-
 client/coral-ui/components/Icon.css                         | 4 ----
 plugins/coral-plugin-like/client/styles.css                 | 4 +++-
 plugins/coral-plugin-love/client/styles.css                 | 4 +++-
 plugins/coral-plugin-respect/client/styles.css              | 3 ++-
 .../client/components/ViewingOptions.css                    | 5 +++++
 .../client/components/ViewingOptions.js                     | 2 +-
 .../client/components/PermalinkButton.js                    | 2 +-
 plugins/talk-plugin-permalink/client/components/styles.css  | 6 ++++++
 19 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Comment.css b/client/coral-embed-stream/src/components/Comment.css
index d397185dc..143577cf6 100644
--- a/client/coral-embed-stream/src/components/Comment.css
+++ b/client/coral-embed-stream/src/components/Comment.css
@@ -157,3 +157,8 @@
 .enter {
   animation: enter 1000ms;
 }
+
+.timerIcon {
+  vertical-align: middle;
+  font-size: 14px;
+}
diff --git a/client/coral-embed-stream/src/components/EditableCommentContent.js b/client/coral-embed-stream/src/components/EditableCommentContent.js
index 06d8e6b9d..98be14d13 100644
--- a/client/coral-embed-stream/src/components/EditableCommentContent.js
+++ b/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 : '' }
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 437397a98..90a6250a3 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/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;
diff --git a/client/coral-plugin-best/BestButton.css b/client/coral-plugin-best/BestButton.css
index d1660ad5a..ca77f01f2 100644
--- a/client/coral-plugin-best/BestButton.css
+++ b/client/coral-plugin-best/BestButton.css
@@ -5,4 +5,10 @@
 
 .tagIcon {
   font-size: 12px;
+  vertical-align: middle;
+}
+
+.icon {
+  font-size: 12px;
+  vertical-align: middle;
 }
diff --git a/client/coral-plugin-best/BestButton.js b/client/coral-plugin-best/BestButton.js
index c5ebeb907..34bdad201 100644
--- a/client/coral-plugin-best/BestButton.js
+++ b/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>
     );
   }
diff --git a/client/coral-plugin-flags/components/FlagButton.js b/client/coral-plugin-flags/components/FlagButton.js
index 33499e83d..51b88391e 100644
--- a/client/coral-plugin-flags/components/FlagButton.js
+++ b/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,
               })}
diff --git a/client/coral-plugin-flags/components/styles.css b/client/coral-plugin-flags/components/styles.css
index 0990252b4..4b28a4f3a 100644
--- a/client/coral-plugin-flags/components/styles.css
+++ b/client/coral-plugin-flags/components/styles.css
@@ -6,3 +6,9 @@
 .flaggedIcon {
   color: #f00
 }
+
+.icon {
+  padding: 0 2px;
+  font-size: 12px;
+  vertical-align: middle;
+}
diff --git a/client/coral-plugin-history/Comment.css b/client/coral-plugin-history/Comment.css
index 4e827cdde..646e1f054 100644
--- a/client/coral-plugin-history/Comment.css
+++ b/client/coral-plugin-history/Comment.css
@@ -75,3 +75,8 @@
   margin: inherit;
   color: inherit;
 }
+
+.iconView, .iconDate {
+  vertical-align: middle;
+  padding-bottom: 1px;
+}
diff --git a/client/coral-plugin-history/Comment.js b/client/coral-plugin-history/Comment.js
index 048f0592b..78d48c1e6 100644
--- a/client/coral-plugin-history/Comment.js
+++ b/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}
diff --git a/client/coral-plugin-replies/ReplyButton.css b/client/coral-plugin-replies/ReplyButton.css
index a0be0de90..47014b236 100644
--- a/client/coral-plugin-replies/ReplyButton.css
+++ b/client/coral-plugin-replies/ReplyButton.css
@@ -8,3 +8,9 @@
     display: none;
   }
 }
+
+.icon {
+  padding: 0 2px;
+  font-size: 12px;
+  vertical-align: middle;
+}
diff --git a/client/coral-plugin-replies/ReplyButton.js b/client/coral-plugin-replies/ReplyButton.js
index 2f7b53995..b4c1ccfbc 100644
--- a/client/coral-plugin-replies/ReplyButton.js
+++ b/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>
   );
diff --git a/client/coral-ui/components/Icon.css b/client/coral-ui/components/Icon.css
index ec9a9dabc..16fe6d235 100644
--- a/client/coral-ui/components/Icon.css
+++ b/client/coral-ui/components/Icon.css
@@ -1,7 +1,3 @@
 
 .root {
-  vertical-align: middle;
-  width: 1em;
-  font-size: 1em;
-  overflow: hidden;
 }
diff --git a/plugins/coral-plugin-like/client/styles.css b/plugins/coral-plugin-like/client/styles.css
index 9ce0d5271..859581bd4 100644
--- a/plugins/coral-plugin-like/client/styles.css
+++ b/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) {
diff --git a/plugins/coral-plugin-love/client/styles.css b/plugins/coral-plugin-love/client/styles.css
index d7753a0e9..9d1bec487 100644
--- a/plugins/coral-plugin-love/client/styles.css
+++ b/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) {
diff --git a/plugins/coral-plugin-respect/client/styles.css b/plugins/coral-plugin-respect/client/styles.css
index 3ab0fbd29..362e02b8f 100644
--- a/plugins/coral-plugin-respect/client/styles.css
+++ b/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) {
diff --git a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css
index 9c302d07e..81d373b95 100644
--- a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css
+++ b/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;
+}
diff --git a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js
index b64123fdb..87680b370 100644
--- a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js
+++ b/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>
         {
diff --git a/plugins/talk-plugin-permalink/client/components/PermalinkButton.js b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js
index 55b98e5d8..cca8718b5 100644
--- a/plugins/talk-plugin-permalink/client/components/PermalinkButton.js
+++ b/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
diff --git a/plugins/talk-plugin-permalink/client/components/styles.css b/plugins/talk-plugin-permalink/client/components/styles.css
index 244cc2acc..b69f44177 100644
--- a/plugins/talk-plugin-permalink/client/components/styles.css
+++ b/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;
+}