feat: Update contact details page UI (#13041)

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

@@ -9,6 +9,7 @@ import ListAttribute from 'dashboard/components-next/CustomAttributes/ListAttrib
 import CheckboxAttribute from 'dashboard/components-next/CustomAttributes/CheckboxAttribute.vue';
 import DateAttribute from 'dashboard/components-next/CustomAttributes/DateAttribute.vue';
 import OtherAttribute from 'dashboard/components-next/CustomAttributes/OtherAttribute.vue';
+import HelperTextPopup from 'dashboard/components/ui/HelperTextPopup.vue';
 
 const props = defineProps({
   attribute: {
@@ -75,11 +76,15 @@ const CurrentAttributeComponent = computed(() => {
 
 <template>
   <div
-    class="grid grid-cols-[140px,1fr] group/attribute items-center w-full gap-2"
+    class="grid grid-cols-[auto,auto] group/attribute items-center w-full gap-4"
     :class="isEditingView ? 'min-h-10' : 'min-h-11'"
   >
-    <div class="flex items-center justify-between truncate">
-      <span class="text-sm font-medium truncate text-n-slate-12">
+    <div class="flex items-center gap-1.5 min-w-0">
+      <HelperTextPopup
+        v-if="attribute.attributeDescription"
+        :message="attribute.attributeDescription"
+      />
+      <span class="text-sm font-420 truncate text-n-slate-12">
         {{ attribute.attributeDisplayName }}
       </span>
     </div>

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

@@ -108,7 +108,7 @@ const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
 </script>
 
 <template>
-  <div v-if="hasContactAttributes" class="flex flex-col gap-6 px-6 py-6">
+  <div v-if="hasContactAttributes" class="flex flex-col gap-4 px-5 pt-4 pb-6">
     <div v-if="!hasNoUsedAttributes" class="flex flex-col gap-2">
       <ContactCustomAttributeItem
         v-for="attribute in usedAttributes"
@@ -117,16 +117,16 @@ const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
         :attribute="attribute"
       />
     </div>
-    <div v-if="!hasNoUnusedAttributes" class="flex items-center gap-3">
+    <div v-if="!hasNoUnusedAttributes" class="flex items-center gap-2">
       <div class="flex-1 h-[1px] bg-n-slate-5" />
-      <span class="text-sm font-medium text-n-slate-10">{{
+      <span class="text-xs font-420 text-n-slate-10">{{
         t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.UNUSED_ATTRIBUTES', {
           count: unusedAttributesCount,
         })
       }}</span>
       <div class="flex-1 h-[1px] bg-n-slate-5" />
     </div>
-    <div class="flex flex-col gap-3">
+    <div class="flex flex-col gap-4">
       <div v-if="!hasNoUnusedAttributes" class="relative">
         <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
         <input
@@ -135,7 +135,7 @@ const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
           :placeholder="
             t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.SEARCH_PLACEHOLDER')
           "
-          class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+          class="w-full h-8 py-2 ltr:pl-10 ltr:pr-2 rtl:pr-10 rtl:pl-2 mb-0 reset-base outline-n-weak outline-1 outline hover:outline-n-slate-6 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12 outline-offset-0"
         />
       </div>
       <div

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

@@ -32,7 +32,7 @@ const contactConversations = computed(() =>
   </div>
   <div
     v-else-if="contactConversations.length > 0"
-    class="px-6 py-4 divide-y divide-n-weak"
+    class="px-6 pt-4 pb-6 divide-y divide-n-weak"
   >
     <ConversationCard
       v-for="conversation in contactConversations"

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

@@ -103,12 +103,12 @@ const onMergeContacts = async () => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-8 px-6 py-6">
-    <div class="flex flex-col gap-2">
-      <h4 class="text-base text-n-slate-12">
+  <div class="flex flex-col gap-6 px-5 pb-6 pt-4">
+    <div class="flex flex-col gap-2 mt-4">
+      <h4 class="text-base font-medium text-n-slate-12">
         {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.TITLE') }}
       </h4>
-      <p class="text-sm text-n-slate-11">
+      <p class="text-sm font-420 text-n-slate-11">
         {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.DESCRIPTION') }}
       </p>
     </div>
@@ -126,13 +126,6 @@ const onMergeContacts = async () => {
       @search="onContactSearch"
     />
     <div class="flex items-center justify-between gap-3">
-      <Button
-        variant="faded"
-        color="slate"
-        :label="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
-        @click="resetState"
-      />
       <Button
         :label="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.BUTTONS.CONFIRM')"
         class="w-full"
@@ -140,6 +133,12 @@ const onMergeContacts = async () => {
         :disabled="isMergingContact"
         @click="onMergeContacts"
       />
+      <Button
+        slate
+        :label="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.BUTTONS.CANCEL')"
+        class="w-full"
+        @click="resetState"
+      />
     </div>
   </div>
 </template>

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

@@ -55,12 +55,12 @@ useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
-  <div class="flex flex-col gap-6 py-6">
+  <div class="flex flex-col gap-4 pt-4 pb-6">
     <Editor
       v-model="state.message"
       :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.PLACEHOLDER')"
       focus-on-mount
-      class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 px-6"
+      class="[&>div]:px-4 [&>div]:py-4 px-5"
     >
       <template #actions>
         <div class="flex items-center gap-3">
@@ -87,7 +87,7 @@ useKeyboardEvents(keyboardEvents);
       <ContactNoteItem
         v-for="note in notes"
         :key="note.id"
-        class="mx-6 py-4"
+        class="mx-5 py-4"
         :note="note"
         :written-by="getWrittenBy(note)"
         allow-delete