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>
This commit is contained in:
Mike Fortman 2024-11-06 16:49:30 -06:00 committed by GitHub
commit f41bc6ef5f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 6 additions and 6 deletions

View file

@ -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}
>

View file

@ -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>

View file

@ -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}