style: email content new design

frontend/src/components/Activities.vue

@@ -434,7 +434,7 @@
         ]"
       >
         <div
-          class="z-10 flex h-7 w-7 items-center justify-center rounded bg-gray-100"
+          class="z-10 flex h-7 w-7 items-center justify-center bg-white"
           :class="{
             'mt-3': [
               'communication',
@@ -446,7 +446,13 @@
             ),
           }"
         >
+          <UserAvatar
+            v-if="activity.activity_type == 'communication'"
+            :user="activity.data.sender"
+            size="md"
+          />
           <component
+            v-else
             :is="activity.icon"
             :class="
               ['added', 'removed', 'changed'].includes(activity.activity_type)
@@ -458,18 +464,14 @@
       </div>
       <div v-if="activity.activity_type == 'communication'" class="pb-6">
         <div
-          class="cursor-pointer rounded-md bg-gray-50 p-3 text-base leading-6 transition-all duration-300 ease-in-out"
+          class="cursor-pointer rounded-md shadow bg-white px-3 py-1.5 text-base leading-6 transition-all duration-300 ease-in-out"
         >
-          <div class="mb-1 flex items-center justify-between gap-2">
+          <div class="-mb-0.5 flex items-center justify-between gap-2">
             <div class="flex items-center gap-2">
-              <UserAvatar :user="activity.data.sender" size="md" />
               <span>{{ activity.data.sender_full_name }}</span>
-              <span>&middot;</span>
+              <span class="text-sm text-gray-600">
-              <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
+                {{ '<' + activity.data.sender + '>' }}
-                <div class="text-sm text-gray-600">
+              </span>
-                  {{ __(timeAgo(activity.creation)) }}
-                </div>
-              </Tooltip>
               <Badge
                 v-if="activity.communication_type == 'Automated Message'"
                 :label="__('Notification')"
@@ -477,6 +479,12 @@
                 theme="green"
               />
             </div>
+            <div class="flex items-center gap-2">
+              <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
+                <div class="text-sm text-gray-600">
+                  {{ __(timeAgo(activity.creation)) }}
+                </div>
+              </Tooltip>
               <div class="flex gap-0.5">
                 <Tooltip :text="__('Reply')">
                   <div>
@@ -485,7 +493,9 @@
                       class="text-gray-700"
                       @click="reply(activity.data)"
                     >
-                    <ReplyIcon class="h-4 w-4" />
+                      <template #icon>
+                        <ReplyIcon />
+                      </template>
                     </Button>
                   </div>
                 </Tooltip>
@@ -496,37 +506,36 @@
                       class="text-gray-700"
                       @click="reply(activity.data, true)"
                     >
-                    <ReplyAllIcon class="h-4 w-4" />
+                      <template #icon>
+                        <ReplyAllIcon />
+                      </template>
                     </Button>
                   </div>
                 </Tooltip>
               </div>
             </div>
-          <div class="text-sm leading-5 text-gray-600">
-            {{ activity.data.subject }}
           </div>
-          <div class="mb-3 text-sm leading-5 text-gray-600">
+          <div class="flex flex-col gap-1 text-base text-gray-800">
-            <span class="mr-1 text-2xs font-bold text-gray-500">
+            <div>
-              {{ __('TO') }}:
+              <span class="mr-1 text-gray-600"> {{ __('To') }}: </span>
-            </span>
               <span>{{ activity.data.recipients }}</span>
               <span v-if="activity.data.cc">, </span>
-            <span
+              <span v-if="activity.data.cc" class="mr-1 text-gray-600">
-              v-if="activity.data.cc"
-              class="mr-1 text-2xs font-bold text-gray-500"
-            >
                 {{ __('CC') }}:
               </span>
               <span v-if="activity.data.cc">{{ activity.data.cc }}</span>
               <span v-if="activity.data.bcc">, </span>
-            <span
+              <span v-if="activity.data.bcc" class="mr-1 text-gray-600">
-              v-if="activity.data.bcc"
-              class="mr-1 text-2xs font-bold text-gray-500"
-            >
                 {{ __('BCC') }}:
               </span>
               <span v-if="activity.data.bcc">{{ activity.data.bcc }}</span>
             </div>
+            <div>
+              <span class="mr-1 text-gray-600"> {{ __('Subject') }}: </span>
+              <span>{{ activity.data.subject }}</span>
+            </div>
+          </div>
+          <div class="border-0 border-t my-3.5 border-gray-200" />
           <EmailContent :content="activity.data.content" />
           <div
             v-if="activity.data?.attachments?.length"
@@ -1236,9 +1245,6 @@ function timelineIcon(activity_type, is_lead) {
     case 'comment':
       icon = CommentIcon
       break
-    case 'communication':
-      icon = EmailAtIcon
-      break
     case 'incoming_call':
       icon = InboundCallIcon
       break