Fix Dark mode (#376)

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/forms/OpenCompleteForm.vue

@@ -69,6 +69,7 @@
                    :loading="loading"
                    :fields="form.properties"
                    :theme="theme"
+                   :dark-mode="darkMode"
                    :admin-preview="adminPreview"
                    @submit="submitForm"
         >
@@ -127,7 +128,11 @@ export default {
     form: { type: Object, required: true },
     creating: { type: Boolean, default: false }, // If true, fake form submit
     adminPreview: { type: Boolean, default: false }, // If used in FormEditorPreview
-    submitButtonClass: { type: String, default: '' }
+    submitButtonClass: { type: String, default: '' },
+    darkMode: {
+      type: Boolean,
+      default: false
+    }
   },
 
   setup(props) {

client/components/open/forms/OpenForm.vue

@@ -41,6 +41,7 @@
               :data-form="dataForm"
               :data-form-value="dataFormValue"
               :theme="theme"
+              :dark-mode="darkMode"
               :admin-preview="adminPreview"
             />
           </template>
@@ -51,7 +52,7 @@
     <!-- Captcha -->
     <template v-if="form.use_captcha && isLastPage">
       <div class="mb-3 px-2 mt-2 mx-auto w-max">
-        <vue-hcaptcha ref="hcaptcha" :sitekey="hCaptchaSiteKey" :theme="darkModeEnabled?'dark':'light'" />
+        <vue-hcaptcha ref="hcaptcha" :sitekey="hCaptchaSiteKey" :theme="darkMode?'dark':'light'" />
         <has-error :form="dataForm" field="h-captcha-response" />
       </div>
     </template>
@@ -85,7 +86,6 @@ import VueHcaptcha from "@hcaptcha/vue3-hcaptcha"
 import OpenFormField from './OpenFormField.vue'
 import {pendingSubmission} from "~/composables/forms/pendingSubmission.js"
 import FormLogicPropertyResolver from "~/lib/forms/FormLogicPropertyResolver.js"
-import {darkModeEnabled} from "~/lib/forms/public-page.js"
 
 export default {
   name: 'OpenForm',
@@ -112,7 +112,11 @@ export default {
       required: true
     },
     defaultDataForm:{},
-    adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
+    adminPreview: { type: Boolean, default: false }, // If used in FormEditorPreview
+    darkMode: {
+      type: Boolean,
+      default: false
+    }
   },
 
   setup (props) {
@@ -124,7 +128,6 @@ export default {
       dataForm,
       recordsStore,
       workingFormStore,
-      darkModeEnabled: darkModeEnabled(),
       pendingSubmission: pendingSubmission(props.form)
     }
   },

client/components/open/forms/OpenFormField.vue

@@ -56,7 +56,6 @@
 <script>
 import { computed } from 'vue'
 import FormLogicPropertyResolver from "~/lib/forms/FormLogicPropertyResolver.js"
-import { darkModeEnabled } from '~/lib/forms/public-page.js'
 import { default as _has } from 'lodash/has'
 
 export default {
@@ -83,6 +82,10 @@ export default {
       type: Boolean,
       default: false
     },
+    darkMode: {
+      type: Boolean,
+      default: false
+    },
     field: {
       type: Object,
       required: true
@@ -177,9 +180,6 @@ export default {
     },
     fieldSideBarOpened() {
       return this.adminPreview && (this.form && this.selectedFieldIndex !== null) ? (this.form.properties[this.selectedFieldIndex] && this.showEditFieldSidebar) : false
-    },
-    isDark () {
-      return this.form.dark_mode === 'dark' || this.form.dark_mode === 'auto' && darkModeEnabled()
     }
   },
 
@@ -250,7 +250,7 @@ export default {
         theme: this.theme,
         maxCharLimit: (field.max_char_limit) ? parseInt(field.max_char_limit) : 2000,
         showCharLimit: field.show_char_limit || false,
-        isDark: this.isDark
+        isDark: this.darkMode
       }
 
       if (['select', 'multi_select'].includes(field.type)) {

client/components/open/forms/components/form-components/FormEditorPreview.vue

@@ -32,6 +32,7 @@
       <open-complete-form ref="form-preview" class="w-full mx-auto py-5 px-3" :class="{'max-w-lg': form && (form.width === 'centered')}"
                           :creating="creating"
                           :form="form"
+                          :dark-mode="darkMode"
                           :admin-preview="true"
                           @restarted="previewFormSubmitted=false"
                           @submitted="previewFormSubmitted=true"
@@ -61,7 +62,7 @@
 <script>
 import VSwitch from '../../../../forms/components/VSwitch.vue'
 import OpenCompleteForm from '../../OpenCompleteForm.vue'
-import {handleDarkMode} from "~/lib/forms/public-page.js"
+import {handleDarkMode, useDarkMode} from "~/lib/forms/public-page.js"
 import { default as _has } from 'lodash/has'
 
 export default {
@@ -69,8 +70,11 @@ export default {
   props: {},
   setup () {
     const workingFormStore = useWorkingFormStore()
+    const parent = ref(null)
     return {
-      workingFormStore
+      workingFormStore,
+      parent: parent,
+      darkMode: useDarkMode(parent)
     }
   },
   data () {

client/components/pages/welcome/Testimonials.vue

@@ -1,49 +1,63 @@
 <template>
-  <iframe v-if="!isDark" id="testimonialto-carousel-all-notionforms"
-          loading="lazy"
-          src="https://embed.testimonial.to/carousel/all/notionforms?theme=light&autoplay=on&showmore=on&one-row=on&same-height=off"
-          frameBorder="0" scrolling="no" width="100%"
+  <iframe
+    :id="iframeId"
+    title="NoteForms testimonial"
+    loading="lazy"
+    height="500px"
+    :src="'https://embed-v2.testimonial.to/w/notionforms?theme=light&card=base&loadMore=on&initialCount=8&tag=all'"
+    frameBorder="0"
+    scrolling="no"
+    width="100%"
   />
-  <iframe v-else id="testimonialto-carousel-all-notionforms" src="https://embed.testimonial.to/carousel/all/notionforms?theme=dark&autoplay=on&showmore=on&one-row=on&same-height=off" frameborder="0" scrolling="no" width="100%" />
 </template>
 
 <script>
-import {darkModeEnabled} from "~/lib/forms/public-page.js"
+import { useDarkMode } from '~/lib/forms/public-page.js'
 
 export default {
-
   props: {
     featuresOnly: {
       type: Boolean,
       default: false
     }
   },
-  data: () => ({}),
 
-  setup () {
-    const isDark = darkModeEnabled()
-    return {
-      isDark
-    }
-  },
+  data: () => ({
+    iframeId: 'testimonialto-carousel-all-notionforms'
+  }),
+
+  computed: {},
 
   mounted () {
-    this.loadScript()
+    window.addEventListener('load', () => {
+      this.loadScript()
+    })
   },
 
   methods: {
     loadScript () {
-      if (import.meta.server) return
+      if (import.meta.server)
+        return
       const script = document.createElement('script')
-      script.setAttribute('src', 'https://testimonial.to/js/iframeResizer.min.js')
+      script.setAttribute(
+        'src',
+        'https://testimonial.to/js/iframeResizer.min.js'
+      )
+      script.setAttribute('defer', 'defer')
       document.head.appendChild(script)
-      script.addEventListener('load', function () {
-        window.iFrameResize({
-          log: false,
-          checkOrigin: false
-        }, '#testimonialto-carousel-all-notionforms')
+      script.addEventListener('load', () => {
+        console.log('resizeing')
+        window.iFrameResize(
+          {
+            log: false,
+            checkOrigin: false
+          },
+          '#' + this.iframeId
+        )
       })
     }
   }
 }
 </script>
+
+