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 (
+ 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;