Address playground feedback (#74)

Author: merlinfuchs

src/components/playground/PlaygroundBeginnerBanner.tsx

@@ -1,8 +1,20 @@
-import React from "react";
+import { Icon } from "@iconify/react";
+import React, { useState } from "react";
 
 export default function PlaygroundBeginnerBanner() {
+  const [closed, setClosed] = useState(false);
+
+  if (closed) return null;
+
   return (
-    <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
+    <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 relative">
+      <button
+        onClick={() => setClosed(true)}
+        className="absolute top-2 right-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+      >
+        <Icon icon="iconamoon:close-fill" height={25} />
+      </button>
+
       <div className="flex items-start space-x-3">
         <div className="flex-shrink-0 mt-1">
           <svg

src/components/playground/PlaygroundConfigEditor.tsx

@@ -246,12 +246,12 @@ export default function PlaygroundConfigEditor({
             className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
           />
           <span className="ml-2 text-sm text-gray-700 dark:text-gray-300">
-            Simulate False Positive
+            Simulate high solving time
           </span>
         </label>
         <div className="text-xs text-gray-500 dark:text-gray-400 mt-1.5">
           {settings.simulateFalsePositive
-            ? "The widget will simulate that the user is suspicious and might be a bot"
+            ? "The widget will simulate that the user is suspicious which results in a high solving time"
             : "The widget will behave normally"}
         </div>
       </div>

src/components/playground/PlaygroundVersionInfoBanner.tsx

@@ -1,13 +1,25 @@
+import { Icon } from "@iconify/react";
 import { PlaygroundSettings } from "@site/src/lib/playground";
-import React from "react";
+import React, { useState } from "react";
 
 export default function PlaygroundVersionInfoBanner({
   settings,
 }: {
   settings: PlaygroundSettings;
 }) {
+  const [closed, setClosed] = useState(false);
+
+  if (closed) return null;
+
   return (
-    <div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+    <div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg relative">
+      <button
+        onClick={() => setClosed(true)}
+        className="absolute top-2 right-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+      >
+        <Icon icon="iconamoon:close-fill" height={25} />
+      </button>
+
       <div className="flex items-start space-x-3">
         <div className="flex-shrink-0 mt-1">
           <svg

src/components/playground/PlaygroundWidgetPreview.tsx

@@ -4,10 +4,11 @@ import {
   WidgetEvent,
 } from "@site/src/lib/playground";
 import { WidgetInstance } from "friendly-challenge";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import PlaygroundForm from "./PlaygroundForm";
 import { FriendlyCaptchaSDK, WidgetHandle } from "@friendlycaptcha/sdk";
 import PlaygroundFormHeader from "./PlaygroundFormHeader";
+import { useColorMode } from "@docusaurus/theme-common";
 
 const friendlyCaptchaSDK = new FriendlyCaptchaSDK({
   disableEvalPatching: true,
@@ -39,9 +40,16 @@ export default function PlaygroundWidgetPreview({
   const widgetInstanceRef = useRef<WidgetInstance | WidgetHandle>(null);
   const clenaupFunc = useRef<() => void>(null);
 
+  const { colorMode } = useColorMode();
+
   const [isCreating, setIsCreating] = useState<boolean>(false);
   const [widgetState, setWidgetState] = useState<string>("none");
 
+  const resolvedTheme = useMemo(
+    () => (settings.theme === "auto" ? colorMode : settings.theme),
+    [colorMode, settings.theme]
+  );
+
   const getSitekey = () => {
     if (settings.version === "v1") {
       // v1 doesn't have widget modes, use any sitekey
@@ -142,7 +150,7 @@ export default function PlaygroundWidgetPreview({
             element: widgetRef.current,
             sitekey: getSitekey(),
             startMode: settings.startMode,
-            theme: settings.theme,
+            theme: resolvedTheme,
             language:
               settings.language !== "auto" ? settings.language : undefined,
             apiEndpoint:
@@ -270,11 +278,11 @@ export default function PlaygroundWidgetPreview({
     settings.version,
     settings.widgetMode,
     settings.startMode,
-    settings.theme,
     settings.endpoint,
     settings.customEndpoint,
     settings.language,
     settings.simulateFalsePositive,
+    resolvedTheme,
   ]);
 
   return (
@@ -292,7 +300,7 @@ export default function PlaygroundWidgetPreview({
               key={`widget-${settings.version}`}
               ref={widgetRef}
               className={
-                "frc-captcha" + (settings.theme === "dark" ? " dark" : "")
+                "frc-captcha" + (resolvedTheme === "dark" ? " dark" : "")
               }
             />
             <button