Add some basic styling

src/platform/web/ui/css/room.css

@@ -50,6 +50,15 @@ limitations under the License.
     margin: 0;
 }
 
+.MessageComposer_replyPreview {
+    display: grid;
+    grid-template-columns: 1fr auto;
+}
+
+.MessageComposer_replyPreview .Timeline_message {
+    grid-column: 1/-1;
+}
+
 .MessageComposer_input {
     display: flex;
     align-items: center;

src/platform/web/ui/css/themes/element/theme.css

@@ -462,11 +462,37 @@ a {
     color: red;
 }
 
-.MessageComposer_input {
+.MessageComposer_replyPreview .Timeline_message {
+    margin: 0;
+    margin-top: 5px;
+}
+
+.MessageComposer_input, .MessageComposer_replyPreview {
     border-top: 1px solid rgba(245, 245, 245, 0.90);
     padding: 8px 16px;
 }
 
+.MessageComposer_replyPreview > .replying {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.MessageComposer_replyPreview > button.cancel {
+    width: 32px;
+    height: 32px;
+    display: block;
+    border: none;
+    text-indent: 200%;
+    white-space: nowrap;
+    overflow: hidden;
+    background-color: transparent;
+    background-image: url('icons/clear.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 18px;
+}
+
 .MessageComposer_input > :not(:first-child) {
     margin-left: 12px;
 }

src/platform/web/ui/css/themes/element/timeline.css

@@ -51,7 +51,7 @@ limitations under the License.
     }
 }
 
-.Timeline_message:hover, .Timeline_message.selected, .Timeline_message.menuOpen {
+.Timeline_message:hover:not(.disabled), .Timeline_message.selected, .Timeline_message.menuOpen {
     background-color: rgba(141, 151, 165, 0.1);
     border-radius: 4px;
 }

src/platform/web/ui/session/room/MessageComposer.js

@@ -37,8 +37,11 @@ export class MessageComposer extends TemplateView {
             t.div({
                 className: "MessageComposer_replyPreview"
             }, [
-                t.span('Replying'),
-                t.span({onClick: () => this._clearReplyingTo()}, 'Close'),
+                t.span({ className: "replying" }, "Replying"),
+                t.button({
+                    className: "cancel",
+                    onClick: () => this._clearReplyingTo()
+                }, "Close"),
                 // TODO need proper view, not just assumed TextMessageView
                 t.view(new TextMessageView(vm.replyViewModel, true, "div"))
             ])