adjust signature step

app/javascript/submission_form/signature_step.vue

@@ -83,15 +83,23 @@
           <IconReload :width="16" />
           {{ t('redraw') }}
         </a>
+        <span
+          v-if="withQrButton && !modelValue && !computedPreviousValue && field.preferences?.format !== 'typed'"
+          class=" tooltip"
+          :data-tip="t('drawn_signature_on_a_touchscreen_device')"
+        >
           <a
-          v-else
             href="#"
-          class="btn btn-outline btn-sm font-medium"
-          @click.prevent="[clear(), hideQr()]"
+            class="btn btn-sm btn-neutral font-medium hidden md:flex"
+            :class="{ 'btn-outline': !isShowQr, 'text-white': isShowQr }"
+            @click.prevent="isShowQr ? hideQr() : [isTextSignature = false, showQr()]"
           >
-          <IconReload :width="16" />
-          {{ t('clear') }}
+            <IconQrcode
+              :width="19"
+              :height="19"
+            />
           </a>
+        </span>
         <a
           href="#"
           :title="t('minimize')"
@@ -125,17 +133,16 @@
     >
     <div class="relative">
       <div
-        v-if="withQrButton"
-        class="absolute top-1.5 right-1.5 tooltip hidden md:inline"
-        :data-tip="t('drawn_signature_on_a_touchscreen_device')"
+        v-if="!modelValue && !computedPreviousValue && !isShowQr && !isTextSignature && isSignatureStarted"
+        class="absolute top-0.5 right-0.5"
       >
         <a
-          v-if="!isShowQr && !isSignatureStarted && !isTextSignature && !modelValue"
           href="#"
-          class="btn btn-sm btn-circle btn-ghost"
-          @click.prevent="showQr"
+          class="btn btn-ghost font-medium btn-xs md:btn-sm"
+          @click.prevent="[clear(), hideQr()]"
         >
-          <IconQrcode />
+          <IconReload :width="16" />
+          {{ t('clear') }}
         </a>
       </div>
       <canvas
@@ -144,6 +151,10 @@
         style="padding: 1px; 0"
         class="bg-white border border-base-300 rounded-2xl w-full"
       />
+      <div
+        v-if="isShowQr"
+        class="top-0 bottom-0 right-0 left-0 absolute bg-white rounded-2xl m-0.5"
+      />
       <div
         v-show="isShowQr"
         class="top-0 bottom-0 right-0 left-0 absolute bg-base-content/10 rounded-2xl"
@@ -333,7 +344,7 @@ export default {
     if (this.$refs.canvas) {
       this.pad = new SignaturePad(this.$refs.canvas)
 
-      this.pad.addEventListener('beginStroke', () => {
+      this.pad.addEventListener('endStroke', () => {
         this.isSignatureStarted = true
 
         this.$emit('start')
@@ -421,6 +432,7 @@ export default {
 
       if (this.$refs.textInput) {
         this.$refs.textInput.value = ''
+        this.$refs.textInput.focus()
       }
     },
     updateWrittenSignature (e) {