feat: Update conversation side panel layout and styling (#12983)

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

@@ -75,20 +75,15 @@ const handleInputUpdate = async () => {
 </script>
 
 <template>
-  <div
-    class="flex items-center w-full min-w-0 gap-2"
-    :class="{
-      'justify-start': isEditingView,
-      'justify-end': !isEditingView,
-    }"
-  >
+  <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="{
         'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
           !isEditingView,
-        'text-n-slate-12 truncate': isEditingView,
+        'text-n-slate-12 truncate': isEditingView && attribute.value,
+        'text-n-slate-10 truncate': isEditingView && !attribute.value,
       }"
       @click="toggleEditValue(!isEditingView)"
     >
@@ -100,19 +95,20 @@ const handleInputUpdate = async () => {
       class="flex items-center gap-1"
     >
       <Button
-        variant="faded"
-        color="slate"
-        icon="i-lucide-pencil"
-        size="xs"
-        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        ghost
+        slate
+        icon="i-lucide-pen-line"
+        xs
+        class="flex-shrink-0 !size-5 !rounded"
         @click="toggleEditValue(true)"
       />
       <Button
-        variant="faded"
-        color="ruby"
+        v-if="attribute.value"
+        ghost
+        ruby
         icon="i-lucide-trash"
-        size="xs"
-        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        xs
+        class="flex-shrink-0 !size-5 !rounded"
         @click="emit('delete')"
       />
     </div>
@@ -125,7 +121,7 @@ const handleInputUpdate = async () => {
       <Input
         v-model="defaultDateValue"
         type="date"
-        class="w-full [&>p]:absolute [&>p]:mt-0.5 [&>p]:top-8 ltr:[&>p]:left-0 rtl:[&>p]:right-0"
+        class="w-full [&>p]:absolute [&>p]:mt-1 [&>p]:top-6 ltr:[&>p]:left-0 rtl:[&>p]:right-0"
         :message="
           hasError
             ? t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.VALIDATIONS.INVALID_DATE')
@@ -133,14 +129,15 @@ const handleInputUpdate = async () => {
         "
         :message-type="hasError ? 'error' : 'info'"
         autofocus
-        custom-input-class="h-8 ltr:rounded-r-none rtl:rounded-l-none"
-        @keyup.enter="handleInputUpdate"
+        custom-input-class="h-7 py-1 ltr:rounded-r-none rtl:rounded-l-none"
+        @enter="handleInputUpdate"
       />
       <Button
         icon="i-lucide-check"
         :color="hasError ? 'ruby' : 'blue'"
         size="sm"
-        class="flex-shrink-0 ltr:rounded-l-none rtl:rounded-r-none"
+        type="button"
+        class="flex-shrink-0 ltr:rounded-l-none rtl:rounded-r-none !h-7"
         @click="handleInputUpdate"
       />
     </div>