feat: changes the ui and ux of the api dialog to improve usability (#4338)

* init

* dialog uplift

* color updates

* remove weird active state

* [autofix.ci] apply automated fixes

* match code highlighter themes through out

* add tweaks tooltip

* icon resize

* [autofix.ci] apply automated fixes

* dark vs light style + merge fix

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>

src/frontend/tailwind.config.mjs

@@ -118,7 +118,10 @@ const config = {
         "chat-bot-icon": "var(--chat-bot-icon)",
         "chat-user-icon": "var(--chat-user-icon)",
         "code-background": "hsl(var(--code-background))",
-        canvas: "hsl(var(--canvas))",
+        canvas: {
+          DEFAULT: "hsl(var(--canvas))",
+          dark: "hsl(var(--canvas-dark))",
+        },
         ice: "var(--ice)",
         selected: "var(--selected)",
         hover: "var(--hover)",
@@ -184,6 +187,10 @@ const config = {
           DEFAULT: "hsl(var(--tooltip))",
           foreground: "hsl(var(--tooltip-foreground))",
         },
+        "code-block": {
+          DEFAULT: "#18181B",
+          muted: "#27272A",
+        },
         "inner-yellow": {
           DEFAULT: "hsl(var(--inner-yellow))",
           foreground: "hsl(var(--inner-foreground-yellow))",