button with border done

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,
         };
     },
 }

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
+                <div v-if='isNameEditable' class="cancel-btn btn-container flex ml-[8px]" @click="onCancelNameClick" >
-                    border-[#64748B] border-[1px] justify-center cursor-pointer ml-[8px]"
+                    <Button :buttonText='i18next.t("Global.Cancel")'/>
-                    @click="onCancelNameClick">
+                </div>
-                        {{ i18next.t("Global.Cancel") }}
+                <div v-else='isPwdEditable' class="edit-btn btn-container flex ml-[204px]" @click="onEditNameClick" >
-                </button>
+                    <Button :buttonText='i18next.t("Global.Edit")'/>
-                <button v-else class="flex save-btn rounded-full text-[#666666] h-[32px] w-[80px] items-center
+                </div>
-                    bg-[#FFFFFF] justify-center cursor-pointer ml-[204px] border border-[#666666] 
+
-                    box-border"
-                    @click="onEditNameClick"    
-                >
-                    {{ i18next.t("Global.Edit") }}
-                </button>
             </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">
@@ -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
+                        <div v-if='isPwdEditable' class="cancel-btn btn-container flex ml-[8px]" @click="onCancelPwdClick" >
-                            border-[#64748B] border-[1px] justify-center cursor-pointer ml-[8px]"
+                            <Button :buttonText='i18next.t("Global.Cancel")'/>
-                            @click="onCancelPwdClick">
+                        </div>
-                                {{ i18next.t("Global.Cancel") }}
+                        <div v-else class="reset-btn btn-container flex ml-[460px]" @click="onResetPwdClick" >
-                        </button>
+                            <Button :buttonText='i18next.t("Global.Reset")'/>
-                        <button v-else class="flex reset-btn rounded-full text-[#666666] h-[32px] w-[80px] items-center
+                        </div>
-                            bg-[#FFFFFF] justify-center cursor-pointer ml-[460px] border border-[#666666]"
-                            @click="onResetPwdClick"    
-                        >
-                            {{ i18next.t("Global.Reset") }}
-                        </button> 
                     </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>