From 34a0e707e7b1827ce7d1998e8e95e7b4638026c3 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 16 Sep 2022 00:25:08 +0200
Subject: [PATCH] feat(nc-gui): dark mode for forms and survey pages

---
 .../[projectType]/form/[viewId]/index.vue     | 58 +++++++++++++------
 .../form/[viewId]/index/index.vue             | 12 ++--
 .../form/[viewId]/index/survey.vue            | 14 ++---
 3 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index f32010b5ba..f2bf013888 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { useRoute, useSharedFormStoreOrThrow, useTheme, watch } from '#imports'
+import { useDark, useRoute, useSharedFormStoreOrThrow, useTheme, watch } from '#imports'
 
 const { passwordDlg, password, loadSharedView } = useSharedFormStoreOrThrow()
 
 const route = useRoute()
 
+const isDark = useDark()
+
 const { setTheme } = useTheme()
 
 watch(
@@ -21,15 +23,29 @@ watch(
   },
   { immediate: true },
 )
+
+const onClick = () => {
+  isDark.value = !isDark.value
+}
 </script>
 
 <template>
-  <div class="nc-form-view relative md:bg-primary bg-opacity-5 h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin">
+  <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"
+  >
     <NuxtPage />
 
     <GeneralPoweredBy />
 
-    <div class=""></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)"
+      @click="onClick"
+    >
+      <Transition name="slide-left" duration="250" mode="out-in">
+        <MaterialSymbolsDarkModeOutline v-if="isDark" />
+        <MaterialSymbolsLightModeOutline v-else />
+      </Transition>
+    </div>
 
     <a-modal
       v-model:visible="passwordDlg"
@@ -58,27 +74,33 @@ watch(
 </template>
 
 <style lang="scss">
+html,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  @apply dark:text-white color-transition;
+}
+
 .nc-form-view {
   .nc-input {
-    @apply w-full rounded p-2 min-h-[40px] flex items-center border-solid border-1 border-primary;
-  }
-
-  .submit {
-    @apply z-1 relative color-transition rounded p-3 text-white shadow-sm;
+    @apply w-full rounded p-2 min-h-[40px] flex items-center border-solid border-1 border-primary dark:border-slate-200;
 
-    &::after {
-      @apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
-      content: '';
-      z-index: -1;
+    input {
+      @apply dark:(bg-slate-300 text-slate-900);
     }
+  }
+}
 
-    &:hover::after {
-      @apply transform scale-110 ring ring-accent;
-    }
+.nc-cell {
+  @apply dark:bg-slate-300;
 
-    &:active::after {
-      @apply ring ring-accent;
-    }
+  .nc-attachment-cell > div {
+    @apply dark:(bg-slate-100);
   }
 }
 </style>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index 99c092d74a..f6d299761a 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -21,12 +21,14 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
 <template>
   <div
-    class="bg-white 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)"
+    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)"
   >
     <template v-if="sharedFormView">
       <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 v-if="sharedFormView.subheading" class="prose-lg text-slate-500 dark:text-slate-300 self-center">
+        {{ sharedFormView.subheading }}
+      </h2>
 
       <a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" />
 
@@ -40,7 +42,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
               :message="sharedFormView.success_msg || 'Successfully submitted form data'"
             />
 
-            <p v-if="sharedFormView.show_blank_form" class="text-xs text-gray-500 text-center my-4">
+            <p v-if="sharedFormView.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
               New form will be loaded after {{ secondsRemain }} seconds
             </p>
 
@@ -95,7 +97,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                     :edit-enabled="true"
                   />
 
-                  <div class="flex flex-col gap-2 text-gray-500 text-[0.75rem] my-2 px-1">
+                  <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">
                       {{ error.$message }}
                     </div>
@@ -107,7 +109,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
             </div>
 
             <div class="text-center mt-4">
-              <button type="submit" class="submit" @click="submitForm">
+              <button type="submit" class="scaling-btn prose-sm" @click="submitForm">
                 {{ $t('general.submit') }}
               </button>
             </div>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 27d2f26c60..ae9e84c36a 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -112,7 +112,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
       <div
         ref="el"
         :key="field.title"
-        class="bg-white flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+        class="color-transition bg-white dark:bg-slate-700 flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
       >
         <div v-if="field && !submitted" class="flex flex-col gap-2">
           <div class="flex nc-form-column-label">
@@ -148,7 +148,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
               :edit-enabled="true"
             />
 
-            <div class="flex flex-col gap-2 text-gray-500 text-[0.75rem] my-2 px-1">
+            <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">
                 {{ error.$message }}
               </div>
@@ -170,7 +170,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 
           <div class="flex-1">
             <div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4">
-              <button type="submit" class="submit !px-4 !py-2 prose-sm" @click="submitForm">
+              <button type="submit" class="scaling-btn prose-sm" @click="submitForm">
                 {{ $t('general.submit') }}
               </button>
             </div>
@@ -204,7 +204,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
                 :message="sharedFormView.success_msg || 'Successfully submitted form data'"
               />
 
-              <p v-if="sharedFormView?.show_blank_form" class="text-xs text-gray-500 text-center my-4">
+              <p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
                 New form will be loaded after {{ secondsRemain }} seconds
               </p>
 
@@ -225,14 +225,14 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 :global(html, body) {
   @apply overscroll-x-none;
 }
 
-:deep(.nc-form-column-label) {
+.nc-form-column-label {
   > * {
-    @apply !prose-lg;
+    @apply !prose-lg dark:text-slate-300;
   }
 
   .nc-icon {