From 8c551eda2553b19a95f3cdb9bdf7e80d60636269 Mon Sep 17 00:00:00 2001
From: Harshit Jaiswal <76927137+harshitj183@users.noreply.github.com>
Date: Mon, 19 Jan 2026 11:33:24 +0530
Subject: [PATCH 1/6] chat box ui fixed ,,,,

---
 frontend/src/App.css | 46 ++++++++++++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index dfc5d16..396e472 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,16 +1,21 @@
 :root {
-  --primary-color: #17419b;
-  --secondary-color: #38bdf8;
-  --accent-color: #5d24fb;
+  --primary-color: #0084ff;
+  --primary-dark: #0073e6;
+  --secondary-color: #1a96d4;
+  --accent-color: #31a24c;
   --error-color: #dc2626;
-  --text-color: #1f2937;
-  --bg-color: #f3f4f6;
-  --bg-gradient: linear-gradient(135deg, #e0e7ff 0%, #f0fdfa 100%);
-  --border-color: #e5e7eb;
-  --user-message-bg: #e0f2fe;
-  --other-message-bg: #f1f5f9;
-  --system-message-bg: #c3e6fe;
-  --system-message-color: #ae09b4;
+  --text-color: #000;
+  --text-secondary: #65676b;
+  --bg-color: #ffffff;
+  --bg-secondary: #f0f0f0;
+  --bg-gradient: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  --border-color: #e5e5e5;
+  --user-message-bg: #0084ff;
+  --user-message-text: #ffffff;
+  --other-message-bg: #e5e5ea;
+  --other-message-text: #000;
+  --system-message-bg: #f0f0f0;
+  --system-message-color: #65676b;
 }
 
 * {
@@ -20,7 +25,7 @@
 body {
   min-height: 100vh;
   background: var(--bg-gradient);
-  font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
   overflow: hidden;
 }
 
@@ -32,11 +37,11 @@ body {
 }
 
 .app-header {
-  background-color: white;
-  padding: 1rem;
-  border-bottom: 1px solid var(--border-color);
+  background-color: var(--primary-color);
+  padding: 1rem 1.5rem;
+  border-bottom: none;
   width: 100%;
-  box-shadow: 0 2px 8px rgba(37,99,235,0.08);
+  box-shadow: 0 2px 8px rgba(0, 132, 255, 0.15);
   z-index: 10;
   position: relative;
 }
@@ -48,7 +53,14 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 1rem;
+  padding: 0;
+}
+
+.header-content h1 {
+  color: white;
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 0;
 }
 
 .header-content nav {

From 949faf70cf9f703562e32a2f0e3da859d3b9d952 Mon Sep 17 00:00:00 2001
From: Harshit Jaiswal <76927137+harshitj183@users.noreply.github.com>
Date: Mon, 19 Jan 2026 11:34:28 +0530
Subject: [PATCH 2/6] chat box ui fixed ,,,,

---
 frontend/src/index.css | 404 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 399 insertions(+), 5 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 9e6a4df..2a2cb3f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,26 +1,420 @@
+ 
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  /* Color Palette */
+  --primary-blue: #0084ff;
+  --primary-blue-dark: #0073e6;
+  --secondary-blue: #1a96d4;
+  --light-bg: #ffffff;
+  --dark-bg: #0f0f0f;
+  --chat-bg: #f0f0f0;
+  --chat-dark-bg: #1a1a1a;
+  --message-bg: #e5e5ea;
+  --message-dark-bg: #3a3a3a;
+  --text-primary: #000000;
+  --text-secondary: #65676b;
+  --text-dark-primary: #ffffff;
+  --text-dark-secondary: #b0b0b0;
+  --border-color: #e5e5e5;
+  --border-dark-color: #2a2a2a;
+  --user-message-bg: #0084ff;
+  --user-message-text: #ffffff;
+  
+  /* Spacing */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  
+  /* Border Radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 18px;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+  
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+  
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
   line-height: 1.5;
   font-weight: 400;
+  font-size: 16px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  color-scheme: light dark;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --light-bg: #0f0f0f;
+    --chat-bg: #1a1a1a;
+    --message-bg: #3a3a3a;
+    --text-primary: #ffffff;
+    --text-secondary: #b0b0b0;
+    --border-color: #2a2a2a;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+*::selection {
+  background-color: var(--primary-blue);
+  color: var(--user-message-text);
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: #999;
+}
+
+html {
+  height: 100%;
 }
 
 body {
   margin: 0;
+  padding: 0;
   min-width: 320px;
   min-height: 100vh;
+  background-color: var(--light-bg);
+  color: var(--text-primary);
+  transition: background-color var(--transition-normal), color var(--transition-normal);
 }
 
+/* Buttons */
 button {
   font-family: inherit;
+  font-size: 1rem;
+  font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s;
+  border: none;
+  border-radius: var(--radius-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  transition: all var(--transition-fast);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  white-space: nowrap;
+  user-select: none;
+}
+
+button:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+button:active {
+  transform: translateY(0);
 }
 
-button:focus,
 button:focus-visible {
-  outline: 2px solid var(--primary-color);
+  outline: 2px solid var(--primary-blue);
   outline-offset: 2px;
-}
\ No newline at end of file
+}
+
+button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Primary Button */
+.btn-primary {
+  background-color: var(--primary-blue);
+  color: var(--user-message-text);
+}
+
+.btn-primary:hover:not(:disabled) {
+  background-color: var(--primary-blue-dark);
+}
+
+/* Secondary Button */
+.btn-secondary {
+  background-color: var(--message-bg);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background-color: #f5f5f5;
+}
+
+/* Input Elements */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+textarea,
+select {
+  font-family: inherit;
+  font-size: 1rem;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background-color: var(--light-bg);
+  color: var(--text-primary);
+  transition: all var(--transition-fast);
+  width: 100%;
+}
+
+input[type="text"]::placeholder,
+input[type="email"]::placeholder,
+input[type="password"]::placeholder,
+input[type="search"]::placeholder,
+textarea::placeholder {
+  color: var(--text-secondary);
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+input[type="search"]:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: var(--primary-blue);
+  box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.1);
+}
+
+textarea {
+  resize: vertical;
+  min-height: 100px;
+}
+
+/* Form Elements */
+form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+label {
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-xs);
+  display: block;
+}
+
+/* Cards/Containers */
+.card {
+  background-color: var(--light-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-md);
+  box-shadow: var(--shadow-sm);
+  transition: all var(--transition-normal);
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--text-primary);
+}
+
+h1 {
+  font-size: 2rem;
+  margin-bottom: var(--spacing-lg);
+}
+
+h2 {
+  font-size: 1.75rem;
+  margin-bottom: var(--spacing-md);
+}
+
+h3 {
+  font-size: 1.5rem;
+  margin-bottom: var(--spacing-md);
+}
+
+h4 {
+  font-size: 1.25rem;
+  margin-bottom: var(--spacing-sm);
+}
+
+h5 {
+  font-size: 1.125rem;
+  margin-bottom: var(--spacing-sm);
+}
+
+h6 {
+  font-size: 1rem;
+  margin-bottom: var(--spacing-sm);
+}
+
+p {
+  margin: 0 0 var(--spacing-md) 0;
+  color: var(--text-primary);
+  line-height: 1.6;
+}
+
+a {
+  color: var(--primary-blue);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color var(--transition-fast);
+}
+
+a:hover {
+  color: var(--primary-blue-dark);
+  text-decoration: underline;
+}
+
+/* Lists */
+ul, ol {
+  margin: var(--spacing-md) 0;
+  padding-left: var(--spacing-lg);
+}
+
+li {
+  margin-bottom: var(--spacing-sm);
+}
+
+/* Code */
+code, pre {
+  font-family: 'Courier New', monospace;
+  background-color: var(--chat-bg);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+}
+
+pre {
+  padding: var(--spacing-md);
+  overflow-x: auto;
+}
+
+/* Separator */
+hr {
+  border: none;
+  height: 1px;
+  background-color: var(--border-color);
+  margin: var(--spacing-lg) 0;
+}
+
+/* Utility Classes */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-md);
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-muted {
+  color: var(--text-secondary);
+}
+
+.text-small {
+  font-size: 0.875rem;
+}
+
+.text-large {
+  font-size: 1.125rem;
+}
+
+.mt-0 { margin-top: 0; }
+.mt-1 { margin-top: var(--spacing-xs); }
+.mt-2 { margin-top: var(--spacing-sm); }
+.mt-3 { margin-top: var(--spacing-md); }
+.mt-4 { margin-top: var(--spacing-lg); }
+
+.mb-0 { margin-bottom: 0; }
+.mb-1 { margin-bottom: var(--spacing-xs); }
+.mb-2 { margin-bottom: var(--spacing-sm); }
+.mb-3 { margin-bottom: var(--spacing-md); }
+.mb-4 { margin-bottom: var(--spacing-lg); }
+
+.p-0 { padding: 0; }
+.p-1 { padding: var(--spacing-xs); }
+.p-2 { padding: var(--spacing-sm); }
+.p-3 { padding: var(--spacing-md); }
+.p-4 { padding: var(--spacing-lg); }
+
+.flex {
+  display: flex;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.gap-sm { gap: var(--spacing-sm); }
+.gap-md { gap: var(--spacing-md); }
+.gap-lg { gap: var(--spacing-lg); }
+
+/* Responsive Typography */
+@media (max-width: 768px) {
+  h1 { font-size: 1.75rem; }
+  h2 { font-size: 1.5rem; }
+  h3 { font-size: 1.25rem; }
+  
+  button {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: 0.95rem;
+  }
+}
+
+/* Loading Animation */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 3px solid var(--border-color);
+  border-top-color: var(--primary-blue);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}

From af43714058e3b99e31947917204bdf1ebc02a68c Mon Sep 17 00:00:00 2001
From: Harshit Jaiswal <76927137+harshitj183@users.noreply.github.com>
Date: Mon, 19 Jan 2026 11:35:09 +0530
Subject: [PATCH 3/6] Add conditional class for user messages

---
 frontend/src/components/Message/Message.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Message/Message.jsx b/frontend/src/components/Message/Message.jsx
index 03fbec3..ee36dc8 100644
--- a/frontend/src/components/Message/Message.jsx
+++ b/frontend/src/components/Message/Message.jsx
@@ -64,7 +64,7 @@ export default function Message({ user, text, sender, timestamp, updatedAt, onDe
 
     return (
         <div 
-            className={styles.message}
+            className={`${styles.message} ${user === sender ? styles['user-message'] : ''}`}
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}    
             style={{ position: 'relative' }}
@@ -132,4 +132,4 @@ export default function Message({ user, text, sender, timestamp, updatedAt, onDe
             )}
         </div>
     );
-};
\ No newline at end of file
+};

From 4882f77266f84203409d509333ada60c2c22ea94 Mon Sep 17 00:00:00 2001
From: Harshit Jaiswal <76927137+harshitj183@users.noreply.github.com>
Date: Mon, 19 Jan 2026 11:35:34 +0530
Subject: [PATCH 4/6] Update Message.module.css

---
 .../src/components/Message/Message.module.css | 246 ++++++++++++++++++
 1 file changed, 246 insertions(+)

diff --git a/frontend/src/components/Message/Message.module.css b/frontend/src/components/Message/Message.module.css
index 747d8fa..b589ab4 100644
--- a/frontend/src/components/Message/Message.module.css
+++ b/frontend/src/components/Message/Message.module.css
@@ -15,7 +15,253 @@
   font-style: italic;
   border-left: 4px solid var(--accent-color);
   border-right: 4px solid var(--accent-color);
+  border-radius: 12px;.message {
+  margin: 4px 0;
+  padding: 12px 16px;
   border-radius: 12px;
+  background: #e5e5ea;
+  color: #000;
+  box-shadow: none;
+  position: relative;
+  transition: background 0.2s;
+  animation: fadeIn 0.3s;
+  max-width: 70%;
+  word-wrap: break-word;
+  align-self: flex-start;
+  margin-right: auto;
+}
+
+.message.user-message,
+.message[class*="user"] {
+  background: #0084ff;
+  color: #ffffff;
+  border-radius: 12px;
+  align-self: flex-end;
+  margin-right: 0;
+  margin-left: auto;
+  max-width: 70%;
+}
+
+.system-message {
+  background: #f0f0f0;
+  color: #65676b;
+  font-style: italic;
+  border: none;
+  border-radius: 12px;
+  margin: 8px auto;
+  padding: 12px 16px;
+  text-align: center;
+  font-size: 0.95rem;
+  box-shadow: none;
+  animation: fadeIn 0.3s;
+  align-self: center;
+  max-width: 90%;
+}
+
+.date-header {
+  background: transparent;
+  box-shadow: none;
+  padding: 16px 0;
+  text-align: center;
+  margin: 0;
+  width: 100%;
+}
+
+.date-text {
+  color: #65676b;
+  font-size: 0.85rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 6px 12px;
+  background: #f0f0f0;
+  border-radius: 16px;
+  display: inline-block;
+}
+
+.message-info {
+  font-size: 0.8rem;
+  color: #65676b;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+  gap: 8px;
+}
+
+.message.user-message .message-info {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.sender {
+  font-weight: 600;
+  color: #0084ff;
+}
+
+.message.user-message .sender {
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 600;
+}
+
+.timestamp {
+  color: #65676b;
+  font-size: 0.8rem;
+}
+
+.message.user-message .timestamp {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.editedLabel {
+  margin-left: 4px;
+  color: #65676b;
+  font-size: 0.8rem;
+}
+
+.message.user-message .editedLabel {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.actionButtons {
+  position: absolute;
+  top: -30px;
+  right: 0;
+  display: flex;
+  gap: 4px;
+  z-index: 10;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.message:hover .actionButtons {
+  opacity: 1;
+}
+
+.updateButton {
+  background: #0084ff;
+  border: none;
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 12px;
+  color: white;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 6px rgba(0, 132, 255, 0.3);
+  padding: 0;
+  line-height: 1;
+  min-width: 28px;
+  min-height: 28px;
+}
+
+.updateButton:hover {
+  background: #0073e6;
+  transform: scale(1.1);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+}
+
+.deleteButton {
+  background: #ef4444;
+  border: none;
+  border-radius: 35%;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: bold;
+  color: white;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  padding: 0;
+  line-height: 1;
+  min-width: 20px;
+  min-height: 20px;
+}
+
+.deleteButton:hover {
+  background: #dc2626;
+  transform: scale(1.1);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+}
+
+.editContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.editInput {
+  width: 100%;
+  padding: 8px 12px;
+  border: 2px solid #3b82f6;
+  border-radius: 8px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.editInput:focus {
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.editButtons {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.saveButton {
+  background: #10b981;
+  border: none;
+  border-radius: 6px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: bold;
+  color: white;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.saveButton:hover {
+  background: #059669;
+  transform: scale(1.05);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+}
+
+.cancelButton {
+  background: #6b7280;
+  border: none;
+  border-radius: 6px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: bold;
+  color: white;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.cancelButton:hover {
+  background: #4b5563;
+  transform: scale(1.05);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+
   margin: 0.5rem 0;
   padding: 0.75rem 1.5rem;
   text-align: center;

From f6caf9961eecf17cf89bfbdd71a0645740c301ad Mon Sep 17 00:00:00 2001
From: Harshit Jaiswal <76927137+harshitj183@users.noreply.github.com>
Date: Mon, 19 Jan 2026 11:36:31 +0530
Subject: [PATCH 5/6] Refactor ChatPage styles for improved layout and design

---
 .../src/pages/ChatPage/ChatPage.module.css    | 114 +++++++++---------
 1 file changed, 57 insertions(+), 57 deletions(-)

diff --git a/frontend/src/pages/ChatPage/ChatPage.module.css b/frontend/src/pages/ChatPage/ChatPage.module.css
index af24ef6..959d45d 100644
--- a/frontend/src/pages/ChatPage/ChatPage.module.css
+++ b/frontend/src/pages/ChatPage/ChatPage.module.css
@@ -4,25 +4,29 @@
     justify-content: center;
     align-items: flex-start;
     width: 100%;
-    max-width: 1200px;
+    max-width: 1400px;
     margin: 0 auto;
-    margin-top: 32px;
+    margin-top: 16px;
     min-height: 80vh;
+    gap: 16px;
+    padding: 0 16px;
   }
   
   .userlist-frame {
-    background: linear-gradient(135deg, #e3f0ff 60%, #d0e7ff 100%);
-    border-radius: 18px;
-    box-shadow: 0 8px 32px rgba(56,189,248,0.18);
-    border: 2px solid #b6d0f7;
-    padding: 18px 12px 18px 12px;
+    background: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    border: 1px solid #e5e5e5;
+    padding: 16px;
     min-width: 200px;
     max-width: 240px;
-    margin-left: 24px;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     gap: 12px;
+    height: fit-content;
+    position: sticky;
+    top: 16px;
   }
   
   .online-users {
@@ -33,20 +37,20 @@
   }
   
   .online-users-label {
-    background: linear-gradient(90deg, #19439e 0%, #38bdf8 100%);
+    background: #0084ff;
     color: #fff;
     font-weight: 600;
-    border-radius: 18px;
-    padding: 8px 18px;
-    font-size: 1.1em;
-    box-shadow: 0 2px 8px rgba(37,99,235,0.10);
+    border-radius: 20px;
+    padding: 8px 16px;
+    font-size: 0.95rem;
+    box-shadow: 0 2px 8px rgba(0, 132, 255, 0.2);
     display: inline-block;
   }
   
   .userlist-separator {
     border: none;
-    border-top: 2px solid #b6d0f7;
-    margin: 0 0 12px 0;
+    border-top: 1px solid #e5e5e5;
+    margin: 8px 0;
     width: 100%;
     box-sizing: border-box;
   }
@@ -54,18 +58,7 @@
   .userlist {
     display: flex;
     flex-direction: column;
-    gap: 12px;
-  }
-  
-  .chat-main-layout {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: flex-start;
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
-    min-height: 80vh;
+    gap: 8px;
   }
   
   .chat-container {
@@ -74,33 +67,31 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    max-width: none;
     height: 85vh;
-    border-radius: 0 0 12px 12px;
-    overflow-y: auto;
-    background: #fff;
-    margin: 0;
-    box-shadow: 0 8px 32px rgba(37,99,235,0.10);
+    border-radius: 12px;
+    overflow: hidden;
+    background: #ffffff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   }
 
   .messages-wrapper {
     flex: 1;
     overflow-y: auto;
-    padding: 0 16px 0;
-    background: transparent;
+    padding: 16px;
+    background: #ffffff;
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: 8px;
     animation: fadeIn 0.7s;
   }
   
   .messages {
     flex-grow: 1;
-    padding: 0 16px 0;
+    padding: 0;
     background: transparent;
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: 8px;
     animation: fadeIn 0.7s;
   }
   
@@ -108,42 +99,51 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 1.25rem 1.5rem;
-    gap: 1rem;
-    background: #f8fafc;
-    border-top: 1px solid var(--border-color);
+    padding: 16px;
+    gap: 12px;
+    background: #ffffff;
+    border-top: 1px solid #e5e5e5;
   }
   
   input[type=text] {
-    font-size: 1em;
-    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    padding: 12px 16px;
     border-radius: 24px;
     outline: none;
-    border: 1.5px solid var(--primary-color);
-    background: #f1f5f9;
+    border: 1.5px solid #e5e5e5;
+    background: #f0f0f0;
     flex: 1;
     transition: border 0.2s, box-shadow 0.2s;
-    box-shadow: 0 1px 4px rgba(37,99,235,0.05);
+    font-family: inherit;
+  }
+  input[type=text]::placeholder {
+    color: #65676b;
   }
   input[type=text]:focus {
-    border: 1.5px solid var(--secondary-color);
-    box-shadow: 0 2px 8px rgba(56,189,248,0.10);
+    border: 1.5px solid #0084ff;
+    background: #ffffff;
+    box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.1);
   }
   
   button {
     cursor: pointer;
-    background: var(--primary-color);
+    background: #0084ff;
     color: white;
-    min-width: 100px;
-    font-size: 1.1em;
+    min-width: 80px;
+    font-size: 1rem;
     font-weight: 600;
     border: none;
     border-radius: 24px;
-    padding: 0.75rem 2rem;
-    box-shadow: 0 2px 8px rgba(37,99,235,0.10);
+    padding: 12px 24px;
+    box-shadow: 0 2px 8px rgba(0, 132, 255, 0.2);
     transition: background 0.2s, box-shadow 0.2s;
   }
   button:hover {
-    background: var(--secondary-color);
-    box-shadow: 0 4px 16px rgba(56,189,248,0.15);
-  }
\ No newline at end of file
+    background: #0073e6;
+    box-shadow: 0 4px 12px rgba(0, 132, 255, 0.3);
+  }
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

From 89baa77ce9af12dd1a0758b99cb57e62bfd7cf1a Mon Sep 17 00:00:00 2001
From: Harshit Jaiswal <76927137+harshitj183@users.noreply.github.com>
Date: Mon, 19 Jan 2026 15:56:35 +0530
Subject: [PATCH 6/6] Update AuthForms.module.css form fix

---
 .../src/components/Auth/AuthForms.module.css  | 94 +++++++++++++------
 1 file changed, 67 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/Auth/AuthForms.module.css b/frontend/src/components/Auth/AuthForms.module.css
index b6884a9..199ae65 100644
--- a/frontend/src/components/Auth/AuthForms.module.css
+++ b/frontend/src/components/Auth/AuthForms.module.css
@@ -1,67 +1,107 @@
 .form {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  width: 320px;
-  padding: 16px;
-  background: #ffffff;
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+  gap: var(--spacing-lg);
+  width: 100%;
+  max-width: 400px;
+  padding: var(--spacing-xl);
+  background-color: var(--light-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  color: var(--text-primary);
+  transition: all var(--transition-normal);
 }
 
 .form h2 {
-  margin: 0 0 8px 0;
+  margin: 0;
+  text-align: center;
+  color: var(--text-primary);
+  font-size: 1.75rem;
+  font-weight: 700;
 }
 
 .form label {
   display: flex;
   flex-direction: column;
-  font-size: 14px;
+  gap: var(--spacing-xs);
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--text-secondary);
 }
 
 .form input {
-  margin-top: 4px;
-  padding: 10px 12px;
-  border: 1px solid #d0d7de;
-  border-radius: 6px;
+  padding: 12px 16px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background-color: var(--light-bg); /* Matches card bg */
+  color: var(--text-primary);
+  font-size: 1rem;
+  transition: all var(--transition-fast);
+}
+
+.form input:focus {
+  border-color: var(--primary-blue);
+  box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.15);
+  outline: none;
 }
 
 .form button {
-  margin-top: 6px;
-  padding: 10px 12px;
-  background: #0d5bd7;
-  color: white;
+  margin-top: var(--spacing-sm);
+  padding: 12px;
+  background-color: var(--primary-blue);
+  color: #ffffff; /* Always white text on primary button */
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
+  font-size: 1rem;
+  font-weight: 600;
   cursor: pointer;
+  transition: all var(--transition-fast);
+  box-shadow: var(--shadow-sm);
+}
+
+.form button:hover:not(:disabled) {
+  background-color: var(--primary-blue-dark);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.form button:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
 }
 
 .error {
-  color: #b42318;
-  background: #fee4e2;
-  border: 1px solid #fda29b;
-  padding: 8px;
-  border-radius: 6px;
+  color: #d32f2f;
+  background-color: #ffebee;
+  border: 1px solid #ffcdd2;
+  padding: 12px;
+  border-radius: var(--radius-md);
+  font-size: 0.9rem;
+  text-align: center;
 }
 
 .link {
   text-align: center;
-  margin-top: 8px;
-  font-size: 14px;
-  color: #656d76;
+  margin-top: var(--spacing-sm);
+  font-size: 0.95rem;
+  color: var(--text-secondary);
 }
 
 .link a {
-  color: #0d5bd7;
+  color: var(--primary-blue);
   text-decoration: none;
-  font-weight: 500;
+  font-weight: 600;
+  transition: color var(--transition-fast);
 }
 
 .link a:hover {
+  color: var(--primary-blue-dark);
   text-decoration: underline;
 }