feat: Onboarding revamp (#2073)

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

packages/ui/CodeBlock/index.tsx

@@ -8,16 +8,20 @@ import toast from "react-hot-toast";
 
 import { cn } from "@formbricks/lib/cn";
 
+import "./style.css";
+
 interface CodeBlockProps {
   children: React.ReactNode;
   language: string;
   customCodeClass?: string;
+  customEditorClass?: string;
   showCopyToClipboard?: boolean;
 }
 
 const CodeBlock: React.FC<CodeBlockProps> = ({
   children,
   language,
+  customEditorClass = "",
   customCodeClass = "",
   showCopyToClipboard = true,
 }) => {
@@ -28,16 +32,18 @@ const CodeBlock: React.FC<CodeBlockProps> = ({
   return (
     <div className="group relative mt-4 rounded-md text-sm text-slate-200">
       {showCopyToClipboard && (
-        <DocumentDuplicateIcon
-          className="absolute right-4 top-4 z-20 h-5 w-5 cursor-pointer text-slate-600 opacity-0 transition-all duration-150 group-hover:opacity-60"
-          onClick={() => {
-            const childText = children?.toString() || "";
-            navigator.clipboard.writeText(childText);
-            toast.success("Copied to clipboard");
-          }}
-        />
+        <div className="absolute right-2 top-2 z-20 h-8 w-8 cursor-pointer rounded-md bg-slate-100 p-1.5 text-slate-600 hover:bg-slate-200">
+          <DocumentDuplicateIcon
+            className=""
+            onClick={() => {
+              const childText = children?.toString() || "";
+              navigator.clipboard.writeText(childText);
+              toast.success("Copied to clipboard");
+            }}
+          />
+        </div>
       )}
-      <pre>
+      <pre className={customEditorClass}>
         <code className={cn(`language-${language} whitespace-pre-wrap`, customCodeClass)}>{children}</code>
       </pre>
     </div>

packages/ui/CodeBlock/style.css

@@ -0,0 +1,21 @@
+pre { 
+    scrollbar-width: thin;
+    scrollbar-color: #e2e8f0 #ffffff;
+  }
+  
+ pre::-webkit-scrollbar {
+    width: 4px !important;
+    border-radius: 99px;
+  }
+  
+ pre::-webkit-scrollbar-track {
+    background: #e2e8f0;
+    border-radius: 99px;
+  }
+  
+pre::-webkit-scrollbar-thumb {
+    background-color: #cbd5e1;
+    border: 3px solid #cbd5e1;
+    border-radius: 99px;
+  }
+