SX Design: improve FlashMessage styles

adeira-source-id: 862f27466ffbb3482f1fbd1ca1549b2055eff2da
adeira · May 8, 2022 · f61ce99 · f61ce99
1 parent 10ca831
commit f61ce99
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 17 deletions.
diff --git a/src/FlashMessage/FlashMessage.js b/src/FlashMessage/FlashMessage.js
@@ -39,15 +39,17 @@ export default function FlashMessage(props: Props): Node {
       })}
     >
       {props.message}
-      <div
-        className={styles({
-          progress: true,
-          progressDefault: hasDefaultTint,
-          progressError: hasErrorTint,
-          progressSuccess: hasSuccessTint,
-          progressWarning: hasWarningTint,
-        })}
-      />
+      <div className={styles('progressWrapper')}>
+        <div
+          className={styles({
+            progress: true,
+            progressDefault: hasDefaultTint,
+            progressError: hasErrorTint,
+            progressSuccess: hasSuccessTint,
+            progressWarning: hasWarningTint,
+          })}
+        />
+      </div>
     </div>
   );
 }
@@ -59,7 +61,7 @@ const bgTest = sx.keyframes({
 
 const styles = sx.create({
   wrapper: {
-    position: 'absolute',
+    position: 'fixed',
     bottom: 0,
     right: 0,
     boxShadow: 'var(--sx-shadow-large)',
@@ -72,13 +74,17 @@ const styles = sx.create({
     maxWidth: 300,
     flexDirection: 'column',
     display: 'flex',
+  },
+  progressWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
     alignItems: 'center',
   },
   progress: {
     height: 3,
     marginBlockStart: 15,
     animationName: bgTest,
-    animationDuration: '2500ms', // aligned with the message timeout (!)
+    animationDuration: '3000ms', // aligned with the message timeout (!)
     animationFillMode: 'forwards',
     animationTimingFunction: 'linear',
   },

diff --git a/src/SxDesignProvider.js b/src/SxDesignProvider.js
@@ -78,12 +78,15 @@ export default function SxDesignProvider(props: Props): Node {
       theme: theme === 'system' ? actualSystemColor : theme,
       activeFlashMessages,
       displayFlashMessage: ({ message, tint }) => {
-        const timeoutID = setTimeout(() => {
-          setActiveFlashMessages((previousFlashMessages) => {
-            previousFlashMessages.delete(timeoutID);
-            return new Map(previousFlashMessages);
-          });
-        }, 2500);
+        const timeoutID = setTimeout(
+          () => {
+            setActiveFlashMessages((previousFlashMessages) => {
+              previousFlashMessages.delete(timeoutID);
+              return new Map(previousFlashMessages);
+            });
+          },
+          3000, // aligned with the animation duration (!)
+        );
 
         setActiveFlashMessages(
           (previousFlashMessages) =>