Styling popup menu.

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

@@ -198,7 +198,36 @@ hr {
 
 /* Flag Styles */
 
+.coral-plugin-flags-popup {
+  min-width: 100px;
+}
+
+.coral-plugin-flags-popup-form {
+  margin-bottom: 10px;
+}
+
 .coral-plugin-flags-popup-header {
   font-weight: bolder;
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+
+.coral-plugin-flags-popup-radio {
+  margin:5px;
+}
+
+.coral-plugin-flags-popup-radio-label {
+  margin:5px;
   font-size: 14px;
 }
+
+.coral-plugin-flags-popup-counter {
+    float: left;
+    margin-top: 21px;
+    color: #999;
+}
+
+.coral-plugin-flags-popup-button {
+    float: right;
+    margin-top: 10px;
+}

client/coral-plugin-flags/FlagButton.js

@@ -46,17 +46,18 @@ export default class FlagButton extends Component {
     return <div className={`${name}-container`}>
       {
         this.state.showMenu &&
-        <PopupMenu>
-          <span className={`${name}-popup-header`}>{lang.t('report-header')}</span>
-          <form>
-            <input type="radio" value="user"/> Flag username<br/>
-            <input type="radio" value="commment"/> Flag comment<br/>
+        <PopupMenu className={`${name}-popup`}>
+          <div className={`${name}-popup-header`}>{lang.t('report-header')}</div>
+          <form className={`${name}-popup-form`}>
+            <input className={`${name}-popup-radio`} type="radio" id='r1' value="user"/>
+            <label for="r1" className={`${name}-popup-radio-label`}>Flag username</label><br/>
+            <input className={`${name}-popup-radio`} type="radio" id='r1' value="commment"/>
+            <label for="r1" className={`${name}-popup-radio-label`}>Flag comment</label><br/>
           </form>
-          <Button style={
-            {
-              float: 'right',
-              marginTop: 10,
-            }}>
+          <div className={`${name}-popup-counter`}>
+            1 of 3
+          </div>
+          <Button className={`${name}-popup-button`}>
             Continue
           </Button>
         </PopupMenu>