Minimal styling and old code removal

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;

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}

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

@@ -0,0 +1,3 @@
+.container {
+  margin-top: 10px;
+}

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}

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 {

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: '',