From 54839f282827af076368f84f214ff5fd9d89e00e Mon Sep 17 00:00:00 2001
From: Angel Fernando Quiroz Campos <angelfqc.18@gmail.com>
Date: Sun, 9 Jun 2024 02:12:11 -0500
Subject: [PATCH] Display: Message: Use SectionHeader component to show header

---
 assets/vue/views/message/MessageShow.vue | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/assets/vue/views/message/MessageShow.vue b/assets/vue/views/message/MessageShow.vue
index a161daddb07..db6794ca0cb 100644
--- a/assets/vue/views/message/MessageShow.vue
+++ b/assets/vue/views/message/MessageShow.vue
@@ -1,11 +1,6 @@
 <template>
   <div v-if="item">
-    <div class="flex gap-4 items-center">
-      <h2
-        class="mr-auto"
-        v-text="item.title"
-      />
-
+    <SectionHeader :title="item.title">
       <BaseButton
         :disabled="isLoading"
         icon="reply"
@@ -35,9 +30,7 @@
         type="black"
         @click="confirmDelete"
       />
-    </div>
-
-    <hr />
+    </SectionHeader>
 
     <div class="flex justify-end gap-2">
       <div v-if="myReceiver">
@@ -156,6 +149,7 @@ import { useSecurityStore } from "../../store/securityStore"
 import BaseCard from "../../components/basecomponents/BaseCard.vue"
 import MessageCommunicationParty from "./MessageCommunicationParty.vue"
 import BaseIcon from "../../components/basecomponents/BaseIcon.vue"
+import SectionHeader from "../../components/layout/SectionHeader.vue"
 
 const confirm = useConfirm()
 const { t } = useI18n()