chore: Update typography in sidebar, chatlist, conversation card

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardAvatar.vue

@@ -32,7 +32,7 @@ const selectedModel = computed({
 
 <template>
   <div
-    class="relative self-start"
+    class="relative flex items-center flex-shrink-0"
     @mouseenter="onThumbnailHover"
     @mouseleave="onThumbnailLeave"
   >

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardContent.vue

@@ -35,7 +35,7 @@ defineProps({
     <span
       v-else
       key="no-messages"
-      class="inline-grid grid-flow-col auto-cols-max items-center gap-1 text-sm font-420"
+      class="inline-grid grid-flow-col auto-cols-max items-center gap-1 text-body-main"
       :class="unreadCount > 0 ? 'text-n-slate-12' : 'text-n-slate-11'"
     >
       <Icon icon="i-lucide-info" class="size-3.5" />

app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardCompact.vue

@@ -77,6 +77,7 @@ const onSelectConversation = checked => {
           :selected="selected"
           :enable-selection="enableSelection"
           :hide-thumbnail="hideThumbnail"
+          class="mt-0.5"
           @select-conversation="onSelectConversation"
         />
 

app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardExpanded.vue

@@ -117,22 +117,20 @@ const selectedModel = computed({
       </div>
 
       <span
-        class="text-xs outline outline-1 -outline-offset-1 outline-n-weak px-1.5 rounded-md h-6 text-n-slate-11 font-440 min-w-14 flex-shrink-0 inline-flex items-center justify-center truncate"
+        class="text-label-small outline outline-1 -outline-offset-1 outline-n-weak px-1.5 rounded-md h-6 text-n-slate-11 min-w-12 flex-shrink-0 inline-flex items-center justify-center truncate"
       >
         {{ chat.id }}
       </span>
 
-      <div class="flex-shrink-0">
-        <CardAvatar
-          :contact="currentContact"
-          :selected="false"
-          :enable-selection="false"
-          :hide-thumbnail="false"
-        />
-      </div>
+      <CardAvatar
+        :contact="currentContact"
+        :selected="false"
+        :enable-selection="false"
+        :hide-thumbnail="false"
+      />
 
       <h4
-        class="text-sm my-0 capitalize truncate text-n-slate-12 font-medium w-32 flex-shrink-0"
+        class="text-heading-3 my-0 capitalize truncate text-n-slate-12 font-medium w-32 flex-shrink-0"
       >
         {{ currentContact.name }}
       </h4>

app/javascript/dashboard/components-next/Conversation/ConversationCard/MessagePreview.vue

@@ -101,7 +101,7 @@ const isMessageSticker = computed(() => {
     </template>
 
     <span
-      class="min-w-0 font-420"
+      class="min-w-0 text-body-main"
       :class="multiLine ? 'line-clamp-2' : 'truncate'"
     >
       <!-- Case for previous and conversation conversation card -->

app/javascript/dashboard/components-next/Conversation/ConversationCard/VoiceCallStatus.vue

@@ -62,7 +62,7 @@ const statusColor = computed(
 <template>
   <div class="grid grid-cols-[auto_1fr] items-center gap-1 min-w-0 text-sm">
     <Icon class="size-3.5" :icon="iconName" :class="statusColor" />
-    <span class="truncate text-sm font-420" :class="statusColor">
+    <span class="truncate text-body-main" :class="statusColor">
       {{ $t(labelKey) }}
     </span>
   </div>

app/javascript/dashboard/components-next/Conversation/InboxName.vue

@@ -12,10 +12,10 @@ defineProps({
 <template>
   <div
     :title="inbox.name"
-    class="flex items-center gap-0.5 text-n-slate-11 text-xs min-w-0"
+    class="flex items-center gap-0.5 text-n-slate-11 min-w-0"
   >
     <ChannelIcon :inbox="inbox" class="size-4 flex-shrink-0" />
-    <span class="truncate font-440">
+    <span class="truncate text-label-small">
       {{ inbox.name }}
     </span>
   </div>

app/javascript/dashboard/components-next/Conversation/Sla/SLACardLabel.vue

@@ -89,7 +89,7 @@ defineExpose({
         class="flex-shrink-0 size-3"
         :class="slaTextStyles"
       />
-      <span class="text-xs font-440" :class="slaTextStyles">
+      <span class="text-label-small" :class="slaTextStyles">
         {{ slaStatus.threshold }}
       </span>
     </div>