From 70d081df4a79d9abd2e05b479f03c91d26d914fb Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 28 Feb 2018 10:05:28 -0300
Subject: [PATCH] Minimal styling and old code removal

---
 .../tabs/stream/components/CommentForm.css    |  2 +-
 .../src/tabs/stream/components/CommentForm.js |  1 -
 .../src/tabs/stream/components/ReplyBox.css   |  3 +++
 .../src/tabs/stream/components/ReplyBox.js    |  9 ++++---
 .../client/components/Editor.css              | 26 ++++++++-----------
 .../client/components/Editor.js               |  6 ++++-
 6 files changed, 25 insertions(+), 22 deletions(-)
 create mode 100644 client/coral-embed-stream/src/tabs/stream/components/ReplyBox.css

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 5a1e66412..ebea11033 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.css
+++ b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.css
@@ -1,11 +1,11 @@
 .buttonContainer {
   display: flex;
   justify-content: flex-end;
+  margin-top: 10px;
 }
 
 .button {
   float: right;
-  margin-top: 10px;
   padding: 5px 10px;
   background: rgb(105, 105, 105);
   color: #FFF;
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 ff005bb31..a9ea8f150 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
@@ -112,7 +112,6 @@ export class CommentForm extends React.Component {
           disabled={disableTextArea}
           charCountEnable={this.props.charCountEnable}
           maxCharCount={this.props.maxCharCount}
-          comment={this.props.comment}
         />
         <div className={cn(styles.buttonContainer, `${name}-button-container`)}>
           {this.props.buttonContainerStart}
diff --git a/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.css b/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.css
new file mode 100644
index 000000000..b9a7484a2
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.css
@@ -0,0 +1,3 @@
+.container {
+  margin-top: 10px;
+}
\ No newline at end of file
diff --git a/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.js b/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.js
index efd083c74..12d074fdd 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.js
@@ -1,11 +1,13 @@
-import React, { Component } from 'react';
+import React from 'react';
+import cn from 'classnames';
 import PropTypes from 'prop-types';
 import CommentBox from '../containers/CommentBox';
+import styles from './ReplyBox.css';
 
 // TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
 const name = 'talk-plugin-replies';
 
-class ReplyBox extends Component {
+class ReplyBox extends React.Component {
   componentDidMount() {
     // TODO: (kiwi) This does not follow best practices, better to move this logic into the component.
     document.getElementById(`comment-draft_${this.props.parentId}`).focus();
@@ -17,7 +19,6 @@ class ReplyBox extends Component {
 
   render() {
     const {
-      styles,
       postComment,
       assetId,
       currentUser,
@@ -28,7 +29,7 @@ class ReplyBox extends Component {
       charCountEnable,
     } = this.props;
     return (
-      <div className={`${name}-textarea`} style={styles && styles.container}>
+      <div className={cn(styles.container, `${name}-textarea`)}>
         <CommentBox
           maxCharCount={maxCharCount}
           charCountEnable={charCountEnable}
diff --git a/plugins/talk-plugin-rich-text-pell/client/components/Editor.css b/plugins/talk-plugin-rich-text-pell/client/components/Editor.css
index 294430753..4561e7c6b 100644
--- a/plugins/talk-plugin-rich-text-pell/client/components/Editor.css
+++ b/plugins/talk-plugin-rich-text-pell/client/components/Editor.css
@@ -10,24 +10,22 @@
   font-style: unset;
 }
 
+.button > i {
+  vertical-align: middle;
+}
+
 .button {
-  top: 0;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  border-radius: 4px;
-  padding: 0;
-  font-size: 14px;
-  margin-top: -2px;
   background-color: transparent;
-  border: solid 1px transparent;
-  cursor: pointer;
-  height: 30px;
-  outline: 0;
-  width: 30px;
+  padding: 3px;
+  border: none;
+  color: #4e4e4e;
+  margin-right: 3px;
 }
 
 .button:hover{
-  background: #fcfcfc;
+  cursor: pointer;
+  border-radius: 3px;
+  background-color: #eae8e8;
 }
 
 .actionBar {
@@ -36,8 +34,6 @@
   border-top: 1px solid #bbb;
   border-left: 1px solid #bbb;
   border-right: 1px solid #bbb;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
 }
 
 .container {
diff --git a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
index d2f0b56e8..2faedb633 100644
--- a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
+++ b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
@@ -62,7 +62,11 @@ class Editor extends React.Component {
 Editor.defaultProps = {
   defaultContent: '',
   styleWithCSS: false,
-  actions: ['bold', 'italic', 'quote'],
+  actions: [
+    { name: 'bold', icon: '<i class="material-icons">format_bold</i>' },
+    { name: 'italic', icon: '<i class="material-icons">format_italic</i>' },
+    { name: 'quote', icon: '<i class="material-icons">format_quote</i>' },
+  ],
   classNames: {
     button: '',
     content: '',