fix: Update design of the conversation sidebar, chatlist (#10572)

- Increase the sidebar and chatlist width on screens bigger than 2xl
- Fix background of the copilot sidebar
- Increase the breakpoint for hiding chatlist from 1024 to 1200

app/javascript/dashboard/components/ChatList.vue

@@ -782,10 +782,10 @@ watch(conversationFilters, (newVal, oldVal) => {
 
 <template>
   <div
-    class="flex flex-col flex-shrink-0 border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
+    class="flex flex-col flex-shrink-0 conversations-list-wrap"
     :class="[
       { hidden: !showConversationList },
-      isOnExpandedLayout ? 'basis-full' : 'w-[360px]',
+      isOnExpandedLayout ? 'basis-full' : 'w-[360px] 2xl:w-[420px]',
     ]"
   >
     <slot />

app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue

@@ -98,8 +98,10 @@ export default {
 
 <template>
   <div
-    class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
+    class="conversation-details-wrap bg-n-background"
-    :class="{ 'with-border-right': !isOnExpandedLayout }"
+    :class="{
+      'border-l rtl:border-l-0 rtl:border-r border-n-weak': !isOnExpandedLayout,
+    }"
   >
     <ConversationHeader
       v-if="currentChat.id"
@@ -159,10 +161,6 @@ export default {
 <style lang="scss" scoped>
 .conversation-details-wrap {
   @apply flex flex-col min-w-0 w-full;
-
-  &.with-border-right {
-    @apply border-r border-slate-50 dark:border-slate-700;
-  }
 }
 
 .dashboard-app--tabs {

app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue

@@ -51,7 +51,7 @@ const showCopilotTab = computed(() => {
 
 <template>
   <div
-    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 min-w-[300px] w-[300px] flex flex-col bg-n-solid-2"
+    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 min-w-[300px] w-[300px] 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
   >
     <div v-if="showCopilotTab" class="p-2">
       <TabBar

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -468,9 +468,7 @@ export default {
         size="tiny"
         color-scheme="secondary"
         class="box-border fixed z-10 bg-white border border-r-0 border-solid rounded-bl-calc rtl:rotate-180 rounded-tl-calc dark:bg-slate-700 border-slate-50 dark:border-slate-600"
-        :class="
+        :class="isInboxView ? 'top-52 md:top-40' : 'top-32'"
-          isInboxView ? 'top-52 md:top-40' : 'top-[9.5rem] md:top-[6.25rem]'
-        "
         :icon="isRightOrLeftIcon"
         @click="onToggleContactPanel"
       />
@@ -558,6 +556,7 @@ export default {
 
 <style scoped>
 @tailwind components;
+
 @layer components {
   .rounded-bl-calc {
     border-bottom-left-radius: calc(1.5rem + 1px);

app/javascript/dashboard/constants/globals.js

@@ -35,7 +35,7 @@ export default {
   HELP_CENTER_DOCS_URL:
     'https://www.chatwoot.com/docs/product/others/help-center',
   TESTIMONIAL_URL: 'https://testimonials.cdn.chatwoot.com/content.json',
-  SMALL_SCREEN_BREAKPOINT: 1024,
+  SMALL_SCREEN_BREAKPOINT: 1200,
   AVAILABILITY_STATUS_KEYS: ['online', 'busy', 'offline'],
   SNOOZE_OPTIONS: {
     UNTIL_NEXT_REPLY: 'until_next_reply',

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -193,7 +193,7 @@ export default {
 </script>
 
 <template>
-  <section class="bg-white conversation-page dark:bg-slate-900">
+  <section class="flex w-full h-full">
     <ChatList
       :show-conversation-list="showConversationList"
       :conversation-inbox="inboxId"
@@ -219,11 +219,3 @@ export default {
     <CmdBarConversationSnooze />
   </section>
 </template>
-
-<style lang="scss" scoped>
-.conversation-page {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-</style>