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">
-    <!-- Todo: cover image uploader and image cropper to crop image in fixed aspect ratio  -->
-    <LazyNuxtImg v-if="bannerImageUrl" class="h-full" :src="bannerImageUrl" alt="form-banner'" placeholder quality="75" />
-    <div v-else class="h-full flex items-stretch justify-between">
-      <div>
+  <div
+    class="w-full max-w-screen-xl mx-auto bg-white border-1 border-gray-200 rounded-3xl overflow-hidden"
+    :style="{
+      ...(bannerImageUrl
+        ? { '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">
-        <img class="w-full" src="~assets/img/icons/256x256.png" alt="form-banner-logo'" />
+      <div class="w-[91px] flex justify-center">
+        <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,10 +424,35 @@ const onFormItemClick = (element: any) => {
       </div>
     </template>
     <template v-else>
-      <a-row v-if="submitted" class="h-full" data-testid="nc-form-wrapper-submit">
-        <a-col :span="24">
+      <div
+        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">
+              <h1 class="prose-2xl font-bold mb-4" style="word-break: break-all">
+                {{ formViewData.heading }}
+              </h1>
+
+              <h2
+                v-if="formViewData.subheading"
+                class="prose-lg text-slate-500 dark:text-slate-300 mb-4 leading-6"
+                style="word-break: break-all"
+              >
+                {{ formViewData.subheading }}
+              </h2>
+            </div>
+
+            <div class="flex justify-center">
+              <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') }}
@@ -444,17 +469,21 @@ const onFormItemClick = (element: any) => {
                 </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>
+                  <a-button type="primary" size="large" @click="submitted = false">
+                    {{ $t('activity.submitAnotherForm') }}</a-button
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-        </a-col>
-      </a-row>
 
       <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"
-          :style="{background:(formViewData?.meta as Record<string,any>).theme_color}"
+          class="flex-1 h-full overflow-auto nc-form-scrollbar p-6"
+          :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 -->