From 9cfa5b6a0f881f32bfea16c9ae87f81f0cfde443 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 21 Feb 2018 11:15:23 -0300
Subject: [PATCH] Removing old styles from default css

---
 .../tabs/stream/components/CommentForm.css    | 15 ++++++
 .../src/tabs/stream/components/CommentForm.js |  3 +-
 .../src/tabs/stream/components/DraftArea.css  |  9 ++++
 .../src/tabs/stream/components/DraftArea.js   | 13 ++---
 .../stream/components/DraftAreaContent.css    | 11 +++++
 ...TextAreaDefault.js => DraftAreaContent.js} | 12 +++--
 .../src/tabs/stream/containers/CommentBox.js  |  2 +-
 client/coral-embed-stream/style/default.css   | 47 -------------------
 .../client/components/OffTopicCheckbox.css    |  1 +
 9 files changed, 53 insertions(+), 60 deletions(-)
 create mode 100644 client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.css
 rename client/coral-embed-stream/src/tabs/stream/components/{TextAreaDefault.js => DraftAreaContent.js} (65%)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.css b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.css
index 23b6564b5..5a1e66412 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.css
+++ b/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.
  */
diff --git a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
index 28b8bb668..a9ea8f150 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
+++ b/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()
diff --git a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.css b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.css
index 04bde1d0d..44e55e4de 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
index 806592795..c1678d0a7 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/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" />
diff --git a/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.css b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.css
new file mode 100644
index 000000000..9de435aea
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/client/coral-embed-stream/src/tabs/stream/components/TextAreaDefault.js b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
similarity index 65%
rename from client/coral-embed-stream/src/tabs/stream/components/TextAreaDefault.js
rename to client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
index 0893e6d95..e23f7b9eb 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/TextAreaDefault.js
+++ b/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;
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
index a64356578..be2e7b337 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/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
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index d6e223724..98416d68d 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/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;
diff --git a/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.css b/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.css
index 1a6bda2a6..17e8b4c30 100644
--- a/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.css
+++ b/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.css
@@ -1,5 +1,6 @@
 .offTopic {
   height: 100%;
+  margin-top: 10px;
 }
 
 .offTopicLabel {