refactor: change button order and icon

src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue

@@ -7,10 +7,9 @@ import { onMounted } from 'vue';
 import {
   SaveButton,
   EditButton,
-  CancelButton,
   DeleteButton,
+  UndoButton,
 } from 'src/components/button';
-
 defineProps<{
   prefixId?: string;
   outlined?: boolean;
@@ -94,20 +93,20 @@ watch(
         type="button"
         :disabled="actionDisabled"
       />
+      <UndoButton
+        icon-only
+        v-if="!readonly && !create"
+        class="q-ml-auto"
+        type="button"
+        :disabled="actionDisabled"
+        @click="$emit('cancel')"
+      />
       <SaveButton
         icon-only
         v-if="!readonly"
         @click="$emit('save')"
-        class="q-ml-auto"
         :disabled="actionDisabled"
       />
-      <CancelButton
-        icon-only
-        v-if="!readonly && !create"
-        type="button"
-        :disabled="actionDisabled"
-        @click="$emit('cancel')"
-      />
     </div>
     <q-select
       outlined

src/pages/03_customer-management/components/employer/EmployerFormBranch.vue

@@ -11,6 +11,7 @@ import {
   EditButton,
   CancelButton,
   DeleteButton,
+  UndoButton,
 } from 'components/button';
 
 const item = defineModel<NonNullable<CustomerCreate['customerBranch']>[number]>(
@@ -56,19 +57,19 @@ defineProps<{
       type="button"
       :disabled="actionDisabled"
     />
-    <SaveButton
-      icon-only
-      v-if="!readonly"
-      @click="$emit('save')"
-      class="q-ml-auto"
-      type="submit"
-      :disabled="actionDisabled"
-    />
-    <CancelButton
+    <UndoButton
       icon-only
       v-if="!readonly"
       @click="$emit('cancel')"
       type="button"
+      class="q-ml-auto"
+      :disabled="actionDisabled"
+    />
+    <SaveButton
+      icon-only
+      v-if="!readonly"
+      @click="$emit('save')"
+      type="submit"
       :disabled="actionDisabled"
     />
   </span>