ícon styling for infobox

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

@@ -90,6 +90,14 @@ hr {
   border-radius: 2px;
 }
 
+
+.commentStream .material-icons {
+  vertical-align: middle;
+  width: 1em;
+  font-size: 1em;
+  overflow: hidden;
+}
+
 /* Question Box Styles */
 .coral-plugin-questionbox-info {
   top: 0;
@@ -103,15 +111,41 @@ hr {
   font-weight: bold;
   font-size: 14px;
   display: block;
+  overflow: hidden;
+  height: 50px;
 }
 
-.coral-plugin-questionbox-icon {
+.coral-plugin-questionbox-icon.bubble{
+  position: absolute;
+  top: 11px;
+  left: 15px;
+  color: #949393;
+  font-size: 20px;
+  z-index: 0;
+}
+
+.coral-plugin-questionbox-icon.person{
+  z-index: 2;
+  top: 20px;
+  left: 20px;
+  position: absolute;
+  font-size: 24px;
+  color: white;
+}
+
+.coral-plugin-questionbox-box {
+  position: relative;
   border: 0;
   background: black;
   color: white;
   padding: 20px;
   margin-left: 0px !important;
   margin-right: 10px;
+  display: inline-block;
+  width: 15px;
+  height: 100%;
+  padding: 3px 20px;
+  vertical-align: middle;
 }
 
 .hidden  {
@@ -247,13 +281,6 @@ button.comment__action-button[disabled],
   white-space: nowrap;
 }
 
-.commentStream .material-icons {
-  vertical-align: middle;
-  width: 1em;
-  font-size: 1em;
-  overflow: hidden;
-}
-
 .likedButton {
   color: rgb(0,134,227);
 }

client/coral-plugin-questionbox/QuestionBox.js

@@ -2,9 +2,11 @@ import React from 'react';
 const packagename = 'coral-plugin-questionbox';
 
 const QuestionBox = ({enable, content}) =>
-<div
-  className={`${packagename}-info ${enable ? null : 'hidden'}` }>
-  <i className={`${packagename}-icon material-icons`}>chat_bubble person</i>
+<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>
+  </div>
   {content}
 </div>;