update sidebar background color and improve dark mode styles / colors

fix: email validation trigger in reply box

Author: abhinavxd

frontend/src/assets/styles/main.scss

@@ -62,7 +62,7 @@
     }
   }
   :root {
-    --sidebar-background: 0 0% 99%;
+    --sidebar-background: 0 0% 100%;
     --sidebar-foreground: 240 5.9% 10%;
     --sidebar-primary: 240 5.9% 10%;
     --sidebar-primary-foreground: 0 0% 98%;
@@ -126,7 +126,7 @@
   }
 
   .dark {
-    --background: 240 10% 3.9%;
+    --background: 240 5.9% 10%;
     --foreground: 0 0% 98%;
 
     --card: 240 10% 3.9%;

frontend/src/features/conversation/ReplyBoxContent.vue

@@ -24,17 +24,9 @@
           </TabsTrigger>
         </TabsList>
       </Tabs>
-      <span
-        class="text-muted-foreground hover:text-foreground transition-colors duration-200 cursor-pointer"
-        variant="ghost"
-        @click="toggleFullscreen"
-      >
-        <component
-          :is="isFullscreen ? Minimize2 : Maximize2"
-          :size="isFullscreen ? '18' : '15'"
-          :class="{ 'mr-2': !isFullscreen, 'mr-1 mb-2': isFullscreen }"
-        />
-      </span>
+      <Button class="text-muted-foreground" variant="ghost" @click="toggleFullscreen">
+        <component :is="isFullscreen ? Minimize2 : Maximize2" />
+      </Button>
     </div>
 
     <!-- To, CC, and BCC fields -->
@@ -43,13 +35,13 @@
       v-if="messageType === 'reply'"
     >
       <div class="flex items-center space-x-2">
-        <label class="w-12 text-sm font-medium text-muted-foreground">To:</label>
+        <label class="w-12 text-sm font-medium text-muted-foreground">TO:</label>
         <Input
           type="text"
           :placeholder="t('replyBox.emailAddresess')"
           v-model="to"
           class="flex-grow px-3 py-2 text-sm border rounded focus:ring-2 focus:ring-ring"
-          @blur="validateEmails('to')"
+          @blur="validateEmails"
         />
       </div>
       <div class="flex items-center space-x-2">
@@ -59,7 +51,7 @@
           :placeholder="t('replyBox.emailAddresess')"
           v-model="cc"
           class="flex-grow px-3 py-2 text-sm border rounded focus:ring-2 focus:ring-ring"
-          @blur="validateEmails('cc')"
+          @blur="validateEmails"
         />
         <Button
           size="sm"
@@ -76,7 +68,7 @@
           :placeholder="t('replyBox.emailAddresess')"
           v-model="bcc"
           class="flex-grow px-3 py-2 text-sm border rounded focus:ring-2 focus:ring-ring"
-          @blur="validateEmails('bcc')"
+          @blur="validateEmails"
         />
       </div>
     </div>
@@ -221,9 +213,11 @@ const editorPlaceholder = t('replyBox.editor.placeholder')
 const toggleBcc = async () => {
   showBcc.value = !showBcc.value
   await nextTick()
-  // If hiding BCC field, clear the content
+  // If hiding BCC field, clear the content and validate email bcc so it doesn't show errors.
   if (!showBcc.value) {
     bcc.value = ''
+    await nextTick()
+    validateEmails()
   }
 }
 
@@ -255,37 +249,32 @@ const enableSend = computed(() => {
 })
 
 /**
- * Validate email addresses in the To, CC, and BCC fields
- * @param {string} field - 'to', 'cc', or 'bcc'
+ * Validates email addresses in To, CC, and BCC fields.
+ * Populates `emailErrors` with invalid emails grouped by field.
  */
-const validateEmails = (field) => {
-  const emails = field === 'to' ? to.value : field === 'cc' ? cc.value : bcc.value
-  const emailList = emails
-    .split(',')
-    .map((e) => e.trim())
-    .filter((e) => e !== '')
+const validateEmails = async () => {
+  emailErrors.value = []
+  await nextTick()
 
-  const invalidEmails = emailList.filter((email) => !validateEmail(email))
+  const fields = ['to', 'cc', 'bcc']
+  const values = { to: to.value, cc: cc.value, bcc: bcc.value }
 
-  // Clear existing errors
-  emailErrors.value = []
+  fields.forEach((field) => {
+    const invalid = values[field]
+      .split(',')
+      .map((e) => e.trim())
+      .filter((e) => e && !validateEmail(e))
 
-  // Add new error if there are invalid emails
-  if (invalidEmails.length > 0) {
-    emailErrors.value = [
-      ...emailErrors.value,
-      `${t('replyBox.invalidEmailsIn')} '${field}': ${invalidEmails.join(', ')}`
-    ]
-  }
+    if (invalid.length)
+      emailErrors.value.push(`${t('replyBox.invalidEmailsIn')} '${field}': ${invalid.join(', ')}`)
+  })
 }
 
 /**
  * Send the reply or private note
  */
 const handleSend = async () => {
-  validateEmails('to')
-  validateEmails('cc')
-  validateEmails('bcc')
+  await validateEmails()
   if (emailErrors.value.length > 0) {
     emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
       variant: 'destructive',

frontend/src/features/conversation/list/ConversationListItem.vue

@@ -1,8 +1,8 @@
 <template>
   <div
-    class="group relative p-4 transition-all duration-200 ease-in-out cursor-pointer hover:bg-accent/20 dark:hover:bg-accent/30"
+    class="group relative px-4 p-4 transition-all duration-200 ease-in-out cursor-pointer hover:bg-accent/20 dark:hover:bg-accent/60"
     :class="{
-      'bg-accent/30 dark:bg-accent border-l-2': conversation.uuid === currentConversation?.uuid
+      'bg-accent/60 border-l-4': conversation.uuid === currentConversation?.uuid
     }"
     @click="navigateToConversation(conversation.uuid)"
   >
@@ -39,7 +39,7 @@
 
         <!-- Message preview and unread count -->
         <div class="flex items-start justify-between gap-2">
-          <div class="text-sm flex items-center gap-1.5 flex-1 break-all">
+          <div class="text-sm flex items-center gap-1.5 flex-1 break-all text-gray-600 dark:text-gray-300">
             <Reply
               class="text-green-600 flex-shrink-0"
               size="15"

frontend/src/features/conversation/message/AgentMessageBubble.vue

@@ -17,7 +17,7 @@
             'bg-[#FEF1E1] dark:bg-[#4C3A24]': message.private,
             'border border-border': !message.private,
             'opacity-50 animate-pulse': message.status === 'pending',
-            'border-red-200': message.status === 'failed'
+            'border-red-400': message.status === 'failed'
           }"
         >
           <!-- Message Envelope -->