From ac14614f7690d38356cb06ec501fd38917d06d19 Mon Sep 17 00:00:00 2001
From: Asanda65 <93676091+Asanda65@users.noreply.github.com>
Date: Sun, 7 Jan 2024 22:41:07 +0530
Subject: [PATCH] admin-chat-update
---
admin/src/App.js | 2 +-
admin/src/css/Chat.css | 124 +++++++++++++++++++++++++---------------
admin/src/pages/Chat.js | 4 +-
3 files changed, 82 insertions(+), 48 deletions(-)
diff --git a/admin/src/App.js b/admin/src/App.js
index f0cc9f1..c2e007c 100644
--- a/admin/src/App.js
+++ b/admin/src/App.js
@@ -89,7 +89,7 @@ const App = () => {
height: "calc(100vh - [header-height])",
}}
>
-
+ {/* */}
} />
diff --git a/admin/src/css/Chat.css b/admin/src/css/Chat.css
index a13036c..de59c2f 100644
--- a/admin/src/css/Chat.css
+++ b/admin/src/css/Chat.css
@@ -1,111 +1,145 @@
.chat-app-container {
display: flex;
- max-width: 80%;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- margin: auto;
+ max-width: 90%;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ margin: 2% auto;
height: 600px;
- margin-top: 25px;
- border-radius: 5px;
- background-color: #333;
- /* Adjust the height as needed */
+ border-radius: 10px;
+ background-color: #f5f5f5;
+ /* Lighter background */
}
.client-list {
- width: 200px;
- /* Width of the sidebar */
- background-color: #444;
+ width: 250px;
+ /* Increased width */
+ background-color: #2c3e50;
+ /* Darker shade for contrast */
overflow-y: auto;
- border-right: 1px solid grey;
- border-radius: 5px;
+ border-right: 2px solid #34495e;
+ border-radius: 10px 0 0 10px;
+ /* Rounded corners on the left */
+ color: #ecf0f1;
+ /* Lighter text color for better readability */
}
.client {
- padding: 12px;
- border-bottom: 1px solid #979797;
+ padding: 15px;
+ border-bottom: 1px solid #34495e;
cursor: pointer;
- color: #fff;
+ color: inherit;
+ /* Use the color from the parent element */
+ transition: background-color 0.3s ease;
+ /* Smooth transition for hover effect */
}
-.client.active {
- background: #007bff;
- border-bottom: 0px solid #979797;
-}
.chat-container {
flex-grow: 1;
display: flex;
flex-direction: column;
- max-width: 400px;
- border-radius: 8px;
- overflow: hidden;
+ border-radius: 0 10px 10px 0;
+ /* Rounded corners on the right */
+ background-color: #ecf0f1;
+ /* Lighter shade for the chat area */
}
.chat-messages {
- padding: 10px;
- height: 550px;
+ padding: 20px;
+ height: calc(100% - 80px);
+ /* Adjusted height to accommodate input area */
overflow-y: auto;
+ background-color: #fff;
+ /* White background for message area */
+ border-bottom: 2px solid #bdc3c7;
+ /* Separator line */
}
.message {
display: flex;
align-items: center;
- margin: 10px;
+ margin-bottom: 12px;
+ /* Increased margin */
}
.message.admin {
- flex-direction: row;
+ justify-content: flex-end;
+ /* Align admin messages to the right */
}
.message.client {
- flex-direction: row-reverse;
+ justify-content: flex-start;
+ /* Align client messages to the left */
}
.message-text {
- padding: 8px 12px;
- border-radius: 18px;
- background: #f1f0f0;
- max-width: 60%;
+ padding: 10px 15px;
+ /* Increased padding */
+ border-radius: 20px;
+ /* More rounded corners */
+ background: #ecf0f1;
+ /* Background for messages */
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ /* Subtle shadow for depth */
+ max-width: 70%;
+ /* Increased width for longer messages */
word-wrap: break-word;
- margin: 0 10px;
}
.message.admin .message-text {
- background: #e1e1e1;
+ background: #3498db;
+ /* Different background for admin */
+ color: white;
+ /* White text for visibility */
}
.message.client .message-text {
- background: #007bff;
- color: white;
+ background: #95a5a6;
+ /* Different background for client */
+ color: #fff;
+ /* Dark text for contrast */
}
.message-input-container {
display: flex;
- padding: 15px 10px;
+ padding: 15px;
+ background-color: #bdc3c7;
+ /* Matching background with the separator */
}
.message-input {
flex-grow: 1;
- border: none;
- padding: 10px;
- border-radius: 18px;
- margin-right: 10px;
- background-color: #f0f0f0;
+ border: 1px solid #7f8c8d;
+ /* Subtle border */
+ padding: 10px 15px;
+ /* Increased padding */
+ border-radius: 20px;
+ /* Rounded corners */
+ background-color: #ecf0f1;
+ /* Light background for input */
}
.message-input:focus {
- background-color: #e6e6e6;
+ border-color: #2980b9;
+ /* Highlight color on focus */
outline: none;
+ /* Remove default outline */
}
.send-button {
- background: #007bff;
+ background: #3498db;
+ /* Consistent color with admin messages */
color: white;
border: none;
padding: 10px 20px;
- border-radius: 18px;
+ border-radius: 20px;
+ margin-left: 4px;
+ /* Rounded corners */
cursor: pointer;
+ transition: background-color 0.3s ease;
+ /* Smooth transition for hover effect */
}
.send-button:hover {
- background: #0056b3;
+ background: #2980b9;
+ /* Darker shade on hover */
}
\ No newline at end of file
diff --git a/admin/src/pages/Chat.js b/admin/src/pages/Chat.js
index 9200cb2..4208365 100644
--- a/admin/src/pages/Chat.js
+++ b/admin/src/pages/Chat.js
@@ -82,9 +82,9 @@ const ChatBox = () => {
))}
-
+ {/*
Chat with {selectedClient ? `Client ${selectedClient}` : "a client"}
-
+
*/}
{messages
.filter((message) => message.clientId === selectedClient)