Dashboard: Migrate Explorer components from chakra to tailwind (#7707)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on improving the UI components and functionality of the `ContractExplorerPage` and related components in the dashboard by refining layout, enhancing accessibility, and optimizing code structure.

### Detailed summary
- Updated layout for `ContractExplorerPage` to enhance UI consistency.
- Improved header elements for better accessibility.
- Refined tab structure in `ContractFunctionsOverview` for better navigation.
- Enhanced styling of buttons and inputs for a more modern look.
- Replaced `Card` components with simpler layouts where applicable.
- Introduced new utility functions for class name management.
- Optimized the handling of function inputs and outputs in `InteractiveAbiFunction`.
- Adjusted the rendering of function and event lists for improved clarity.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/components/blocks/FormFieldSetup.tsx

@@ -2,6 +2,7 @@ import { AsteriskIcon, InfoIcon } from "lucide-react";
 import type React from "react";
 import { Label } from "@/components/ui/label";
 import { ToolTipLabel } from "@/components/ui/tooltip";
+import { cn } from "../../lib/utils";
 
 export function FormFieldSetup(props: {
   htmlFor?: string;
@@ -10,13 +11,22 @@ export function FormFieldSetup(props: {
   children: React.ReactNode;
   tooltip?: React.ReactNode;
   isRequired: boolean;
+  labelClassName?: string;
+  labelContainerClassName?: string;
   helperText?: React.ReactNode;
   className?: string;
 }) {
   return (
     <div className={props.className}>
-      <div className="mb-2 inline-flex items-center gap-1">
-        <Label htmlFor={props.htmlFor}>{props.label}</Label>
+      <div
+        className={cn(
+          "mb-2 inline-flex items-center gap-1",
+          props.labelContainerClassName,
+        )}
+      >
+        <Label htmlFor={props.htmlFor} className={props.labelClassName}>
+          {props.label}
+        </Label>
 
         {props.isRequired && (
           <AsteriskIcon className="size-3.5 text-destructive-text" />

apps/dashboard/src/@/components/blocks/code/code-segment.client.tsx

@@ -3,6 +3,7 @@ import type React from "react";
 import { type Dispatch, type SetStateAction, useMemo } from "react";
 import { CodeClient } from "@/components/ui/code/code.client";
 import { TabButtons } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
 
 export type CodeEnvironment =
   | "javascript"
@@ -50,6 +51,7 @@ interface CodeSegmentProps {
   isInstallCommand?: boolean;
   hideTabs?: boolean;
   onlyTabs?: boolean;
+  codeContainerClassName?: string;
 }
 
 export const CodeSegment: React.FC<CodeSegmentProps> = ({
@@ -59,6 +61,7 @@ export const CodeSegment: React.FC<CodeSegmentProps> = ({
   isInstallCommand,
   hideTabs,
   onlyTabs,
+  codeContainerClassName,
 }) => {
   const activeEnvironment: CodeEnvironment = useMemo(() => {
     return (
@@ -106,7 +109,10 @@ export const CodeSegment: React.FC<CodeSegmentProps> = ({
 
       {onlyTabs ? null : (
         <CodeClient
-          className="rounded-none border-none grow"
+          className={cn(
+            "rounded-none border-none grow",
+            codeContainerClassName,
+          )}
           scrollableContainerClassName="h-full"
           code={code}
           lang={

apps/dashboard/src/@/components/contracts/functions/contract-function-comment.tsx

@@ -22,15 +22,16 @@ export default function ContractFunctionComment({
     return null;
   }
   return (
-    <>
-      <p className="mt-6">
+    <div>
+      <h3 className="text-base font-semibold mt-6 mb-3">
         About this function <Badge>Beta</Badge>
-      </p>
+      </h3>
       <CodeClient
         code={query.data}
         copyButtonClassName="hidden"
-        lang="wikitext"
+        lang="solidity"
+        className="bg-background"
       />
-    </>
+    </div>
   );
 }