diff options
author | 2018-06-22 12:02:59 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:53 +0300 | |
commit | c24420eee001707530bab841d998cc076a459708 (patch) | |
tree | 317fd7cbe215e7fac61963ee3198e0cffa29ba17 | |
parent | 141599103c5b46921a18c33d72ee75518f6705b4 (diff) |
Button component
-rw-r--r-- | vnext/src/components/Button.js | 18 | ||||
-rw-r--r-- | vnext/src/components/MessageInput.js | 3 | ||||
-rw-r--r-- | vnext/src/components/Thread.js | 5 |
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> · </span>{this.state.active === msg.rid || <button className="a-login">Reply</button>} + <span> · </span>{this.state.active === msg.rid || <Button className="a-login">Reply</Button>} </React.Fragment> ) } |