From 819e06e2cd66540e58ba0afece2f8d28de1eea2c Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Fri, 10 Jun 2016 04:41:59 +0530
Subject: [PATCH] MessageComposer styling for Draft

---
 .../views/elements/RichText.css               | 14 ++++++++++
 .../views/rooms/MessageComposer.css           | 27 ++++++++++++-------
 2 files changed, 31 insertions(+), 10 deletions(-)
 create mode 100644 src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css

diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css b/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css
new file mode 100644
index 0000000000..8b8d3bd926
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css
@@ -0,0 +1,14 @@
+.mx_UserPill {
+    color: white;
+    background-color: #76cfa6;
+    padding: 2px 8px;
+    border-radius: 16px;
+}
+
+.mx_RoomPill {
+    background-color: white;
+    color: #76cfa6;
+    border: 1px solid #76cfa6;
+    padding: 2px 8px;
+    border-radius: 16px;
+}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
index daf15001af..a6d30b3746 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
@@ -22,15 +22,16 @@ limitations under the License.
 }
 
 .mx_MessageComposer_row {
-    display: table-row;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     width: 100%;
 }
 
 .mx_MessageComposer .mx_MessageComposer_avatar {
-    display: table-cell;
+    /*display: table-cell;*/
     padding-left: 10px;
     padding-right: 28px;
-    vertical-align: middle;
 }
 
 .mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
@@ -42,9 +43,8 @@ limitations under the License.
 }
 
 .mx_MessageComposer_noperm_error {
-    display: table-cell;
+    /*display: table-cell;*/
     width: 100%;
-    vertical-align: middle;
     height: 60px;
     text-align: center;
     font-style: italic;
@@ -52,10 +52,17 @@ limitations under the License.
 }
 
 .mx_MessageComposer_input {
-    display: table-cell;
-    width: 100%;
+    /*display: table-cell;*/
+    flex: 1;
     vertical-align: middle;
-    height: 60px;
+    min-height: 60px;
+    max-height: 120px;
+    display: flex;
+    align-items: center;
+}
+
+.mx_MessageComposer_input .DraftEditor-root {
+    flex: 1;
 }
 
 .mx_MessageComposer_input textarea {
@@ -92,8 +99,8 @@ limitations under the License.
 .mx_MessageComposer_hangup,
 .mx_MessageComposer_voicecall,
 .mx_MessageComposer_videocall {
-    display: table-cell;
-    vertical-align: middle;
+    /*display: table-cell;*/
+    /*vertical-align: middle;*/
     padding-left: 10px;
     padding-right: 10px;
     cursor: pointer;