CSS and Context Menu tweaks for Rich Quoting/Replies

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/context_menus/MessageContextMenu.js

@@ -171,8 +171,8 @@ module.exports = React.createClass({
 
     onQuoteClick: function() {
         dis.dispatch({
-            action: 'quote',
-            text: this.props.eventTileOps.getInnerText(),
+            action: 'quote_event',
+            event: this.props.mxEvent,
         });
         this.closeMenu();
     },

src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss

@@ -1,4 +1,17 @@
 .mx_Autocomplete {
+    position: absolute;
+    bottom: 0;
+    z-index: 1001;
+    width: 100%;
+    border: 1px solid $primary-hairline-color;
+    background: $primary-bg-color;
+    border-bottom: none;
+    border-radius: 4px 4px 0 0;
+    max-height: 50vh;
+    overflow: auto
+}
+
+.mx_Quoting {
     position: absolute;
     bottom: 0;
     z-index: 1000;
@@ -11,7 +24,7 @@
     overflow: auto
 }
 
-.mx_Autocomplete_ProviderSection {
+.mx_Autocomplete_ProviderSection, .mx_Quoting_section {
     border-bottom: 1px solid $primary-hairline-color;
 }
 
@@ -74,13 +87,25 @@
     outline: none;
 }
 
-.mx_Autocomplete_provider_name {
+.mx_Autocomplete_provider_name, .mx_Quoting_header {
     margin: 12px;
     color: $primary-fg-color;
     font-weight: 400;
     opacity: 0.4;
 }
 
+.mx_Quoting_title {
+    float: left;
+}
+
+.mx_Quoting_cancel {
+    float: right;
+}
+
+.mx_Quoting_clear {
+    clear: both;
+}
+
 /* styling for common completion elements */
 .mx_Autocomplete_Completion_subtitle {
     font-style: italic;

src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss

@@ -109,7 +109,7 @@ limitations under the License.
 /* this is used for the tile for the event which is selected via the URL.
  * TODO: ultimately we probably want some transition on here.
  */
-.mx_EventTile_selected .mx_EventTile_line {
+.mx_EventTile_selected > .mx_EventTile_line {
     border-left: $accent-color 5px solid;
     padding-left: 60px;
     background-color: $event-selected-color;
@@ -209,7 +209,7 @@ limitations under the License.
     visibility: visible;
 }
 
-.mx_EventTile_selected .mx_MessageTimestamp {
+.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
     left: 3px;
     width: auto;
 }