fix(settings): synchronize button animation with arrows of number input

app/components/Settings/BottomScreen/Menus/Clock/Date.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
 import { useIntervalFn } from "@vueuse/core";
+import gsap from "gsap";
 
 const store = useSettingsStore();
 
@@ -12,6 +13,9 @@ useIntervalFn(() => {
 
 const isAnimating = ref(true);
 
+const bLabel = ref($t("common.goBack"));
+const aLabel = ref($t("common.select"));
+
 const monthRef = useTemplateRef<InstanceType<typeof NumberInput>>("month");
 const dayRef = useTemplateRef<InstanceType<typeof NumberInput>>("day");
 const yearRef = useTemplateRef<InstanceType<typeof NumberInput>>("year");
@@ -22,6 +26,14 @@ const animateIntro = async () => {
     monthRef.value?.animateIntro(),
     dayRef.value?.animateIntro(),
     yearRef.value?.animateIntro(),
+    gsap.timeline().call(
+      () => {
+        bLabel.value = $t("common.cancel");
+        aLabel.value = $t("common.confirm");
+      },
+      [],
+      SUBMENU_LABEL_CHANGE_DELAY,
+    ),
   ]);
   isAnimating.value = false;
 };
@@ -80,8 +92,8 @@ defineOptions({ render: () => null });
 
   <CommonButtons
     :y-offset="store.submenuButtonsOffsetY"
-    :b-label="$t('common.cancel')"
-    :a-label="$t('common.confirm')"
+    :b-label="bLabel"
+    :a-label="aLabel"
     @activate-b="handleActivateB"
     @activate-a="handleActivateA"
   />