From f41bc6ef5f78cb399d6722f726ac8971c566d15e Mon Sep 17 00:00:00 2001
From: Mike Fortman <michael.fortman@datastax.com>
Date: Wed, 6 Nov 2024 16:49:30 -0600
Subject: [PATCH] refactor: Design updates to API Dialog and Code Block for
 uplift sweep (#4431)

* api dialog sweep

* update code blocks

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../components/codeTabsComponent/ChatCodeTabComponent.tsx   | 6 +++---
 src/frontend/src/components/codeTabsComponent/index.tsx     | 4 ++--
 src/frontend/src/components/ui/tabs.tsx                     | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/components/codeTabsComponent/ChatCodeTabComponent.tsx b/src/frontend/src/components/codeTabsComponent/ChatCodeTabComponent.tsx
index 7c20a066f..129d42d01 100644
--- a/src/frontend/src/components/codeTabsComponent/ChatCodeTabComponent.tsx
+++ b/src/frontend/src/components/codeTabsComponent/ChatCodeTabComponent.tsx
@@ -31,13 +31,13 @@ export default function SimplifiedCodeTabComponent({
   };
 
   return (
-    <div className="flex w-full flex-col overflow-hidden rounded-md text-left dark">
-      <div className="flex w-full items-center justify-between rounded-t-md border border-border bg-accent px-4 py-2">
+    <div className="mt-2 flex w-full flex-col overflow-hidden rounded-md text-left dark">
+      <div className="flex w-full items-center justify-between rounded-t-md border border-b-0 border-border bg-muted px-4 py-2">
         <span className="dar text-sm font-semibold text-white">{language}</span>
         <Button
           variant="ghost"
           size="icon"
-          className="bg-card text-muted-foreground"
+          className="text-muted-foreground hover:bg-card"
           data-testid="copy-code-button"
           onClick={copyToClipboard}
         >
diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 83a3fb8bd..65915e06a 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -94,7 +94,7 @@ export default function CodeTabsComponent({
                   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">
+              <div className="flex w-full items-center justify-end gap-4 rounded-t-md border border-border bg-muted px-4 py-2">
                 {nodes.length > 0 &&
                   tabs.find((tab) => tab.name.toLowerCase() === "tweaks") &&
                   tabs[activeTab].hasTweaks && (
@@ -152,7 +152,7 @@ export default function CodeTabsComponent({
               <SyntaxHighlighter
                 language={tab.language}
                 style={oneDark}
-                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"
+                className="!my-0 h-full overflow-auto rounded-sm !rounded-t-none border border-t-0 border-border bg-code-block text-left custom-scroll"
               >
                 {tab.code}
               </SyntaxHighlighter>
diff --git a/src/frontend/src/components/ui/tabs.tsx b/src/frontend/src/components/ui/tabs.tsx
index ea1a3affb..b7c9ed0db 100644
--- a/src/frontend/src/components/ui/tabs.tsx
+++ b/src/frontend/src/components/ui/tabs.tsx
@@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "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",
+      "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:text-primary",
       className,
     )}
     {...props}