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/src/components/codeTabsComponent/ChatCodeTabComponent.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { tomorrow } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { useDarkStore } from "../../stores/darkStore";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
@@ -50,7 +50,7 @@ export default function SimplifiedCodeTabComponent({
       </div>
       <SyntaxHighlighter
         language={language.toLowerCase()}
-        style={oneDark}
+        style={tomorrow}
         className="!mt-0 h-full w-full overflow-scroll !rounded-b-md !rounded-t-none border border-border text-left !custom-scroll"
       >
         {code}

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -1,7 +1,11 @@
+import ShadTooltip from "@/components/shadTooltipComponent";
 import { useTweaksStore } from "@/stores/tweaksStore";
 import { useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import {
+  oneDark,
+  tomorrow,
+} from "react-syntax-highlighter/dist/cjs/styles/prism";
 import {
   Tabs,
   TabsContent,
@@ -58,7 +62,7 @@ export default function CodeTabsComponent({
     >
       <div className="api-modal-tablist-div">
         {tabs.length > 0 && tabs[0].name !== "" ? (
-          <TabsList>
+          <TabsList className="mt-[-1px] border-b">
             {tabs.map((tab, index) => (
               <TabsTrigger
                 className={
@@ -74,71 +78,81 @@ export default function CodeTabsComponent({
         ) : (
           <div></div>
         )}
-
-        <div className="float-right mx-2 mb-1 mt-2 flex items-center gap-4">
-          {nodes.length > 0 &&
-            tabs.find((tab) => tab.name.toLowerCase() === "tweaks") &&
-            tabs[activeTab].hasTweaks && (
-              <div className="flex gap-2">
-                <Switch
-                  style={{
-                    transform: `scaleX(${0.7}) scaleY(${0.7})`,
-                  }}
-                  id="tweaks-switch"
-                  onCheckedChange={setActiveTweaks}
-                  checked={activeTweaks}
-                  autoFocus={false}
-                />
-                <Label
-                  className={cn(
-                    "relative right-1 top-[4px] text-xs font-medium text-muted-foreground",
-                    activeTweaks ? "text-primary" : "",
-                  )}
-                  htmlFor="tweaks-switch"
-                >
-                  Tweaks
-                </Label>
-              </div>
-            )}
-
-          {tabs[activeTab].name.toLowerCase !== "tweaks" && (
-            <>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="text-muted-foreground"
-                onClick={copyToClipboard}
-                data-testid="btn-copy-code"
-              >
-                {isCopied ? (
-                  <IconComponent name="Check" className="h-4 w-4" />
-                ) : (
-                  <IconComponent name="Copy" className="h-4 w-4" />
-                )}
-              </Button>
-            </>
-          )}
-        </div>
       </div>
 
       {tabs.map((tab, idx) => (
         <TabsContent
           value={idx.toString()}
-          className="api-modal-tabs-content overflow-hidden"
+          className="api-modal-tabs-content overflow-hidden dark"
           key={idx} // Remember to add a unique key prop
         >
           {tab.name.toLowerCase() !== "tweaks" ? (
-            <div className="flex h-full w-full flex-col">
+            <div className="mt-2 flex h-full w-full flex-col">
               {tab.description && (
                 <div
                   className="mb-2 w-full text-left text-sm"
                   dangerouslySetInnerHTML={{ __html: tab.description }}
                 ></div>
               )}
+              <div className="flex w-full items-center justify-end gap-4 rounded-t-md border border-b-0 border-input bg-secondary px-4 py-2">
+                {nodes.length > 0 &&
+                  tabs.find((tab) => tab.name.toLowerCase() === "tweaks") &&
+                  tabs[activeTab].hasTweaks && (
+                    <div className="flex items-center gap-2">
+                      <ShadTooltip content="Makes temporary adjustments managed in 'Tweaks'">
+                        <div className="flex items-center gap-2">
+                          <Label
+                            className={"text-xs font-medium text-white"}
+                            htmlFor="tweaks-switch"
+                          >
+                            Enable Tweaks
+                          </Label>
+                          <IconComponent
+                            name="info"
+                            className="h-3.5 w-3.5 text-placeholder-foreground"
+                          />
+                        </div>
+                      </ShadTooltip>
+                      <Switch
+                        style={{
+                          transform: `scaleX(${0.85}) scaleY(${0.85})`,
+                        }}
+                        id="tweaks-switch"
+                        onCheckedChange={setActiveTweaks}
+                        checked={activeTweaks}
+                        autoFocus={false}
+                      />
+                      <span className="text-lg text-accent">|</span>
+                    </div>
+                  )}
+
+                {tabs[activeTab].name.toLowerCase !== "tweaks" && (
+                  <>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={copyToClipboard}
+                      data-testid="btn-copy-code"
+                    >
+                      {isCopied ? (
+                        <IconComponent
+                          name="Check"
+                          className="h-4 w-4 text-muted-foreground"
+                        />
+                      ) : (
+                        <IconComponent
+                          name="Copy"
+                          className="h-4 w-4 text-muted-foreground"
+                        />
+                      )}
+                    </Button>
+                  </>
+                )}
+              </div>
               <SyntaxHighlighter
                 language={tab.language}
                 style={oneDark}
-                className="mt-0 h-full overflow-auto rounded-sm text-left custom-scroll"
+                className="!my-0 h-full overflow-auto rounded-sm !rounded-t-none border border-t-0 border-input bg-code-block text-left custom-scroll"
               >
                 {tab.code}
               </SyntaxHighlighter>

src/frontend/src/components/shadTooltipComponent/index.tsx

@@ -28,7 +28,7 @@ const ShadTooltip: React.FC<ShadToolTipType> = ({
       <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
       <TooltipContent
         className={cn(
-          "max-w-96 bg-tooltip text-[12px] text-tooltip-foreground",
+          "z-50 max-w-96 bg-tooltip text-[12px] text-tooltip-foreground",
           styleClasses,
         )}
         side={side}

src/frontend/src/components/ui/dialog.tsx

@@ -27,7 +27,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "nopan nodelete nodrag noflow fixed inset-0 bottom-0 left-0 right-0 top-0 z-50 overflow-auto bg-blur-shared backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "nopan nodelete nodrag noflow fixed inset-0 bottom-0 left-0 right-0 top-0 z-40 overflow-auto bg-blur-shared backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className,
     )}
     {...props}

src/frontend/src/components/ui/tabs.tsx

@@ -13,7 +13,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md p-1 text-muted-foreground",
+      "inline-flex h-10 w-full items-center rounded-none text-muted-foreground focus-visible:border-none",
       className,
     )}
     {...props}
@@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border data-[state=inactive]:border data-[state=inactive]:border-muted data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:hover:bg-secondary/80",
+      "inline-flex h-full items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-b-2 data-[state=active]:border-current data-[state=active]:text-primary data-[state=inactive]:hover:bg-secondary/80",
       className,
     )}
     {...props}
@@ -42,10 +42,7 @@ const TabsContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.Content
     ref={ref}
-    className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className,
-    )}
+    className={cn("mt-2 ring-offset-background", className)}
     {...props}
   />
 ));

src/frontend/src/constants/constants.ts

@@ -891,7 +891,7 @@ export const EMPTY_INPUT_SEND_MESSAGE = "No input message provided.";
 export const EMPTY_OUTPUT_SEND_MESSAGE = "Message empty.";
 
 export const TABS_ORDER = [
-  "run curl",
+  "curl",
   "python api",
   "js api",
   "python code",

src/frontend/src/modals/IOModal/components/chatView/chatMessage/codeBlock/index.tsx

@@ -1,7 +1,7 @@
 import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react";
 import { useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { tomorrow } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { programmingLanguages } from "../../../../../../constants/constants";
 import { Props } from "../../../../../../types/components";
 
@@ -61,7 +61,7 @@ export function CodeBlock({ language, value }: Props): JSX.Element {
       <SyntaxHighlighter
         className="overflow-auto"
         language={language}
-        style={oneDark}
+        style={tomorrow}
         customStyle={{ margin: 0 }}
       >
         {value}

src/frontend/src/modals/apiModal/utils/tabs-array.tsx

@@ -7,7 +7,7 @@ export function createTabsArray(
   const tabs: tabsArrayType[] = [];
   if (codes.runCurlCode) {
     tabs.push({
-      name: "Run cURL",
+      name: "cURL",
       mode: "bash",
       image: "https://curl.se/logo/curl-symbol-transparent.png",
       language: "sh",

src/frontend/src/modals/baseModal/index.tsx

@@ -77,10 +77,10 @@ const Header: React.FC<{
 }> = ({ children, description }: modalHeaderType): JSX.Element => {
   return (
     <DialogHeader>
-      <DialogTitle className="line-clamp-1 flex items-center pb-0.5">
+      <DialogTitle className="line-clamp-1 flex items-center pb-0.5 text-base">
         {children}
       </DialogTitle>
-      <DialogDescription className="line-clamp-3">
+      <DialogDescription className="line-clamp-2 text-sm">
         {description}
       </DialogDescription>
     </DialogHeader>

src/frontend/src/style/applies.css

@@ -923,13 +923,13 @@
   }
 
   .api-modal-tabs {
-    @apply flex h-full flex-col overflow-hidden rounded-md border bg-muted text-center;
+    @apply flex h-full flex-col overflow-hidden text-center;
   }
   .api-modal-tablist-div {
     @apply flex items-center justify-between px-2 py-2;
   }
   .api-modal-tabs-content {
-    @apply -mt-1 h-full w-full px-4 pb-4;
+    @apply -mt-1 h-full w-full pb-4;
   }
   .api-modal-accordion-display {
     @apply mt-2 flex h-full w-full;

src/frontend/src/style/index.css

@@ -42,6 +42,8 @@
     --tooltip: 0 0% 0%; /* hsl(0, 0%, 0%) */
     --tooltip-foreground: 0 0% 100%; /* hsl(0, 0%, 100%) */
 
+    --canvas-dark: 240 6% 10%; /* hsl(240, 6%, 10%) */
+
     --node-selected: 243 75% 59%;
     --round-btn-shadow: #00000063;
     --ice: #31a3cc;

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))",