save button effect

src/components/ButtonFilled.vue

@@ -0,0 +1,50 @@
+<!-- Filled 版本的按鈕的背景是填滿的 -->
+<template>
+    <button class="button-filled-component w-[80px] h-[32px] rounded-full
+        flex text-[#FFFFFF]
+        justify-center items-center bg-[#0099FF]
+        hover:text-[#FFFFFF] hover:bg-[#0080D5]
+        cursor-pointer"
+        :class="{
+            'ring': isPressed,
+            'ring-[#0099FF]' : isPressed,
+            'ring-opacity-30': isPressed,
+            'bg-[#0099FF]': isPressed,
+        }"
+        @mousedown="onMousedown" @mouseup="onMouseup">
+        {{ buttonText }}
+    </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,
+            onMousedown,
+            onMouseup,
+            isPressed,
+        };
+    },
+}
+</script>

src/views/AccountManagement/MyAccount.vue

@@ -51,11 +51,9 @@
                 <div v-else class="not-editable displayable name flex w-[280px]">
                     {{ name }}
                 </div>
-                <button v-if='isNameEditable' class="flex save-btn rounded-full text-[#FFFFFF] h-[32px] w-[80px] items-center
+                <div v-if='isNameEditable' class="save-btn-container flex  ml-[112px]" @click="onSaveNameClick">
-                    bg-[#0099FF] justify-center cursor-pointer ml-[112px]"
+                    <ButtonFilled :buttonText='i18next.t("Global.Save")' />
-                    @click="onSaveNameClick">
+                </div>
-                    {{ i18next.t("Global.Save") }}
-                </button>
                 <div v-if='isNameEditable' class="cancel-btn btn-container flex ml-[8px]" @click="onCancelNameClick" >
                     <Button :buttonText='i18next.t("Global.Cancel")'/>
                 </div>
@@ -93,18 +91,10 @@
                 </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 v-if='isPwdEditable' class="save-btn-container flex  ml-[112px]"
-                            bg-[#0099FF] justify-center cursor-pointer ml-[112px]"
-                            :class="{
-                                'border-[#CCCCCC]': !isPwdLengthValid,
-                                'border-[1px]': !isPwdLengthValid,
-                                'text-[#CCCCCC]': !isPwdLengthValid,
-                                'bg-[#FFFFFF]': !isPwdLengthValid,
-                                'cursor-auto': !isPwdLengthValid,
-                            }"
                           @click="onSavePwdClick">
-                                {{ i18next.t("Global.Save") }}
+                            <ButtonFilled :buttonText='i18next.t("Global.Save")' />
-                        </button>
+                        </div>         
                         <div v-if='isPwdEditable' class="cancel-btn btn-container flex ml-[8px]" @click="onCancelPwdClick" >
                             <Button :buttonText='i18next.t("Global.Cancel")'/>
                         </div>
@@ -132,6 +122,7 @@ 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 ButtonFilled from '@/components/ButtonFilled.vue';
 import { useToast } from 'vue-toast-notification';
 import { PWD_VALID_LENGTH } from '@/constants/constants.js';
 
@@ -214,7 +205,6 @@ export default {
 
         return {
             i18next,
-            Button,
             username,
             name,
             is_admin,
@@ -238,6 +228,7 @@ export default {
   components: {
         Badge,
         Button,
+        ButtonFilled,
     }
 }
 </script>