Button component

3 files changed, 23 insertions, 3 deletions

diff --git a/vnext/src/components/Button.js b/vnext/src/components/Button.js
new file mode 100644
index 00000000..583f8e4b
--- /dev/null
+++ b/vnext/src/components/Button.js
@@ -0,0 +1,18 @@
+import React from 'react'
+
+export default function Button(props) {
+    return (
+        <button style={buttonStyle} {...props} />
+    )
+}
+
+const buttonStyle = {
+    background: '#fff',
+    fontSize: '12px',
+    border: '1px solid #eee',
+    color: '#888',
+    cursor: 'pointer',
+    display: 'inline-block',
+    margin: '5px',
+    padding: '2px 10px'
+}
\ No newline at end of file
diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js
index a8bbbc33..6e698c32 100644
--- a/vnext/src/components/MessageInput.js
+++ b/vnext/src/components/MessageInput.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { MessageType } from './Types';
 
 import Icon from './Icon';
+import Button from './Button';
 
 export default class MessageInput extends React.Component {
     constructor(props) {
@@ -88,7 +89,7 @@ export default class MessageInput extends React.Component {
                         <textarea name="body" onChange={this.textChanged} onKeyPress={this.handleCtrlEnter}
                             ref={this.textarea} style={textInputStyle} value={this.state.value}
                             rows="1" placeholder="Write a comment..." />
-                        <button className="badge" onClick={this.onSubmit}><Icon name="ei-envelope" size="s"/>Send</button>
+                        <Button onClick={this.onSubmit}><Icon name="ei-envelope" size="s"/>Send</Button>
                     </div>
                 </div>
             </form>
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index 7464ca7f..5ff91346 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -8,6 +8,7 @@ import MessageInput from './MessageInput';
 import Spinner from './Spinner';
 import Avatar from './Avatar';
 import Icon from './Icon';
+import Button from './Button';
 
 import { format } from '../utils/embed';
 
@@ -149,12 +150,12 @@ export default class Thread extends React.Component {
                           {
                             this.props.visitor.uid > 0 ? (
                               <React.Fragment>
-                                {this.state.active === msg.rid || <button onClick={this.setActive.bind(this, msg)} className="badge"><Icon name="ei-envelope" size="s" />Reply</button>}
+                                {this.state.active === msg.rid || <Button onClick={this.setActive.bind(this, msg)}><Icon name="ei-envelope" size="s" />Reply</Button>}
                                 {this.state.active === msg.rid && <MessageInput data={msg} onSend={this.postComment} />}
                               </React.Fragment>
                             ) : (
                                 <React.Fragment>
-                                  <span>&nbsp;&middot;&nbsp;</span>{this.state.active === msg.rid || <button className="a-login">Reply</button>}
+                                  <span>&nbsp;&middot;&nbsp;</span>{this.state.active === msg.rid || <Button className="a-login">Reply</Button>}
                                 </React.Fragment>
                               )
                           }