Add starter code for message handling components and enhance sidebar …

…layout

frontend/src/Pages/home/home.jsx

@@ -14,4 +14,22 @@ export const Home = () => {
 
 {/* <div className="flex sm:h-[450px] md:h-[500px] lg:h-[550px] rounded-lg overflow-hidden bg-gray-400 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-30 text-2xl text-pink-900 ">
 
-</div> */}
+</div> */}
+
+//Starter code for frontend/src/components/sidebar.jsx
+
+// import { MessageContainer } from "../../components/messageContainer"
+// import { Sidebar } from "../../components/sidebar"
+
+
+// export const Home = () => {
+//   return (
+//     <div className="flex flex-row bg-gray-900 bg-opacity-70 backdrop-blur-sm  border-gray-800 rounded-lg p-4 w-full h-full">
+//       <Sidebar />
+//       <div className="divider lg:divider-horizontal "> <p className="text-2xl text-gray-800">⚕︎</p>  </div>
+
+//       <MessageContainer />
+
+//     </div>
+//   )
+// }

frontend/src/components/Convertation.jsx

@@ -22,3 +22,29 @@ export const Convertation = () => {
     </>
   )
 }
+
+//Starter code for frontend/src/components/messageContainer.jsx
+// export const Convertation = () => {
+//   return (
+//     <>
+//     <div className="flex gap-2 items-center hover:bg-gray-700 rounded p-2 py-1 cursor-pointer">
+
+//       <div className="avatar online">
+//         <div className="w-12 rounded-full">
+//           <img src="/userIcon.jpeg" alt="user_avatar" />
+//         </div>
+//       </div>
+
+//       <div className="flex flex-col flex-1">
+//         <div className="flex justify-between gap-3">
+//           <p className="text-lg font-sans text-gray-200 ">Username</p>
+//           <span className="text-xs text-gray-500"> ❤️‍🔥Last message</span>
+//         </div>
+//       </div>
+
+//     </div> 
+
+//     <div className="divider my-0 py-0 h-1" />
+//     </>
+//   )
+// }

frontend/src/components/Message.jsx

@@ -0,0 +1,36 @@
+export const Message = () => {
+  return (
+    <>
+    {/* <div className="chat chat-start">
+        <div className="chat-image avatar">
+            <div className="w-10 rounded-full">
+                <img alt="Reciever avatar" src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+            </div>
+        </div>
+
+        <div className="chat-header">
+            Bhai
+            <time className="text-xs opacity-50"> 12:45</time>
+        </div>
+        <div className="chat-bubble">You were the Chosen One!</div>
+        <div className="chat-footer opacity-50">Delivered</div>
+    </div> */}
+
+    <div className="chat chat-end">
+      <div className="chat-image avatar">
+        <div className="w-10 rounded-full">
+          <img
+            alt="Sender avatar"
+            src="./userIcon.jpeg" />
+        </div>
+      </div>
+      <div className="chat-header">
+        Abhiii
+        <time className="text-xs opacity-50"> 12:46</time>
+      </div>
+      <div className="chat-bubble">I Love you ♡ </div>
+      <div className="chat-footer opacity-50">Seen at 12:46</div>
+    </div>
+    </>
+  )
+}

frontend/src/components/MessageInput.jsx

@@ -0,0 +1,32 @@
+import { IoSend } from "react-icons/io5";
+export const MessageInput = () => {
+  return (
+    <form action="" className="px-4 my-3">
+      <div className="w-full">
+        <input type="text" className="bordered text-xl rounded-full block w-full p-2.5 bg-gray-700 w-full text-white backdrop-blur-sm opacity-50" placeholder="Type a message..." />
+
+        <button type="submit" className="absolute inset-y-0 end-0 flex items-center rounded-full bg-pink-900 hover:bg-pink-800 text-white ">
+          <IoSend />
+        </button>
+      </div>
+    </form>
+  )
+}
+
+
+// Starter code for frontend/src/components/messageContainer.jsx
+
+// import { IoSend } from "react-icons/io5";
+// export const MessageInput = () => {
+//   return (
+//     <form action="" className="px-4 my-3">
+//       <div className="w-full">
+//         <input type="text" className="bordered text-xl rounded-full block w-full p-2.5 bg-gray-700 w-full text-white backdrop-blur-sm opacity-50" placeholder="Type a message..." />
+
+//         <button type="submit" className="absolute inset-y-0 end-0 flex items-center rounded-full bg-pink-900 hover:bg-pink-800 text-white ">
+//           <IoSend />
+//         </button>
+//       </div>
+//     </form>
+//   )
+// }

frontend/src/components/Messages.jsx

@@ -0,0 +1,21 @@
+import { Message } from "./Message.JSX"
+
+export const Messages = () => {
+  return (
+    <div className="px-4 flex-1 overflow-auto">
+      <Message />
+      <Message />
+      <Message />
+      <Message />
+      <Message />
+      <Message />
+      <Message />
+      <Message />
+      <Message />
+      <Message />
+      <Message />
+      <Message />
+      <Message />
+    </div>
+  )
+}

frontend/src/components/SearchInput.jsx

@@ -9,3 +9,16 @@ export const SearchInput = () => {
     </form>
   )
 }
+
+// Starter code for frontend/src/components/SearchInput.jsx
+// import { CiSearch } from "react-icons/ci";
+// export const SearchInput = () => {
+//   return (
+//     <form action="" className="flex items-center gap-2">
+//         <input type="text" placeholder="Search..." className="input input-bordered rounded-full" />
+//         <button type="submit" className="btn btn-circle btn-md bg-pink-900 hover:bg-pink-800 text-white">
+//             <CiSearch className="w-4 h-4"/>
+//         </button>
+//     </form>
+//   )
+// }

frontend/src/components/messageContainer.jsx

@@ -1,5 +1,41 @@
+import { MessageInput } from "./MessageInput"
+import { Messages } from "./Messages"
+
 export const MessageContainer = () => {
   return (
-    <div>messageContainer</div>
+    <div className="flex flex-col md:min-[450px]: w-full">
+       <>
+       {/* Header */}
+       <div className="px-4 py-2 bg-gray-800 bg-opacity-50 rounded-t-lg mb-2 w-full">
+        <span className="label-text"> To:</span>
+        <span className="text-gray-200 font-sans text-2xl "> Bhai </span>
+       </div>
+
+       <Messages />
+       <MessageInput />
+       </>
+    </div>
   )
 }
+
+
+// Starter code for frontend/src/components/messageContainer.jsx
+// import { MessageInput } from "./MessageInput"
+// import { Messages } from "./Messages"
+
+// export const MessageContainer = () => {
+//   return (
+//     <div className="flex flex-col md:min-[450px]: w-full">
+//        <>
+//        {/* Header */}
+//        <div className="px-4 py-2 bg-gray-800 bg-opacity-50 rounded-t-lg mb-2 w-full">
+//         <span className="label-text"> To:</span>
+//         <span className="text-gray-200 font-sans text-2xl "> Bhai </span>
+//        </div>
+
+//        <Messages />
+//        <MessageInput />
+//        </>
+//     </div>
+//   )
+// }

frontend/src/components/sidebar.jsx

@@ -4,7 +4,7 @@ import { SearchInput } from "./SearchInput"
 
 export const Sidebar = () => {
   return (
-    <div className="flex flex-col overflow-auto">
+    <div className="flex flex-col overflow-auto w-1/3">
 
       <div><SearchInput /></div>      
       <div className="divider px-3"></div>      
@@ -14,3 +14,22 @@ export const Sidebar = () => {
     </div>
   )
 }
+
+
+//Starter code for frontend/src/components/sidebar.jsx
+// import { Conversations } from "./Conversations"
+// import { LogoutButton } from "./LogoutButton"
+// import { SearchInput } from "./SearchInput"
+
+// export const Sidebar = () => {
+//   return (
+//     <div className="flex flex-col overflow-auto w-1/3">
+
+//       <div><SearchInput /></div>      
+//       <div className="divider px-3"></div>      
+//       <Conversations />
+//       <LogoutButton />
+
+//     </div>
+//   )
+// }

frontend/src/index.css

@@ -11,4 +11,19 @@ body{
     background-size: cover;
     font-family: 'Roboto', sans-serif;
     color: white;
+}
+
+/* Darkmode looking scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #f91a1a;
+}
+::-webkit-scrollbar-thumb {
+    background: #121212;
+    border-radius: 5px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #242424;
 }