From 1bdfd5be472f1c31a1d225d92cc8a6688a545ce8 Mon Sep 17 00:00:00 2001
From: Julie Graceffa <19556185+jewls618@users.noreply.github.com>
Date: Mon, 9 Feb 2026 12:11:41 -0500
Subject: [PATCH 1/4] change arrow icon to eye icon

---
 app/javascript/submission_form/i18n.js        |  1 +
 .../submission_form/initials_step.vue         | 13 +++++-----
 .../submission_form/signature_step.vue        | 25 +++++++++----------
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/app/javascript/submission_form/i18n.js b/app/javascript/submission_form/i18n.js
index e47b4525..e77c8370 100644
--- a/app/javascript/submission_form/i18n.js
+++ b/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',
diff --git a/app/javascript/submission_form/initials_step.vue b/app/javascript/submission_form/initials_step.vue
index 531b9784..4bc61cd4 100644
--- a/app/javascript/submission_form/initials_step.vue
+++ b/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: {
diff --git a/app/javascript/submission_form/signature_step.vue b/app/javascript/submission_form/signature_step.vue
index 00916759..d85c8c85 100644
--- a/app/javascript/submission_form/signature_step.vue
+++ b/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: {

From afd9f2bb31fafa293d5240f7d2605db4105c9b42 Mon Sep 17 00:00:00 2001
From: Julie Graceffa <19556185+jewls618@users.noreply.github.com>
Date: Mon, 9 Feb 2026 13:27:39 -0500
Subject: [PATCH 2/4] add x to close preview

---
 app/javascript/submission_form/form.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue
index 366c6922..4061a505 100644
--- a/app/javascript/submission_form/form.vue
+++ b/app/javascript/submission_form/form.vue
@@ -90,6 +90,18 @@
       :height="20"
     />
   </button>
+  <button
+    v-if="!isFormVisible && !isCompleted"
+    id="expand_form_button_x"
+    class="btn btn-neutral flex text-white fixed top-4 right-4 z-40"
+    :title="t('expand')"
+    @click.prevent="isFormVisible = true"
+  >
+    <IconX
+      :width="20"
+      :height="20"
+    />
+  </button>
   <div
     v-show="isFormVisible"
     id="form_container"
@@ -97,7 +109,7 @@
     :style="formContainerStyle"
   >
     <button
-      v-if="!isCompleted"
+      v-if="!isCompleted && isFormVisible"
       id="minimize_form_button"
       class="absolute right-0 top-0 minimize-form-button"
       :class="currentField?.description?.length > 100 ? 'mr-1 mt-1 md:mr-2 md:mt-2': 'mr-2 mt-2 hidden md:block'"
@@ -598,7 +610,7 @@ import DateStep from './date_step'
 import MarkdownContent from './markdown_content'
 import InviteForm from './invite_form'
 import FormCompleted from './completed'
-import { IconInnerShadowTop, IconArrowsDiagonal, IconWritingSign, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import { IconInnerShadowTop, IconArrowsDiagonal, IconWritingSign, IconArrowsDiagonalMinimize2, IconX } from '@tabler/icons-vue'
 import AppearsOn from './appears_on'
 import i18n from './i18n'
 
@@ -647,6 +659,7 @@ export default {
     MarkdownContent,
     PaymentStep,
     IconArrowsDiagonalMinimize2,
+    IconX,
     FormCompleted
   },
   provide () {

From fcbc15abcc7ec14269abca2865c4fe4afcd54a9b Mon Sep 17 00:00:00 2001
From: Julie Graceffa <19556185+jewls618@users.noreply.github.com>
Date: Mon, 9 Feb 2026 13:50:09 -0500
Subject: [PATCH 3/4] add eye icon during form field section

---
 app/javascript/submission_form/form.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue
index 4061a505..d70a800e 100644
--- a/app/javascript/submission_form/form.vue
+++ b/app/javascript/submission_form/form.vue
@@ -91,7 +91,7 @@
     />
   </button>
   <button
-    v-if="!isFormVisible && !isCompleted"
+    v-if="!isFormVisible && !isCompleted && isMobile"
     id="expand_form_button_x"
     class="btn btn-neutral flex text-white fixed top-4 right-4 z-40"
     :title="t('expand')"
@@ -109,10 +109,22 @@
     :style="formContainerStyle"
   >
     <button
-      v-if="!isCompleted && isFormVisible"
+      v-if="!isCompleted && isFormVisible && isMobile && currentField?.type !== 'signature'"
+      id="close_form_button"
+      class="absolute right-0 top-0 minimize-form-button mr-2 mt-2"
+      :title="t('minimize')"
+      @click.prevent="minimizeForm"
+    >
+      <IconEye
+        :width="20"
+        :height="20"
+      />
+    </button>
+    <button
+      v-if="!isCompleted && isFormVisible && !isMobile"
       id="minimize_form_button"
       class="absolute right-0 top-0 minimize-form-button"
-      :class="currentField?.description?.length > 100 ? 'mr-1 mt-1 md:mr-2 md:mt-2': 'mr-2 mt-2 hidden md:block'"
+      :class="currentField?.description?.length > 100 ? 'mr-1 mt-1 md:mr-2 md:mt-2': 'mr-2 mt-2'"
       :title="t('minimize')"
       @click.prevent="minimizeForm"
     >
@@ -610,7 +622,7 @@ import DateStep from './date_step'
 import MarkdownContent from './markdown_content'
 import InviteForm from './invite_form'
 import FormCompleted from './completed'
-import { IconInnerShadowTop, IconArrowsDiagonal, IconWritingSign, IconArrowsDiagonalMinimize2, IconX } from '@tabler/icons-vue'
+import { IconInnerShadowTop, IconArrowsDiagonal, IconWritingSign, IconArrowsDiagonalMinimize2, IconX, IconEye } from '@tabler/icons-vue'
 import AppearsOn from './appears_on'
 import i18n from './i18n'
 
@@ -660,6 +672,7 @@ export default {
     PaymentStep,
     IconArrowsDiagonalMinimize2,
     IconX,
+    IconEye,
     FormCompleted
   },
   provide () {

From ec0356fa7783b2a11303e2ac4f554c55a5e7d7d3 Mon Sep 17 00:00:00 2001
From: Julie Graceffa <19556185+jewls618@users.noreply.github.com>
Date: Mon, 9 Feb 2026 14:00:59 -0500
Subject: [PATCH 4/4] update title

---
 app/javascript/submission_form/form.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue
index d70a800e..a2710064 100644
--- a/app/javascript/submission_form/form.vue
+++ b/app/javascript/submission_form/form.vue
@@ -94,7 +94,7 @@
     v-if="!isFormVisible && !isCompleted && isMobile"
     id="expand_form_button_x"
     class="btn btn-neutral flex text-white fixed top-4 right-4 z-40"
-    :title="t('expand')"
+    :title="t('preview')"
     @click.prevent="isFormVisible = true"
   >
     <IconX
@@ -112,7 +112,7 @@
       v-if="!isCompleted && isFormVisible && isMobile && currentField?.type !== 'signature'"
       id="close_form_button"
       class="absolute right-0 top-0 minimize-form-button mr-2 mt-2"
-      :title="t('minimize')"
+      :title="t('preview')"
       @click.prevent="minimizeForm"
     >
       <IconEye