Removing old styles from default css

client/coral-embed-stream/src/tabs/stream/components/CommentForm.css

@@ -1,3 +1,18 @@
+.buttonContainer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.button {
+  float: right;
+  margin-top: 10px;
+  padding: 5px 10px;
+  background: rgb(105, 105, 105);
+  color: #FFF;
+  border: none;
+  border-radius: 2px;
+}
+
 /**
  * Example loading state animations on the button.
  */

client/coral-embed-stream/src/tabs/stream/components/CommentForm.js

@@ -113,7 +113,7 @@ export class CommentForm extends React.Component {
           charCountEnable={this.props.charCountEnable}
           maxCharCount={this.props.maxCharCount}
         />
-        <div className={`${name}-button-container`}>
+        <div className={cn(styles.buttonContainer, `${name}-button-container`)}>
           {this.props.buttonContainerStart}
           {typeof this.props.onCancel === 'function' && (
             <Button
@@ -130,6 +130,7 @@ export class CommentForm extends React.Component {
               disableSubmitButton ? 'lightGrey' : this.props.submitButtonCStyle
             }
             className={cn(
+              styles.button,
               `${name}-button`,
               submitButtonClassName,
               this.getButtonClassName()

client/coral-embed-stream/src/tabs/stream/components/DraftArea.css

@@ -1,3 +1,12 @@
 .textArea {
   width: 100%;
+}
+
+.charCount {
+  color: #ccc;
+  text-align: right;
+}
+
+.charMax {
+  color: #d50000;
 }

client/coral-embed-stream/src/tabs/stream/components/DraftArea.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 import Slot from 'coral-framework/components/Slot';
-import TextAreaDefault from './TextAreaDefault';
+import DraftAreaContent from './DraftAreaContent';
 import styles from './DraftArea.css';
 
 // TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
@@ -14,8 +14,9 @@ import styles from './DraftArea.css';
 export default class DraftArea extends React.Component {
   renderCharCount() {
     const { value, maxCharCount } = this.props;
-    const className = cn('talk-plugin-commentbox-char-count', {
-      ['talk-plugin-commentbox-char-max']: value.length > maxCharCount,
+    const className = cn(styles.charCount, 'talk-draftarea-char-count', {
+      [`${styles.charMax} talk-draftarea-char-max`]:
+        value.length > maxCharCount,
     });
     const remaining = maxCharCount - value.length;
 
@@ -50,14 +51,14 @@ export default class DraftArea extends React.Component {
 
     return (
       <div>
-        <div className={'talk-plugin-commentbox-container'}>
+        <div className={cn(styles.container, 'talk-draftarea-container')}>
           <label htmlFor={id} className="screen-reader-text" aria-hidden={true}>
             {label}
           </label>
           <Slot
             fill="textArea"
-            defaultComponent={TextAreaDefault}
-            className={styles.textArea}
+            defaultComponent={DraftAreaContent}
+            className={styles.content}
             {...tASettings}
           />
           <Slot fill="commentInputArea" />

client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.css

@@ -0,0 +1,11 @@
+.content {
+  color: #262626;
+  flex: 1;
+  padding: 1em;
+  min-height: 100px;
+  margin-top: 10px;
+  font-size: 16px;
+  border: 1px solid #9E9E9E;
+  width: 100%;
+  box-sizing: border-box;
+}

client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
+import styles from './DraftAreaContent.css';
 
-const TextAreaComponent = ({
+const DraftAreaContent = ({
   value,
   placeholder,
   id,
@@ -10,7 +12,7 @@ const TextAreaComponent = ({
   disabled,
 }) => (
   <textarea
-    className={'talk-plugin-commentbox-textarea'}
+    className={cn(styles.content, 'talk-draftarea-content')}
     value={value}
     placeholder={placeholder}
     id={id}
@@ -20,11 +22,11 @@ const TextAreaComponent = ({
   />
 );
 
-TextAreaComponent.defaultProps = {
+DraftAreaContent.defaultProps = {
   rows: 3,
 };
 
-TextAreaComponent.propTypes = {
+DraftAreaContent.propTypes = {
   id: PropTypes.string,
   value: PropTypes.string,
   placeholder: PropTypes.string,
@@ -33,4 +35,4 @@ TextAreaComponent.propTypes = {
   rows: PropTypes.number,
 };
 
-export default TextAreaComponent;
+export default DraftAreaContent;

client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js

@@ -11,7 +11,7 @@ import { CommentForm } from '../components/CommentForm';
 import { notifyForNewCommentStatus } from '../helpers';
 
 // TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
-export const name = 'talk-plugin-commentbox';
+export const name = 'talk-commentbox';
 
 /**
  * Container for posting a new Comment

client/coral-embed-stream/style/default.css

@@ -112,53 +112,6 @@ body {
   position: relative;
 }
 
-/* Comment Box Styles */
-.talk-plugin-commentbox-container {
-  display: flex;
-  width: 100%;
-}
-
-.talk-plugin-commentbox-textarea {
-  color: #262626;
-  flex: 1;
-  padding: 1em;
-  min-height: 100px;
-  margin-top: 10px;
-  font-size: 16px;
-  border: 1px solid #9E9E9E;
-}
-
-.talk-plugin-commentbox-button-container {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 10px;
-}
-
-.talk-plugin-commentbox-button {
-  float: right;
-  margin-top: 10px;
-  padding: 5px 10px;
-  background: rgb(105, 105, 105);
-  color: #FFF;
-  border: none;
-  border-radius: 2px;
-}
-
-.talk-plugin-commentbox-username {
-  width: 50%;
-  padding-left: 5px;
-  margin-bottom: 5px;
-}
-
-.talk-plugin-commentbox-char-count {
-  color: #ccc;
-  text-align: right;
-}
-
-.talk-plugin-commentbox-char-max {
-  color: #d50000;
-}
-
 /* Comment styles */
 .comment {
   margin-bottom: 10px;

plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.css

@@ -1,5 +1,6 @@
 .offTopic {
   height: 100%;
+  margin-top: 10px;
 }
 
 .offTopicLabel {