fix(nc-gui): add banner in editMode submitted form

packages/nc-gui/components/general/FormBanner.vue

@@ -6,18 +6,24 @@ const { bannerImageUrl } = defineProps<Props>()
 </script>
 
 <template>
-  <div class="w-full aspect-{4/1} bg-white border-1 border-gray-200 rounded-3xl overflow-hidden">
+  <div
-    <!-- Todo: cover image uploader and image cropper to crop image in fixed aspect ratio  -->
+    class="w-full max-w-screen-xl mx-auto bg-white border-1 border-gray-200 rounded-3xl overflow-hidden"
-    <LazyNuxtImg v-if="bannerImageUrl" class="h-full" :src="bannerImageUrl" alt="form-banner'" placeholder quality="75" />
+    :style="{
-    <div v-else class="h-full flex items-stretch justify-between">
+      ...(bannerImageUrl
-      <div>
+        ? { 'background-image': `url(${bannerImageUrl})`, 'background-size': 'cover', 'background-position': 'center' }
+        : {}),
+    }"
+  >
+    <!-- Todo: aspect ratio and cover image uploader and image cropper to crop image in fixed aspect ratio  -->
+    <div v-if="!bannerImageUrl" class="h-full flex items-stretch justify-between">
+      <div class="flex">
         <img src="~assets/img/form-banner-left.png" alt="form-banner-left'" />
       </div>
 
-      <div class="w-[91px] grid place-items-center">
+      <div class="w-[91px] flex justify-center">
-        <img class="w-full" src="~assets/img/icons/256x256.png" alt="form-banner-logo'" />
+        <img class="max-h-full self-center" src="~assets/img/icons/256x256.png" alt="form-banner-logo'" />
       </div>
-      <div>
+      <div class="flex justify-end">
         <img src="~assets/img/form-banner-right.png" alt="form-banner-left'" />
       </div>
     </div>

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

@@ -424,37 +424,66 @@ const onFormItemClick = (element: any) => {
       </div>
     </template>
     <template v-else>
-      <a-row v-if="submitted" class="h-full" data-testid="nc-form-wrapper-submit">
+      <div
-        <a-col :span="24">
+        v-if="submitted"
+        class="h-full p-6"
+        :style="{background:(formViewData?.meta as Record<string,any>).theme_color || '#F9F9FA'}"
+        data-testid="nc-form-wrapper-submit"
+      >
+        <GeneralFormBanner :banner-image-url="formViewData?.banner_image_url" />
+
+        <div
+          class="transition-all duration-300 ease-in relative max-w-[max(33%,688px)] mx-auto my-6 bg-white rounded-3xl border-1 border-gray-200 px-4 py-8 lg:p-12 md:(p-8 dark:bg-slate-700)"
+        >
           <div v-if="formViewData" class="items-center justify-center text-center mt-2">
-            <a-alert type="success">
+            <div class="text-left">
-              <template #message>
+              <h1 class="prose-2xl font-bold mb-4" style="word-break: break-all">
-                <div class="text-center">
+                {{ formViewData.heading }}
-                  {{ formViewData.success_msg || $t('msg.successfullySubmittedFormData') }}
+              </h1>
-                </div>
+
-              </template>
+              <h2
-            </a-alert>
+                v-if="formViewData.subheading"
-
+                class="prose-lg text-slate-500 dark:text-slate-300 mb-4 leading-6"
-            <div v-if="formViewData.show_blank_form" class="text-gray-400 mt-4">
+                style="word-break: break-all"
-              {{
+              >
-                $t('msg.newFormWillBeLoaded', {
+                {{ formViewData.subheading }}
-                  seconds: secondsRemain,
+              </h2>
-                })
-              }}
             </div>
 
-            <div v-if="formViewData.submit_another_form || !isPublic" class="text-center mt-4">
+            <div class="flex justify-center">
-              <a-button type="primary" size="large" @click="submitted = false"> {{ $t('activity.submitAnotherForm') }}</a-button>
+              <div class="w-full lg:w-[95%]">
+                <a-alert type="success" class="!my-4 text-center !rounded-lg">
+                  <template #message>
+                    <div class="text-center">
+                      {{ formViewData.success_msg || $t('msg.successfullySubmittedFormData') }}
+                    </div>
+                  </template>
+                </a-alert>
+
+                <div v-if="formViewData.show_blank_form" class="text-gray-400 mt-4">
+                  {{
+                    $t('msg.newFormWillBeLoaded', {
+                      seconds: secondsRemain,
+                    })
+                  }}
+                </div>
+
+                <div v-if="formViewData.submit_another_form || !isPublic" class="text-center mt-4">
+                  <a-button type="primary" size="large" @click="submitted = false">
+                    {{ $t('activity.submitAnotherForm') }}</a-button
+                  >
+                </div>
+              </div>
             </div>
           </div>
-        </a-col>
+        </div>
-      </a-row>
+      </div>
 
       <div v-else class="h-full w-full flex" data-testid="nc-form-wrapper">
         <div
           v-if="formViewData"
-          class="flex-1 h-full overflow-auto nc-form-scrollbar p-6 bg-gray-50"
+          class="flex-1 h-full overflow-auto nc-form-scrollbar p-6"
-          :style="{background:(formViewData?.meta as Record<string,any>).theme_color}"
+          :style="{background:(formViewData?.meta as Record<string,any>).theme_color || '#F9F9FA'}"
         >
           <div :class="isEditable ? 'min-w-[616px] overflow-x-auto nc-form-scrollbar' : ''">
             <!-- for future implementation of cover image -->