chore: Feedback fixes

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

@@ -203,9 +203,14 @@ const handleAgentAction = ({ action, value }) => {
             :size="16"
             rounded-full
           />
+          <Icon
+            v-else
+            icon="i-woot-empty-assignee"
+            class="size-4 text-n-slate-11"
+          />
         </template>
         <div class="grid grid-cols-[1fr_auto] items-center gap-1.5 min-w-0">
-          <span class="truncate min-w-0 font-420">
+          <span class="truncate min-w-0 text-body-main">
             {{ assignedAgentName }}
           </span>
           <Icon

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

@@ -19,7 +19,7 @@ defineProps({
       :icon="icon"
       class="text-n-slate-11 size-4 flex-shrink-0 mt-0.5"
     />
-    <div v-if="value" class="break-words">
+    <div v-if="value" class="break-words text-body-main">
       <slot>
         {{ value }}
       </slot>

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

@@ -155,7 +155,7 @@ onMounted(() => {
           class="px-1.5 h-6 rounded-md bg-n-button-color outline outline-1 outline-n-container flex items-center gap-0.6"
         >
           <Icon icon="i-lucide-hash" class="size-3.5 text-n-slate-10" />
-          <span class="text-xs font-440">{{ conversationId }}</span>
+          <span class="text-label-small">{{ conversationId }}</span>
         </div>
       </div>
     </SidebarActionsHeader>

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

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue';
+import { format } from 'date-fns';
 import { getLanguageName } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 import ContactDetailsItem from './ContactDetailsItem.vue';
 import CustomAttributes from './customAttributes/CustomAttributes.vue';
@@ -17,9 +18,18 @@ const props = defineProps({
 });
 
 const referer = computed(() => props.conversationAttributes.referer);
-const initiatedAt = computed(
-  () => props.conversationAttributes.initiated_at?.timestamp
-);
+
+const initiatedAtDate = computed(() => {
+  const timestamp = props.conversationAttributes.initiated_at?.timestamp;
+  if (!timestamp) return '';
+  return format(new Date(timestamp), 'EEEE, MMM dd, yyyy');
+});
+
+const initiatedAtTime = computed(() => {
+  const timestamp = props.conversationAttributes.initiated_at?.timestamp;
+  if (!timestamp) return '';
+  return format(new Date(timestamp), "HH:mm '('O')'");
+});
 
 const browserInfo = computed(() => props.conversationAttributes.browser);
 
@@ -46,9 +56,16 @@ const createdAtIp = computed(() => props.contactAttributes.created_at_ip);
 const staticElements = computed(() =>
   [
     {
-      content: initiatedAt,
-      title: 'CONTACT_PANEL.INITIATED_AT',
-      key: 'static-initiated-at',
+      content: initiatedAtDate,
+      title: 'CONTACT_PANEL.INITIATED_AT_DATE',
+      key: 'static-initiated-at-date',
+      type: 'static_attribute',
+      icon: 'i-lucide-calendar',
+    },
+    {
+      content: initiatedAtTime,
+      title: 'CONTACT_PANEL.INITIATED_AT_TIME',
+      key: 'static-initiated-at-time',
       type: 'static_attribute',
       icon: 'i-lucide-timer',
     },

app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue

@@ -69,14 +69,14 @@ onMounted(() => {
 <template>
   <div>
     <div v-if="!uiFlags.isFetching && !macros.length" class="p-3">
-      <SidePanelEmptyState :message="$t('MACROS.LIST.404')" class="mb-2" />
+      <SidePanelEmptyState :message="$t('MACROS.LIST.404')" />
       <router-link :to="accountScopedUrl('settings/macros')">
         <NextButton
-          link
           sm
+          slate
           icon="i-lucide-plus"
           :label="$t('MACROS.HEADER_BTN_TXT')"
-          class="!text-n-slate-11 hover:!text-n-slate-12 hover:!no-underline !py-2"
+          class="w-full mt-2"
         />
       </router-link>
     </div>

app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue

@@ -76,7 +76,7 @@ const closeMacroPreview = () => {
         class="[&>span]:size-3.5"
         @click="toggleMacroPreview"
       />
-      <span class="font-420 text-ellipsis text-n-slate-12 truncate">
+      <span class="text-body-main text-n-slate-12 truncate">
         {{ macro.name }}
       </span>
     </div>

app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue

@@ -61,7 +61,7 @@ const resolvedMacro = computed(() => {
     <div
       v-for="(action, i) in resolvedMacro"
       :key="i"
-      class="relative ltr:pl-7 rtl:pr-7 py-3 after:content-[''] after:absolute ltr:after:left-1.5 rtl:after:right-1.5 after:w-px after:bg-n-weak"
+      class="relative ltr:pl-7 rtl:pr-7 py-3 after:content-[''] after:absolute ltr:after:left-1.5 rtl:after:right-1.5 after:w-px after:bg-n-strong"
       :class="{
         'after:top-1 after:h-3.5': resolvedMacro.length === 1,
         'after:top-2 after:-bottom-5':
@@ -69,7 +69,7 @@ const resolvedMacro = computed(() => {
       }"
     >
       <div
-        class="absolute ltr:left-[2.5px] rtl:right-[2.5px] top-[18px] w-2 h-2 rounded-full bg-n-surface-1 border-2 border-n-weak z-10"
+        class="absolute ltr:left-[2.5px] rtl:right-[2.5px] top-[18px] w-2 h-2 rounded-full bg-n-surface-1 border-2 border-n-strong z-10"
       />
 
       <p class="mb-1 text-sm font-medium text-n-slate-11">

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

@@ -196,9 +196,18 @@ onMounted(() => {
               :more-count-text="moreParticipantsText"
               gap="tight"
             />
+            <div
+              v-else
+              class="size-4 flex items-center justify-center flex-shrink-0"
+            >
+              <Icon
+                icon="i-lucide-users-round"
+                class="size-3.5 text-n-slate-11"
+              />
+            </div>
           </template>
           <div class="grid grid-cols-[1fr_auto] items-center gap-1.5 min-w-0">
-            <span class="truncate min-w-0 font-420">
+            <span class="truncate min-w-0 text-body-main">
               {{ participantsLabel }}
             </span>
             <Icon

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

@@ -153,7 +153,7 @@ const handlePriorityAction = ({ value }) => {
           <CardPriorityIcon :priority="assignedPriority.priority" show-empty />
         </template>
         <div class="grid grid-cols-[1fr_auto] items-center gap-1.5 min-w-0">
-          <span class="truncate min-w-0 font-420">
+          <span class="truncate min-w-0 text-body-main">
             {{ assignedPriorityName }}
           </span>
           <Icon

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

@@ -9,6 +9,6 @@ defineProps({
 
 <template>
   <div class="custom-dashed-border p-4 rounded-xl">
-    <p class="text-center text-n-slate-10 font-420">{{ message }}</p>
+    <p class="text-center text-n-slate-10 text-body-main">{{ message }}</p>
   </div>
 </template>

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

@@ -141,9 +141,18 @@ const handleTeamAction = ({ action, value }) => {
             :size="16"
             rounded-full
           />
+          <div
+            v-else
+            class="size-4 flex items-center justify-center flex-shrink-0"
+          >
+            <Icon
+              icon="i-lucide-users-round"
+              class="size-3.5 text-n-slate-11"
+            />
+          </div>
         </template>
         <div class="grid grid-cols-[1fr_auto] items-center gap-1.5 min-w-0">
-          <span class="truncate min-w-0 font-420">
+          <span class="truncate min-w-0 text-body-main">
             {{ assignedTeamName }}
           </span>
           <Icon

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -162,12 +162,12 @@ const openMergeModal = () => {
         />
         <div
           v-if="showAvatar"
-          class="flex flex-col justify-center min-w-0 flex-1"
+          class="flex flex-col justify-center min-w-0 gap-1 flex-1"
         >
           <div class="flex items-center gap-1">
             <h3
               :title="contact.name"
-              class="flex-shrink font-medium max-w-full min-w-0 my-0 text-base capitalize break-words text-n-slate-12 line-clamp-2"
+              class="flex-shrink text-heading-3 max-w-full min-w-0 my-0 capitalize break-words text-n-slate-12 line-clamp-2"
             >
               {{ contact.name }}
             </h3>
@@ -184,10 +184,7 @@ const openMergeModal = () => {
               />
             </a>
           </div>
-          <p
-            v-if="contact"
-            class="text-sm text-n-slate-11 font-420 m-0 truncate"
-          >
+          <p v-if="contact" class="text-n-slate-11 text-body-main m-0 truncate">
             {{ contact.email || contact.phone_number || '---' }}
           </p>
         </div>
@@ -196,7 +193,7 @@ const openMergeModal = () => {
       <div class="flex flex-col items-start gap-3 min-w-0 w-full">
         <p
           v-if="additionalAttributes.description"
-          class="break-words text-sm text-n-slate-11 font-420 mb-0"
+          class="break-words text-body-para text-n-slate-11 mb-0"
         >
           {{ additionalAttributes.description }}
         </p>

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue

@@ -34,7 +34,7 @@ const onCopy = async e => {
 
 <template>
   <div class="grid grid-cols-[30%_1fr] gap-4 w-full items-center h-9">
-    <span class="text-sm font-420 text-n-slate-11 truncate whitespace-nowrap">
+    <span class="text-body-main text-n-slate-11 truncate whitespace-nowrap">
       {{ title }}
     </span>
 
@@ -45,21 +45,21 @@ const onCopy = async e => {
         class="hover:underline min-w-0 truncate"
         :title="value"
       >
-        <span v-if="value" class="text-sm font-420 text-n-slate-12">
+        <span v-if="value" class="text-body-main text-n-slate-12">
           {{ value }}
         </span>
-        <span v-else class="text-sm text-n-slate-10">
+        <span v-else class="text-body-main text-n-slate-10">
           {{ '---' }}
         </span>
       </a>
 
-      <div v-else class="text-n-slate-12 min-w-0 truncate">
+      <div v-else class="text-body-main text-n-slate-12 min-w-0 truncate">
         <span
           v-if="value"
           v-dompurify-html="value"
-          class="text-sm font-420 text-n-slate-12 [&>span]:ltr:ml-1.5 [&>span]:rtl:mr-1.5"
+          class="text-body-main text-n-slate-12 [&>span]:ltr:ml-1.5 [&>span]:rtl:mr-1.5"
         />
-        <span v-else class="text-sm text-n-slate-10">{{ '---' }}</span>
+        <span v-else class="text-body-main text-n-slate-10">{{ '---' }}</span>
       </div>
 
       <NextButton

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactNotes.vue

@@ -99,7 +99,7 @@ watch(
 
 <template>
   <div>
-    <div class="px-3 pt-3 pb-2">
+    <div v-if="notes.length" class="px-3 pt-3 pb-2">
       <NextButton
         sm
         slate
@@ -135,6 +135,15 @@ watch(
       <SidePanelEmptyState
         :message="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.CONVERSATION_EMPTY_STATE')"
       />
+      <NextButton
+        sm
+        slate
+        icon="i-lucide-plus"
+        :label="$t('CONTACTS_LAYOUT.SIDEBAR.NOTES.ADD_NOTE')"
+        :disabled="!contactId || isFetchingNotes"
+        class="w-full mt-2"
+        @click="openCreateModal"
+      />
     </div>
 
     <woot-modal

app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue

@@ -264,7 +264,7 @@ onMounted(() => {
                 v-if="element.attributeDescription"
                 :message="element.attributeDescription"
               />
-              <span class="text-sm font-420 truncate text-n-slate-12">
+              <span class="text-body-main truncate text-n-slate-12">
                 {{ element.attributeDisplayName }}
               </span>
             </div>