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 = ''; + } + } } }