Fixed chat

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 />

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;