added messages

src/components/Chat/Chat.css

@@ -7,5 +7,5 @@
 
 .chat_main{
     flex-grow:1;
-    background-color: white;    
+    background-color: white;
 }

src/components/ChatMain/ChatMain.css

@@ -0,0 +1,6 @@
+.chat_main{
+    padding:2em;
+ display:flex;
+ flex-direction: column;
+ gap:20px;   
+}

src/components/ChatMain/ChatMain.jsx

@@ -1,13 +1,25 @@
 import React from 'react'
 import Message from '../Message';
+import "./ChatMain.css";
 
 function ChatMain() {
+
+  const getMessages = () => {
+
+    var messages = [];
+    for (var i = 0; i < 10; i++) {
+      messages.push(<Message message={"Hello"} time="10AM" isReceived={false} />);
+    }
+    return messages;
+  }
   return (
     <div className='chat_main'>
-        <Message message={"Hello"} time = "10AM" isReceived ={false} />
-        <Message message={"Hi"} time = "11AM" isReceived ={true} />
-        <Message message={"How are you"} time = "11:10AM" isReceived ={false} />
-        <Message message={"I am good what about you..."} time = "11AM" isReceived ={true}/>
+      {/* {
+        getMessages()
+      } */}
+      <Message message={"Hi"} time="11AM" isReceived={true} />
+      <Message message={"How are you"} time="11:10AM" isReceived={false} />
+      <Message message={"I am good what about you..."} time="11AM" isReceived={true} />
     </div>
   )
 }

src/components/Contacts/Contacts.jsx

@@ -15,7 +15,7 @@ function Contacts() {
                 lastmessage={"Well this is a long messageWell this is a long messageWell this is a long messageWell this is a long messageWell this is a long messageWell this is a long messageWell this is a long messageWell this is a long message"}
             />
             <Contact profile_pic={"logo512.png"} name={"anuj"} lastmessage={"good morning"}/>
-            <Contact profile_pic={"logo512.png"} name={"anuj"} lastmessage={"good morning"} />
+            <Contact profile_pic={"logo512.png"} name={"anuj"} lastmessage={"good morning"} isActive/>
         </div>
     )
 }

src/components/Message/Message.css

@@ -2,12 +2,25 @@
     width:100%;
     display:flex;
     flex-direction: column;
+    gap:5px;
     align-items: end;
+    
+    /* border: 2px dotted gray; */
+}
+.message.left{
+    align-items: start;
+}
+.message.left .message__content{
+    background-color: var(--RECEIVED-MSG-BG);
+    color:var(--RECEIVED-MSG-COLOR);
 }
 
 .message__content{
-    width:200px;
-    background-color:gray;
+    max-width:400px;
+    background-color:rgb(224, 224, 224);
+    color:rgb(113, 113, 113);
+    padding:1em 2em;
+    border-radius: 10px;
 }
 
 .message__time{

src/components/Message/Message.jsx

@@ -3,14 +3,14 @@ import "./Message.css";
 function Message({
   message,
   time,
-  isReceived=false,
+  isReceived = false,
 }) {
   return (
 
-    <div className={"message "+ isReceived?"left":""}>
+    <div className={"message " +(isReceived ? "left" : "")}>
       <div className='message__content'>{message}</div>
       <span className='message__time'>{time}</span>
-      </div>
+    </div>
   )
 }
 

src/index.css

@@ -17,4 +17,7 @@ body {
   --PRIMARY-COLOR: rgb(115, 40, 214);
   --SECONDARY-COLOR:#FFF;
   --BORDER-COLOR:rgb(227, 225, 225);
+
+  --RECEIVED-MSG-BG:rgb(253, 213, 220);
+  --RECEIVED-MSG-COLOR:rgb(217, 118, 135);
 }