Adding containers and components

plugins/talk-plugin-featured-comments/client/components/FeaturedConfirmation.css

@@ -0,0 +1,38 @@
+.dialog {
+  border: none;
+  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
+  width: 400px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 20px;
+  border-radius: 4px;
+}
+  
+.header {
+  color: black;
+  font-size: 1.5em;
+  font-weight: 500;
+  margin: 0 0 8px 0;
+}
+  
+.close {
+  display: block;
+  position: absolute;
+  top: 24px;
+  right: 20px;
+}
+
+  
+.cancel {
+  margin-right: 5px;
+}
+
+.perform {
+  min-width: 90px;
+}
+
+.buttons {
+  margin-top: 8px;
+  margin-bottom: 6px;
+  text-align: right;
+}

plugins/talk-plugin-featured-comments/client/components/FeaturedConfirmation.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+import {Dialog} from 'coral-ui';
+import styles from './FeaturedConfirmation.css';
+
+import Button from 'coral-ui/components/Button';
+import t from 'coral-framework/services/i18n';
+
+const FeaturedConfirmation = ({open, onCancel, onPerform}) => (
+  <Dialog
+    className={cn(styles.dialog, 'talk-featured-dialog')}
+    id="banUserDialog"
+    open={open}
+    onCancel={onCancel} >
+    <span className={styles.close} onClick={onCancel}>×</span>
+    <div className={styles.header}>
+      <h2>
+        {t('talk-plugin-featured-comments.feature_comment')}
+      </h2>
+    </div>
+    <div className={styles.separator}>
+      <h3>{t('talk-plugin-featured-comments.are_you_sure')}</h3>
+    </div>
+    <div className={styles.buttons}>
+      <Button
+        className={cn(styles.cancel, 'talk-featured-dialog-button-cancel')}
+        cStyle="cancel"
+        onClick={onCancel}
+        raised >
+        {t('talk-plugin-featured-comments.cancel')}
+      </Button>
+      <Button 
+        className={cn(styles.perform, 'talk-featured-dialog-button-confirm')}
+        cStyle="black"
+        onClick={onPerform}
+        raised >
+        {t('talk-plugin-featured-comments.yes_feature_comment')}
+      </Button>
+    </div>
+  </Dialog>
+);
+
+FeaturedConfirmation.propTypes = {
+  open: PropTypes.bool,
+  onPerform: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+
+export default FeaturedConfirmation;

plugins/talk-plugin-featured-comments/client/containers/FeaturedConfirmation.js

@@ -0,0 +1,17 @@
+import {compose} from 'react-apollo';
+import {bindActionCreators} from 'redux';
+import FeaturedConfirmation from '../components/FeaturedConfirmation';
+import {withTags, connect} from 'plugin-api/beta/client/hocs';
+import {closeMenu} from 'plugins/talk-plugin-moderation-actions/client/actions';
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    closeMenu,
+  }, dispatch);
+
+const enhance = compose(
+  withTags('featured'),
+  connect(null, mapDispatchToProps),
+);
+
+export default enhance(FeaturedConfirmation);

plugins/talk-plugin-featured-comments/client/index.js

@@ -6,6 +6,7 @@ import update from 'immutability-helper';
 import ModTag from './containers/ModTag';
 import ModActionButton from './containers/ModActionButton';
 import ModSubscription from './containers/ModSubscription';
+import FeaturedConfirmation from './containers/FeaturedConfirmation';
 import {gql} from 'react-apollo';
 
 import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils';
@@ -18,7 +19,7 @@ export default {
     streamTabPanes: [TabPane],
     commentInfoBar: [Tag],
     moderationActions: [ModActionButton],
-    adminModeration: [ModSubscription],
+    adminModeration: [ModSubscription, FeaturedConfirmation],
     adminCommentInfoBar: [ModTag],
   },
   mutations: {