From 63435689d490821b2fab028bf2018c2e3f8be67c Mon Sep 17 00:00:00 2001
From: Mike Fortman <michael.fortman@datastax.com>
Date: Wed, 6 Nov 2024 15:58:41 -0600
Subject: [PATCH] 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>
---
 .../src/components/ui/textAnimation.tsx       |  2 +-
 .../sessionSelector/newSessionSelector.tsx    |  4 +--
 .../chatView/chatMessage/newChatMessage.tsx   | 25 +++++++++----------
 src/frontend/src/modals/IOModal/newModal.tsx  |  6 ++---
 4 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/frontend/src/components/ui/textAnimation.tsx b/src/frontend/src/components/ui/textAnimation.tsx
index 6b79ff054..155d5d26b 100644
--- a/src/frontend/src/components/ui/textAnimation.tsx
+++ b/src/frontend/src/components/ui/textAnimation.tsx
@@ -37,7 +37,7 @@ const defaultContainerVariants: Variants = {
   visible: {
     opacity: 1,
     transition: {
-      staggerChildren: 0.025,
+      staggerChildren: 0.015,
     },
   },
   exit: {
diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/components/sessionSelector/newSessionSelector.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/components/sessionSelector/newSessionSelector.tsx
index 12e1b763d..b6051de38 100644
--- a/src/frontend/src/modals/IOModal/components/IOFieldView/components/sessionSelector/newSessionSelector.tsx
+++ b/src/frontend/src/modals/IOModal/components/IOFieldView/components/sessionSelector/newSessionSelector.tsx
@@ -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}
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/newChatMessage.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/newChatMessage.tsx
index c78a0fb52..fd862e6d4 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/newChatMessage.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/newChatMessage.tsx
@@ -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>
diff --git a/src/frontend/src/modals/IOModal/newModal.tsx b/src/frontend/src/modals/IOModal/newModal.tsx
index 22cdb39cc..b31826961 100644
--- a/src/frontend/src/modals/IOModal/newModal.tsx
+++ b/src/frontend/src/modals/IOModal/newModal.tsx
@@ -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" : "",
               )}
             >