Set Back/Close/Cancel buttons using a component

resources/js_vue3/views/settings/Options.vue

@@ -7,7 +7,6 @@
     import { useGroups } from '@/stores/groups'
     import { useAppSettingsStore } from '@/stores/appSettings'
     import { useNotifyStore } from '@/stores/notify'
-    import { UseColorMode } from '@vueuse/components'
     import VersionChecker from '@/components/VersionChecker.vue'
 
     const $2fauth = inject('2fauth')
@@ -186,21 +185,7 @@
             </FormWrapper>
         </div>
         <VueFooter :showButtons="true">
-            <!-- Close button -->
-            <p class="control">
-                <UseColorMode v-slot="{ mode }">
-                    <RouterLink
-                        id="btnClose"
-                        :to="{ name: returnTo }"
-                        class="button is-rounded"
-                        :class="{'is-dark' : mode === 'dark'}"
-                        tabindex="0"
-                        role="button"
-                        :aria-label="$t('commons.close_the_x_page', {pagetitle: $route.meta.title})">
-                        {{ $t('commons.close') }}
-                    </RouterLink>
-                </UseColorMode>
-            </p>
+            <ButtonBackCloseCancel action="close" />
         </VueFooter>
     </div>
 </template>