Merge pull request #70 from Flared/mahinse/fix_toast_top

Adding the ToastManager inside the main container to properly place the toasts and modified animation
Flared · Nov 29, 2024 · 3da3021 · 3da3021
2 parents ba495ac + 2188dd9
commit 3da3021
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 24 deletions.
diff --git 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
@@ -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,32 +24,30 @@
 }
 
 .toast-timed-out {
-    animation: slide-out 0.2s;
+    animation: toast-animation-out 0.2s;
 }
 
 .toast-text {
     color: var(--text-color);
     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
@@ -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
@@ -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 = '';
+                }
+            }
         }
     }