From c2516c7c8e3b37da0a3c0ea90a77ce6c92dc1151 Mon Sep 17 00:00:00 2001
From: Rivka Ungar <rivkaun@monday.com>
Date: Tue, 29 Oct 2024 16:13:17 +0200
Subject: [PATCH] update description

---
 .../AttentionBox/__stories__/AttentionBox.mdx |  2 +-
 .../__stories__/AttentionBox.stories.tsx      | 33 +++++++++++--------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/packages/core/src/components/AttentionBox/__stories__/AttentionBox.mdx b/packages/core/src/components/AttentionBox/__stories__/AttentionBox.mdx
index 608e757a6a..0195e6c393 100644
--- a/packages/core/src/components/AttentionBox/__stories__/AttentionBox.mdx
+++ b/packages/core/src/components/AttentionBox/__stories__/AttentionBox.mdx
@@ -139,7 +139,7 @@ Provides contextual and related information.
 
 ### Animation
 
-The Attention box component consist of enter animation prop to increase user attention.
+The Attention box component consist of enter animation prop to increase user attention. Is highly recommended to use a 200ms delay before the attention box entry motion once the page is fully loaded.
 
 <Canvas of={AttentionBoxStories.AttentionBoxAnimation} />
 
diff --git a/packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.tsx b/packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.tsx
index 3285d92575..edcb1fbc1c 100644
--- a/packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.tsx
+++ b/packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.tsx
@@ -191,19 +191,26 @@ export const AttentionBoxAnimation = {
     }, []);
     return (
       <>
-        <Button onClick={onClick} kind={Button.kinds.SECONDARY}>
-          Entry animation
-        </Button>
-        {isOpen && (
-          <AttentionBox
-            compact
-            withIconWithoutHeader
-            entryAnimation
-            icon={Info}
-            text="First, move the content you want to copy into folder. Only main boards and dashboards can be copied."
-            onClose={() => setOpen(false)}
-          />
-        )}
+        <Flex
+          gap={Flex.gaps.MEDIUM}
+          style={{
+            height: "44px"
+          }}
+        >
+          <Button onClick={onClick} kind={Button.kinds.SECONDARY}>
+            Entry animation
+          </Button>
+          {isOpen && (
+            <AttentionBox
+              compact
+              withIconWithoutHeader
+              entryAnimation
+              icon={Info}
+              text="First, move the content you want to copy into folder. Only main boards and dashboards can be copied."
+              onClose={() => setOpen(false)}
+            />
+          )}
+        </Flex>
       </>
     );
   },