Merge pull request #753 from coralproject/adapt-embed-classnames

Adapt Class Names

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-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')}>
+            {t('framework.configure_stream')}
+          </Tab>
+        </TabBar>
+        {commentId &&
+          <Button
+            cStyle="darkGrey"
+            style={{float: 'right'}}
+            onClick={viewAllComments}
+            className={'talk-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>
     );
   }

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')
 );

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>

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>