From 975b8340b89ba7e61bb2e872c71758a2dde7d81f Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Fri, 16 Aug 2024 16:58:13 +0800
Subject: [PATCH] fix: #316 cancel and close hover effect

---
 src/views/AccountManagement/ModalAccountEditCreate.vue | 3 ++-
 src/views/AccountManagement/ModalHeader.vue            | 8 +++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/views/AccountManagement/ModalAccountEditCreate.vue b/src/views/AccountManagement/ModalAccountEditCreate.vue
index 2912c4a..119848b 100644
--- a/src/views/AccountManagement/ModalAccountEditCreate.vue
+++ b/src/views/AccountManagement/ModalAccountEditCreate.vue
@@ -125,7 +125,8 @@
         </main>
         <footer class="flex row footer justify-end pr-[32px] pb-8">            
             <button class="cancel-btn rounded rounded-full w-[92px] h-10 px-2.5 py-6 border border-[1px] border-[#64748B]
-                flex justify-center items-center text-[#4E5969] font-medium"
+                flex justify-center items-center text-[#4E5969] font-medium
+                hover:bg-[#64748B] hover:border-[#CBD5E1] hover:text-[#FFFFFF]"
                 @click="onCancelBtnClick"
             >
                 {{ i18next.t("Global.Cancel") }}
diff --git a/src/views/AccountManagement/ModalHeader.vue b/src/views/AccountManagement/ModalHeader.vue
index e687921..a35ef2f 100644
--- a/src/views/AccountManagement/ModalHeader.vue
+++ b/src/views/AccountManagement/ModalHeader.vue
@@ -3,9 +3,11 @@
         border-b border-b-[1px] border-[#CBD5E1]
     ">
         <h1 class="flex text-base font-bold"> {{ headerText }}</h1>
-        <img src="@/assets/icon-x.svg" alt="X" class="flex cursor-pointer"
-            @click="closeModal"
-        />
+        <div class="w-8 h-8 bg-transparent hover:bg-[#e9ecef] rounded-full relative flex justify-center items-center">
+            <img src="@/assets/icon-x.svg" alt="X" class="flex cursor-pointer absolute"
+                @click="closeModal"
+            />
+        </div>        
     </header>
 </template>