deleting old code from default.css and building QuestionBox component

client/coral-configure/components/ConfigureCommentStream.js

@@ -65,7 +65,6 @@ export default ({handleChange, handleApply, changed, ...props}) => (
             />
           </div>
         </li>
-
       </ul>
     </div>
   </form>

client/coral-embed-stream/style/default.css

@@ -79,6 +79,12 @@ body {
 }
 
 /* Info Box Styles */
+
+.hidden  {
+  visibility: hidden;
+  display: none;
+}
+
 .talk-plugin-infobox-info {
   top: 0;
   border: 0;
@@ -93,7 +99,6 @@ body {
   border-radius: 2px;
 }
 
-
 .talk-plugin-infobox-info em{
   font-style: italic;
 }
@@ -113,66 +118,6 @@ body {
 }
 
 /* Question Box Styles */
-.talk-plugin-questionbox-info {
-  top: 0;
-  border: 0;
-  background: #F0F0F0;
-  color: black;
-  width: 100%;
-  text-align: left;
-  padding-left: 0px;
-  margin-bottom: 0px;
-  font-weight: bold;
-  font-size: 14px;
-  overflow: hidden;
-  min-height: 50px;
-  display: flex;
-}
-
-.talk-plugin-questionbox-icon.bubble{
-  position: absolute;
-  top: 8px;
-  left: 10px;
-  color: #9E9E9E;
-  font-size: 24px;
-  z-index: 0;
-}
-
-.talk-plugin-questionbox-icon.person{
-  z-index: 2;
-  top: 12px;
-  left: 12px;
-  position: absolute;
-  font-size: 33px;
-  color: #262626;
-}
-
-.talk-plugin-questionbox-box {
-  position: relative;
-  border: 0;
-  color: white;
-  padding: 20px;
-  margin-left: 0px !important;
-  margin-right: 10px;
-  display: inline-block;
-  width: 10px;
-  min-height: 100%;
-  padding: 5px 20px;
-  vertical-align: middle;
-}
-
-.talk-plugin-questionbox-content {
-  padding: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 400;
-}
-
-.hidden  {
-  visibility: hidden;
-  display: none;
-}
 
 .talk-stream-comments-container {
   position: relative;

client/talk-plugin-questionbox/QuestionBox.css

@@ -0,0 +1,60 @@
+.qbInfo {
+  top: 0;
+  border: 0;
+  background: #F0F0F0;
+  color: black;
+  width: 100%;
+  text-align: left;
+  padding-left: 0px;
+  margin-bottom: 0px;
+  font-weight: bold;
+  font-size: 14px;
+  overflow: hidden;
+  min-height: 50px;
+  display: flex;
+}
+
+.iconBubble{
+  position: absolute;
+  top: 8px;
+  left: 10px;
+  color: #9E9E9E;
+  font-size: 24px;
+  z-index: 0;
+}
+
+.iconPerson{
+  z-index: 2;
+  top: 12px;
+  left: 12px;
+  position: absolute;
+  font-size: 33px;
+  color: #262626;
+}
+
+.qbBox {
+  position: relative;
+  border: 0;
+  color: white;
+  padding: 20px;
+  margin-left: 0px !important;
+  margin-right: 10px;
+  display: inline-block;
+  width: 10px;
+  min-height: 100%;
+  padding: 5px 20px;
+  vertical-align: middle;
+}
+
+.qbContent {
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 400;
+}
+
+.hidden  {
+  visibility: hidden;
+  display: none;
+}

client/talk-plugin-questionbox/QuestionBox.js

@@ -1,17 +1,23 @@
 import React from 'react';
-const packagename = 'talk-plugin-questionbox';
+import cn from 'classnames';
+import styles from './QuestionBox.css';
+import {Icon} from 'coral-ui';
+
 import Slot from 'coral-framework/components/Slot';
 
-const QuestionBox = ({enable, content}) =>
-<div className={`${packagename}-info ${enable ? null : 'hidden'}` }>
-  <div className={`${packagename}-box`}>
-    <i className={`${packagename}-icon material-icons bubble`}>chat_bubble</i>
-    <i className={`${packagename}-icon material-icons person`}>person</i>
+const QuestionBox = ({content, enable}) => (
+  <div className={cn(styles.qbInfo, {[styles.hidden]: !enable}, 'questionbox-info')}>
+    <div className={cn(styles.qbBox, 'questionbox-box')}>
+      <Icon name="chat_bubble" className={cn(styles.iconBubble)} />
+      <Icon name="person" className={cn(styles.iconPerson)} />
+    </div>
+
+    <div className={cn(styles.qbContent, 'questionbox-content')}>
+      {content}
+    </div>
+
+    <Slot fill="streamQuestionArea" />
   </div>
-  <div className={`${packagename}-content`}>
-    {content}
-  </div>
-  <Slot fill="streamQuestionArea" />
-</div>;
+);
 
 export default QuestionBox;

models/setting.js

@@ -33,6 +33,10 @@ const SettingSchema = new Schema({
     type: Boolean,
     default: false
   },
+  questionBoxIcon: {
+    type: String,
+    default: ''
+  },
   questionBoxContent: {
     type: String,
     default: ''