fix: Create dark mode version of Code Block on landing page (#1358)

Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>

apps/formbricks-com/components/shared/CodeBlock.tsx

@@ -1,22 +1,47 @@
 // components/ui/CodeBlock.tsx
 import Prism from "prismjs";
 import "prismjs/themes/prism.css";
-import React, { useEffect } from "react";
+import React, { CSSProperties, useEffect } from "react";
 
 interface CodeBlockProps {
   children: React.ReactNode;
 }
 
+const styles: Record<string, CSSProperties> = {
+  div: {
+    position: "relative",
+    marginTop: "1rem",
+    borderRadius: "0.375rem",
+    fontSize: "0.875rem",
+    fontWeight: "lighter",
+    color: "#e5e7eb",
+  },
+  pre: {
+    background: "none",
+  },
+  code: {
+    textShadow: "none",
+    color: "#fbbf24",
+  },
+};
+
 const CodeBlock: React.FC<CodeBlockProps> = ({ children }) => {
   useEffect(() => {
     Prism.highlightAll();
   }, [children]);
 
   return (
-    <div className="group relative mt-4 rounded-md text-sm font-light text-slate-200 sm:text-base">
-      <pre>
-        <code className="language-js">{children}</code>
+    <div style={styles.div} className="code-block-container">
+      <pre style={styles.pre}>
+        <code style={styles.code} className="language-js">
+          {children}
+        </code>
       </pre>
+      <style jsx global>{`
+        .operator {
+          background: none !important;
+        }
+      `}</style>
     </div>
   );
 };