MessageInput styling

2 files changed, 20 insertions, 22 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 = {
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index b5d4ea0e..9f1d42c0 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -447,22 +447,9 @@ article .tags > a,
     overflow: hidden;
     text-indent: 10px;
 }
-.msg-comment {
-    display: flex;
-    width: 100%;
-    margin-top: 10px;
-}
 .msg-comment-hidden {
     display: none;
 }
-.msg-comment textarea {
-    border: 0;
-    flex-grow: 1;
-    outline: none !important;
-    padding: 4px;
-    resize: vertical;
-    vertical-align: top;
-}
 .msg-comment input {
     align-self: flex-start;
     background: #EEE;