diff --git a/client/coral-embed-stream/src/components/AuthorName.css b/client/coral-embed-stream/src/components/AuthorName.css
new file mode 100644
index 000000000..978c370f7
--- /dev/null
+++ b/client/coral-embed-stream/src/components/AuthorName.css
@@ -0,0 +1,4 @@
+.authorName {
+ margin-right: 5px;
+ font-weight: bold;
+}
diff --git a/client/coral-embed-stream/src/components/AuthorName.js b/client/coral-embed-stream/src/components/AuthorName.js
new file mode 100644
index 000000000..96dc52aee
--- /dev/null
+++ b/client/coral-embed-stream/src/components/AuthorName.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import styles from './AuthorName.css';
+
+const AuthorName = ({comment}) =>
+
+ {comment.user.username}
+ ;
+
+export default AuthorName;
diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
index bb6fee981..77c41b23d 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/components/Comment.js
@@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import AuthorName from 'talk-plugin-author-name/AuthorName';
import TagLabel from 'talk-plugin-tag-label/TagLabel';
import PubDate from 'talk-plugin-pubdate/PubDate';
import {ReplyBox, ReplyButton} from 'talk-plugin-replies';
@@ -26,6 +25,7 @@ import {EditableCommentContent} from './EditableCommentContent';
import {getActionSummary, iPerformedThisAction, forEachError, isCommentActive, getShallowChanges} from 'coral-framework/utils';
import t from 'coral-framework/services/i18n';
import CommentContainer from '../containers/Comment';
+import AuthorName from './AuthorName';
const isStaff = (tags) => !tags.every((t) => t.tag.name !== 'STAFF');
const hasTag = (tags, lookupTag) => !!tags.filter((t) => t.tag.name === lookupTag).length;
@@ -434,10 +434,17 @@ export default class Comment extends React.Component {
inline
/>
-
+
+
+
+
-
-
{isStaff(comment.tags) ?
Staff : null}
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 6ba376096..3fc45f952 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -238,14 +238,8 @@ body {
line-height: 1.3;
}
-.talk-plugin-author-name-text {
- display: inline-block;
- margin: 10px 5px 10px 0;
- font-weight: bold;
-}
-
-.talk-plugin-author-name-bio-flag {
- float: right;
+.talk-stream-comment-header {
+ margin: 10px 0;
}
/* Tag Labels */
diff --git a/client/talk-plugin-author-name/AuthorName.js b/client/talk-plugin-author-name/AuthorName.js
deleted file mode 100644
index 89835a742..000000000
--- a/client/talk-plugin-author-name/AuthorName.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, {Component} from 'react';
-const packagename = 'talk-plugin-author-name';
-
-export default class AuthorName extends Component {
-
- state = {showTooltip: false}
-
- handleClick = () => {
- this.setState((state) => ({
- showTooltip: !state.showTooltip
- }));
- }
-
- handleMouseLeave = () => {
- setTimeout(() => {
- this.setState({
- showTooltip: false
- });
- }, 500);
- }
-
- render () {
- const {author} = this.props;
- return (
-
- {author && author.username}
-
- );
- }
-}
diff --git a/client/talk-plugin-author-name/styles.css b/client/talk-plugin-author-name/styles.css
deleted file mode 100644
index b7870a862..000000000
--- a/client/talk-plugin-author-name/styles.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.authorName {
- color: black;
- display: inline-block;
- margin: 10px 8px 10px 0;
-}
-
-.hasBio {
- &:hover {
- cursor: pointer;
- }
-}
-
-.arrowDown {
- top: 0;
- width: 0;
- height: 0;
- margin-top: -2px;
- margin-left: 2px;
- display: inline-block;
- vertical-align: middle;
- border-bottom: 0;
- border-left: 3px solid transparent;
- border-right: 3px solid transparent;
- border-top: 3px solid #000000;
-}
-
-.arrowUp {
- width: 0;
- height: 0;
- border-top: 0;
- border-left: 3px solid transparent;
- border-right: 3px solid transparent;
- border-bottom: 3px solid black;
-}