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}
/>
{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 (
-
+
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: 'format_bold' },
+ { name: 'italic', icon: 'format_italic' },
+ { name: 'quote', icon: 'format_quote' },
+ ],
classNames: {
button: '',
content: '',