From 73b8cc1ecb620fe224a6efbd29743995372ef07a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 24 Aug 2022 13:47:39 +0530
Subject: [PATCH] refactor(gui-v2): button style and label and help text
 arrangement

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Form.vue  | 62 ++++++++++---------
 1 file changed, 33 insertions(+), 29 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index e1fe79fa74..2091a2d738 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -536,6 +536,8 @@ onMounted(async () => {
                   :class="`nc-form-drag-${element.title.replaceAll(' ', '')}`"
                   @click="activeRow = element.title"
                 >
+
+
                   <div class="flex">
                     <div class="flex flex-1">
                       <div class="flex flex-row">
@@ -559,6 +561,35 @@ onMounted(async () => {
                     </div>
                   </div>
 
+                  <div v-if="activeRow === element.title" class="mt-2">
+                    <a-form-item class="my-0 w-1/2 !mb-1">
+                      <a-input
+                        v-model:value="element.label"
+                        size="small"
+                        class="form-meta-input !bg-[#dbdbdb] nc-form-input-label"
+                        :placeholder="$t('msg.info.formInput')"
+                        @change="updateColMeta(element)"
+                      >
+                      </a-input>
+                    </a-form-item>
+
+                    <a-form-item class="mt-2 mb-0 w-1/2  !mb-1">
+                      <a-input
+                        v-model:value="element.description"
+                        size="small"
+                        class="form-meta-input !bg-[#dbdbdb] text-sm nc-form-input-help-text"
+                        :placeholder="$t('msg.info.formHelpText')"
+                        @change="updateColMeta(element)"
+                      />
+                    </a-form-item>
+
+                    <div class="items-center flex">
+                      <span class="text-sm text-gray-500 mr-2 nc-form-input-required">{{ $t('general.required') }}</span>
+
+                      <a-switch v-model:checked="element.required" size="small" class="my-2" @change="updateColMeta(element)" />
+                    </div>
+                  </div>
+
                   <a-form-item
                     v-if="isVirtualCol(element)"
                     class="m-0 gap-0 p-0"
@@ -590,34 +621,6 @@ onMounted(async () => {
                     />
                   </a-form-item>
 
-                  <div v-if="activeRow === element.title">
-                    <a-form-item class="my-0 w-1/2">
-                      <a-input
-                        v-model:value="element.label"
-                        size="small"
-                        class="form-meta-input !bg-[#dbdbdb] nc-form-input-label"
-                        :placeholder="$t('msg.info.formInput')"
-                        @change="updateColMeta(element)"
-                      >
-                      </a-input>
-                    </a-form-item>
-
-                    <a-form-item class="mt-2 mb-0 w-1/2">
-                      <a-input
-                        v-model:value="element.description"
-                        size="small"
-                        class="form-meta-input !bg-[#dbdbdb] text-sm nc-form-input-help-text"
-                        :placeholder="$t('msg.info.formHelpText')"
-                        @change="updateColMeta(element)"
-                      />
-                    </a-form-item>
-
-                    <div class="items-center flex">
-                      <span class="text-sm text-gray-500 mr-2 nc-form-input-required">{{ $t('general.required') }}</span>
-
-                      <a-switch v-model:checked="element.required" size="small" class="my-2" @change="updateColMeta(element)" />
-                    </div>
-                  </div>
 
                   <span class="text-gray-500">{{ element.description }}</span>
                 </div>
@@ -635,7 +638,8 @@ onMounted(async () => {
 
             <div class="justify-center flex mt-10">
               <a-button
-                class="flex items-center gap-2 !bg-primary text-white rounded nc-form-submit"
+                type="primary"
+                class="flex items-center gap-2  nc-form-submit"
                 size="large"
                 @click="submitForm"
               >