refactor(nc-gui): form view styles

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

@@ -555,6 +555,7 @@ watch(view, (nextView) => {
                 />
               </a-form-item>
             </div>
+
             <div v-else class="px-4 ml-3 w-full text-bold text-md">{{ formViewData.subheading || '---' }}</div>
 
             <Draggable
@@ -575,7 +576,7 @@ watch(view, (nextView) => {
                   :class="[
                     `nc-form-drag-${element.title.replaceAll(' ', '')}`,
                     {
-                      'border-1': activeRow === element.title,
+                      'bg-primary bg-opacity-5 ring-0.5 ring-accent ring-opacity-100': activeRow === element.title,
                     },
                   ]"
                   @click="activeRow = element.title"
@@ -584,62 +585,53 @@ watch(view, (nextView) => {
                     v-if="isUIAllowed('editFormView') && !isRequired(element, element.required)"
                     class="absolute flex top-2 right-2"
                   >
-                    <mdi-eye-off-outline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" />
+                    <MdiEyeOffOutline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" />
                   </div>
 
-                  <template v-if="activeRow === element.title">
-                    <div class="flex">
-                      <div
-                        class="flex flex-1 opacity-0 align-center gap-2"
-                        :class="{ 'opacity-100': activeRow === element.title }"
+                  <div v-if="activeRow === element.title" class="flex flex-col gap-3 mb-3">
+                    <div class="flex gap-2 items-center">
+                      <span
+                        class="text-gray-500 mr-2 nc-form-input-required"
+                        @click="
+                          () => {
+                            element.required = !element.required
+                            updateColMeta(element)
+                          }
+                        "
                       >
-                        <div class="items-center flex">
-                          <span
-                            class="text-xs text-gray-500 mr-2 nc-form-input-required"
-                            @click="
-                              () => {
-                                element.required = !element.required
-                                updateColMeta(element)
-                              }
-                            "
-                          >
-                            {{ $t('general.required') }}
-                          </span>
-
-                          <a-switch
-                            v-model:checked="element.required"
-                            v-e="['a:form-view:field:mark-required']"
-                            size="small"
-                            class="ml-2"
-                            @change="updateColMeta(element)"
-                          />
-                        </div>
-                      </div>
+                        {{ $t('general.required') }}
+                      </span>
+
+                      <a-switch
+                        v-model:checked="element.required"
+                        v-e="['a:form-view:field:mark-required']"
+                        size="small"
+                        @change="updateColMeta(element)"
+                      />
                     </div>
 
-                    <div class="my-3">
-                      <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>
-                  </template>
+                    <a-form-item class="my-0 w-1/2 !mb-1">
+                      <a-input
+                        v-model:value="element.label"
+                        type="text"
+                        class="form-meta-input 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"
+                        type="text"
+                        class="form-meta-input text-sm nc-form-input-help-text"
+                        :placeholder="$t('msg.info.formHelpText')"
+                        @change="updateColMeta(element)"
+                      />
+                    </a-form-item>
+                  </div>
+
                   <div>
                     <LazySmartsheetHeaderVirtualCell
                       v-if="isVirtualCol(element)"
@@ -647,6 +639,7 @@ watch(view, (nextView) => {
                       :required="isRequired(element, element.required)"
                       :hide-menu="true"
                     />
+
                     <LazySmartsheetHeaderCell
                       v-else
                       :column="{ ...element, title: element.label || element.title }"
@@ -658,6 +651,7 @@ watch(view, (nextView) => {
                   <a-form-item
                     v-if="isVirtualCol(element)"
                     :name="element.title"
+                    class="!mb-0"
                     :rules="[{ required: isRequired(element, element.required), message: `${element.title} is required` }]"
                   >
                     <LazySmartsheetVirtualCell
@@ -673,6 +667,7 @@ watch(view, (nextView) => {
                   <a-form-item
                     v-else
                     :name="element.title"
+                    class="!mb-0"
                     :rules="[{ required: isRequired(element, element.required), message: `${element.title} is required` }]"
                   >
                     <LazySmartsheetCell
@@ -685,7 +680,7 @@ watch(view, (nextView) => {
                     />
                   </a-form-item>
 
-                  <span class="text-gray-500 text-xs -mt-1 block">{{ element.description }}</span>
+                  <div class="text-gray-500 text-xs">{{ element.description }}</div>
                 </div>
               </template>
 
@@ -700,7 +695,7 @@ watch(view, (nextView) => {
             </Draggable>
 
             <div class="justify-center flex mt-6">
-              <button type="submit" class="scaling-btn nc-form-submit" @click="submitForm">
+              <button type="submit" class="uppercase scaling-btn nc-form-submit" @click="submitForm">
                 {{ $t('general.submit') }}
               </button>
             </div>

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

@@ -27,15 +27,13 @@ const shouldRedirect = (to: string) => {
   if (sharedViewMeta.value.surveyMode) {
     if (!to.includes('survey')) navigateTo(`/nc/form/${route.params.viewId}/survey`)
   } else {
-    navigateTo(`/nc/form/${route.params.viewId}`)
+    if (to.includes('survey')) navigateTo(`/nc/form/${route.params.viewId}`)
   }
 }
 
 shouldRedirect(route.name as string)
 
-router.afterEach((to) => {
-  shouldRedirect(to.name as string)
-})
+router.afterEach((to) => shouldRedirect(to.name as string))
 </script>
 
 <template>
@@ -82,8 +80,8 @@ p {
     > div {
       @apply bg-white dark:(bg-slate-500 text-white);
 
-      .nc-icon {
-        @apply dark:text-slate-900;
+      .ant-btn {
+        @apply dark:(bg-slate-300);
       }
 
       .chip {

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

@@ -21,7 +21,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
 <template>
   <div
-    class="color-transition bg-white dark:bg-slate-700 relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(rounded-lg border-1 border-gray-200 shadow-xl) mt-12"
+    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) mt-12"
   >
     <template v-if="sharedFormView">
       <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
@@ -109,7 +109,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
             </div>
 
             <div class="text-center mt-4">
-              <button type="submit" class="scaling-btn prose-sm" @click="submitForm">
+              <button type="submit" class="uppercase scaling-btn prose-sm" @click="submitForm">
                 {{ $t('general.submit') }}
               </button>
             </div>

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

@@ -133,23 +133,25 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 </script>
 
 <template>
-  <div ref="el" class="w-full min-h-2/3 grid grid-rows-2">
+  <div ref="el" class="w-full grid grid-rows-2">
     <template v-if="sharedFormView">
-      <div class="max-w-[max(33%,600px)] m-auto flex flex-col justify-end">
-        <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
+      <div class="max-w-[max(33%,600px)] mx-auto">
+        <div class="h-33vh flex flex-col justify-end">
+          <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
 
-        <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
-          {{ sharedFormView.subheading }}
-        </h2>
+          <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
+            {{ sharedFormView.subheading }}
+          </h2>
+        </div>
       </div>
     </template>
 
-    <div class="h-1/2 w-full flex items-center px-4 md:px-0">
+    <div class="h-full w-full flex items-center px-4 md:px-0">
       <Transition :name="`slide-${transitionName}`" :duration="1000" mode="out-in">
         <div
           ref="el"
           :key="field.title"
-          class="color-transition flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto"
+          class="color-transition h-full flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto"
         >
           <div v-if="field && !submitted" class="flex flex-col gap-2">
             <div class="flex nc-form-column-label">
@@ -190,7 +192,9 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
                   {{ error.$message }}
                 </div>
 
-                {{ field.description }}
+                <div class="block">
+                  {{ field.description }}
+                </div>
               </div>
             </div>
           </div>
@@ -233,9 +237,9 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
             </div>
           </div>
 
-          <div class="mt-12 select-none text-center text-gray-500 dark:text-slate-200">
-            {{ index + 1 }} / {{ formColumns?.length }}
-          </div>
+          <div class="flex-1" />
+
+          <div class="select-none text-center text-gray-500 dark:text-slate-200">{{ index + 1 }} / {{ formColumns?.length }}</div>
 
           <Transition name="layout">
             <div v-if="submitted" class="flex flex-col justify-center text-center">