The chat component

sports-matcher/src/react-components/Chat.js

@@ -0,0 +1,18 @@
+/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
+
+import React from 'react';
+import './chats.css'
+
+class Chat extends React.Component {
+    render() {
+        return (
+            <div class="chatbubble-container">                    
+                        <div class= {this.props.side === "left" ? "chatbubble left": "chatbubble right"}>
+                            {this.props.message}
+                        </div>
+            </div>
+        )
+    }
+}
+
+export default Chat;

sports-matcher/src/react-components/ChatWindow.js

@@ -0,0 +1,77 @@
+/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
+
+import React from 'react';
+import './chats.css'
+import Chat from './Chat'
+import Contact from './Contact'
+
+class ChatWindow extends React.Component {
+    render() {
+        return (
+            <div class="chatcomponent">
+                <UserList />
+                <MessageList />
+            </div>
+        )
+    }
+    test() {
+        alert("test")
+    }
+}
+
+class UserList extends React.Component {
+    render() {
+        return (
+            <div class="contactlist">
+                    <Contact pfpsrc="./chief.jpg" name="Master Chief"/>
+                    <Contact pfpsrc="./freeman.jpg" name="Gordon Freeman" />
+                    <Contact pfpsrc="./shogun.jpg" name="Raiden Shogun" selected="true" />
+            </div>
+        )
+    }
+}
+
+class MessageList extends React.Component {
+    render() {
+        return (
+            <div class="messagelist">
+                    <div class="chatbubble-container">                    
+                        <div class="chatbubble right">
+                            Got time for tennis this week, Raiden?
+                        </div>
+                    </div>
+                    <div class="chatbubble-container">                    
+                        <div class="chatbubble left">
+                            Foolish question. If I do not even have free time, How am I to pursue eternity and fulfill my promise to the people of Inazuma?
+                        </div>
+                    </div>
+                    <div class="chatbubble-container">
+                        <div class="chatbubble right">
+                            Aiight, see you at 4
+                        </div>
+                    </div>
+                    <div class="chatbubble-container">                    
+                        <div class="chatbubble left">
+                            As you wish.
+                        </div>
+                    </div>
+                </div>
+        )
+    }
+}
+// class ChatWindow extends React.Component {
+//     render() {
+//         return (
+//             <div>
+//                 <ChatUserList />
+//                 {/* <MessageList /> */}
+//             </div>
+//         )
+//     }
+// }
+class ChatInput extends React.Component {
+    render() {
+        return (<p>Placeholder</p>)
+    }
+}
+export default ChatWindow;

sports-matcher/src/react-components/Contact.js

@@ -0,0 +1,30 @@
+/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
+
+import React from 'react';
+import './chats.css';
+
+class Contact extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            selected : this.props.selected
+        }
+    }
+    onClick() {
+        this.setState({selected : "true"})
+    }
+    render() {
+        return (
+            <div class={this.state.selected === "true" ? "contact dark" : "contact"}>
+                        <div class="profilepiccontainer">
+                            <img src={this.props.pfpsrc} class="profilepic" onClick={() => this.onClick()} />
+                        </div>
+                        <div class="profilenamecontainer">
+                            <div class="profilename" onClick={() => this.onClick()}>{this.props.name}</div>
+                        </div>
+            </div>
+        )
+    }
+}
+
+export default Contact;

sports-matcher/src/react-components/chats.css

@@ -0,0 +1,88 @@
+.chatcomponent > * {
+    display: inline-block;
+}
+.contact {
+    border-style: solid;
+    border-width: 1px;
+    border-bottom: 1px;
+    border-color:rgb(75, 75, 75);
+
+    background-color: rgb(80, 80, 80);
+    height: 70px;
+
+    user-select: none;
+}
+.contact.dark {
+    background-color: black;
+}
+.contactlist {
+    height: 500px;
+    width: 200px;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    border-radius: 2%;
+    background: rgb(48, 45, 45);
+    overflow-y: scroll;
+    overflow-x: hidden;
+
+    text-align: center;
+}
+.messagelist {
+    height: 500px;
+    width: 800px;
+    background-color: rgb(80, 80, 80);
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+.messagelist > * {
+    display: block;
+}
+.profilepiccontainer {
+    height: 60px;
+    width: 60px;
+    margin-top: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+    float: left;
+}
+.profilepic {
+    border-radius: 50%;
+    height: 50px;
+    width: 50px;
+}
+.profilenamecontainer {
+    text-align: center;
+    padding: 7%;
+}
+.profilename {
+    color: white;
+}
+.chatbubble {
+	margin-top: 20px;
+    margin-left: 20px;
+    display: inline-block;
+    position: relative;
+	width: auto;
+	height: auto;
+    padding: 10px;
+	
+    border-radius: 10px;
+}
+.left {
+    background-color: rgba(0, 57, 163, 0.637);
+    margin-right: 35px;
+    color: white;
+    float: auto;
+}
+.right {
+    background-color: khaki;
+    color: black;
+    margin-right: 35px;
+    float: right;
+}
+.chatbubble-container {
+    width: 800px;
+    height: auto;
+    float: left;
+}