From 650389538d75fd66a7430c795555121bee92e1ca Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Thu, 22 Jul 2021 14:07:13 -0700
Subject: [PATCH] Add some basic styling

---
 src/platform/web/ui/css/room.css              |  9 ++++++
 .../web/ui/css/themes/element/theme.css       | 28 ++++++++++++++++++-
 .../web/ui/css/themes/element/timeline.css    |  2 +-
 .../web/ui/session/room/MessageComposer.js    |  7 +++--
 4 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/platform/web/ui/css/room.css b/src/platform/web/ui/css/room.css
index 8b8da1c2..746349c8 100644
--- a/src/platform/web/ui/css/room.css
+++ b/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;
diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index 1d74b453..ad9a77ca 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/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;
 }
diff --git a/src/platform/web/ui/css/themes/element/timeline.css b/src/platform/web/ui/css/themes/element/timeline.css
index 29e2fbf0..cb8c43c6 100644
--- a/src/platform/web/ui/css/themes/element/timeline.css
+++ b/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;
 }
diff --git a/src/platform/web/ui/session/room/MessageComposer.js b/src/platform/web/ui/session/room/MessageComposer.js
index 1191dea6..ea9e0bfb 100644
--- a/src/platform/web/ui/session/room/MessageComposer.js
+++ b/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"))
             ])