From 4898d633c2df2ba9631867ad6bb89f39a904ea58 Mon Sep 17 00:00:00 2001
From: Jeff Daley <jeffdaley@users.noreply.github.com>
Date: Tue, 26 Sep 2023 17:47:52 -0400
Subject: [PATCH] Update notification width and `out` animation (#346)

Update notification styles
---
 web/app/styles/components/notification.scss | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/web/app/styles/components/notification.scss b/web/app/styles/components/notification.scss
index e3a1c5d76..c45a5d8a2 100644
--- a/web/app/styles/components/notification.scss
+++ b/web/app/styles/components/notification.scss
@@ -13,12 +13,29 @@
   }
 }
 
+@keyframes notificationOut {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+}
+
 .notification {
   animation: notificationIn 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55)
     forwards;
 
   &.exiting {
-    animation: notificationIn 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55)
-      reverse forwards;
+    animation: notificationOut 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55)
+      forwards;
+  }
+}
+
+.flash-message {
+  .hds-toast {
+    @apply w-[400px];
   }
 }