From 235c1afe28a8435db2a59a356c0067ad36cd2616 Mon Sep 17 00:00:00 2001
From: Matthias Nannt <mail@matthiasnannt.com>
Date: Wed, 2 Aug 2023 16:59:57 +0200
Subject: [PATCH 1/3] Fix formbricks-js labels not showing correctly with
 custom label styles

---
 packages/js/src/components/ConsentQuestion.tsx              | 2 +-
 packages/js/src/components/MultipleChoiceMultiQuestion.tsx  | 2 +-
 packages/js/src/components/MultipleChoiceSingleQuestion.tsx | 2 +-
 packages/js/src/components/NPSQuestion.tsx                  | 2 +-
 packages/js/src/components/RatingQuestion.tsx               | 6 +++---
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/js/src/components/ConsentQuestion.tsx b/packages/js/src/components/ConsentQuestion.tsx
index 565a8e62b9..1c18445c39 100644
--- a/packages/js/src/components/ConsentQuestion.tsx
+++ b/packages/js/src/components/ConsentQuestion.tsx
@@ -59,7 +59,7 @@ export default function ConsentQuestion({
           e.preventDefault();
           handleSumbit(answer);
         }}>
-        <label className="fb-relative fb-z-10 fb-mt-4 fb-flex fb-w-full fb-cursor-pointer fb-items-center fb-rounded-md fb-border fb-border-gray-200 fb-bg-slate-50 fb-p-4 fb-text-sm focus:fb-outline-none">
+        <label className="fb-relative fb-z-10 fb-mt-4 fb-flex fb-w-full fb-cursor-pointer fb-items-center fb-rounded-md fb-border fb-border-gray-200 fb-bg-slate-50 fb-p-4 fb-text-sm focus:fb-outline-none fb-text-slate-800">
           <input
             type="checkbox"
             id={question.id}
diff --git a/packages/js/src/components/MultipleChoiceMultiQuestion.tsx b/packages/js/src/components/MultipleChoiceMultiQuestion.tsx
index ce9fceca0d..3e9c0854cb 100644
--- a/packages/js/src/components/MultipleChoiceMultiQuestion.tsx
+++ b/packages/js/src/components/MultipleChoiceMultiQuestion.tsx
@@ -124,7 +124,7 @@ export default function MultipleChoiceMultiQuestion({
                   selectedChoices.includes(choice.label)
                     ? "fb-z-10 fb-border-slate-400 fb-bg-slate-50"
                     : "fb-border-gray-200",
-                  "fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-space-y-3 fb-rounded-md fb-border fb-p-4 hover:fb-bg-slate-50 focus:fb-outline-none"
+                  "fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-space-y-3 fb-rounded-md fb-border fb-p-4 hover:fb-bg-slate-50 focus:fb-outline-none fb-text-slate-800"
                 )}>
                 <span className="fb-flex fb-items-center fb-text-sm">
                   <input
diff --git a/packages/js/src/components/MultipleChoiceSingleQuestion.tsx b/packages/js/src/components/MultipleChoiceSingleQuestion.tsx
index 449fe5eed0..3e8c830196 100644
--- a/packages/js/src/components/MultipleChoiceSingleQuestion.tsx
+++ b/packages/js/src/components/MultipleChoiceSingleQuestion.tsx
@@ -107,7 +107,7 @@ export default function MultipleChoiceSingleQuestion({
                   selectedChoice === choice.label
                     ? "fb-z-10 fb-bg-slate-50 fb-border-slate-400"
                     : "fb-border-gray-200",
-                  "fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-rounded-md fb-border fb-p-4 focus:fb-outline-none hover:bg-slate-50"
+                  "fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-rounded-md fb-border fb-p-4 focus:fb-outline-none hover:bg-slate-50 fb-text-slate-800"
                 )}>
                 <span className="fb-flex fb-items-center fb-text-sm">
                   <input
diff --git a/packages/js/src/components/NPSQuestion.tsx b/packages/js/src/components/NPSQuestion.tsx
index 9dd2079cce..e7d2292c74 100644
--- a/packages/js/src/components/NPSQuestion.tsx
+++ b/packages/js/src/components/NPSQuestion.tsx
@@ -72,7 +72,7 @@ export default function NPSQuestion({
                 key={number}
                 className={cn(
                   selectedChoice === number ? "fb-z-10 fb-border-slate-400 fb-bg-slate-50" : "",
-                  "fb-relative fb-h-10 fb-flex-1 fb-cursor-pointer fb-border fb-bg-white fb-text-center fb-text-sm fb-leading-10 first:fb-rounded-l-md last:fb-rounded-r-md hover:fb-bg-gray-100 focus:fb-outline-none"
+                  "fb-relative fb-h-10 fb-flex-1 fb-cursor-pointer fb-border fb-bg-white fb-text-center fb-text-sm fb-leading-10 first:fb-rounded-l-md last:fb-rounded-r-md hover:fb-bg-gray-100 focus:fb-outline-none fb-text-slate-800"
                 )}>
                 <input
                   type="radio"
diff --git a/packages/js/src/components/RatingQuestion.tsx b/packages/js/src/components/RatingQuestion.tsx
index bf0dee85dd..1d80fd954f 100644
--- a/packages/js/src/components/RatingQuestion.tsx
+++ b/packages/js/src/components/RatingQuestion.tsx
@@ -105,7 +105,7 @@ export default function RatingQuestion({
                       selectedChoice === number ? "fb-z-10 fb-border-slate-400 fb-bg-slate-50" : "",
                       a.length === number ? "fb-rounded-r-md" : "",
                       number === 1 ? "fb-rounded-l-md" : "",
-                      "fb-block fb-h-full fb-w-full fb-border hover:fb-bg-gray-100 focus:fb-outline-none"
+                      "fb-block fb-h-full fb-w-full fb-border hover:fb-bg-gray-100 focus:fb-outline-none fb-text-slate-800"
                     )}>
                     <HiddenRadioInput number={number} />
                     {number}
@@ -148,7 +148,7 @@ export default function RatingQuestion({
                     )}
                   </label>
                 ) : (
-                  <label className="fb-flex fb-h-full fb-w-full fb-justify-center">
+                  <label className="fb-flex fb-h-full fb-w-full fb-justify-center fb-text-slate-800">
                     <HiddenRadioInput number={number} />
                     <RatingSmiley
                       active={selectedChoice == number || hoveredNumber == number}
@@ -160,7 +160,7 @@ export default function RatingQuestion({
               </span>
             ))}
           </div>
-          <div className="fb-flex fb-justify-between fb-text-slate-500  fb-leading-6 fb-px-1.5 fb-text-xs">
+          <div className="fb-flex fb-justify-between fb-text-slate-500 fb-leading-6 fb-px-1.5 fb-text-xs">
             <p>{question.lowerLabel}</p>
             <p>{question.upperLabel}</p>
           </div>

From b5765fed74864415e1889340917d05bd5a095899 Mon Sep 17 00:00:00 2001
From: Johannes <johannes@formbricks.com>
Date: Wed, 9 Aug 2023 17:48:20 +0200
Subject: [PATCH 2/3] add dark mode to widget

---
 apps/demo/pages/app/index.tsx | 355 ++++++++++++++++++----------------
 apps/demo/tailwind.config.js  |   1 +
 2 files changed, 188 insertions(+), 168 deletions(-)

diff --git a/apps/demo/pages/app/index.tsx b/apps/demo/pages/app/index.tsx
index 6d3912c6b5..407e00d7b1 100644
--- a/apps/demo/pages/app/index.tsx
+++ b/apps/demo/pages/app/index.tsx
@@ -1,191 +1,210 @@
-import fbsetup from "../../public/fb-setup.png";
 import formbricks from "@formbricks/js";
 import Image from "next/image";
+import { useEffect, useState } from "react";
+import fbsetup from "../../public/fb-setup.png";
+
 
 export default function AppPage({}) {
+  const [darkMode, setDarkMode] = useState(false);
+
+    useEffect(() => {
+        if (darkMode) {
+            document.body.classList.add('dark');
+        } else {
+            document.body.classList.remove('dark');
+        }
+    }, [darkMode]);
+
   return (
-    <div className="px-12 py-6">
-      <div>
-        <h1 className="text-2xl font-bold">Formbricks In-product Survey Demo App</h1>
-        <p className="text-slate-700">
-          This app helps you test your in-app surveys. You can create an test user actions, create and update
-          user attributes, etc.
-        </p>
+    <div className="px-12 py-6 bg-white dark:bg-slate-800 h-screen">
+      <div className="flex justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">Formbricks In-product Survey Demo App</h1>
+          <p className="text-slate-700 dark:text-slate-300">
+            This app helps you test your in-app surveys. You can create and test user actions, create and update
+            user attributes, etc.
+          </p>
+        </div>
+        <button className="bg-slate-200 rounded-lg dark:bg-slate-700 dark:text-slate-100 px-6 py-1" onClick={() => setDarkMode(!darkMode)}>
+          Toggle Dark Mode
+        </button>
       </div>
+
       <div className="my-4 grid grid-cols-1 gap-6 md:grid-cols-2">
         <div>
-          <div className="rounded-lg border border-slate-300 bg-slate-100 p-6">
-            <h3 className="text-lg font-semibold">Setup .env</h3>
-            <p className="text-slate-700">
+          <div className="rounded-lg border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-900 p-6">
+            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">Setup .env</h3>
+            <p className="text-slate-700 dark:text-slate-300">
               Copy the environment ID of your Formbricks app to the env variable in demo/.env
             </p>
             <Image src={fbsetup} alt="fb setup" className="mt-4 rounded" priority />
           </div>
-          <div className="mt-4 rounded-lg border border-slate-300 bg-slate-100 p-6">
-            <h3 className="text-lg font-semibold">Widget Logs</h3>
-            <p className="text-slate-700">
-              Look at the logs to understand how the widget works. <strong>Open your browser console</strong>{" "}
-              to see the logs.
+          <div className="mt-4 rounded-lg border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-900 p-6">
+            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">Widget Logs</h3>
+            <p className="text-slate-700 dark:text-slate-300">
+              Look at the logs to understand how the widget works. <strong className="dark:text-white">Open your browser console</strong> to see the logs.
             </p>
-            {/*           <div className="max-h-[40vh] overflow-y-auto py-4">
+            {/* <div className="max-h-[40vh] overflow-y-auto py-4">
               <LogsContainer />
             </div> */}
           </div>
         </div>
 
         <div className="md:grid md:grid-cols-3">
-          <div className="col-span-3 rounded-lg border border-slate-300 bg-slate-100 p-6">
-            <h3 className="text-lg font-semibold">Reset person / pull data from Formbricks app</h3>
-            <p className="text-slate-700">
-              On formbricks.logout() a few things happen: <strong>New person is created</strong> and{" "}
-              <strong>surveys & no-code actions are pulled from Formbricks:</strong>.
-            </p>
-            <button
-              className="my-4 rounded-lg bg-slate-500 px-6 py-3 text-white hover:bg-slate-700"
-              onClick={() => {
-                formbricks.logout();
-              }}>
-              Logout
-            </button>
-            <p className="text-xs text-slate-700">
-              If you made a change in Formbricks app and it does not seem to work, hit &apos;Logout&apos; and
-              try again.
-            </p>
-          </div>
+  <div className="col-span-3 rounded-lg border border-slate-300 dark:border-gray-600 bg-slate-100 dark:bg-gray-800 p-6">
+    <h3 className="text-lg font-semibold dark:text-white">
+      Reset person / pull data from Formbricks app
+    </h3>
+    <p className="text-slate-700 dark:text-gray-300">
+      On formbricks.logout() a few things happen: <strong>New person is created</strong> and{" "}
+      <strong>surveys & no-code actions are pulled from Formbricks:</strong>.
+    </p>
+    <button
+      className="my-4 rounded-lg bg-slate-500 dark:bg-gray-700 px-6 py-3 text-white hover:bg-slate-700 dark:hover:bg-gray-600"
+      onClick={() => {
+        formbricks.logout();
+      }}>
+      Logout
+    </button>
+    <p className="text-xs text-slate-700 dark:text-gray-300">
+      If you made a change in Formbricks app and it does not seem to work, hit &apos;Logout&apos; and try again.
+    </p>
+  </div>
 
-          <div className="p-6">
-            <div>
-              <button
-                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700"
-                onClick={() => {
-                  formbricks.track("Code Action");
-                }}>
-                Code Action
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700">
-                This button sends a{" "}
-                <a href="https://formbricks.com/docs/actions/code" className="underline" target="_blank">
-                  Code Action
-                </a>{" "}
-                to the Formbricks API called &apos;Code Action&apos;. You will find it in the Actions Tab.
-              </p>
-            </div>
-          </div>
-          <div className="p-6">
-            <div>
-              <button className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
-                No-Code Action
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700">
-                This button sends a{" "}
-                <a href="https://formbricks.com/docs/actions/no-code" className="underline" target="_blank">
-                  No Code Action
-                </a>{" "}
-                as long as you created it beforehand in the Formbricks App.{" "}
-                <a href="https://formbricks.com/docs/actions/no-code" target="_blank" className="underline">
-                  Here are instructions on how to do it.
-                </a>
-              </p>
-            </div>
-          </div>
-          <div className="p-6">
-            <div>
-              <button
-                onClick={() => {
-                  formbricks.setAttribute("Plan", "Free");
-                }}
-                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
-                Set Plan to &apos;Free&apos;
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700">
-                This button sets the{" "}
-                <a
-                  href="https://formbricks.com/docs/attributes/custom-attributes"
-                  target="_blank"
-                  className="underline">
-                  attribute
-                </a>{" "}
-                &apos;Plan&apos; to &apos;Free&apos;. If the attribute does not exist, it creates it.
-              </p>
-            </div>
-          </div>
-          <div className="p-6">
-            <div>
-              <button
-                onClick={() => {
-                  formbricks.setAttribute("Plan", "Paid");
-                }}
-                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
-                Set Plan to &apos;Paid&apos;
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700">
-                This button sets the{" "}
-                <a
-                  href="https://formbricks.com/docs/attributes/custom-attributes"
-                  target="_blank"
-                  className="underline">
-                  attribute
-                </a>{" "}
-                &apos;Plan&apos; to &apos;Paid&apos;. If the attribute does not exist, it creates it.
-              </p>
-            </div>
-          </div>
-          <div className="p-6">
-            <div>
-              <button
-                onClick={() => {
-                  formbricks.setEmail("test@web.com");
-                }}
-                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
-                Set Email
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700">
-                This button sets the{" "}
-                <a
-                  href="https://formbricks.com/docs/attributes/identify-users"
-                  target="_blank"
-                  className="underline">
-                  user email
-                </a>{" "}
-                &apos;test@web.com&apos;
-              </p>
-            </div>
-          </div>
-          <div className="p-6">
-            <div>
-              <button
-                onClick={() => {
-                  formbricks.setUserId("THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING");
-                }}
-                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
-                Set User ID
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700">
-                This button sets an external{" "}
-                <a
-                  href="https://formbricks.com/docs/attributes/identify-users"
-                  target="_blank"
-                  className="underline">
-                  user ID
-                </a>{" "}
-                to &apos;THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING&apos;
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
+  <div className="p-6">
+    <div>
+      <button
+        className="mb-4 rounded-lg bg-slate-800 dark:bg-gray-700 px-6 py-3 text-white hover:bg-slate-700 dark:hover:bg-gray-600"
+        onClick={() => {
+          formbricks.track("Code Action");
+        }}>
+        Code Action
+      </button>
     </div>
+    <div>
+      <p className="text-xs text-slate-700 dark:text-gray-300">
+        This button sends a{" "}
+        <a href="https://formbricks.com/docs/actions/code" className="underline" target="_blank">
+          Code Action
+        </a>{" "}
+        to the Formbricks API called &apos;Code Action&apos;. You will find it in the Actions Tab.
+      </p>
+    </div>
+  </div>
+  <div className="p-6">
+    <div>
+        <button className="mb-4 rounded-lg bg-slate-800 dark:bg-gray-700 px-6 py-3 text-white  hover:bg-slate-700 dark:hover:bg-gray-600">
+            No-Code Action
+        </button>
+    </div>
+    <div>
+        <p className="text-xs text-slate-700 dark:text-gray-300">
+            This button sends a{" "}
+            <a href="https://formbricks.com/docs/actions/no-code" className="underline dark:text-blue-500" target="_blank">
+                No Code Action
+            </a>{" "}
+            as long as you created it beforehand in the Formbricks App.{" "}
+            <a href="https://formbricks.com/docs/actions/no-code" target="_blank" className="underline dark:text-blue-500">
+                Here are instructions on how to do it.
+            </a>
+        </p>
+    </div>
+</div>
+<div className="p-6">
+    <div>
+        <button
+            onClick={() => {
+                formbricks.setAttribute("Plan", "Free");
+            }}
+            className="mb-4 rounded-lg bg-slate-800 dark:bg-gray-700 px-6 py-3 text-white  hover:bg-slate-700 dark:hover:bg-gray-600">
+            Set Plan to &apos;Free&apos;
+        </button>
+    </div>
+    <div>
+        <p className="text-xs text-slate-700 dark:text-gray-300">
+            This button sets the{" "}
+            <a
+                href="https://formbricks.com/docs/attributes/custom-attributes"
+                target="_blank"
+                className="underline dark:text-blue-500">
+                attribute
+            </a>{" "}
+            &apos;Plan&apos; to &apos;Free&apos;. If the attribute does not exist, it creates it.
+        </p>
+    </div>
+</div>
+<div className="p-6">
+    <div>
+        <button
+            onClick={() => {
+                formbricks.setAttribute("Plan", "Paid");
+            }}
+            className="mb-4 rounded-lg bg-slate-800 dark:bg-gray-700 px-6 py-3 text-white  hover:bg-slate-700 dark:hover:bg-gray-600">
+            Set Plan to &apos;Paid&apos;
+        </button>
+    </div>
+    <div>
+        <p className="text-xs text-slate-700 dark:text-gray-300">
+            This button sets the{" "}
+            <a
+                href="https://formbricks.com/docs/attributes/custom-attributes"
+                target="_blank"
+                className="underline dark:text-blue-500">
+                attribute
+            </a>{" "}
+            &apos;Plan&apos; to &apos;Paid&apos;. If the attribute does not exist, it creates it.
+        </p>
+    </div>
+</div>
+<div className="p-6">
+    <div>
+        <button
+            onClick={() => {
+                formbricks.setEmail("test@web.com");
+            }}
+            className="mb-4 rounded-lg bg-slate-800 dark:bg-gray-700 px-6 py-3 text-white  hover:bg-slate-700 dark:hover:bg-gray-600">
+            Set Email
+        </button>
+    </div>
+    <div>
+        <p className="text-xs text-slate-700 dark:text-gray-300">
+            This button sets the{" "}
+            <a
+                href="https://formbricks.com/docs/attributes/identify-users"
+                target="_blank"
+                className="underline dark:text-blue-500">
+                user email
+            </a>{" "}
+            &apos;test@web.com&apos;
+        </p>
+    </div>
+</div>
+<div className="p-6">
+    <div>
+        <button
+            onClick={() => {
+                formbricks.setUserId("THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING");
+            }}
+            className="mb-4 rounded-lg bg-slate-800 dark:bg-gray-700 px-6 py-3 text-white  hover:bg-slate-700 dark:hover:bg-gray-600">
+            Set User ID
+        </button>
+    </div>
+    <div>
+        <p className="text-xs text-slate-700 dark:text-gray-300">
+            This button sets an external{" "}
+            <a
+                href="https://formbricks.com/docs/attributes/identify-users"
+                target="_blank"
+                className="underline dark:text-blue-500">
+                user ID
+            </a>{" "}
+            to &apos;THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING&apos;
+        </p>
+    </div>
+</div>
+</div>
+</div>
+</div>
+
   );
 }
diff --git a/apps/demo/tailwind.config.js b/apps/demo/tailwind.config.js
index fa51e9f4b3..0ccb1b5185 100644
--- a/apps/demo/tailwind.config.js
+++ b/apps/demo/tailwind.config.js
@@ -5,6 +5,7 @@ module.exports = {
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
   ],
+  darkMode: "class",
   theme: {
     extend: {},
   },

From 9f944249fc52df5ba01d4a294f37e2a82260ff3f Mon Sep 17 00:00:00 2001
From: Johannes <johannes@formbricks.com>
Date: Wed, 9 Aug 2023 17:50:40 +0200
Subject: [PATCH 3/3] update formatting

---
 apps/demo/pages/app/index.tsx | 348 +++++++++++++++++-----------------
 1 file changed, 179 insertions(+), 169 deletions(-)

diff --git a/apps/demo/pages/app/index.tsx b/apps/demo/pages/app/index.tsx
index 407e00d7b1..3a89040ba9 100644
--- a/apps/demo/pages/app/index.tsx
+++ b/apps/demo/pages/app/index.tsx
@@ -3,46 +3,50 @@ import Image from "next/image";
 import { useEffect, useState } from "react";
 import fbsetup from "../../public/fb-setup.png";
 
-
 export default function AppPage({}) {
   const [darkMode, setDarkMode] = useState(false);
 
-    useEffect(() => {
-        if (darkMode) {
-            document.body.classList.add('dark');
-        } else {
-            document.body.classList.remove('dark');
-        }
-    }, [darkMode]);
+  useEffect(() => {
+    if (darkMode) {
+      document.body.classList.add("dark");
+    } else {
+      document.body.classList.remove("dark");
+    }
+  }, [darkMode]);
 
   return (
-    <div className="px-12 py-6 bg-white dark:bg-slate-800 h-screen">
+    <div className="h-screen bg-white px-12 py-6 dark:bg-slate-800">
       <div className="flex justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">Formbricks In-product Survey Demo App</h1>
+          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
+            Formbricks In-product Survey Demo App
+          </h1>
           <p className="text-slate-700 dark:text-slate-300">
-            This app helps you test your in-app surveys. You can create and test user actions, create and update
-            user attributes, etc.
+            This app helps you test your in-app surveys. You can create and test user actions, create and
+            update user attributes, etc.
           </p>
         </div>
-        <button className="bg-slate-200 rounded-lg dark:bg-slate-700 dark:text-slate-100 px-6 py-1" onClick={() => setDarkMode(!darkMode)}>
+        <button
+          className="rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
+          onClick={() => setDarkMode(!darkMode)}>
           Toggle Dark Mode
         </button>
       </div>
 
       <div className="my-4 grid grid-cols-1 gap-6 md:grid-cols-2">
         <div>
-          <div className="rounded-lg border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-900 p-6">
+          <div className="rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
             <h3 className="text-lg font-semibold text-slate-900 dark:text-white">Setup .env</h3>
             <p className="text-slate-700 dark:text-slate-300">
               Copy the environment ID of your Formbricks app to the env variable in demo/.env
             </p>
             <Image src={fbsetup} alt="fb setup" className="mt-4 rounded" priority />
           </div>
-          <div className="mt-4 rounded-lg border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-900 p-6">
+          <div className="mt-4 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
             <h3 className="text-lg font-semibold text-slate-900 dark:text-white">Widget Logs</h3>
             <p className="text-slate-700 dark:text-slate-300">
-              Look at the logs to understand how the widget works. <strong className="dark:text-white">Open your browser console</strong> to see the logs.
+              Look at the logs to understand how the widget works.{" "}
+              <strong className="dark:text-white">Open your browser console</strong> to see the logs.
             </p>
             {/* <div className="max-h-[40vh] overflow-y-auto py-4">
               <LogsContainer />
@@ -51,160 +55,166 @@ export default function AppPage({}) {
         </div>
 
         <div className="md:grid md:grid-cols-3">
-  <div className="col-span-3 rounded-lg border border-slate-300 dark:border-gray-600 bg-slate-100 dark:bg-gray-800 p-6">
-    <h3 className="text-lg font-semibold dark:text-white">
-      Reset person / pull data from Formbricks app
-    </h3>
-    <p className="text-slate-700 dark:text-gray-300">
-      On formbricks.logout() a few things happen: <strong>New person is created</strong> and{" "}
-      <strong>surveys & no-code actions are pulled from Formbricks:</strong>.
-    </p>
-    <button
-      className="my-4 rounded-lg bg-slate-500 dark:bg-gray-700 px-6 py-3 text-white hover:bg-slate-700 dark:hover:bg-gray-600"
-      onClick={() => {
-        formbricks.logout();
-      }}>
-      Logout
-    </button>
-    <p className="text-xs text-slate-700 dark:text-gray-300">
-      If you made a change in Formbricks app and it does not seem to work, hit &apos;Logout&apos; and try again.
-    </p>
-  </div>
+          <div className="col-span-3 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-gray-600 dark:bg-gray-800">
+            <h3 className="text-lg font-semibold dark:text-white">
+              Reset person / pull data from Formbricks app
+            </h3>
+            <p className="text-slate-700 dark:text-gray-300">
+              On formbricks.logout() a few things happen: <strong>New person is created</strong> and{" "}
+              <strong>surveys & no-code actions are pulled from Formbricks:</strong>.
+            </p>
+            <button
+              className="my-4 rounded-lg bg-slate-500 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
+              onClick={() => {
+                formbricks.logout();
+              }}>
+              Logout
+            </button>
+            <p className="text-xs text-slate-700 dark:text-gray-300">
+              If you made a change in Formbricks app and it does not seem to work, hit &apos;Logout&apos; and
+              try again.
+            </p>
+          </div>
 
-  <div className="p-6">
-    <div>
-      <button
-        className="mb-4 rounded-lg bg-slate-800 dark:bg-gray-700 px-6 py-3 text-white hover:bg-slate-700 dark:hover:bg-gray-600"
-        onClick={() => {
-          formbricks.track("Code Action");
-        }}>
-        Code Action
-      </button>
+          <div className="p-6">
+            <div>
+              <button
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
+                onClick={() => {
+                  formbricks.track("Code Action");
+                }}>
+                Code Action
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-gray-300">
+                This button sends a{" "}
+                <a href="https://formbricks.com/docs/actions/code" className="underline" target="_blank">
+                  Code Action
+                </a>{" "}
+                to the Formbricks API called &apos;Code Action&apos;. You will find it in the Actions Tab.
+              </p>
+            </div>
+          </div>
+          <div className="p-6">
+            <div>
+              <button className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
+                No-Code Action
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-gray-300">
+                This button sends a{" "}
+                <a
+                  href="https://formbricks.com/docs/actions/no-code"
+                  className="underline dark:text-blue-500"
+                  target="_blank">
+                  No Code Action
+                </a>{" "}
+                as long as you created it beforehand in the Formbricks App.{" "}
+                <a
+                  href="https://formbricks.com/docs/actions/no-code"
+                  target="_blank"
+                  className="underline dark:text-blue-500">
+                  Here are instructions on how to do it.
+                </a>
+              </p>
+            </div>
+          </div>
+          <div className="p-6">
+            <div>
+              <button
+                onClick={() => {
+                  formbricks.setAttribute("Plan", "Free");
+                }}
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
+                Set Plan to &apos;Free&apos;
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-gray-300">
+                This button sets the{" "}
+                <a
+                  href="https://formbricks.com/docs/attributes/custom-attributes"
+                  target="_blank"
+                  className="underline dark:text-blue-500">
+                  attribute
+                </a>{" "}
+                &apos;Plan&apos; to &apos;Free&apos;. If the attribute does not exist, it creates it.
+              </p>
+            </div>
+          </div>
+          <div className="p-6">
+            <div>
+              <button
+                onClick={() => {
+                  formbricks.setAttribute("Plan", "Paid");
+                }}
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
+                Set Plan to &apos;Paid&apos;
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-gray-300">
+                This button sets the{" "}
+                <a
+                  href="https://formbricks.com/docs/attributes/custom-attributes"
+                  target="_blank"
+                  className="underline dark:text-blue-500">
+                  attribute
+                </a>{" "}
+                &apos;Plan&apos; to &apos;Paid&apos;. If the attribute does not exist, it creates it.
+              </p>
+            </div>
+          </div>
+          <div className="p-6">
+            <div>
+              <button
+                onClick={() => {
+                  formbricks.setEmail("test@web.com");
+                }}
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
+                Set Email
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-gray-300">
+                This button sets the{" "}
+                <a
+                  href="https://formbricks.com/docs/attributes/identify-users"
+                  target="_blank"
+                  className="underline dark:text-blue-500">
+                  user email
+                </a>{" "}
+                &apos;test@web.com&apos;
+              </p>
+            </div>
+          </div>
+          <div className="p-6">
+            <div>
+              <button
+                onClick={() => {
+                  formbricks.setUserId("THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING");
+                }}
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
+                Set User ID
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-gray-300">
+                This button sets an external{" "}
+                <a
+                  href="https://formbricks.com/docs/attributes/identify-users"
+                  target="_blank"
+                  className="underline dark:text-blue-500">
+                  user ID
+                </a>{" "}
+                to &apos;THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING&apos;
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-    <div>
-      <p className="text-xs text-slate-700 dark:text-gray-300">
-        This button sends a{" "}
-        <a href="https://formbricks.com/docs/actions/code" className="underline" target="_blank">
-          Code Action
-        </a>{" "}
-        to the Formbricks API called &apos;Code Action&apos;. You will find it in the Actions Tab.
-      </p>
-    </div>
-  </div>
-  <div className="p-6">
-    <div>
-        <button className="mb-4 rounded-lg bg-slate-800 dark:bg-gray-700 px-6 py-3 text-white  hover:bg-slate-700 dark:hover:bg-gray-600">
-            No-Code Action
-        </button>
-    </div>
-    <div>
-        <p className="text-xs text-slate-700 dark:text-gray-300">
-            This button sends a{" "}
-            <a href="https://formbricks.com/docs/actions/no-code" className="underline dark:text-blue-500" target="_blank">
-                No Code Action
-            </a>{" "}
-            as long as you created it beforehand in the Formbricks App.{" "}
-            <a href="https://formbricks.com/docs/actions/no-code" target="_blank" className="underline dark:text-blue-500">
-                Here are instructions on how to do it.
-            </a>
-        </p>
-    </div>
-</div>
-<div className="p-6">
-    <div>
-        <button
-            onClick={() => {
-                formbricks.setAttribute("Plan", "Free");
-            }}
-            className="mb-4 rounded-lg bg-slate-800 dark:bg-gray-700 px-6 py-3 text-white  hover:bg-slate-700 dark:hover:bg-gray-600">
-            Set Plan to &apos;Free&apos;
-        </button>
-    </div>
-    <div>
-        <p className="text-xs text-slate-700 dark:text-gray-300">
-            This button sets the{" "}
-            <a
-                href="https://formbricks.com/docs/attributes/custom-attributes"
-                target="_blank"
-                className="underline dark:text-blue-500">
-                attribute
-            </a>{" "}
-            &apos;Plan&apos; to &apos;Free&apos;. If the attribute does not exist, it creates it.
-        </p>
-    </div>
-</div>
-<div className="p-6">
-    <div>
-        <button
-            onClick={() => {
-                formbricks.setAttribute("Plan", "Paid");
-            }}
-            className="mb-4 rounded-lg bg-slate-800 dark:bg-gray-700 px-6 py-3 text-white  hover:bg-slate-700 dark:hover:bg-gray-600">
-            Set Plan to &apos;Paid&apos;
-        </button>
-    </div>
-    <div>
-        <p className="text-xs text-slate-700 dark:text-gray-300">
-            This button sets the{" "}
-            <a
-                href="https://formbricks.com/docs/attributes/custom-attributes"
-                target="_blank"
-                className="underline dark:text-blue-500">
-                attribute
-            </a>{" "}
-            &apos;Plan&apos; to &apos;Paid&apos;. If the attribute does not exist, it creates it.
-        </p>
-    </div>
-</div>
-<div className="p-6">
-    <div>
-        <button
-            onClick={() => {
-                formbricks.setEmail("test@web.com");
-            }}
-            className="mb-4 rounded-lg bg-slate-800 dark:bg-gray-700 px-6 py-3 text-white  hover:bg-slate-700 dark:hover:bg-gray-600">
-            Set Email
-        </button>
-    </div>
-    <div>
-        <p className="text-xs text-slate-700 dark:text-gray-300">
-            This button sets the{" "}
-            <a
-                href="https://formbricks.com/docs/attributes/identify-users"
-                target="_blank"
-                className="underline dark:text-blue-500">
-                user email
-            </a>{" "}
-            &apos;test@web.com&apos;
-        </p>
-    </div>
-</div>
-<div className="p-6">
-    <div>
-        <button
-            onClick={() => {
-                formbricks.setUserId("THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING");
-            }}
-            className="mb-4 rounded-lg bg-slate-800 dark:bg-gray-700 px-6 py-3 text-white  hover:bg-slate-700 dark:hover:bg-gray-600">
-            Set User ID
-        </button>
-    </div>
-    <div>
-        <p className="text-xs text-slate-700 dark:text-gray-300">
-            This button sets an external{" "}
-            <a
-                href="https://formbricks.com/docs/attributes/identify-users"
-                target="_blank"
-                className="underline dark:text-blue-500">
-                user ID
-            </a>{" "}
-            to &apos;THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING&apos;
-        </p>
-    </div>
-</div>
-</div>
-</div>
-</div>
-
   );
 }