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 ( return (
<div className="flex w-full flex-col overflow-hidden rounded-md text-left dark"> <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-border bg-accent px-4 py-2"> <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> <span className="dar text-sm font-semibold text-white">{language}</span>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="bg-card text-muted-foreground" className="text-muted-foreground hover:bg-card"
data-testid="copy-code-button" data-testid="copy-code-button"
onClick={copyToClipboard} onClick={copyToClipboard}
> >

View file

@ -94,7 +94,7 @@ export default function CodeTabsComponent({
dangerouslySetInnerHTML={{ __html: tab.description }} dangerouslySetInnerHTML={{ __html: tab.description }}
></div> ></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 && {nodes.length > 0 &&
tabs.find((tab) => tab.name.toLowerCase() === "tweaks") && tabs.find((tab) => tab.name.toLowerCase() === "tweaks") &&
tabs[activeTab].hasTweaks && ( tabs[activeTab].hasTweaks && (
@ -152,7 +152,7 @@ export default function CodeTabsComponent({
<SyntaxHighlighter <SyntaxHighlighter
language={tab.language} language={tab.language}
style={oneDark} 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} {tab.code}
</SyntaxHighlighter> </SyntaxHighlighter>

View file

@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
<TabsPrimitive.Trigger <TabsPrimitive.Trigger
ref={ref} ref={ref}
className={cn( 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, className,
)} )}
{...props} {...props}