chore: Feedback fixes

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributeItem.vue

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

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue

@@ -82,7 +82,7 @@ onMounted(() => {
     <p
       ref="noteContentRef"
       v-dompurify-html="formatMessage(note.content || '')"
-      class="mb-0 font-420 prose-sm prose-p:text-sm prose-p:leading-relaxed prose-p:mb-1 prose-p:mt-0 prose-ul:mb-1 prose-ul:mt-0 text-n-slate-12"
+      class="mb-0 text-body-main prose-sm prose-p:text-sm prose-p:leading-relaxed prose-p:mb-1 prose-p:mt-0 prose-ul:mb-1 prose-ul:mt-0 text-n-slate-12"
       :class="{
         'line-clamp-4': collapsible && !isExpanded && needsCollapse,
       }"

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

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

app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue

@@ -78,9 +78,9 @@ const handleInputUpdate = async () => {
   <div class="flex items-center w-full min-w-0 gap-1.5 justify-end">
     <span
       v-if="!isEditingValue"
-      class="min-w-0 text-sm"
+      class="min-w-0 text-body-main"
       :class="{
-        'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
+        'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none !font-medium':
           !isEditingView,
         'text-n-slate-12 truncate': isEditingView && attribute.value,
         'text-n-slate-10 truncate': isEditingView && !attribute.value,

app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue

@@ -52,9 +52,9 @@ const handleAttributeAction = async action => {
           content: attribute.value,
           delay: { show: 1000, hide: 0 },
         }"
-        class="min-w-0 text-sm truncate font-420"
+        class="min-w-0 text-body-main truncate"
         :class="{
-          'text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
+          'text-n-slate-11 hover:text-n-slate-12 py-2 select-none !font-medium':
             !isEditingView,
           'text-n-slate-12': isEditingView && attribute.value,
           'text-n-slate-10': isEditingView && !attribute.value,

app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue

@@ -121,9 +121,9 @@ const handleInputUpdate = async () => {
         content: !isAttributeTypeLink ? attribute.value : '',
         delay: { show: 1000, hide: 0 },
       }"
-      class="min-w-0 text-sm cursor-pointer font-420"
+      class="min-w-0 cursor-pointer text-body-main"
       :class="{
-        'text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
+        'text-n-slate-11 hover:text-n-slate-12 py-2 select-none !font-medium':
           !isEditingView,
         'text-n-slate-12 truncate':
           isEditingView && !isAttributeTypeLink && attribute.value,

app/javascript/dashboard/components-next/SidebarActionsHeader.vue

@@ -20,10 +20,10 @@ const handleButtonClick = button => {
 
 <template>
   <div
-    class="flex flex-col items-start gap-3 justify-between ltr:pl-4 ltr:pr-2 rtl:pl-2 rtl:pr-4 my-2 py-2"
+    class="flex flex-col items-start gap-3 justify-between ltr:pl-4 ltr:pr-2 rtl:pl-2 rtl:pr-4 my-2 pt-2"
   >
     <div class="flex items-center justify-between gap-2 flex-1 w-full">
-      <span class="font-medium text-base text-n-slate-12">{{ title }}</span>
+      <span class="text-heading-1 text-n-slate-12">{{ title }}</span>
       <div class="flex items-center h-6">
         <Button
           v-for="button in buttons"

app/javascript/dashboard/components-next/button/Button.vue

@@ -154,6 +154,13 @@ const STYLE_CONFIG = {
         'text-n-teal-9 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
     },
   },
+  iconColor: {
+    blue: 'text-n-blue-11',
+    ruby: 'text-n-ruby-11',
+    amber: 'text-n-amber-11',
+    slate: 'text-n-slate-11',
+    teal: 'text-n-teal-11',
+  },
   sizes: {
     regular: {
       xs: 'h-6 px-2 rounded-lg',
@@ -249,7 +256,11 @@ const animationClasses = computed(() => {
     }"
   >
     <slot v-if="(icon || $slots.icon) && !isLoading" name="icon">
-      <Icon :icon="icon" class="flex-shrink-0" />
+      <Icon
+        :icon="icon"
+        class="flex-shrink-0"
+        :class="STYLE_CONFIG.iconColor[computedColor]"
+      />
     </slot>
 
     <Spinner v-if="isLoading" class="!w-5 !h-5 flex-shrink-0" />

app/javascript/dashboard/components-next/label/Label.vue

@@ -24,7 +24,7 @@ defineProps({
     />
     <span
       class="text-n-slate-12 whitespace-nowrap"
-      :class="compact ? 'text-label-small' : 'text-label !font-440'"
+      :class="compact ? 'text-label-small' : 'text-label !font-420'"
     >
       {{ label.title }}
     </span>