diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index b6fe672cc..bf55bde7d 100644 --- a/client/coral-embed-stream/style/default.css +++ b/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; +} diff --git a/client/coral-plugin-flags/FlagButton.js b/client/coral-plugin-flags/FlagButton.js index ed59fc774..1eafc1d09 100644 --- a/client/coral-plugin-flags/FlagButton.js +++ b/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
- { this.state.showMenu && test } + { + this.state.showMenu && + + {lang.t('report-header')} +
+ Flag username
+ Flag comment
+
+ +
+ }