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] 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 = {