refactor: Design updates to Playground from uplift sweep (#4428)

* design sweep changes

* [autofix.ci] apply automated fixes

* update truncate fade

* [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 15:58:41 -06:00 committed by GitHub
commit 63435689d4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 18 additions and 19 deletions

View file

@ -37,7 +37,7 @@ const defaultContainerVariants: Variants = {
visible: {
opacity: 1,
transition: {
staggerChildren: 0.025,
staggerChildren: 0.015,
},
},
exit: {

View file

@ -152,10 +152,10 @@ export default function SessionSelector({
<ShadTooltip styleClasses="z-50" content={session}>
<div
className={cn(
"h-4 w-full group-hover:truncate-secondary-hover",
"w-full whitespace-nowrap group-hover:truncate-secondary-hover",
isVisible
? "truncate-secondary-hover"
: "truncate-muted dark:truncate-background",
: "truncate-muted dark:truncate-canvas",
)}
>
{session === currentFlowId ? "Default Session" : session}

View file

@ -243,36 +243,35 @@ export default function ChatMessage({
className="flex w-full gap-4 rounded-md p-2"
>
<LogoIcon />
<div className="w-full rounded-md border border-error-red-border bg-error-red p-4 text-[14px] text-foreground">
<div className="w-full rounded-xl border border-error-red-border bg-error-red p-4 text-[14px] text-foreground">
<div className="mb-2 flex items-center gap-2">
<ForwardedIconComponent
className="h-[18px] w-[18px] text-destructive"
name="OctagonAlert"
/>
<span className="">An error stopped your flow.</span>
</div>
<div className="mb-4">
<h3 className="pb-3 font-semibold">Error details:</h3>
<p className="pb-1">
Component:{" "}
<span className="">
An error occured in the{" "}
<span
className={cn(
closeChat ? "cursor-pointer underline" : "",
closeChat ? "cursor-pointer hover:underline" : "",
)}
onClick={() => {
fitViewNode(chat.properties?.source?.id ?? "");
closeChat?.();
}}
>
{errorContent.component}
</span>
</p>
<strong>{errorContent.component}</strong>
</span>{" "}
Component, stopping your flow. See below for more details.
</span>
</div>
<div className="">
<h3 className="pb-3 font-semibold">Error details:</h3>
{errorContent.field && (
<p className="pb-1">Field: {errorContent.field}</p>
)}
{errorContent.reason && (
<span className="">
Reason:{" "}
<Markdown
linkTarget="_blank"
remarkPlugins={[remarkGfm]}
@ -297,7 +296,7 @@ export default function ChatMessage({
)}
</div>
{errorContent.solution && (
<div>
<div className="mt-4">
<h3 className="pb-3 font-semibold">Steps to fix:</h3>
<ol className="list-decimal pl-5">
<li>Check the component settings</li>

View file

@ -271,7 +271,7 @@ export default function IOModal({
: "w-0",
)}
>
<div className="flex h-full flex-col overflow-y-auto border-r border-border bg-muted p-6 text-center custom-scroll dark:bg-background">
<div className="flex h-full flex-col overflow-y-auto border-r border-border bg-muted p-4 text-center custom-scroll dark:bg-canvas">
<div className="flex items-center gap-2 pb-8">
<ShadTooltip
styleClasses="z-50"
@ -355,7 +355,7 @@ export default function IOModal({
)}
</div>
</div>
<div className="flex h-full min-w-96 flex-grow bg-background dark:bg-accent">
<div className="flex h-full min-w-96 flex-grow bg-background">
{selectedViewField && (
<div
className={cn(
@ -411,7 +411,7 @@ export default function IOModal({
)}
<div
className={cn(
"flex h-full w-full flex-col justify-between p-6",
"flex h-full w-full flex-col justify-between p-4",
selectedViewField ? "hidden" : "",
)}
>