chore: Update typography in sidebar, chatlist, conversation card

2025-12-17 22:43:38 +05:30
parent 657a89992a
commit 67766faa07
23 changed files with 165 additions and 46 deletions
@@ -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"
  >
@@ -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" />
@@ -77,6 +77,7 @@ const onSelectConversation = checked => {
          :selected="selected"
          :enable-selection="enableSelection"
          :hide-thumbnail="hideThumbnail"
+          class="mt-0.5"
          @select-conversation="onSelectConversation"
        />

@@ -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>
@@ -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 -->
@@ -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>
@@ -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>
@@ -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>
@@ -175,10 +175,10 @@ const STYLE_CONFIG = {
    },
  },
  fontSize: {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    md: 'text-sm font-medium',
-    lg: 'text-base',
+    xs: 'text-button-small',
+    sm: 'text-button',
+    md: 'text-button',
+    lg: 'text-base font-460',
  },
  clickAnimation: {
    xs: 'active:enabled:scale-[0.97]',
@@ -255,7 +255,7 @@ const animationClasses = computed(() => {
    <Spinner v-if="isLoading" class="!w-5 !h-5 flex-shrink-0" />

    <slot v-if="label || $slots.default" name="default">
-      <span v-if="label" class="min-w-0 font-420 truncate">{{ label }}</span>
+      <span v-if="label" class="min-w-0 truncate">{{ label }}</span>
    </slot>
  </button>
 </template>
@@ -24,7 +24,7 @@ defineProps({
    />
    <span
      class="text-n-slate-12 whitespace-nowrap"
-      :class="compact ? 'font-440 text-xs' : 'font-420 text-sm'"
+      :class="compact ? 'text-label-small' : 'text-label !font-440'"
    >
      {{ label.title }}
    </span>
@@ -623,10 +623,10 @@ const menuItems = computed(() => {
      <div class="flex gap-2 px-2">
        <RouterLink
          :to="{ name: 'search' }"
-          class="flex gap-2 items-center px-2 py-1 w-full h-7 rounded-lg outline outline-1 outline-n-weak bg-n-solid-3 dark:bg-n-black/30"
+          class="flex gap-2 items-center px-2 py-1 w-full h-7 rounded-lg outline outline-1 outline-n-weak bg-n-button-color"
        >
-          <span class="flex-shrink-0 i-lucide-search size-4 text-n-slate-11" />
-          <span class="flex-grow text-left">
+          <span class="flex-shrink-0 i-lucide-search size-4 text-n-slate-10" />
+          <span class="flex-grow text-start text-n-slate-10 font-interDisplay">
            {{ t('COMBOBOX.SEARCH_PLACEHOLDER') }}
          </span>
          <span
@@ -46,7 +46,13 @@ const count = computed(() =>
      />
    </div>
    <div class="flex items-center gap-1.5 flex-grow min-w-0">
-      <span class="text-sm font-medium leading-5 truncate">
+      <span
+        class="truncate"
+        :class="{
+          'text-body-main': !isActive,
+          'font-medium text-sm': isActive || hasActiveChild,
+        }"
+      >
        {{ label }}
      </span>
      <span
@@ -47,7 +47,7 @@ const shouldRenderComponent = computed(() => {
        <span v-if="icon" class="size-4 grid place-content-center rounded-full">
          <Icon :icon="icon" class="size-4 inline-block" />
        </span>
-        <div class="flex-1 truncate min-w-0">{{ label }}</div>
+        <div class="flex-1 truncate min-w-0 text-sm">{{ label }}</div>
      </template>
    </component>
  </Policy>
@@ -18,7 +18,7 @@ defineProps({
    class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8 text-n-slate-10 select-none pointer-events-none"
  >
    <Icon v-if="icon" :icon="icon" class="size-4" />
-    <span class="text-sm font-medium leading-5 flex-grow">
+    <span class="text-sm font-medium flex-grow">
      {{ label }}
    </span>
  </div>