fix(ux): persistent back button

src/components/BackLink.vue

@@ -1,10 +1,17 @@
 <template>
   <a
-    class="cursor-pointer font-semibold flex items-center"
+    class="
+      cursor-pointer
+      font-semibold
+      flex
+      items-center
+      bg-gray-100
+      px-3
+      rounded-md
+    "
     @click="$router.back()"
   >
-    <feather-icon name="chevron-left" class="w-5 h-5" />
-    <span class="ml-1">{{ t`Back` }}</span>
+    <feather-icon name="chevron-left" class="w-4 h-4" />
   </a>
 </template>
 <script></script>

src/components/FormContainer.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col bg-gray-25">
     <!-- Page Header (Title, Buttons, etc) -->
-    <PageHeader :backLink="backLink" :title="title" :border="false">
+    <PageHeader :title="title" :border="false">
       <slot name="header" />
     </PageHeader>
 
@@ -28,7 +28,6 @@ import PageHeader from './PageHeader.vue';
 export default {
   components: { PageHeader },
   props: {
-    backLink: { type: Boolean, default: false },
     title: { type: String, default: '' },
   },
 };

src/components/PageHeader.vue

@@ -11,12 +11,12 @@
     "
     :class="border ? 'border-b' : ''"
   >
-    <h1 class="text-xl font-semibold select-none" v-if="title && !backLink">
+    <h1 class="text-xl font-semibold select-none" v-if="title">
       {{ title }}
     </h1>
-    <BackLink v-if="backLink" class="window-no-drag" />
-    <div class="flex items-stretch window-no-drag gap-2">
+    <div class="flex items-stretch window-no-drag gap-2 ml-auto">
       <slot />
+      <BackLink v-if="backLink" class="window-no-drag" />
       <SearchBar v-if="!hideSearch" />
     </div>
   </div>
@@ -28,7 +28,7 @@ import SearchBar from './SearchBar.vue';
 export default {
   props: {
     title: { type: String, default: '' },
-    backLink: { type: Boolean, default: false },
+    backLink: { type: Boolean, default: true },
     hideSearch: { type: Boolean, default: false },
     border: { type: Boolean, default: true },
   },

src/pages/InvoiceForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <FormContainer :backLink="true">
+  <FormContainer>
     <!-- Page Header (Title, Buttons, etc) -->
     <template #header v-if="doc">
       <StatusBadge :status="status" />
@@ -190,11 +190,11 @@ import StatusBadge from 'src/components/StatusBadge.vue';
 import { fyo } from 'src/initFyo';
 import { docsPathMap } from 'src/utils/misc';
 import {
-docsPath,
-getActionsForDocument,
-openSettings,
-routeTo,
-showMessageDialog
+  docsPath,
+  getActionsForDocument,
+  openSettings,
+  routeTo,
+  showMessageDialog,
 } from 'src/utils/ui';
 import { handleErrorWithDialog } from '../errorHandling';
 

src/pages/JournalEntryForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <FormContainer :backLink="true">
+  <FormContainer>
     <!-- Page Header (Title, Buttons, etc) -->
     <template #header v-if="doc">
       <StatusBadge :status="status" />
@@ -177,7 +177,7 @@ export default {
     };
   },
   activated() {
-    docsPath.value = docsPathMap.JournalEntry
+    docsPath.value = docsPathMap.JournalEntry;
   },
   deactivated() {
     docsPath.value = '';

src/pages/PrintView/PrintView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex">
     <div class="flex flex-col flex-1 bg-gray-25">
-      <PageHeader :backLink="true" class="z-10" :border="false">
+      <PageHeader class="z-10" :border="false">
         <Button
           class="text-gray-900 text-xs"
           @click="showCustomiser = !showCustomiser"