chore: conversation view

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

@@ -98,7 +98,7 @@ 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 }"
   >
     <ConversationHeader
@@ -112,7 +112,7 @@ export default {
     <woot-tabs
       v-if="dashboardApps.length && currentChat.id"
       :index="activeIndex"
-      class="-mt-px bg-white dashboard-app--tabs dark:bg-slate-900"
+      class="-mt-px bg-n-background !border-n-weak/50 dashboard-app--tabs"
       @change="onDashboardAppTabChange"
     >
       <woot-tabs-item
@@ -123,10 +123,7 @@ export default {
         :show-badge="false"
       />
     </woot-tabs>
-    <div
-      v-show="!activeIndex"
-      class="flex h-full min-h-0 m-0 bg-slate-25 dark:bg-slate-800"
-    >
+    <div v-show="!activeIndex" class="flex h-full min-h-0 m-0 bg-n-background">
       <MessagesView
         v-if="currentChat.id"
         :inbox-id="inboxId"

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

@@ -130,7 +130,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-col items-center justify-between px-4 py-2 bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 md:flex-row"
+    class="flex flex-col items-center justify-between px-4 py-2 border-b bg-n-background border-n-weak/50 dark:border-n-background/50 md:flex-row"
   >
     <div
       class="flex flex-col items-center justify-center flex-1 w-full min-w-0"