Refactor: Make error alert display above modals

This commit is contained in:
igorrCarvalho 2024-03-11 17:32:57 -03:00
commit 6a763993c1
2 changed files with 39 additions and 30 deletions

View file

@ -102,10 +102,11 @@ export default function App() {
)} )}
</ErrorBoundary> </ErrorBoundary>
<div></div> <div></div>
<div className="app-div z-40"> <div className="app-div">
<div className="flex flex-col-reverse" style={{zIndex: 999}}>
{tempNotificationList.map((alert) => ( {tempNotificationList.map((alert) => (
<div key={alert.id}> <div key={alert.id}>
{alert.type === "error" ? ( {alert.type === "error" && (
<ErrorAlert <ErrorAlert
key={alert.id} key={alert.id}
title={alert.title} title={alert.title}
@ -113,7 +114,14 @@ export default function App() {
id={alert.id} id={alert.id}
removeAlert={removeAlert} removeAlert={removeAlert}
/> />
) : alert.type === "notice" ? ( )}
</div>
))}
</div>
<div className="flex flex-col-reverse z-40">
{tempNotificationList.map((alert) => (
<div key={alert.id}>
{alert.type === "notice" ? (
<NoticeAlert <NoticeAlert
key={alert.id} key={alert.id}
title={alert.title} title={alert.title}
@ -121,7 +129,7 @@ export default function App() {
id={alert.id} id={alert.id}
removeAlert={removeAlert} removeAlert={removeAlert}
/> />
) : ( ) : alert.type === "success" && (
<SuccessAlert <SuccessAlert
key={alert.id} key={alert.id}
title={alert.title} title={alert.title}
@ -133,5 +141,6 @@ export default function App() {
))} ))}
</div> </div>
</div> </div>
</div>
); );
} }

View file

@ -584,7 +584,7 @@
} }
.app-div { .app-div {
@apply fixed bottom-5 left-5 flex flex-col-reverse; @apply absolute bottom-5 left-5 flex flex-col-reverse;
} }
.chat-input-modal-txtarea { .chat-input-modal-txtarea {