Merge pull request #77 from DFanso/Admin

admin-chat-update

admin/src/App.js

@@ -89,7 +89,7 @@ const App = () => {
                 height: "calc(100vh - [header-height])",
               }}
             >
-              <Sidebar />
+              {/* <Sidebar /> */}
               <div style={{ flex: 1, padding: "20px" }}>
                 <Routes>
                   <Route path="/movies-view" element={<MovieGrid />} />

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 */
 }

admin/src/pages/Chat.js

@@ -82,9 +82,9 @@ const ChatBox = () => {
         ))}
       </div>
       <div className="chat-container">
-        <div className="chat-header">
+        {/* <div className="chat-header">
           Chat with {selectedClient ? `Client ${selectedClient}` : "a client"}
-        </div>
+        </div> */}
         <div className="chat-messages">
           {messages
             .filter((message) => message.clientId === selectedClient)