From 0aa4b27723b2e9d9567499de798171531a86069f Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 30 Jul 2025 11:04:21 -0500
Subject: [PATCH] Move animation into css file

---
 src/components/Toast/index.web.tsx | 11 -----------
 src/components/Toast/style.ts      | 20 --------------------
 src/style.css                      | 20 ++++++++++++++++++++
 3 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/src/components/Toast/index.web.tsx b/src/components/Toast/index.web.tsx
index b8e85dcf68..88ce3cbe50 100644
--- a/src/components/Toast/index.web.tsx
+++ b/src/components/Toast/index.web.tsx
@@ -10,7 +10,6 @@ import {
   getToastTypeStyles,
   getToastWebAnimationStyles,
   TOAST_TYPE_TO_ICON,
-  TOAST_WEB_KEYFRAMES,
 } from '#/components/Toast/style'
 import {type ToastType} from '#/components/Toast/types'
 
@@ -49,16 +48,6 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
     }
   }, [activeToast])
 
-  useEffect(() => {
-    const styleId = 'toast-animations'
-    if (!document.getElementById(styleId)) {
-      const style = document.createElement('style')
-      style.id = styleId
-      style.textContent = TOAST_WEB_KEYFRAMES
-      document.head.appendChild(style)
-    }
-  }, [])
-
   const t = useTheme()
 
   const toastTypeStyles = getToastTypeStyles(t)
diff --git a/src/components/Toast/style.ts b/src/components/Toast/style.ts
index b17e4dda91..7b4e94c7ec 100644
--- a/src/components/Toast/style.ts
+++ b/src/components/Toast/style.ts
@@ -143,23 +143,3 @@ export const getToastWebAnimationStyles = () => ({
     animation: 'toastFadeOut 0.2s ease-in forwards',
   },
 })
-
-export const TOAST_WEB_KEYFRAMES = `
-  @keyframes toastFadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes toastFadeOut {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0;
-    }
-  }
-`
diff --git a/src/style.css b/src/style.css
index 35ffe0d3a2..4c5677fbf3 100644
--- a/src/style.css
+++ b/src/style.css
@@ -369,3 +369,23 @@ input[type='range'][orient='vertical']::-moz-range-thumb {
     transform: translateY(0);
   }
 }
+
+/*
+ * #/components/Toast/index.web.tsx
+ */
+@keyframes toastFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes toastFadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}