From 8f4a5f5b544ed39602068b8c93306e31a742628a Mon Sep 17 00:00:00 2001
From: rare-magma <rare-magma@posteo.eu>
Date: Tue, 19 Sep 2023 21:33:13 +0200
Subject: [PATCH] fix: notifications placement & styling

Signed-off-by: rare-magma <rare-magma@posteo.eu>
---
 src/components/Budget/BudgetPage.tsx         |  2 +-
 src/components/Notification/Notification.tsx | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/Budget/BudgetPage.tsx b/src/components/Budget/BudgetPage.tsx
index fd5c11d..747a51d 100644
--- a/src/components/Budget/BudgetPage.tsx
+++ b/src/components/Budget/BudgetPage.tsx
@@ -531,7 +531,7 @@ function BudgetPage() {
     <Container fluid style={{ zIndex: 1 }}>
       <ToastContainer
         className="p-2"
-        position={"bottom-end"}
+        position={"bottom-center"}
         style={{ zIndex: 100 }}
       >
         {notifications.map((notification) => {
diff --git a/src/components/Notification/Notification.tsx b/src/components/Notification/Notification.tsx
index 4e4c89e..54185e3 100644
--- a/src/components/Notification/Notification.tsx
+++ b/src/components/Notification/Notification.tsx
@@ -1,4 +1,4 @@
-import { Button, Toast } from "react-bootstrap";
+import { Button, Col, Row, Toast } from "react-bootstrap";
 import { BsX } from "react-icons/bs";
 
 interface NotificationProps {
@@ -15,10 +15,13 @@ function Notification({ notification, onShow }: NotificationProps) {
       autohide
       delay={3000}
     >
-      <Toast.Header key={`${notification.id}-toast-header`} closeButton={false}>
+      <Toast.Body
+        key={`${notification.id}-toast-body`}
+        className="p-2 d-flex justify-content-between align-items-center"
+      >
         <div
-          key={`${notification.id}-toast-body`}
-          className="me-auto text-truncate"
+          key={`${notification.id}-toast-body-div`}
+          className="me-2 text-truncate"
           style={{
             textOverflow: "ellipsis",
             overflow: "hidden",
@@ -28,6 +31,7 @@ function Notification({ notification, onShow }: NotificationProps) {
           {notification.body}
         </div>
         <Button
+          className="align-self-end"
           key={`${notification.id}-toast-button`}
           size="sm"
           aria-label="dismiss notification"
@@ -36,7 +40,7 @@ function Notification({ notification, onShow }: NotificationProps) {
         >
           {<BsX />}
         </Button>
-      </Toast.Header>
+      </Toast.Body>
     </Toast>
   );
 }