From 0355cb0b520b3638252d9ddfa1d1c106efa5225f Mon Sep 17 00:00:00 2001
From: Siddheya Kulkarni <siddheyakul@gmail.com>
Date: Sat, 8 Jun 2024 17:52:46 +0530
Subject: [PATCH] enhanced chat interface ui

---
 src/Components/ChatPage.jsx        | 22 ++++++++-----
 src/Components/MessageTemplate.css | 51 ++++++++++++++++++++++++++++++
 src/Components/MessageTemplate.jsx | 26 ++++++++-------
 3 files changed, 80 insertions(+), 19 deletions(-)
 create mode 100644 src/Components/MessageTemplate.css

diff --git a/src/Components/ChatPage.jsx b/src/Components/ChatPage.jsx
index c6f97c475..fb5b43c71 100644
--- a/src/Components/ChatPage.jsx
+++ b/src/Components/ChatPage.jsx
@@ -421,18 +421,24 @@ const ChatPage = ({ darkMode, setDarkMode }) => {
               onChange={handleTyping}
               required
             />
-            {!micHide && (
-              <FaMicrophone
+            <div>
+              {!micHide && (
+                <button
+                type="button"
+                className="bg-[#6674cc] text-white rounded-full hover:bg-[#4e5ba6] focus:outline-none"
+                onClick={startListening}
+              >
+                <FaMicrophone
                 size={40}
-                className={`m-2 mr-3 ${
-                  darkMode ? "text-white" : "text-pure-greys-600"
-                }`}
+                className="m-2 mr-3 text-white"
                 onClick={startListening}
               />
-            )}
+              </button>
+              )}
+            </div>
             <button
               type="submit"
-              className="focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2 cursor-pointer rounded-md bg-brand text-[#fff] bg-[#6674cc] border-brand font-rubik xl:text-lg border xl:px-6 lg:px-6 md:px-6 sm:px-6 h-12 py-2 flex items-center gap-3 text-lg lg:h-[4rem]"
+              className="focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2 cursor-pointer rounded-md ml-4 bg-brand text-[#fff] bg-[#6674cc] hover:bg-[#4e5ba6] border-brand font-rubik xl:text-lg border xl:px-6 lg:px-6 md:px-6 sm:px-6 h-12 py-2 flex items-center gap-3 text-lg lg:h-[4rem]"
             >
               Send
               <svg
@@ -456,7 +462,7 @@ const ChatPage = ({ darkMode, setDarkMode }) => {
           <button
             id="send-location"
             onClick={handleSendLocation}
-            className="focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2 cursor-pointer rounded-md bg-brand text-[#fff] bg-[#6674cc] border-brand font-rubik xl:text-lg border xl:px-6 lg:px-6 md:px-6 sm:px-6 h-12 py-2 flex items-center gap-3 text-lg lg:h-[4rem]"
+            className="focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2 cursor-pointer rounded-md bg-brand text-[#fff] bg-[#6674cc] hover:bg-[#4e5ba6] border-brand font-rubik xl:text-lg border xl:px-6 lg:px-6 md:px-6 sm:px-6 h-12 py-2 flex items-center gap-3 text-lg lg:h-[4rem]"
           >
             Send location
             <svg
diff --git a/src/Components/MessageTemplate.css b/src/Components/MessageTemplate.css
new file mode 100644
index 000000000..3b00e29ae
--- /dev/null
+++ b/src/Components/MessageTemplate.css
@@ -0,0 +1,51 @@
+.message-container {
+    position: relative;
+    margin-top: 20px;
+  }
+  
+  .message-box {
+    position: relative;
+    max-width: 50%;
+    padding: 10px;
+    background-color: #f1f1f1;
+    border-radius: 10px;
+    color: white;
+  }
+  
+  .message-box .message-info {
+    font-size: 0.8rem;
+    margin-bottom: 5px;
+  }
+  
+  .message-box .message-text {
+    font-size: 1rem;
+  }
+  
+  .message-box .message-arrow {
+    position: absolute;
+    left: -10px;
+    top: 10px;
+    width: 0;
+    height: 0;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-right: 10px solid #6674cc;
+  }
+  
+  .message-container.light .message-box {
+    background-color: #f1f1f1;
+    color: #333;
+  }
+  
+  .message-container.light .message-box .message-arrow {
+    border-right: 10px solid #f1f1f1;
+  }
+  
+  .message-container.dark .message-box {
+    background-color: #6674cc;
+  }
+  
+  .message-container.dark .message-box .message-arrow {
+    border-right: 10px solid #6674cc;
+  }
+  
\ No newline at end of file
diff --git a/src/Components/MessageTemplate.jsx b/src/Components/MessageTemplate.jsx
index 7874a097a..058d3fcf0 100644
--- a/src/Components/MessageTemplate.jsx
+++ b/src/Components/MessageTemplate.jsx
@@ -1,16 +1,20 @@
-import React from 'react'
+import React from 'react';
+import './MessageTemplate.css'
+const MessageTemplate = ({ username, createdAt, message, darkMode }) => {
+  const limitedUsername = username.length > 10 ? username.slice(0, 10) + '...' : username;
 
-const MessageTemplate = ({ username, createdAt, message,darkMode }) => {
-  const limitedUsername = username.length> 10 ? username.slice(0, 10) + '...' : username;
   return (
-    <div className="message">
-        <p>
+    <div className={`message-container ${darkMode ? 'dark' : 'light'}`}>
+      <div className="message-box">
+         <p>
             <span className={`${darkMode ? 'text-white' : ' text-black'}  message__name`}>{limitedUsername}</span>
-            <span className="message__meta">{createdAt}</span>
+            <span className={`${darkMode ? 'text-white' : ' text-gray'} message__meta`}>{createdAt}</span>
         </p>
-        <p className={`${darkMode ? 'text-white' : ' text-black'}`}>{message}</p>
-  </div>
-  )
-}
+        <p className="message-text">{message}</p>
+        <div className="message-arrow"></div>
+      </div>
+    </div>
+  );
+};
 
-export default MessageTemplate
\ No newline at end of file
+export default MessageTemplate;