diff --git a/client/coral-embed-stream/src/Comment.css b/client/coral-embed-stream/src/Comment.css
index 8d7c7ebf9..5fe5401fe 100644
--- a/client/coral-embed-stream/src/Comment.css
+++ b/client/coral-embed-stream/src/Comment.css
@@ -13,13 +13,54 @@
pointer-events: none;
}
-.topRightMenu {
+/* element in the top right of the Comment */
+.topRight {
float: right;
+ margin-top: 10px;
text-align: right;
+}
+
+.topRight > * {
+ text-align: initial;
+}
+
+.topRight .popover {
+ margin-top: 1em;
+ right: 0px;
+}
+
+.topRight .popoverMenuOpen .link {
+ padding-bottom: 0.125em;
+ border-bottom: 2px solid currentColor;
+}
+
+.topRightMenu {
cursor: pointer;
margin-top: 5px;
}
-.topRightMenu > * {
- text-align: initial;
+.link {
+ color: #2376D8;
+ cursor: pointer;
+}
+
+.popover {
+ position: absolute;
+ z-index: 1;
+}
+
+/* Wizard used for Ignore User, Delete Comment confirmations */
+.Wizard {
+ background-color: #2E343B;
+ color: white;
+ padding: 1em;
+ max-width: 220px; /* consider moving to better class */
+}
+
+.Wizard header {
+ font-weight: bold;
+}
+
+.Wizard .textAlignRight {
+ text-align: right;
}
diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index 63b3ef8dc..b5a7dfeb3 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/client/coral-embed-stream/src/Comment.js
@@ -23,6 +23,8 @@ import Slot from 'coral-framework/components/Slot';
import IgnoredCommentTombstone from './IgnoredCommentTombstone';
import {TopRightMenu} from './TopRightMenu';
import {getActionSummary, getTotalActionCount, iPerformedThisAction} from 'coral-framework/utils';
+import {Button} from 'coral-ui';
+import classnames from 'classnames';
import styles from './Comment.css';
@@ -161,6 +163,55 @@ class Comment extends React.Component {
tag: BEST_TAG,
}), () => 'Failed to remove best comment tag');
+ class PopoverMenu extends React.Component {
+ static propTypes = {
+ children: PropTypes.node,
+ Popover: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+ openClassName: PropTypes.string,
+ }
+ constructor(props) {
+ super(props);
+ this.toggle = this.toggle.bind(this);
+ this.close = this.close.bind(this);
+ this.state = {
+ isOpen: false
+ };
+ }
+ toggle() {
+ this.setState({isOpen: ! this.state.isOpen});
+ }
+ close() {
+ this.setState({isOpen: false});
+ }
+ render() {
+ const {isOpen} = this.state;
+ const {children, Popover, openClassName} = this.props;
+ return (
+
+
+ { children }
+
+
+ { isOpen ?
Are you sure you want to delete that comment
+