From ea0443e80b18ad287d596aba1086eb6b2a5e1f3d Mon Sep 17 00:00:00 2001
From: Abhinav Raut <abhinavrautcs@gmail.com>
Date: Sat, 28 Mar 2026 19:47:44 +0530
Subject: [PATCH] Fix contact detail: consistent text-xs font size, add icons
 for external ID and created date

---
 .../apps/main/src/views/contact/ContactDetailView.vue     | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/apps/main/src/views/contact/ContactDetailView.vue b/frontend/apps/main/src/views/contact/ContactDetailView.vue
index 1a02c733..1db440ac 100644
--- a/frontend/apps/main/src/views/contact/ContactDetailView.vue
+++ b/frontend/apps/main/src/views/contact/ContactDetailView.vue
@@ -29,11 +29,13 @@
               </Badge>
             </div>
 
-            <div v-if="contact.external_user_id" class="text-sm text-muted-foreground">
+            <div v-if="contact.external_user_id" class="flex items-center gap-1.5 text-xs text-muted-foreground">
+              <IdCardIcon size="14" class="flex-shrink-0" />
               {{ contact.external_user_id }}
             </div>
 
-            <div class="text-xs text-muted-foreground">
+            <div class="flex items-center gap-1.5 text-xs text-muted-foreground">
+              <CalendarIcon size="14" class="flex-shrink-0" />
               {{ $t('globals.terms.createdOn') }}
               {{ contact.created_at ? format(new Date(contact.created_at), 'PPP') : 'N/A' }}
             </div>
@@ -109,7 +111,7 @@ import {
   DialogDescription
 } from '@shared-ui/components/ui/dialog'
 import { useUserStore } from '../../stores/user'
-import { ShieldOffIcon, ShieldCheckIcon } from 'lucide-vue-next'
+import { ShieldOffIcon, ShieldCheckIcon, IdCardIcon, CalendarIcon } from 'lucide-vue-next'
 import ContactDetail from '@/layouts/contact/ContactDetail.vue'
 import api from '../../api'
 import ContactForm from '@/features/contact/ContactForm.vue'