From 533cedb7163de1909988afebc1cc7608899142a9 Mon Sep 17 00:00:00 2001
From: Mikaal Naik <matthewnaik@gmail.com>
Date: Tue, 26 Nov 2024 09:09:05 -0500
Subject: [PATCH] fix: improve timings and speed up

---
 packages/chat/src/components/NewChat/NewChat.css.ts        | 7 ++++---
 .../src/components/WelcomeMessage/WelcomeMessage.css.ts    | 7 ++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/chat/src/components/NewChat/NewChat.css.ts b/packages/chat/src/components/NewChat/NewChat.css.ts
index 9573196b2..7ee1b9023 100644
--- 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
index eb1c0a1c6..8b209271c 100644
--- 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`,
     },
   },
 });