new message

containers/react/src/components/Messages/Chats.jsx

@@ -12,6 +12,7 @@ import Message from "./Message"
 import { TbSend } from 'react-icons/tb';
 import { ImBlocked } from 'react-icons/im';
 import { MdOutlineGroupAdd } from 'react-icons/md';
+import { GrAdd } from 'react-icons/gr'
 
 
 const TouchDiv = styled.div`
@@ -228,7 +229,7 @@ function Chats(){
 
 	return (
 		<div className="chat">
-			<div className='navbar'>
+			{/* <div className='navbar'>
 				<img src={DefaultPic} alt="profile" className="pic"/>
 				<span>
 					{isLoading ? (
@@ -238,7 +239,7 @@ function Chats(){
 						// <h4>{user.username}</h4>
       				)}
 	  			</span>
-			</div>
+			</div> */}
 
 
 		
@@ -260,6 +261,15 @@ function Chats(){
 					</TouchDiv>
 				</div>
 			</div>
+			<div className="messages_box">
+				<div className="contact">
+					<UserChat>
+
+					<div className="newMessage">
+						<GrAdd/>
+						<span>New Message</span>
+					</div>
+					</UserChat>
 					{conversations.map(c=> (
 						<div onClick={() => setCurrentChat(c)}>
 							<UserChat>
@@ -270,15 +280,19 @@ function Chats(){
 							</div>
 							</UserChat>
 						</div>
+				
 					))}
+				</div>
 
 				{
 					currentChat ? (
 						<>
 					<div className="messages">
+						<div className="scroll">
 							{messages.map(m=>(
 								<Message message = {m} own={m.sender === user.username} user={m}/>
 								))}
+						</div>
 						{/* <Input/> */}
 						<div className="input">
 							<input
@@ -295,19 +309,14 @@ function Chats(){
 					</div>
 				</>
 				) : (
-					<span className="noConv">Open a conversation</span>)}
+					<div className="messages">
+						<span className="noConv">Open a conversation</span>
+					</div>
+				)}
+			</div>
 		</div>
 		// </div>
 	);	
-
-
-
-
-
-
-
-
-	
 }
 
 export default Chats

containers/react/src/components/Messages/Message.jsx

@@ -19,10 +19,10 @@ import DefaultPicture from '../../assets/profile.jpg'
 import '../../styles/Messages.css'
 
 const MeStyleP = styled.p`
-	background-color: lightgray;
+	background-color: #5843e4;
 	padding 10px 20px;
 	border-radius 10px 0px 10px 10px;
-	color: black;
+	color: white;
 	margin-right: 20px;
 `
 

containers/react/src/styles/Messages.css

@@ -1,12 +1,38 @@
 .home{
 	background-color: black;
-	height: 90vh;
+	height: 10vh;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	
 }
 
+.scroll{
+	overflow: scroll;
+}
+
+.newMessage{
+	color: white;
+	font-size: 18px;
+}
+
+.contact{
+	background-color: rgb(46, 46, 46);
+	align-items: left;
+	/* width: 2rem; */
+	/* height: 4rem; */
+}
+
+.messages_box{
+	background-color: black;
+	/* height: 90vh; */
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	/* position:relative;	 */
+	
+}
+
 .container{
 	border-color: #FFFFFF ;
 	border-radius: 50%;
@@ -65,8 +91,9 @@
 }
 
 .messages{
-	background-color: #349b83;
+	background-color: black;
-	height: calc(100% - 118px);
+	/* height: calc(100% - 118px); */
+	width: 40rem;
 	overflow: scroll;
 }
 
@@ -115,4 +142,5 @@ input{
 	display: flex;
 	flex-direction: row-reverse;
 	padding: 20px;
+	color: lightgrey;
 }

containers/react/src/styles/chat.css

@@ -38,9 +38,13 @@
 .chat {
   width: 100%;
   height: 100vh;
-  display: flex;
+  display:inline-block;
   align-items: center;
 }
+
+.chat_2{
+  display:flex;
+}
 .chat__sidebar {
   height: 100%;
   background-color: #f9f5eb;