From 2188dd91ed017b0c3dc662e80fd659e453836027 Mon Sep 17 00:00:00 2001
From: Marc-Antoine Hinse <marc.antoine@flare.io>
Date: Fri, 29 Nov 2024 11:09:54 -0500
Subject: [PATCH] Adding the ToastManager inside the main container to properly
 place the toasts and modified animation

---
 .../src/ConfigurationScreen.tsx               |  2 +-
 .../react-components/src/components/Toast.css | 15 +++++------
 .../src/components/ToastManager.css           |  4 +--
 .../src/components/ToastManager.tsx           | 27 ++++++++++---------
 4 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/react-components/src/ConfigurationScreen.tsx b/packages/react-components/src/ConfigurationScreen.tsx
index 3456c45..1717147 100644
--- a/packages/react-components/src/ConfigurationScreen.tsx
+++ b/packages/react-components/src/ConfigurationScreen.tsx
@@ -16,7 +16,7 @@ const ConfigurationScreen: FC<{ theme: string }> = ({ theme }) => {
     const [configurationStep, setConfigurationStep] = useState(ConfigurationStep.Initial);
     const [apiKey, setApiKey] = useState('');
 
-    toastManager.setTheme(theme);
+    toastManager.setup('container', theme);
 
     const handleBackButton = (): void => {
         switch (configurationStep) {
diff --git a/packages/react-components/src/components/Toast.css b/packages/react-components/src/components/Toast.css
index 07a4121..4c8079d 100644
--- a/packages/react-components/src/components/Toast.css
+++ b/packages/react-components/src/components/Toast.css
@@ -3,13 +3,14 @@
     margin-bottom: 10px;
     min-height: 2rem;
     padding: 1rem 2rem;
-    animation: slide-in 0.2s;
+    animation: toast-animation-in 0.2s;
     transition: all 0.3s ease;
     border-radius: 0.25rem;
     display: flex;
     flex-direction: row;
     gap: 1rem;
     align-items: center;
+    user-select: none;
 }
 
 .toast-success {
@@ -23,7 +24,7 @@
 }
 
 .toast-timed-out {
-    animation: slide-out 0.2s;
+    animation: toast-animation-out 0.2s;
 }
 
 .toast-text {
@@ -31,24 +32,22 @@
     overflow-wrap: anywhere;
 }
 
-@keyframes slide-in {
+@keyframes toast-animation-in {
     from {
-        transform: translateX(30rem);
+        transform: translateY(-2rem);
         opacity: 0;
     }
     to {
-        transform: translateX(0px);
+        transform: translateY(0px);
         opacity: 1;
     }
 }
 
-@keyframes slide-out {
+@keyframes toast-animation-out {
     from {
-        transform: translateX(0);
         opacity: 1;
     }
     to {
-        transform: translateX(100%);
         opacity: 0;
     }
 }
diff --git a/packages/react-components/src/components/ToastManager.css b/packages/react-components/src/components/ToastManager.css
index 5597d89..22c9507 100644
--- a/packages/react-components/src/components/ToastManager.css
+++ b/packages/react-components/src/components/ToastManager.css
@@ -1,6 +1,6 @@
 #toast-container-main {
-    position: fixed;
-    top: 8rem;
+    position: absolute;
+    top: 2rem;
     right: 6rem;
     z-index: 9999999;
     display: flex;
diff --git a/packages/react-components/src/components/ToastManager.tsx b/packages/react-components/src/components/ToastManager.tsx
index 9622039..b59dc3d 100644
--- a/packages/react-components/src/components/ToastManager.tsx
+++ b/packages/react-components/src/components/ToastManager.tsx
@@ -22,19 +22,20 @@ export class ToastManager {
 
     private toasts: ToastProps[] = [];
 
-    constructor() {
-        const body = document.getElementsByTagName('body')[0] as HTMLBodyElement;
-        const toastContainer = document.createElement('div') as HTMLDivElement;
-        toastContainer.id = TOAST_CONTAINER_ID;
-        body.insertAdjacentElement('beforeend', toastContainer);
-        this.containerRef = toastContainer;
-    }
-
-    public setTheme(theme: string): void {
-        if (theme === 'dark') {
-            this.containerRef.className = theme;
-        } else {
-            this.containerRef.className = '';
+    public setup(containerId: string, theme: string): void {
+        if (!this.containerRef) {
+            const container = document.getElementById(containerId) as HTMLDivElement;
+            if (container) {
+                const toastContainer = document.createElement('div') as HTMLDivElement;
+                toastContainer.id = TOAST_CONTAINER_ID;
+                container.insertAdjacentElement('beforeend', toastContainer);
+                this.containerRef = toastContainer;
+                if (theme === 'dark') {
+                    this.containerRef.className = theme;
+                } else {
+                    this.containerRef.className = '';
+                }
+            }
         }
     }