change arrow icon to eye icon

app/javascript/submission_form/i18n.js

@@ -44,6 +44,7 @@ const en = {
   minimize: 'Minimize',
   payment: 'Payment',
   phone: 'Phone',
+  preview: 'Preview',
   start_now: 'Start Now',
   continue: 'Continue',
   sign_now: 'Sign Now',

app/javascript/submission_form/initials_step.vue

@@ -88,14 +88,13 @@
           {{ t('clear') }}
         </a>
         <a
-          :title="t('minimize')"
+          :title="t('preview')"
           href="#"
-          class="py-1.5 inline md:hidden"
+          class="btn btn-outline btn-sm font-medium inline md:hidden flex items-center justify-center"
           @click.prevent="$emit('minimize')"
         >
-          <IconArrowsDiagonalMinimize2
-            :width="20"
-            :height="20"
+          <IconEye
+            :width="18"
           />
         </a>
       </div>
@@ -145,7 +144,7 @@
 
 <script>
 import { cropCanvasAndExportToPNG } from './crop_canvas'
-import { IconReload, IconTextSize, IconUpload, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import { IconReload, IconTextSize, IconUpload, IconSignature, IconEye } from '@tabler/icons-vue'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
 import MarkdownContent from './markdown_content'
@@ -162,7 +161,7 @@ export default {
     IconTextSize,
     IconSignature,
     MarkdownContent,
-    IconArrowsDiagonalMinimize2
+    IconEye
   },
   inject: ['baseUrl', 't'],
   props: {

app/javascript/submission_form/signature_step.vue

@@ -84,6 +84,16 @@
           <IconReload :width="16" />
           {{ t(format === 'upload' ? 'reupload' : 'redraw') }}
         </a>
+        <a
+          href="#"
+          :title="t('preview')"
+          class="btn btn-outline btn-sm font-medium inline md:hidden flex items-center justify-center"
+          @click.prevent="$emit('minimize')"
+        >
+          <IconEye
+            :width="18"
+          />
+        </a>
         <span
           v-if="withQrButton && !modelValue && !computedPreviousValue && format !== 'typed' && format !== 'upload'"
           class=" tooltip"
@@ -101,17 +111,6 @@
             />
           </a>
         </span>
-        <a
-          href="#"
-          :title="t('minimize')"
-          class="py-1.5 inline md:hidden"
-          @click.prevent="$emit('minimize')"
-        >
-          <IconArrowsDiagonalMinimize2
-            :width="20"
-            :height="20"
-          />
-        </a>
       </div>
     </div>
     <div
@@ -290,7 +289,7 @@
 </template>
 
 <script>
-import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonalMinimize2, IconQrcode, IconX } from '@tabler/icons-vue'
+import { IconReload, IconCamera, IconSignature, IconTextSize, IconEye, IconQrcode, IconX } from '@tabler/icons-vue'
 import { cropCanvasAndExportToPNG } from './crop_canvas'
 import { isValidSignatureCanvas } from './validate_signature'
 import SignaturePad from 'signature_pad'
@@ -315,7 +314,7 @@ export default {
     IconX,
     IconTextSize,
     IconSignature,
-    IconArrowsDiagonalMinimize2
+    IconEye
   },
   inject: ['baseUrl', 't'],
   props: {