Polishing animation for preview reset and text Area for instruction

dust-tt · Mar 7, 2024 · e40e453 · e40e453
1 parent ba506d0
commit e40e453
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 9 deletions.
diff --git a/front/components/assistant_builder/AssistantBuilder.tsx b/front/components/assistant_builder/AssistantBuilder.tsx
@@ -519,7 +519,7 @@ export default function AssistantBuilder({
           rightPanel={
             <div
               className={classNames(
-                "flex h-full w-full rounded-xl bg-slate-100 transition-all ease-in-out",
+                "flex h-full w-full rounded-xl border border-structure-100 bg-structure-50 transition-all",
                 shouldAnimatePreviewDrawer &&
                   previewDrawerOpenedAt != null &&
                   // Only animate the reload if the drawer has been open for at least 1 second.

diff --git a/front/components/assistant_builder/InstructionScreen.tsx b/front/components/assistant_builder/InstructionScreen.tsx
@@ -287,11 +287,11 @@ function AssistantBuilderTextArea({
       name="name"
       id={name}
       className={classNames(
-        "block min-h-60 w-full min-w-0 rounded-md text-sm",
+        "block min-h-60 w-full min-w-0 rounded-xl text-sm transition-all duration-200",
         !error
-          ? "border-gray-300 focus:border-action-500 focus:ring-action-500"
+          ? "border-structure-100 focus:border-action-300 focus:ring-action-300"
           : "border-red-500 focus:border-red-500 focus:ring-red-500",
-        "bg-structure-50 stroke-structure-50",
+        "border-structure-200 bg-structure-50",
         "resize-y"
       )}
       placeholder={placeholder}

diff --git a/front/tailwind.config.js b/front/tailwind.config.js
@@ -108,17 +108,16 @@ module.exports = {
             opacity: 0,
           },
         },
-
         reload: {
           "0%, 100%": {
             transform: "scale(1)",
             opacity: "1",
             filter: "blur(0px)",
           },
           "50%": {
-            transform: "scale(0.2)",
-            opacity: "0.0",
-            filter: "blur(4px)",
+            transform: "scale(0.98)",
+            opacity: "0.8",
+            filter: "blur(8px)",
           },
         },
       },
@@ -127,7 +126,7 @@ module.exports = {
         breathing: "breathing 4s infinite ease-in-out",
         "cursor-blink": "cursor-blink 0.9s infinite;",
         shake: "shake 0.82s cubic-bezier(.36,.07,.19,.97) both",
-        reload: "reload 500ms ease-in-out",
+        reload: "reload 1000ms ease-out",
       },
       colors: {
         brand: {