From e4cf30f58a41a49a04b5a6106c4b359d6f6e5cd4 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Wed, 27 Sep 2023 17:39:54 +0530
Subject: [PATCH] fix: nc button ui and word wrap

---
 .../nc-gui/components/smartsheet/Form.vue     | 25 ++++++++++---------
 .../composables/useSharedFormViewStore.ts     |  2 --
 .../[typeOrId]/form/[viewId]/index/index.vue  | 18 ++++++-------
 .../[typeOrId]/form/[viewId]/index/survey.vue |  4 +--
 4 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index a56a380b41..b5188da758 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -428,27 +428,27 @@ watch(view, (nextView) => {
           </div>
 
           <div class="flex flex-wrap gap-2 mb-4">
-            <button
+            <NcButton
               v-if="hiddenColumns.length"
-              type="button"
-              class="nc-form-add-all color-transition bg-white transform hover:(text-primary ring ring-accent ring-opacity-100) active:translate-y-[1px] px-2 py-1 shadow-md rounded"
+              type="secondary"
+              class="nc-form-add-all"
               data-testid="nc-form-add-all"
               @click="addAllColumns"
             >
               <!-- Add all -->
               {{ $t('general.addAll') }}
-            </button>
+            </NcButton>
 
-            <button
+            <NcButton
               v-if="localColumns.length"
-              type="button"
-              class="nc-form-remove-all color-transition bg-white transform hover:(text-primary ring ring-accent ring-opacity-100) active:translate-y-[1px] px-2 py-1 shadow-md rounded"
+              type="secondary"
+              class="nc-form-remove-all"
               data-testid="nc-form-remove-all"
               @click="removeAllColumns"
             >
               <!-- Remove all -->
               {{ $t('general.removeAll') }}
-            </button>
+            </NcButton>
           </div>
         </div>
 
@@ -785,15 +785,16 @@ watch(view, (nextView) => {
               </Draggable>
 
               <div class="justify-center flex mt-6">
-                <button
-                  type="submit"
+                <NcButton
+                  html-type="submit"
+                  type="primary"
                   :disabled="!isUIAllowed('dataInsert')"
-                  class="uppercase scaling-btn nc-form-submit"
+                  class="nc-form-submit"
                   data-testid="nc-form-submit"
                   @click="submitForm"
                 >
                   {{ $t('general.submit') }}
-                </button>
+                </NcButton>
               </div>
             </a-card>
           </a-form>
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 1564e5f05d..c38358114b 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -213,8 +213,6 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
       submitted.value = true
       progress.value = false
-
-      await message.success(sharedFormView.value?.success_msg || 'Saved successfully.')
     } catch (e: any) {
       console.log(e)
       await message.error(await extractSdkResponseErrorMsg(e))
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
index bd7b822db6..1c081950e3 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
@@ -72,14 +72,17 @@ const onDecode = async (scannedCodeValue: string) => {
 <template>
   <div class="h-full flex flex-col items-center">
     <div
-      class="color-transition relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(bg-white dark:bg-slate-700 rounded-lg border-1 border-gray-200 shadow-xl)"
+      class="color-transition flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(bg-white dark:bg-slate-700 rounded-lg border-1 border-gray-200 shadow-xl)"
     >
       <template v-if="sharedFormView">
-        <h1 class="prose-2xl font-bold self-center my-4" style="word-break: break-all">
+        <h1 class="prose-2xl font-bold self-center my-4 break-words">
           {{ sharedFormView.heading }}
         </h1>
 
-        <h2 v-if="sharedFormView.subheading" class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6">
+        <h2
+          v-if="sharedFormView.subheading"
+          class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6 break-words"
+        >
           {{ sharedFormView.subheading }}
         </h2>
 
@@ -197,14 +200,9 @@ const onDecode = async (scannedCodeValue: string) => {
               </div>
 
               <div class="text-center mt-4">
-                <button
-                  type="submit"
-                  class="uppercase scaling-btn prose-sm"
-                  data-testid="shared-form-submit-button"
-                  @click="submitForm"
-                >
+                <NcButton type="primary" html-type="submit" data-testid="shared-form-submit-button" @click="submitForm">
                   {{ $t('general.submit') }}
-                </button>
+                </NcButton>
               </div>
             </div>
           </div>
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
index 9075acb453..d36440ef37 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
@@ -237,14 +237,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <div ref="el" class="survey pt-8 md:p-0 w-full h-full flex flex-col">
+  <div ref="el" class="survey pt-8 md:p-0 w-full h-full flex flex-col bg-[red]">
     <div
       v-if="sharedFormView"
       style="height: max(40vh, 225px); min-height: 225px"
       class="max-w-[max(33%,600px)] mx-auto flex flex-col justify-end"
     >
       <div class="px-4 md:px-0 flex flex-col justify-end">
-        <h1 class="prose-2xl font-bold self-center my-4" data-testid="nc-survey-form__heading" style="word-break: break-all">
+        <h1 class="prose-2xl font-bold self-center my-4" data-testid="nc-survey-form__heading">
           {{ sharedFormView.heading }}
         </h1>