fix: improve timings and speed up

voiceflow · Nov 26, 2024 · 533cedb · 533cedb
1 parent b054b63
commit 533cedb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/packages/chat/src/components/NewChat/NewChat.css.ts b/packages/chat/src/components/NewChat/NewChat.css.ts
@@ -1,6 +1,7 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
+import { duration } from '@/styles/animations';
 import { COLORS } from '@/styles/colors';
 import { transition } from '@/styles/transitions';
 import { widgetContainer } from '@/views/ChatWidget/styles.css';
@@ -70,12 +71,12 @@ export const chatContentWrapper = style({
   opacity: 0,
   selectors: {
     [`.${widgetContainer.classNames.variants.withChat.true} &`]: {
-      animation: `${fadeIn} .3s ease-in forwards`,
-      animationDelay: '.6s;',
+      animation: `${fadeIn} ${duration.fast} ease-in forwards`,
+      animationDelay: '.6s',
       pointerEvents: 'auto',
     },
     [`.${widgetContainer.classNames.variants.withChat.false} &`]: {
-      animation: `${fadeOut} .3s ease-out`,
+      animation: `${fadeOut} ${duration.fast} ease-out`,
       pointerEvents: 'none',
     },
   },

diff --git a/packages/chat/src/components/WelcomeMessage/WelcomeMessage.css.ts b/packages/chat/src/components/WelcomeMessage/WelcomeMessage.css.ts
@@ -1,5 +1,6 @@
 import { keyframes, style } from '@vanilla-extract/css';
 
+import { duration } from '@/styles/animations';
 import { COLORS } from '@/styles/colors';
 import { FAMILY } from '@/styles/font';
 import { widgetContainer } from '@/views/ChatWidget/styles.css';
@@ -36,11 +37,11 @@ export const welcomeMessageContainer = style({
   opacity: 0,
   selectors: {
     [`.${widgetContainer.classNames.variants.withChat.true} &`]: {
-      animation: `${fadeIn} 300ms ease-in forwards`,
-      animationDelay: '300ms',
+      animation: `${fadeIn} ${duration.fast} ease-in forwards`,
+      animationDelay: duration.slow,
     },
     [`.${widgetContainer.classNames.variants.withChat.false} &`]: {
-      animation: `${fadeOut} 300ms ease-out forwards`,
+      animation: `${fadeOut} ${duration.fast} ease-out forwards`,
     },
   },
 });