fix(nc-gui): form view fields input ui changes

packages/nc-gui/components/smartsheet/Cell.vue

@@ -202,7 +202,7 @@ onUnmounted(() => {
       {
         'text-brand-500': isPrimary(column) && !props.virtual && !isForm && !isCalendar,
         'nc-grid-numeric-cell-right': isGrid && isNumericField && !isEditColumnMenu && !isForm && !isExpandedFormOpen,
-        'h-10': isForm && !isSurveyForm && !isAttachment(column) && !props.virtual,
+        'h-10': isForm && !isSurveyForm && !isAttachment(column) && !isTextArea(column) && !isJSON(column) && !props.virtual,
         'nc-grid-numeric-cell-left': (isForm && isNumericField && isExpandedFormOpen) || isEditColumnMenu,
         '!min-h-30': isTextArea(column) && (isForm || isSurveyForm),
       },

packages/nc-gui/components/smartsheet/Form.vue

@@ -694,18 +694,30 @@ useEventListener(
                 {{ formViewData.heading }}
               </h1>
 
-              <h2 v-if="formViewData.subheading" class="font-medium text-base text-gray-500 mb-4">
+              <div v-if="formViewData.subheading?.trim()">
-                {{ formViewData.subheading }}
+                <LazyCellRichText
-              </h2>
+                  :value="formViewData.subheading"
+                  class="font-medium text-base text-gray-500 !h-auto mb-4 -ml-1"
+                  is-form-field
+                  read-only
+                  sync-value-change
+                />
+              </div>
             </div>
 
             <div class="flex justify-center">
               <div class="w-full lg:w-[95%]">
-                <a-alert type="success" class="!my-4 text-center !rounded-lg">
+                <a-alert class="!my-4 !py-4 text-left !rounded-lg" type="success" outlined>
                   <template #message>
-                    <div class="text-center">
+                    <LazyCellRichText
-                      {{ formViewData.success_msg || $t('msg.successfullySubmittedFormData') }}
+                      v-if="formViewData?.success_msg?.trim()"
-                    </div>
+                      :value="formViewData?.success_msg"
+                      class="!h-auto -ml-1"
+                      is-form-field
+                      read-only
+                      sync-value-change
+                    />
+                    <span v-else> {{ $t('msg.successfullySubmittedFormData') }} </span>
                   </template>
                 </a-alert>
 
@@ -1629,10 +1641,6 @@ useEventListener(
   }
   &:not(.nc-cell-longtext) {
     @apply px-2 py-2;
-
-    :deep(textarea) {
-      @apply !p-2;
-    }
   }
 
   &.nc-cell-json {
@@ -1641,6 +1649,13 @@ useEventListener(
       @apply w-full;
     }
   }
+
+  :deep(.ant-picker) {
+    @apply !py-0;
+  }
+  :deep(input.nc-cell-field) {
+    @apply !py-0;
+  }
 }
 
 .nc-form-input-label {

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

@@ -9,11 +9,6 @@ const route = useRoute()
 
 const router = useRouter()
 
-// For now dark theme is disabled
-// const onClick = () => {
-//   isDark.value = !isDark.value
-// }
-
 onMounted(() => {
   isDark.value = false
 })
@@ -39,16 +34,6 @@ router.afterEach((to) => shouldRedirect(to.name as string))
     }"
   >
     <NuxtPage />
-
-    <!-- <div
-      class="color-transition flex items-center justify-center cursor-pointer absolute top-4 md:top-15 right-4 md:right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)"
-      @click="onClick"
-    >
-      <Transition name="slide-left" duration="250" mode="out-in">
-        <MaterialSymbolsDarkModeOutline v-if="isDark" />
-        <MaterialSymbolsLightModeOutline v-else />
-      </Transition>
-    </div> -->
   </div>
 </template>
 
@@ -153,32 +138,26 @@ p {
           & > div {
             @apply w-full;
           }
-          :deep(textarea) {
-            @apply !p-2;
 
-            &:focus {
+          textarea {
-              box-shadow: none !important;
+            @apply px-3;
-            }
           }
         }
         &:not(.nc-cell-longtext) {
           @apply p-2;
         }
 
-        textarea {
-          @apply px-4 py-2 rounded;
-
-          &:focus {
-            box-shadow: none !important;
-          }
-        }
-
         &.nc-cell-json {
           @apply h-auto;
           & > div {
             @apply w-full;
           }
         }
+
+        .ant-picker,
+        input.nc-cell-field {
+          @apply !py-0 !px-1;
+        }
       }
     }
 

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

@@ -111,12 +111,7 @@ const onDecode = async (scannedCodeValue: string) => {
         <template v-else-if="submitted">
           <div class="flex justify-center">
             <div v-if="sharedFormView" class="w-full lg:w-[95%]">
-              <a-alert
+              <a-alert class="!my-4 !py-4 text-left !rounded-lg" type="success" outlined>
-                class="!my-4 !py-4 text-left !rounded-lg"
-                type="success"
-                data-testid="nc-survey-form__success-msg"
-                outlined
-              >
                 <template #message>
                   <LazyCellRichText
                     v-if="sharedFormView?.success_msg?.trim()"
@@ -126,7 +121,7 @@ const onDecode = async (scannedCodeValue: string) => {
                     read-only
                     sync-value-change
                   />
-                  <span v-else> Successfully submitted form data </span>
+                  <span v-else> {{ $t('msg.successfullySubmittedFormData') }} </span>
                 </template>
               </a-alert>