Showing first set of options in menu.

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

@@ -195,3 +195,10 @@ hr {
   float: right;
   margin: 8px;
 }
+
+/* Flag Styles */
+
+.coral-plugin-flags-popup-header {
+  font-weight: bolder;
+  font-size: 14px;
+}

client/coral-plugin-flags/FlagButton.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {I18n} from '../coral-framework';
 import translations from './translations.json';
-import {PopupMenu} from 'coral-ui';
+import {PopupMenu, Button} from 'coral-ui';
 
 const name = 'coral-plugin-flags';
 
@@ -9,6 +9,8 @@ export default class FlagButton extends Component {
 
   state = {
     showMenu: false,
+    itemType: '',
+    reason: ''
   }
 
   onFlagClick = () => {
@@ -42,12 +44,28 @@ export default class FlagButton extends Component {
     // };
 
     return <div className={`${name}-container`}>
-      { this.state.showMenu && <PopupMenu>test</PopupMenu> }
+      {
+        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/>
+          </form>
+          <Button style={
+            {
+              float: 'right',
+              marginTop: 10,
+            }}>
+            Continue
+          </Button>
+        </PopupMenu>
+      }
       <button onClick={this.onFlagClick} className={`${name}-button`}>
         {
           flagged
-          ? <span className={`${name}-button-text`}>{lang.t('flagged')}</span>
-        : <span className={`${name}-button-text`}>{lang.t('flag')}</span>
+          ? <span className={`${name}-button-text`}>{lang.t('reported')}</span>
+        : <span className={`${name}-button-text`}>{lang.t('report')}</span>
         }
         <i className={`${name}-icon material-icons ${flagged && 'flaggedIcon'}`}
           style={flagged ? styles.flaggedIcon : {}}

client/coral-plugin-flags/translations.json

@@ -1,14 +1,16 @@
 {
   "en": {
-    "flag": "Report",
-    "flagged": "Reported",
-    "flag-notif": "Thank you for reporting this comment. Our moderation team has been notified and will review it shortly.",
-    "flag-notif-remove": "Your flag has been removed."
+    "report": "Report",
+    "reported": "Reported",
+    "report-notif": "Thank you for reporting this comment. Our moderation team has been notified and will review it shortly.",
+    "report-notif-remove": "Your report has been removed.",
+    "report-header": "Report an issue"
   },
   "es": {
-    "flag": "Informe",
-    "flagged": "Informado",
-    "flag-notif": "Gracias por marcar este comentario. Nuestro equipo de moderación ha sido notificado y muy pronto lo va a revisar.",
-    "flag-notif-remove": "¡traduceme!"
+    "report": "Informe",
+    "reported": "Informado",
+    "report-notif": "Gracias por marcar este comentario. Nuestro equipo de moderación ha sido notificado y muy pronto lo va a revisar.",
+    "report-notif-remove": "¡traduceme!",
+    "report-header": "¡traduceme!"
   }
 }

client/coral-ui/components/PopupMenu.css

@@ -17,7 +17,7 @@
   border-top-color: white;
   position: absolute;
   left: 1em;
-  top: 56px;
+  bottom: -20px;
   z-index: 2;
 }
 
@@ -27,6 +27,6 @@
   border-top-color: #2376D8;
   position: absolute;
   left: 1em;
-  top: 57px;
+  bottom: -21px;
   z-index: 1;
 }