Fix Dark mode (#376)

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

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>
+
+