Component styling in CSS

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>&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>Reply</Button>}
                           </>
                         )
                     }