From 8b70dc688de2650ac507703b5e8a5ca7176e8df3 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 11 Jul 2017 21:03:27 +0700
Subject: [PATCH 1/2] Adapt CSS classnames for Embed

---
 .../src/components/Embed.js                   | 55 ++++++++++---------
 client/coral-embed-stream/src/index.js        |  2 +-
 views/embed/stream.ejs                        |  2 +-
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js
index 145e8340a..a98dbf976 100644
--- a/client/coral-embed-stream/src/components/Embed.js
+++ b/client/coral-embed-stream/src/components/Embed.js
@@ -9,6 +9,7 @@ import Count from 'coral-plugin-comment-count/CommentCount';
 import ProfileContainer from 'coral-settings/containers/ProfileContainer';
 import ConfigureStreamContainer
   from 'coral-configure/containers/ConfigureStreamContainer';
+import cn from 'classnames';
 
 export default class Embed extends React.Component {
   changeTab = (tab) => {
@@ -37,34 +38,36 @@ export default class Embed extends React.Component {
     const {activeTab, viewAllComments, commentId} = this.props;
     const {asset: {totalCommentCount}} = this.props.root;
     const {user} = this.props.auth;
+    const hasHighlightedComment = !!commentId;
 
     return (
-      <div>
-        <div className="commentStream">
-          <TabBar onChange={this.changeTab} activeTab={activeTab} className='talk-stream-tabbar'>
-            <Tab className={'talk-stream-comment-count-tab'} id='stream'><Count count={totalCommentCount}/></Tab>
-            <Tab className={'talk-stream-profile-tab'} id='profile'>{t('framework.my_profile')}</Tab>
-            <Tab className={'talk-stream-configuration-tab'} id='config' restricted={!can(user, 'UPDATE_CONFIG')}>{t('framework.configure_stream')}</Tab>
-          </TabBar>
-          {commentId &&
-            <Button
-              cStyle="darkGrey"
-              style={{float: 'right'}}
-              onClick={viewAllComments}
-            >
-              {t('framework.show_all_comments')}
-            </Button>}
-          <Slot fill="embed" />
-          <TabContent show={activeTab === 'stream'}>
-            <Stream data={this.props.data} root={this.props.root} />
-          </TabContent>
-          <TabContent show={activeTab === 'profile'}>
-            <ProfileContainer />
-          </TabContent>
-          <TabContent show={activeTab === 'config'}>
-            <ConfigureStreamContainer />
-          </TabContent>
-        </div>
+      <div className={cn('talk-embed-stream', {'talk-embed-stream-highlight-comment': hasHighlightedComment})}>
+        <TabBar onChange={this.changeTab} activeTab={activeTab} className='talk-embed-stream-tabbar'>
+          <Tab className={'talk-embed-stream-comments-tab'} id='stream'><Count count={totalCommentCount}/></Tab>
+          <Tab className={'talk-embed-stream-profile-tab'} id='profile'>{t('framework.my_profile')}</Tab>
+          <Tab className={'talk-embed-stream-configuration-tab'} id='config' restricted={!can(user, 'UPDATE_CONFIG')}>
+            {t('framework.configure_stream')}
+          </Tab>
+        </TabBar>
+        {commentId &&
+          <Button
+            cStyle="darkGrey"
+            style={{float: 'right'}}
+            onClick={viewAllComments}
+            className={'talk-embed-stream-show-all-comments-button'}
+          >
+            {t('framework.show_all_comments')}
+          </Button>}
+        <Slot fill="embed" />
+        <TabContent show={activeTab === 'stream'}>
+          <Stream data={this.props.data} root={this.props.root} />
+        </TabContent>
+        <TabContent show={activeTab === 'profile'}>
+          <ProfileContainer />
+        </TabContent>
+        <TabContent show={activeTab === 'config'}>
+          <ConfigureStreamContainer />
+        </TabContent>
       </div>
     );
   }
diff --git a/client/coral-embed-stream/src/index.js b/client/coral-embed-stream/src/index.js
index f5be3922d..9020a8457 100644
--- a/client/coral-embed-stream/src/index.js
+++ b/client/coral-embed-stream/src/index.js
@@ -48,5 +48,5 @@ render(
   <ApolloProvider client={client} store={store}>
     <AppRouter />
   </ApolloProvider>
-  , document.querySelector('#coralStream')
+  , document.querySelector('#talk-embed-stream-container')
 );
diff --git a/views/embed/stream.ejs b/views/embed/stream.ejs
index 03897d85f..99ca2072a 100644
--- a/views/embed/stream.ejs
+++ b/views/embed/stream.ejs
@@ -15,7 +15,7 @@
   </head>
   <body>
 
-    <div id="coralStream"></div>
+    <div id="talk-embed-stream-container"></div>
     <script src="/client/embed/stream/bundle.js"></script>
   </body>
 </html>

From 40f4419c9de896213a3574536f4606abe9ebb00d Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 11 Jul 2017 21:04:19 +0700
Subject: [PATCH 2/2] Add flagged unflagged CSS classnames

---
 client/coral-embed-stream/src/components/Embed.js  | 4 ++--
 client/coral-plugin-flags/components/FlagButton.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js
index a98dbf976..98137624f 100644
--- a/client/coral-embed-stream/src/components/Embed.js
+++ b/client/coral-embed-stream/src/components/Embed.js
@@ -42,7 +42,7 @@ export default class Embed extends React.Component {
 
     return (
       <div className={cn('talk-embed-stream', {'talk-embed-stream-highlight-comment': hasHighlightedComment})}>
-        <TabBar onChange={this.changeTab} activeTab={activeTab} className='talk-embed-stream-tabbar'>
+        <TabBar onChange={this.changeTab} activeTab={activeTab} className='talk-embed-stream-tab-bar'>
           <Tab className={'talk-embed-stream-comments-tab'} id='stream'><Count count={totalCommentCount}/></Tab>
           <Tab className={'talk-embed-stream-profile-tab'} id='profile'>{t('framework.my_profile')}</Tab>
           <Tab className={'talk-embed-stream-configuration-tab'} id='config' restricted={!can(user, 'UPDATE_CONFIG')}>
@@ -54,7 +54,7 @@ export default class Embed extends React.Component {
             cStyle="darkGrey"
             style={{float: 'right'}}
             onClick={viewAllComments}
-            className={'talk-embed-stream-show-all-comments-button'}
+            className={'talk-stream-show-all-comments-button'}
           >
             {t('framework.show_all_comments')}
           </Button>}
diff --git a/client/coral-plugin-flags/components/FlagButton.js b/client/coral-plugin-flags/components/FlagButton.js
index 25fcf21a9..33499e83d 100644
--- a/client/coral-plugin-flags/components/FlagButton.js
+++ b/client/coral-plugin-flags/components/FlagButton.js
@@ -148,7 +148,7 @@ export default class FlagButton extends Component {
           <button
             ref={(ref) => this.flagButton = ref}
             onClick={!this.props.banned && !flaggedByCurrentUser && !localPost ? this.onReportClick : null}
-            className={cn(`${name}-button`, styles.button)}>
+            className={cn(`${name}-button`, {[`${name}-button-flagged`]: flagged}, styles.button)}>
             {
               flagged
               ? <span className={`${name}-button-text`}>{t('reported')}</span>