chore(nc-gui): styles

packages/nc-gui/components/cell/attachment/index.vue

@@ -156,7 +156,7 @@ watch(
     <div
       v-if="!isReadonly"
       :class="{ 'mx-auto px-4': !visibleItems.length }"
-      class="group cursor-pointer flex gap-1 items-center active:ring rounded border-1 p-1 hover:(bg-primary bg-opacity-10)"
+      class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
       @click.stop="open"
     >
       <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
@@ -165,9 +165,16 @@ watch(
         <template #title> Click or drop a file into cell </template>
 
         <div class="flex items-center gap-2">
-          <MaterialSymbolsAttachFile class="transform group-hover:(text-accent scale-120) text-gray-500 text-[10px]" />
+          <MaterialSymbolsAttachFile
+            class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
+          />
 
-          <div v-if="!visibleItems.length" class="group-hover:text-primary text-gray-500 text-xs">Add file(s)</div>
+          <div
+            v-if="!visibleItems.length"
+            class="group-hover:text-primary text-gray-500 dark:text-gray-200 dark:group-hover:!text-white text-xs"
+          >
+            Add file(s)
+          </div>
         </div>
       </a-tooltip>
     </div>
@@ -208,14 +215,16 @@ watch(
         </template>
       </div>
 
-      <div class="group cursor-pointer flex gap-1 items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)">
+      <div
+        class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
+      >
         <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
         <a-tooltip v-else placement="bottom">
           <template #title> View attachments </template>
 
           <MdiArrowExpand
-            class="select-none transform group-hover:(text-accent scale-120) text-[10px] text-gray-500"
+            class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
             @click.stop="modalVisible = true"
           />
         </a-tooltip>

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

@@ -5,13 +5,13 @@ import { openLink } from '#imports'
 <template>
   <button
     type="button"
-    class="cursor-pointer self-end text-xs text-gray-400 hover:text-primary mx-auto my-4 flex justify-center gap-2 items-center"
+    class="cursor-pointer group text-xs text-slate-500 hover:text-primary dark:hover:text-white dark:text-slate-300 mx-auto my-4 flex justify-center gap-2 items-center"
     @click="openLink('https://github.com/nocodb/nocodb')"
   >
     <span class="bg-primary bg-opacity-100 rounded">
       <img width="32" height="32" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
     </span>
 
-    Powered by NocoDB
+    <span class="color-transition transform group-hover:(scale-103)">Powered by NocoDB</span>
   </button>
 </template>

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

@@ -413,8 +413,7 @@ watch(view, (nextView) => {
           <button
             v-if="hiddenColumns.length"
             type="button"
-            class="nc-form-add-all color-transition hover:text-primary"
+            class="nc-form-add-all color-transition bg-white transform hover:(text-primary bg-primary bg-opacity-5 ring ring-accent ring-opacity-100) active:translate-y-[1px] px-2 py-1 border-b-2 border-slate-300 shadow-sm rounded"
-            style="border-bottom: 2px solid rgb(218, 218, 218)"
             @click="addAllColumns"
           >
             <!-- Add all -->
@@ -424,8 +423,7 @@ watch(view, (nextView) => {
           <button
             v-if="localColumns.length"
             type="button"
-            class="nc-form-remove-all color-transition hover:text-primary"
+            class="nc-form-remove-all color-transition bg-white transform hover:(text-primary bg-primary bg-opacity-5 ring ring-accent ring-opacity-100) active:translate-y-[1px] px-2 py-1 border-b-2 border-slate-300 shadow-sm rounded"
-            style="border-bottom: 2px solid rgb(218, 218, 218)"
             @click="removeAllColumns"
           >
             <!-- Remove all -->
@@ -519,7 +517,7 @@ watch(view, (nextView) => {
         }"
       >
         <a-form ref="formRef" :model="formState" class="nc-form" no-style>
-          <a-card class="!rounded !shadow !m-2 md:!m-4 xl:!m-8 py-8" :body-style="{ paddingLeft: '0px', paddingRight: '0px' }">
+          <a-card class="!rounded !shadow !m-2 md:!m-4 xl:!m-8" :body-style="{ paddingLeft: '0px', paddingRight: '0px' }">
             <!-- Header -->
             <div v-if="isEditable" class="px-4">
               <a-form-item v-if="isEditable">
@@ -700,9 +698,9 @@ watch(view, (nextView) => {
             </Draggable>
 
             <div class="justify-center flex mt-6">
-              <a-button type="primary" class="flex items-center gap-2 nc-form-submit" size="large" @click="submitForm">
+              <button type="submit" class="scaling-btn nc-form-submit" @click="submitForm">
                 {{ $t('general.submit') }}
-              </a-button>
+              </button>
             </div>
           </a-card>
         </a-form>

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

@@ -31,11 +31,13 @@ const onClick = () => {
 
 <template>
   <div
-    class="color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin"
+    class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px] pt-12"
   >
     <NuxtPage />
 
-    <GeneralPoweredBy />
+    <div class="flex w-full items-end mt-12">
+      <GeneralPoweredBy />
+    </div>
 
     <div
       class="flex items-center justify-center cursor-pointer absolute top-15 right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)"
@@ -90,14 +92,24 @@ p {
   .nc-input {
     @apply w-full rounded p-2 min-h-[40px] flex items-center border-solid border-1 border-primary dark:border-slate-200;
 
-    input {
+    input,
-      @apply dark:(bg-slate-300 text-slate-900);
+    &.nc-virtual-cell,
+    > div {
+      @apply dark:(bg-slate-400 text-slate-900);
+
+      .nc-icon {
+        @apply dark:text-slate-900;
+      }
+
+      .chip {
+        @apply dark:(bg-slate-700 text-white);
+      }
     }
   }
 }
 
 .nc-cell {
-  @apply dark:bg-slate-300;
+  @apply dark:bg-slate-400;
 
   .nc-attachment-cell > div {
     @apply dark:(bg-slate-100);

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

@@ -98,7 +98,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                   />
 
                   <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
-                    <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-red-500">
+                    <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
                       {{ error.$message }}
                     </div>
 

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

@@ -35,7 +35,7 @@ const steps = computed(() => {
   }, [] as string[])
 })
 
-const { index, goToPrevious, goToNext, isFirst, isLast, steps: _steps } = useStepper(steps)
+const { index, goToPrevious, goToNext, isFirst, isLast } = useStepper(steps)
 
 const isTransitioning = ref(false)
 
@@ -63,8 +63,14 @@ const transition = (direction: 'left' | 'right') => {
 const goNext = async () => {
   if (isLast.value) return
 
-  const isValid = await v$.value.localState[field.value!.title!].$validate()
+  if (!field.value || !field.value.title) return
-  if (!isValid) return
+
+  const validationField = v$.value.localState[field.value.title]
+
+  if (validationField) {
+    const isValid = await validationField.$validate()
+    if (!isValid) return
+  }
 
   transition('left')
 
@@ -99,13 +105,15 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 </script>
 
 <template>
-  <div class="w-full h-full flex flex-col justify-center items-center">
+  <div class="w-full flex flex-auto flex-col justify-center items-center">
     <template v-if="sharedFormView">
       <div class="flex-1" />
 
       <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
 
-      <h2 v-if="sharedFormView.subheading" class="prose-lg text-gray-500 self-center">{{ sharedFormView.subheading }}</h2>
+      <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
+        {{ sharedFormView.subheading }}
+      </h2>
     </template>
 
     <Transition :name="`slide-${transitionName}`" mode="out-in">
@@ -149,7 +157,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
             />
 
             <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
-              <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-red-500">
+              <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
                 {{ error.$message }}
               </div>