From 7b7b722efbb83901e4ed35ec9cad0301b7b6f6ce Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Fri, 30 Aug 2024 16:59:03 +0800
Subject: [PATCH] button with border done

---
 src/components/Button.vue                 | 38 ++++++++++++++++++--
 src/views/AccountManagement/MyAccount.vue | 43 ++++++++++-------------
 2 files changed, 53 insertions(+), 28 deletions(-)

diff --git a/src/components/Button.vue b/src/components/Button.vue
index 1e6b613..36d575e 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -1,16 +1,48 @@
 <template>
-    <div class="button-component flex">
+    <button class="button-component w-[80px] h-[32px] rounded-full
+        flex text-[#666666] border-[1px] border-[#666666]
+        justify-center items-center bg-[#FFFFFF]
+        hover:text-[#0099FF] hover:border-[#0099FF]
+        focus:text-[#0099FF] focus:border-[#0099FF]
+        cursor-pointer"
+        :class="{
+            'ring': isPressed,
+            'ring-[#0099FF]' : isPressed,
+            'ring-opacity-30': isPressed,
+        }"
+        @mousedown="onMousedown" @mouseup="onMouseup">
         {{ buttonText }}
-    </div>
+    </button>
 </template>
 
 <script>
+import { ref, } from 'vue';
+
 export default {
+    props: {
+        buttonText: {
+            type: String,
+            required: false,
+        },
+    },
     setup(props) {
         const buttonText = props.buttonText;
 
+        const isPressed = ref(false);
+
+        const onMousedown = () => {
+            isPressed.value = true;
+        }
+
+        const onMouseup = () => {
+            isPressed.value = false;
+        }
+
         return {
-            buttonText
+            buttonText,
+            onMousedown,
+            onMouseup,
+            isPressed,
         };
     },
 }
diff --git a/src/views/AccountManagement/MyAccount.vue b/src/views/AccountManagement/MyAccount.vue
index bef356a..00dff1b 100644
--- a/src/views/AccountManagement/MyAccount.vue
+++ b/src/views/AccountManagement/MyAccount.vue
@@ -56,18 +56,13 @@
                     @click="onSaveNameClick">
                     {{ i18next.t("Global.Save") }}
                 </button>
-                <button v-if='isNameEditable' class="flex cancel-btn rounded-full text-[#64748B] h-[32px] w-[80px] items-center
-                    border-[#64748B] border-[1px] justify-center cursor-pointer ml-[8px]"
-                    @click="onCancelNameClick">
-                        {{ i18next.t("Global.Cancel") }}
-                </button>
-                <button v-else class="flex save-btn rounded-full text-[#666666] h-[32px] w-[80px] items-center
-                    bg-[#FFFFFF] justify-center cursor-pointer ml-[204px] border border-[#666666] 
-                    box-border"
-                    @click="onEditNameClick"    
-                >
-                    {{ i18next.t("Global.Edit") }}
-                </button>
+                <div v-if='isNameEditable' class="cancel-btn btn-container flex ml-[8px]" @click="onCancelNameClick" >
+                    <Button :buttonText='i18next.t("Global.Cancel")'/>
+                </div>
+                <div v-else='isPwdEditable' class="edit-btn btn-container flex ml-[204px]" @click="onEditNameClick" >
+                    <Button :buttonText='i18next.t("Global.Edit")'/>
+                </div>
+
             </div>
             <div class="row w-full flex py-2 mb-4  border-b border-b-[#CBD5E1] border-b-[1px]">
                 <div class="field-label flex flex-col text-sm font-medium mr-4">
@@ -97,8 +92,8 @@
                     </div>                    
                 </div>
                 <div class="button-and-dummy-column flex flex-col text-[14px]">
-                    <div class="button-group flex w-min-[80px] h-[40px]">
-                       <button v-if='isPwdEditable' class="flex save-btn rounded-full text-[#FFFFFF] h-[32px] w-[80px] items-center
+                    <div class="button-group flex w-min-[80px] h-[40px]">            
+                        <button v-if='isPwdEditable' class="flex save-btn rounded-full text-[#FFFFFF] h-[32px] w-[80px] items-center
                             bg-[#0099FF] justify-center cursor-pointer ml-[112px]"
                             :class="{
                                 'border-[#CCCCCC]': !isPwdLengthValid,
@@ -110,17 +105,12 @@
                             @click="onSavePwdClick">
                                 {{ i18next.t("Global.Save") }}
                         </button>
-                        <button v-if='isPwdEditable' class="flex cancel-btn rounded-full text-[#64748B] h-[32px] w-[80px] items-center
-                            border-[#64748B] border-[1px] justify-center cursor-pointer ml-[8px]"
-                            @click="onCancelPwdClick">
-                                {{ i18next.t("Global.Cancel") }}
-                        </button>
-                        <button v-else class="flex reset-btn rounded-full text-[#666666] h-[32px] w-[80px] items-center
-                            bg-[#FFFFFF] justify-center cursor-pointer ml-[460px] border border-[#666666]"
-                            @click="onResetPwdClick"    
-                        >
-                            {{ i18next.t("Global.Reset") }}
-                        </button> 
+                        <div v-if='isPwdEditable' class="cancel-btn btn-container flex ml-[8px]" @click="onCancelPwdClick" >
+                            <Button :buttonText='i18next.t("Global.Cancel")'/>
+                        </div>
+                        <div v-else class="reset-btn btn-container flex ml-[460px]" @click="onResetPwdClick" >
+                            <Button :buttonText='i18next.t("Global.Reset")'/>
+                        </div>
                     </div>                    
                     <div class="flex dummy-cell h-[40px]"></div>
                 </div>                
@@ -141,6 +131,7 @@ import LoginStore from '@/stores/login';
 import useAcctMgmtStore from '@/stores/acctMgmt.ts';
 import Badge from '../../components/Badge.vue';
 import LoadingStore from '@/stores/loading.js';
+import Button from '@/components/Button.vue';
 import { useToast } from 'vue-toast-notification';
 import { PWD_VALID_LENGTH } from '@/constants/constants.js';
 
@@ -223,6 +214,7 @@ export default {
 
         return {
             i18next,
+            Button,
             username,
             name,
             is_admin,
@@ -245,6 +237,7 @@ export default {
   },
   components: {
         Badge,
+        Button,
     }
 }
 </script>
\ No newline at end of file