code scanner for forms - WIP (improve button look)

packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue

@@ -4,6 +4,7 @@ import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { ref } from 'vue'
 import { StreamBarcodeReader } from 'vue-barcode-reader'
 import { useSharedFormStoreOrThrow } from '#imports'
+import QrCodeScan from '~icons/mdi/qrcode-scan'
 
 const { sharedFormView, submitForm, v$, formState, notFound, formColumns, submitted, secondsRemain, isLoading } =
   useSharedFormStoreOrThrow()
@@ -173,14 +174,17 @@ const onDecode = async (scannedCodeValue: string) => {
                       {{ field.description }}
                     </div>
 
-                    <div v-if="field.enable_scanner">
+                    <a-button
-                      <a-button class="nc-btn-find-row-by-scan nc-toolbar-btn" @click="showCodeScannerForFieldTitle(field.title)">
+                      v-if="field.enable_scanner"
-                        <div class="flex items-center gap-1">
+                      class="nc-btn-fill-form-column-by-scan nc-toolbar-btn"
-                          <QrCodeScan />
+                      @click="showCodeScannerForFieldTitle(field.title)"
-                          <span class="!text-xs font-weight-normal"> {{ $t('activity.fillByCodeScan') }}</span>
+                    >
-                        </div>
+                      <div class="flex items-center gap-1">
-                      </a-button>
+                        <QrCodeScan />
-                    </div>
+                        <span class="!text-xs font-weight-normal"> {{ $t('activity.fillByCodeScan') }}</span>
+                      </div>
+                    </a-button>
+
                   </div>
                 </div>
               </div>