MessageInput styling

1 files changed, 20 insertions, 9 deletions

diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js
index 52ad7bc6..c0b72348 100644
--- a/vnext/src/components/MessageInput.js
+++ b/vnext/src/components/MessageInput.js
@@ -73,7 +73,10 @@ export default class MessageInput extends React.Component {
     render() {
         return (
             <form className="msg-comment-target">
-                <div className="msg-comment">
+                <div style={commentStyle}>
+                    <textarea name="body" onChange={this.textChanged} onKeyPress={this.handleCtrlEnter}
+                            ref={this.textarea} style={textInputStyle} value={this.state.value}
+                            rows={this.props.rows || "1"} placeholder={this.props.children} />
                     <div style={inputBarStyle}>
                         <div style={this.state.attach ? activeStyle : inactiveStyle}
                             onClick={this.openfile}>
@@ -82,9 +85,6 @@ export default class MessageInput extends React.Component {
                                 style={{ display: 'none' }} ref={this.fileinput} value={this.state.attach}
                                 onChange={this.attachmentChanged} />
                         </div>
-                        <textarea name="body" onChange={this.textChanged} onKeyPress={this.handleCtrlEnter}
-                            ref={this.textarea} style={textInputStyle} value={this.state.value}
-                            rows={this.props.rows || "1"} placeholder={this.props.children} />
                         <Button onClick={this.onSubmit}><Icon name="ei-envelope" size="s"/>Send</Button>
                     </div>
                 </div>
@@ -93,6 +93,13 @@ export default class MessageInput extends React.Component {
     }
 }
 
+const commentStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    marginTop: '10px'
+}
+
 const inactiveStyle = {
     cursor: 'pointer',
     color: '#888'
@@ -103,18 +110,22 @@ const activeStyle = {
 };
 
 const inputBarStyle = {
-    border: '1px solid #ddd',
     display: 'flex',
-    alignItems: 'flex-start',
-    padding: '3px',
-    flexGrow: 1
+    borderTop: '1px #eee solid',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '3px'
 }
 
 const textInputStyle = {
     overflow: 'hidden',
     resize: 'none',
     display: 'block',
-    boxSizing: 'border-box'
+    boxSizing: 'border-box',
+    border: 0,
+    outline: 'none',
+    padding: '4px',
+    resize: 'none'
 }
 
 MessageInput.propTypes = {