From 235b2e106870e2ea82d1610a192e2fe923278b96 Mon Sep 17 00:00:00 2001
From: Ryan Yun <ryan.yun@dowjones.com>
Date: Fri, 22 Sep 2017 11:10:39 -0400
Subject: [PATCH 01/12] add class name for my profile container

---
 client/coral-settings/containers/ProfileContainer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-settings/containers/ProfileContainer.js b/client/coral-settings/containers/ProfileContainer.js
index 1391fa83f..4531ff7d3 100644
--- a/client/coral-settings/containers/ProfileContainer.js
+++ b/client/coral-settings/containers/ProfileContainer.js
@@ -71,7 +71,7 @@ class ProfileContainer extends Component {
     const emailAddress = localProfile && localProfile.id;
 
     return (
-      <div>
+      <div className='profileContainer'>
         <h2>{user.username}</h2>
         {emailAddress ? <p>{emailAddress}</p> : null}
 

From d359d915fe017588b21ebc97668966d2882f7d68 Mon Sep 17 00:00:00 2001
From: Ryan Yun <ryan.yun@dowjones.com>
Date: Fri, 22 Sep 2017 11:11:22 -0400
Subject: [PATCH 02/12] add class name for configure container

---
 client/coral-configure/containers/ConfigureStreamContainer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-configure/containers/ConfigureStreamContainer.js b/client/coral-configure/containers/ConfigureStreamContainer.js
index c009bbb76..6b1716930 100644
--- a/client/coral-configure/containers/ConfigureStreamContainer.js
+++ b/client/coral-configure/containers/ConfigureStreamContainer.js
@@ -102,7 +102,7 @@ class ConfigureStreamContainer extends Component {
     const closedTimeout = dirtySettings.closedTimeout;
 
     return (
-      <div>
+      <div className='configureContainer'>
         <ConfigureCommentStream
           handleChange={this.handleChange}
           handleApply={this.handleApply}

From a736c1620ec9c7a2db87fcd76f493e0409e6155e Mon Sep 17 00:00:00 2001
From: Ryan Yun <ryan.yun@dowjones.com>
Date: Fri, 22 Sep 2017 11:16:56 -0400
Subject: [PATCH 03/12] add static class names for respected and liked buttons

---
 plugins/talk-plugin-like/client/LikeButton.js       | 2 +-
 plugins/talk-plugin-respect/client/RespectButton.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/talk-plugin-like/client/LikeButton.js b/plugins/talk-plugin-like/client/LikeButton.js
index ece85537d..33f68c877 100644
--- a/plugins/talk-plugin-like/client/LikeButton.js
+++ b/plugins/talk-plugin-like/client/LikeButton.js
@@ -35,7 +35,7 @@ class LikeButton extends React.Component {
     return (
       <div className={cn(styles.container, `${plugin}-container`)}>
         <button
-          className={cn(styles.button, {[styles.liked]: alreadyReacted}, `${plugin}-button`)}
+          className={cn(styles.button, {[styles.liked, 'likedButton']: alreadyReacted}, `${plugin}-button`)}
           onClick={this.handleClick}
         >
           <span className={cn(`${plugin}-label`, styles.label)}>
diff --git a/plugins/talk-plugin-respect/client/RespectButton.js b/plugins/talk-plugin-respect/client/RespectButton.js
index e77fd61c8..997337b4b 100644
--- a/plugins/talk-plugin-respect/client/RespectButton.js
+++ b/plugins/talk-plugin-respect/client/RespectButton.js
@@ -35,7 +35,7 @@ class RespectButton extends React.Component {
     return (
       <div className={cn(styles.container, `${plugin}-container`)}>
         <button
-          className={cn(styles.button, {[styles.respected]: alreadyReacted}, `${plugin}-button`)}
+          className={cn(styles.button, {[styles.respected, 'respectedButton']: alreadyReacted}, `${plugin}-button`)}
           onClick={this.handleClick}
         >
           <span className={cn(`${plugin}-label`, styles.label)}>

From 7328926ad75ab4ae5c74f2ce9e87729c93914138 Mon Sep 17 00:00:00 2001
From: Ryan Yun <ryan.yun@dowjones.com>
Date: Fri, 22 Sep 2017 11:20:06 -0400
Subject: [PATCH 04/12] link button needs a span tag around button label

---
 .../client/components/PermalinkButton.js                      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/plugins/talk-plugin-permalink/client/components/PermalinkButton.js b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js
index 5c05b0438..80f260d54 100644
--- a/plugins/talk-plugin-permalink/client/components/PermalinkButton.js
+++ b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js
@@ -73,7 +73,9 @@ export default class PermalinkButton extends React.Component {
             ref={(ref) => this.linkButton = ref}
             onClick={this.toggle}
             className={cn(`${name}-button`, styles.button)}>
-            {t('permalink')}
+            <span className='permalinkButtonLabel'>
+              {t('permalink')}
+            </span>
             <Icon name="link" className={styles.icon}/>
           </button>
 

From 66518f50dd91cf53148e0a2c6c23455a8102bc33 Mon Sep 17 00:00:00 2001
From: Ryan Yun <ryan.yun@dowjones.com>
Date: Fri, 22 Sep 2017 11:41:54 -0400
Subject: [PATCH 05/12] add class name to off topic tag

---
 plugins/talk-plugin-offtopic/client/components/OffTopicTag.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/plugins/talk-plugin-offtopic/client/components/OffTopicTag.js b/plugins/talk-plugin-offtopic/client/components/OffTopicTag.js
index 5b8de8875..265a175c5 100644
--- a/plugins/talk-plugin-offtopic/client/components/OffTopicTag.js
+++ b/plugins/talk-plugin-offtopic/client/components/OffTopicTag.js
@@ -2,12 +2,13 @@ import React from 'react';
 import styles from './OffTopicTag.css';
 import {t} from 'plugin-api/beta/client/services';
 import {isTagged} from 'plugin-api/beta/client/utils';
+import cn from 'classnames';
 
 export default (props) => (
   <span>
     {
       isTagged(props.comment.tags, 'OFF_TOPIC') && props.depth === 0 ? (
-        <span className={styles.tag}>
+        <span className={cn(styles.tag, 'offTopicTagLabel')}>
           {t('off_topic')}
         </span>
       ) : null

From d60b8699376bd500afa5f9f8c004a84aa99f2d36 Mon Sep 17 00:00:00 2001
From: Ryan Yun <ryan.yun@dowjones.com>
Date: Fri, 22 Sep 2017 11:48:04 -0400
Subject: [PATCH 06/12] add class name to featured tag

---
 plugins/talk-plugin-featured-comments/client/components/Tag.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.js b/plugins/talk-plugin-featured-comments/client/components/Tag.js
index e7e75a0e6..4c65a52ec 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tag.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Tag.js
@@ -34,7 +34,7 @@ export default class Tag extends React.Component {
       <span className={cn(styles.tagContainer, styles.noSelect)} onMouseEnter={this.showTooltip}
         onMouseLeave={this.hideTooltip} onTouchStart={this.showTooltip}
         onTouchEnd={this.hideTooltip} >
-        <span className={cn(styles.tag, styles.noSelect, {[styles.on]: tooltip})}>
+        <span className={cn(styles.tag, styles.noSelect, {[styles.on]: tooltip}, 'featuredTagLabel')}>
           {t('talk-plugin-featured-comments.featured')}
         </span>
         {tooltip && <Tooltip className={styles.tooltip} />}

From 605c87a7998c123b64615f8a131e660650043b72 Mon Sep 17 00:00:00 2001
From: Ryan Yun <ryan.yun@dowjones.com>
Date: Fri, 22 Sep 2017 12:16:31 -0400
Subject: [PATCH 07/12] featured and all comments have same left and right
 action container class names

---
 client/coral-embed-stream/src/components/Comment.js           | 4 ++--
 .../client/components/Comment.js                              | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
index 9d3cb0218..622ec5e29 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/components/Comment.js
@@ -529,7 +529,7 @@ export default class Comment extends React.Component {
             <div className={cn(styles.footer, 'talk-stream-comment-footer')}>
               {isActive &&
                 <div className={'talk-stream-comment-actions-container'}>
-                  <div className="commentActionsLeft comment__action-container">
+                  <div className="commentActionsLeftContainer commentActionsLeft comment__action-container">
                     <Slot
                       fill="commentReactions"
                       {...slotProps}
@@ -545,7 +545,7 @@ export default class Comment extends React.Component {
                         />
                       </ActionButton>}
                   </div>
-                  <div className="commentActionsRight comment__action-container">
+                  <div className="commentActionsRightContainer commentActionsRight comment__action-container">
                     <Slot
                       fill="commentActions"
                       wrapperComponent={ActionButton}
diff --git a/plugins/talk-plugin-featured-comments/client/components/Comment.js b/plugins/talk-plugin-featured-comments/client/components/Comment.js
index a8c7cb6f1..31852d63d 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Comment.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Comment.js
@@ -46,7 +46,7 @@ class Comment extends React.Component {
         </div>
 
         <footer className={cn(styles.footer, `${pluginName}-comment-footer`)}>
-          <div className={cn(styles.reactionsContainer, `${pluginName}-comment-reactions`)}>
+          <div className={cn('commentActionsLeftContainer', styles.reactionsContainer, `${pluginName}-comment-reactions`)}>
 
             <Slot
               fill="commentReactions"
@@ -64,7 +64,7 @@ class Comment extends React.Component {
               asset={asset}
             />
           </div>
-          <div className={cn(styles.actionsContainer, `${pluginName}-comment-actions`)}>
+          <div className={cn('commentActionsRightContainer', styles.actionsContainer, `${pluginName}-comment-actions`)}>
             <button className={cn(styles.goTo, `${pluginName}-comment-go-to`)} onClick={this.viewComment}>
               <Icon name="forum" className={styles.repliesIcon} /> {comment.replyCount} | {t('talk-plugin-featured-comments.go_to_conversation')} <Icon name="keyboard_arrow_right" className={styles.goToIcon} />
             </button>

From 4c5f8b3359aec0bd0221b7d97b5775db7c9d691d Mon Sep 17 00:00:00 2001
From: Ryan Yun <ryan.yun@dowjones.com>
Date: Fri, 22 Sep 2017 12:31:55 -0400
Subject: [PATCH 08/12] add class name to submit button on configure comment
 stream form

---
 client/coral-configure/components/ConfigureCommentStream.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/coral-configure/components/ConfigureCommentStream.js b/client/coral-configure/components/ConfigureCommentStream.js
index ec5a43c15..1447e9676 100644
--- a/client/coral-configure/components/ConfigureCommentStream.js
+++ b/client/coral-configure/components/ConfigureCommentStream.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import {Button, Checkbox} from 'coral-ui';
 import QuestionBoxBuilder from './QuestionBoxBuilder';
+import cn from 'classnames';
 
 import styles from './ConfigureCommentStream.css';
 
@@ -13,7 +14,7 @@ export default ({handleChange, handleApply, changed, ...props}) => (
         <h3>{t('configure.title')}</h3>
         <Button
           type="submit"
-          className={styles.apply}
+          className={cn(styles.apply, 'configureCommentStreamSubmitButton')}
           onChange={handleChange}
           cStyle={changed ? 'green' : 'darkGrey'} >
           {t('configure.apply')}

From 613876858851d0f4cbc7b034a7583f3528885be2 Mon Sep 17 00:00:00 2001
From: Ryan Yun <ryan.yun@dowjones.com>
Date: Fri, 22 Sep 2017 12:34:27 -0400
Subject: [PATCH 09/12] add class names to moderation link

---
 client/talk-plugin-moderation/ModerationLink.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/talk-plugin-moderation/ModerationLink.js b/client/talk-plugin-moderation/ModerationLink.js
index 6a2b43361..3e52fd128 100644
--- a/client/talk-plugin-moderation/ModerationLink.js
+++ b/client/talk-plugin-moderation/ModerationLink.js
@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './styles.css';
+import cn from 'classnames';
 
 import t from 'coral-framework/services/i18n';
 import {BASE_PATH} from 'coral-framework/constants/url';
 
 const ModerationLink = (props) => props.isAdmin ? (
-  <div className={styles.moderationLink}>
-    <a href={`${BASE_PATH}admin/moderate/${props.assetId}`} target="_blank">
+  <div className={cn(styles.moderationLink, 'moderationLinkContainer')}>
+    <a className='moderationLink' href={`${BASE_PATH}admin/moderate/${props.assetId}`} target="_blank">
       {t('moderate_this_stream')}
     </a>
   </div>

From 3f90f72bee9c9311743a100ad784e975673bccce Mon Sep 17 00:00:00 2001
From: Ryan Yun <ryan.yun@dowjones.com>
Date: Mon, 25 Sep 2017 12:33:59 -0400
Subject: [PATCH 10/12] update classes to follow talk naming convention

---
 client/coral-configure/components/ConfigureCommentStream.js   | 2 +-
 client/coral-configure/containers/ConfigureStreamContainer.js | 2 +-
 client/coral-settings/containers/ProfileContainer.js          | 2 +-
 client/talk-plugin-moderation/ModerationLink.js               | 4 ++--
 .../talk-plugin-featured-comments/client/components/Tag.js    | 2 +-
 plugins/talk-plugin-like/client/LikeButton.js                 | 2 +-
 plugins/talk-plugin-offtopic/client/components/OffTopicTag.js | 2 +-
 .../client/components/PermalinkButton.js                      | 2 +-
 plugins/talk-plugin-respect/client/RespectButton.js           | 2 +-
 9 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/client/coral-configure/components/ConfigureCommentStream.js b/client/coral-configure/components/ConfigureCommentStream.js
index 1447e9676..20250ee86 100644
--- a/client/coral-configure/components/ConfigureCommentStream.js
+++ b/client/coral-configure/components/ConfigureCommentStream.js
@@ -14,7 +14,7 @@ export default ({handleChange, handleApply, changed, ...props}) => (
         <h3>{t('configure.title')}</h3>
         <Button
           type="submit"
-          className={cn(styles.apply, 'configureCommentStreamSubmitButton')}
+          className={cn(styles.apply, 'talk-embed-stream-configuration-submit-button')}
           onChange={handleChange}
           cStyle={changed ? 'green' : 'darkGrey'} >
           {t('configure.apply')}
diff --git a/client/coral-configure/containers/ConfigureStreamContainer.js b/client/coral-configure/containers/ConfigureStreamContainer.js
index 6b1716930..0caa467f1 100644
--- a/client/coral-configure/containers/ConfigureStreamContainer.js
+++ b/client/coral-configure/containers/ConfigureStreamContainer.js
@@ -102,7 +102,7 @@ class ConfigureStreamContainer extends Component {
     const closedTimeout = dirtySettings.closedTimeout;
 
     return (
-      <div className='configureContainer'>
+      <div className='talk-embed-stream-configuration-container'>
         <ConfigureCommentStream
           handleChange={this.handleChange}
           handleApply={this.handleApply}
diff --git a/client/coral-settings/containers/ProfileContainer.js b/client/coral-settings/containers/ProfileContainer.js
index 4531ff7d3..9fdd4454c 100644
--- a/client/coral-settings/containers/ProfileContainer.js
+++ b/client/coral-settings/containers/ProfileContainer.js
@@ -71,7 +71,7 @@ class ProfileContainer extends Component {
     const emailAddress = localProfile && localProfile.id;
 
     return (
-      <div className='profileContainer'>
+      <div className='talk-embed-stream-profile-container'>
         <h2>{user.username}</h2>
         {emailAddress ? <p>{emailAddress}</p> : null}
 
diff --git a/client/talk-plugin-moderation/ModerationLink.js b/client/talk-plugin-moderation/ModerationLink.js
index 3e52fd128..50808984e 100644
--- a/client/talk-plugin-moderation/ModerationLink.js
+++ b/client/talk-plugin-moderation/ModerationLink.js
@@ -7,8 +7,8 @@ import t from 'coral-framework/services/i18n';
 import {BASE_PATH} from 'coral-framework/constants/url';
 
 const ModerationLink = (props) => props.isAdmin ? (
-  <div className={cn(styles.moderationLink, 'moderationLinkContainer')}>
-    <a className='moderationLink' href={`${BASE_PATH}admin/moderate/${props.assetId}`} target="_blank">
+  <div className={cn(styles.moderationLink, 'talk-embed-stream-moderation-container')}>
+    <a className='talk-embed-stream-moderation-link' href={`${BASE_PATH}admin/moderate/${props.assetId}`} target="_blank">
       {t('moderate_this_stream')}
     </a>
   </div>
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.js b/plugins/talk-plugin-featured-comments/client/components/Tag.js
index 4c65a52ec..1d8a1c00f 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tag.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Tag.js
@@ -34,7 +34,7 @@ export default class Tag extends React.Component {
       <span className={cn(styles.tagContainer, styles.noSelect)} onMouseEnter={this.showTooltip}
         onMouseLeave={this.hideTooltip} onTouchStart={this.showTooltip}
         onTouchEnd={this.hideTooltip} >
-        <span className={cn(styles.tag, styles.noSelect, {[styles.on]: tooltip}, 'featuredTagLabel')}>
+        <span className={cn(styles.tag, styles.noSelect, {[styles.on]: tooltip}, 'talk-stream-comment-featured-tag-label')}>
           {t('talk-plugin-featured-comments.featured')}
         </span>
         {tooltip && <Tooltip className={styles.tooltip} />}
diff --git a/plugins/talk-plugin-like/client/LikeButton.js b/plugins/talk-plugin-like/client/LikeButton.js
index 33f68c877..3055fbdf5 100644
--- a/plugins/talk-plugin-like/client/LikeButton.js
+++ b/plugins/talk-plugin-like/client/LikeButton.js
@@ -35,7 +35,7 @@ class LikeButton extends React.Component {
     return (
       <div className={cn(styles.container, `${plugin}-container`)}>
         <button
-          className={cn(styles.button, {[styles.liked, 'likedButton']: alreadyReacted}, `${plugin}-button`)}
+          className={cn(styles.button, {[styles.liked, 'talk-plugin-like-liked']: alreadyReacted}, `${plugin}-button`)}
           onClick={this.handleClick}
         >
           <span className={cn(`${plugin}-label`, styles.label)}>
diff --git a/plugins/talk-plugin-offtopic/client/components/OffTopicTag.js b/plugins/talk-plugin-offtopic/client/components/OffTopicTag.js
index 265a175c5..0e643ca04 100644
--- a/plugins/talk-plugin-offtopic/client/components/OffTopicTag.js
+++ b/plugins/talk-plugin-offtopic/client/components/OffTopicTag.js
@@ -8,7 +8,7 @@ export default (props) => (
   <span>
     {
       isTagged(props.comment.tags, 'OFF_TOPIC') && props.depth === 0 ? (
-        <span className={cn(styles.tag, 'offTopicTagLabel')}>
+        <span className={cn(styles.tag, 'talk-stream-comment-offtopic-tag-label')}>
           {t('off_topic')}
         </span>
       ) : null
diff --git a/plugins/talk-plugin-permalink/client/components/PermalinkButton.js b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js
index 80f260d54..d470ed2c9 100644
--- a/plugins/talk-plugin-permalink/client/components/PermalinkButton.js
+++ b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js
@@ -73,7 +73,7 @@ export default class PermalinkButton extends React.Component {
             ref={(ref) => this.linkButton = ref}
             onClick={this.toggle}
             className={cn(`${name}-button`, styles.button)}>
-            <span className='permalinkButtonLabel'>
+            <span className='talk-plugin-permalink-button-label'>
               {t('permalink')}
             </span>
             <Icon name="link" className={styles.icon}/>
diff --git a/plugins/talk-plugin-respect/client/RespectButton.js b/plugins/talk-plugin-respect/client/RespectButton.js
index 997337b4b..2bc7e455f 100644
--- a/plugins/talk-plugin-respect/client/RespectButton.js
+++ b/plugins/talk-plugin-respect/client/RespectButton.js
@@ -35,7 +35,7 @@ class RespectButton extends React.Component {
     return (
       <div className={cn(styles.container, `${plugin}-container`)}>
         <button
-          className={cn(styles.button, {[styles.respected, 'respectedButton']: alreadyReacted}, `${plugin}-button`)}
+          className={cn(styles.button, {[styles.respected, 'talk-plugin-respect-respected']: alreadyReacted}, `${plugin}-button`)}
           onClick={this.handleClick}
         >
           <span className={cn(`${plugin}-label`, styles.label)}>

From 12047d1ae157260cf3f8a1b12b722f14eebe9daf Mon Sep 17 00:00:00 2001
From: Ryan Yun <ryan.yun@dowjones.com>
Date: Wed, 27 Sep 2017 11:20:57 -0400
Subject: [PATCH 11/12] fix typo for dynamic class names for like and respect
 buttons

---
 plugins/talk-plugin-like/client/LikeButton.js       | 2 +-
 plugins/talk-plugin-respect/client/RespectButton.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/talk-plugin-like/client/LikeButton.js b/plugins/talk-plugin-like/client/LikeButton.js
index 3055fbdf5..cc65e0d58 100644
--- a/plugins/talk-plugin-like/client/LikeButton.js
+++ b/plugins/talk-plugin-like/client/LikeButton.js
@@ -35,7 +35,7 @@ class LikeButton extends React.Component {
     return (
       <div className={cn(styles.container, `${plugin}-container`)}>
         <button
-          className={cn(styles.button, {[styles.liked, 'talk-plugin-like-liked']: alreadyReacted}, `${plugin}-button`)}
+          className={cn(styles.button, {[`${styles.liked} talk-plugin-like-liked`]: alreadyReacted}, `${plugin}-button`)}
           onClick={this.handleClick}
         >
           <span className={cn(`${plugin}-label`, styles.label)}>
diff --git a/plugins/talk-plugin-respect/client/RespectButton.js b/plugins/talk-plugin-respect/client/RespectButton.js
index 2bc7e455f..18bde9542 100644
--- a/plugins/talk-plugin-respect/client/RespectButton.js
+++ b/plugins/talk-plugin-respect/client/RespectButton.js
@@ -35,7 +35,7 @@ class RespectButton extends React.Component {
     return (
       <div className={cn(styles.container, `${plugin}-container`)}>
         <button
-          className={cn(styles.button, {[styles.respected, 'talk-plugin-respect-respected']: alreadyReacted}, `${plugin}-button`)}
+          className={cn(styles.button, {[`${styles.respected} talk-plugin-respect-respected`]: alreadyReacted}, `${plugin}-button`)}
           onClick={this.handleClick}
         >
           <span className={cn(`${plugin}-label`, styles.label)}>

From 36ba7367d16e1cbfd862d0d6c52a7ef518541c70 Mon Sep 17 00:00:00 2001
From: Ryan Yun <ryan.yun@dowjones.com>
Date: Fri, 29 Sep 2017 10:57:23 -0400
Subject: [PATCH 12/12] add talk-embed-stream- prefix to classes

---
 client/coral-embed-stream/src/components/Comment.js           | 4 ++--
 .../client/components/Comment.js                              | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
index 4d9947769..ca0aef90f 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/components/Comment.js
@@ -529,7 +529,7 @@ export default class Comment extends React.Component {
             <div className={cn(styles.footer, 'talk-stream-comment-footer')}>
               {isActive &&
                 <div className={'talk-stream-comment-actions-container'}>
-                  <div className="commentActionsLeftContainer commentActionsLeft comment__action-container">
+                  <div className="talk-embed-stream-comment-actions-container-left commentActionsLeft comment__action-container">
                     <Slot
                       fill="commentReactions"
                       {...slotProps}
@@ -545,7 +545,7 @@ export default class Comment extends React.Component {
                         />
                       </ActionButton>}
                   </div>
-                  <div className="commentActionsRightContainer commentActionsRight comment__action-container">
+                  <div className="talk-embed-stream-comment-actions-container-right commentActionsRight comment__action-container">
                     <Slot
                       fill="commentActions"
                       wrapperComponent={ActionButton}
diff --git a/plugins/talk-plugin-featured-comments/client/components/Comment.js b/plugins/talk-plugin-featured-comments/client/components/Comment.js
index 57c2b0392..0c66bc103 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Comment.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Comment.js
@@ -51,7 +51,7 @@ class Comment extends React.Component {
         </div>
 
         <footer className={cn(styles.footer, `${pluginName}-comment-footer`)}>
-          <div className={cn('commentActionsLeftContainer', styles.reactionsContainer, `${pluginName}-comment-reactions`)}>
+          <div className={cn('talk-embed-stream-comment-actions-container-left', styles.reactionsContainer, `${pluginName}-comment-reactions`)}>
 
             <Slot
               fill="commentReactions"
@@ -69,7 +69,7 @@ class Comment extends React.Component {
               asset={asset}
             />
           </div>
-          <div className={cn('commentActionsRightContainer', styles.actionsContainer, `${pluginName}-comment-actions`)}>
+          <div className={cn('talk-embed-stream-comment-actions-container-right', styles.actionsContainer, `${pluginName}-comment-actions`)}>
             <button className={cn(styles.goTo, `${pluginName}-comment-go-to`)} onClick={this.viewComment}>
               <Icon name="forum" className={styles.repliesIcon} /> {comment.replyCount} | {t('talk-plugin-featured-comments.go_to_conversation')} <Icon name="keyboard_arrow_right" className={styles.goToIcon} />
             </button>