diff options
| -rw-r--r-- | vnext/src/components/Button.css | 10 | ||||
| -rw-r--r-- | vnext/src/components/Button.js | 15 | ||||
| -rw-r--r-- | vnext/src/components/Chat.css | 9 | ||||
| -rw-r--r-- | vnext/src/components/Chat.js | 14 | ||||
| -rw-r--r-- | vnext/src/components/Thread.js | 2 |
5 files changed, 26 insertions, 24 deletions
diff --git a/vnext/src/components/Button.css b/vnext/src/components/Button.css new file mode 100644 index 00000000..85e3f061 --- /dev/null +++ b/vnext/src/components/Button.css @@ -0,0 +1,10 @@ +.Button { + background: #fff; + font-size: 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/Button.js b/vnext/src/components/Button.js index 11887d41..4152108b 100644 --- a/vnext/src/components/Button.js +++ b/vnext/src/components/Button.js @@ -1,18 +1,9 @@ import React from 'react'; +import './Button.css'; + export default function Button(props) { return ( - <button style={buttonStyle} {...props} /> + <button className="Button" {...props} /> ); } - -const buttonStyle = { - background: '#fff', - fontSize: '12px', - border: '1px solid #eee', - color: '#888', - cursor: 'pointer', - display: 'inline-block', - margin: '5px', - padding: '2px 10px' -}; diff --git a/vnext/src/components/Chat.css b/vnext/src/components/Chat.css new file mode 100644 index 00000000..02c81ef7 --- /dev/null +++ b/vnext/src/components/Chat.css @@ -0,0 +1,9 @@ +.Chat_messages { + box-sizing: border-box; + padding: 0 20px; + overflow-y: auto; + height: 450px; + display: flex; + flex-direction: column-reverse; + width: 100% +}
\ No newline at end of file diff --git a/vnext/src/components/Chat.js b/vnext/src/components/Chat.js index be671fb9..0da8dcde 100644 --- a/vnext/src/components/Chat.js +++ b/vnext/src/components/Chat.js @@ -8,6 +8,8 @@ import MessageInput from './MessageInput'; import { getChat, pm } from '../api'; +import './Chat.css'; + export default class Chat extends React.Component { constructor(props) { super(props); @@ -59,7 +61,7 @@ export default class Chat extends React.Component { {uname ? ( <div className="chatroom"> - <ul style={chatStyle}> + <ul className="Chat_messages"> { chats.map((chat) => <PM key={moment.utc(chat.timestamp).valueOf()} chat={chat} {...this.props} /> @@ -84,13 +86,3 @@ Chat.propTypes = { visitor: UserType.isRequired, match: ReactRouterPropTypes.match.isRequired }; - -const chatStyle = { - boxSizing: 'border-box', - padding: '0 20px', - overflowY: 'auto', - height: '450px', - display: 'flex', - flexDirection: 'column-reverse', - width: '100%' -}; diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js index a1255fd5..079674a7 100644 --- a/vnext/src/components/Thread.js +++ b/vnext/src/components/Thread.js @@ -131,7 +131,7 @@ export default class Thread extends React.Component { </> ) : ( <> - <span> · </span>{this.state.active === msg.rid || <Button className="a-login">Reply</Button>} + <span> · </span>{this.state.active === msg.rid || <Button>Reply</Button>} </> ) } |