From 9682d76c1175310bf7f5985b25d74d5b4469bf3c Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 23 Sep 2023 16:20:57 +0200
Subject: [PATCH] Implement toaster and toast styles

---
 src/App.vue                          |  1 +
 src/components/layout/BodyLayout.vue |  4 ---
 src/styles/_styles_ovw.scss          | 43 +++++++++++++++++++++-------
 3 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c05c42fd..ad95b55d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="app" class="d-flex flex-column vh-100">
     <NavBar />
+    <BToaster></BToaster>
     <BodyLayout class="flex-fill overflow-auto" />
     <NavFooter />
   </div>
diff --git a/src/components/layout/BodyLayout.vue b/src/components/layout/BodyLayout.vue
index e518e958..c7cec59b 100644
--- a/src/components/layout/BodyLayout.vue
+++ b/src/components/layout/BodyLayout.vue
@@ -1,13 +1,9 @@
 <template>
   <main>
-    <BotAlerts />
     <router-view />
   </main>
 </template>
 
-<script setup lang="ts">
-import BotAlerts from '@/components/ftbot/BotAlerts.vue';
-</script>
 <style lang="scss" scoped>
 .container-main {
   padding: 0;
diff --git a/src/styles/_styles_ovw.scss b/src/styles/_styles_ovw.scss
index ac1a43d9..1d2c1c9b 100644
--- a/src/styles/_styles_ovw.scss
+++ b/src/styles/_styles_ovw.scss
@@ -41,6 +41,23 @@
     font-size: 0.8rem;
 }
 
+.toast {
+    // Colors to match the "alert" styling.
+    &.text-bg-danger {
+        background-color: rgb(238, 215, 218) !important;
+        color: rgb(88, 21, 28) !important;
+    }
+    &.text-bg-warning {
+        background-color: rgb(255, 243, 205) !important;
+        color: rgb(102, 77, 3) !important;
+    }
+    &.text-bg-success {
+
+        background-color: rgb(209, 231, 221) !important;
+        color: rgb(10, 54, 34) !important;
+    }
+}
+
 [data-bs-theme="dark"] {
     $bg-dark: rgb(18, 18, 18);
 
@@ -219,18 +236,24 @@
         background-position: right 0.75rem center;
     }
 
-    .b-toast .toast {
-        color: black;
-        // background: $bg-dark;
-        border-color: lighten($bg-dark, 20%);
-    }
+    .toast {
+    // Colors to match the "alert" styling.
+        &.text-bg-danger {
+            background-color: rgb(44, 11, 14) !important;
+            color: rgb(234, 134, 143) !important;
+        }
 
-    .toast-header {
-        color: $fg-color;
-        // background: darken($bg-dark, 10%);
-        border-color: lighten($bg-dark, 20%);
-    }
+        &.text-bg-warning {
+            background-color: rgb(41, 39, 1) !important;
+            color: rgb(255, 218, 106) !important;
+        }
 
+        &.text-bg-success {
+
+            background-color: rgb(5, 27, 17) !important;
+            color: rgb(118, 183, 152) !important;
+        }
+    }
     .vue-grid-item>.vue-resizable-handle {
         // Stupid workaround to have the Shevron actually show.
         background-color: darken($fg-color, 50%);