diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 0e1cdb3bb..273e4e0b2 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -200,8 +200,11 @@ hr {
/* Flag Styles */
-.coral-plugin-flags-popup {
+.coral-plugin-flags-popup span {
min-width: 100px;
+ bottom: 36px;
+ right: 75px;
+ position: absolute;
}
.coral-plugin-flags-popup-form {
diff --git a/client/coral-plugin-flags/FlagButton.js b/client/coral-plugin-flags/FlagButton.js
index fcaa30b99..b223fad41 100644
--- a/client/coral-plugin-flags/FlagButton.js
+++ b/client/coral-plugin-flags/FlagButton.js
@@ -108,41 +108,43 @@ export default class FlagButton extends Component {
{
this.state.showMenu &&
-
- {popupMenu.header}
- {
- popupMenu.text &&
- {popupMenu.text}
- }
- {
- popupMenu.options &&
- }
-
- {this.state.step} of 3
-
- {
- popupMenu.button &&
- }
-
+
+
+ {popupMenu.header}
+ {
+ popupMenu.text &&
+ {popupMenu.text}
+ }
+ {
+ popupMenu.options &&
+ }
+
+ {this.state.step} of 3
+
+ {
+ popupMenu.button &&
+ }
+
+
}
;
}
diff --git a/client/coral-ui/components/PopupMenu.css b/client/coral-ui/components/PopupMenu.css
index a0864a306..fe57ba8b2 100644
--- a/client/coral-ui/components/PopupMenu.css
+++ b/client/coral-ui/components/PopupMenu.css
@@ -1,10 +1,8 @@
.popupMenu {
display: inline-block;
- position: absolute;
width: inherit;
- border: solid 1px #2376D8;
- bottom: 36px;
- right: 25px;
+ border: solid 1px #999;
+ box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
box-sizing: border-box;
background: white;
border-radius: 3px;
@@ -17,7 +15,7 @@
border: 10px solid transparent;
border-top-color: white;
position: absolute;
- left: 1em;
+ right: 3em;
bottom: -20px;
z-index: 2;
}
@@ -25,9 +23,9 @@
.popupMenu:after{
content: '';
border: 10px solid transparent;
- border-top-color: #2376D8;
+ border-top-color: #999;
position: absolute;
- left: 1em;
+ right: 3em;
bottom: -21px;
z-index: 1;
}