chore: Update sidebar and app layout UI (#12933)

app/javascript/dashboard/components/widgets/InboxName.vue

@@ -13,7 +13,7 @@ defineProps({
   <div class="flex items-center text-n-slate-11 text-xs min-w-0">
     <ChannelIcon
       :inbox="inbox"
-      class="size-3 ltr:mr-1 rtl:ml-1 flex-shrink-0"
+      class="size-3.5 ltr:mr-0.5 rtl:ml-0.5 flex-shrink-0"
     />
     <span class="truncate">
       {{ inbox.name }}

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

@@ -91,7 +91,7 @@ export default {
 
 <template>
   <div
-    class="conversation-details-wrap flex flex-col min-w-0 w-full bg-n-background relative"
+    class="conversation-details-wrap flex flex-col min-w-0 w-full bg-n-surface-1 relative"
     :class="{
       'border-l rtl:border-l-0 rtl:border-r border-n-weak': !isOnExpandedLayout,
     }"
@@ -104,7 +104,7 @@ export default {
     <woot-tabs
       v-if="dashboardApps.length && currentChat.id"
       :index="activeIndex"
-      class="-mt-px border-t border-t-n-background"
+      class="-mt-px"
       @change="onDashboardAppTabChange"
     >
       <woot-tabs-item

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

@@ -95,7 +95,7 @@ const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
 <template>
   <div
     ref="conversationHeader"
-    class="flex flex-col gap-3 items-center justify-between flex-1 w-full min-w-0 xl:flex-row px-3 py-2 border-b bg-n-background border-n-weak h-24 xl:h-12"
+    class="flex flex-col gap-3 items-center justify-between flex-1 w-full min-w-0 xl:flex-row px-3 pt-3 pb-2 h-24 xl:h-12"
   >
     <div
       class="flex items-center justify-start w-full xl:w-auto max-w-full min-w-0 xl:flex-1"

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

@@ -42,7 +42,7 @@ const closeContactPanel = () => {
 <template>
   <div
     v-on-click-outside="() => closeContactPanel()"
-    class="bg-n-background h-full overflow-hidden flex flex-col fixed top-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out ltr:right-0 rtl:left-0 md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
+    class="bg-n-surface-2 h-full overflow-hidden flex flex-col fixed top-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out ltr:right-0 rtl:left-0 md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
     :class="[
       {
         'md:flex': activeTab === 0,

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

@@ -58,7 +58,7 @@ export default {
       ) {
         return 'h-full overflow-auto w-full';
       }
-      return 'flex-1 min-w-0 px-0 flex flex-col items-center justify-center h-full';
+      return 'flex-1 min-w-0 px-0 flex flex-col items-center justify-center h-full bg-n-surface-1';
     },
   },
 };

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

@@ -508,7 +508,7 @@ export default {
       class="flex relative flex-col"
       :class="{
         'modal-mask': isPopOutReplyBox,
-        'bg-n-background': !isPopOutReplyBox,
+        'bg-n-surface-1': !isPopOutReplyBox,
       }"
     >
       <div