From 30c407563de4b401d68c5a2adbbcdd2bb4a10779 Mon Sep 17 00:00:00 2001
From: Hansi Xu <hxacs7755@gmail.com>
Date: Sun, 6 Mar 2022 21:37:30 -0500
Subject: [PATCH] Fixed chat

---
 sports-matcher/src/ChatWindow.js |  2 ++
 sports-matcher/src/chats.css     | 33 ++++++++++++++++----------------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/sports-matcher/src/ChatWindow.js b/sports-matcher/src/ChatWindow.js
index 036ad55..20b2adf 100644
--- a/sports-matcher/src/ChatWindow.js
+++ b/sports-matcher/src/ChatWindow.js
@@ -5,11 +5,13 @@ import './chats.css'
 import Chat from './Chat'
 import Contact from './Contact'
 import { useState } from "react";
+import Navbar from './Navbar';
 
 class ChatWindow extends React.Component {
     render() {
         return (
             <div class="chatcomponent">
+                <Navbar></Navbar>
                 <UserList />
                 <MessageList />
                 <ChatInput />
diff --git a/sports-matcher/src/chats.css b/sports-matcher/src/chats.css
index ede9579..de9114f 100644
--- a/sports-matcher/src/chats.css
+++ b/sports-matcher/src/chats.css
@@ -10,7 +10,7 @@
     border-color:rgb(75, 75, 75);
 
     background-color: rgb(80, 80, 80);
-    height: 70px;
+    height: 80px;
 
     user-select: none;
 }
@@ -18,9 +18,9 @@
     background-color: black;
 }
 .contactlist {
-    height: 500px;
-    width: 200px;
-    top: 0;
+    height: 90%;
+    width: 13%;
+    top: 10%;
     left: 0;
     box-sizing: border-box;
     border-radius: 2%;
@@ -28,13 +28,14 @@
     overflow-y: scroll;
     overflow-x: hidden;
 
+    position: absolute;
     text-align: center;
 }
 .messagelist {
-    height: 400px;
-    width: 800px;
-    top: 0px;
-    left: 200px;
+    height: 70%;
+    width: 87%;
+    top: 10%;
+    left: 13%;
 
     position: absolute;
     background-color: rgb(80, 80, 80);
@@ -77,29 +78,29 @@
 }
 .left {
     background-color: rgba(0, 57, 163, 0.637);
-    margin-right: 35px;
+    margin-left: 20px;
     color: white;
-    float: auto;
+    float: left;
 }
 .right {
     background-color: khaki;
     color: black;
-    margin-right: 35px;
+    margin-right: 20px;
     float: right;
 }
 .chatbubble-container {
-    width: 800px;
+    width: 100%;
     height: auto;
     float: left;
 }
 .chatinput {
     background-color: rgb(75, 75, 75);
-    top: 400px;
-    left: 200px;
+    top: 80%;
+    left: 13%;
     position: absolute;
 
-    height: 92px;
-    width: 793px;
+    height: 20%;
+    width: 87%;
 
     color: antiquewhite;