From a00cf83e03562466f0b6f30cfe68d728918da073 Mon Sep 17 00:00:00 2001
From: Patrick <patrick.wieth@googlemail.com>
Date: Fri, 4 Oct 2024 10:23:57 +0200
Subject: [PATCH] fix notification color

---
 src/App.vue                             | 14 ++++++++++++++
 src/def-composables/useNotifications.ts |  6 +++---
 src/views/CardCreatorPage.vue           |  3 ++-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index df2bcf5c..77ce25c1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -61,6 +61,20 @@ export default {
 </script>
 
 <style lang="scss">
+.vue-notification {
+    // types (green, amber, red)
+  &.success {
+    color: #000000;
+    background: #4cbb17;
+    border-left-color: #006400;
+  }
+
+  &.error {
+    background: #d82027;
+    border-left-color: #800000;
+  }
+}
+
 @font-face {
   font-family: 'Museo900-Regular';
   font-weight: normal;
diff --git a/src/def-composables/useNotifications.ts b/src/def-composables/useNotifications.ts
index 622650ab..0fb00c86 100644
--- a/src/def-composables/useNotifications.ts
+++ b/src/def-composables/useNotifications.ts
@@ -24,7 +24,7 @@ const useNotificationsInstance = () => {
       group: "bottom-right-notification",
       title: title,
       text: text,
-      type: "notification--alert",
+      type: "error",
       duration: 5000
     });
   });
@@ -34,7 +34,7 @@ const useNotificationsInstance = () => {
       group: "bottom-right-notification",
       title: title,
       text: text,
-      type: "notification--success",
+      type: "success",
       duration: 5000
     });
   });
@@ -44,7 +44,7 @@ const useNotificationsInstance = () => {
       group: "bottom-right-notification",
       title: title,
       text: text,
-      type: "notification--info",
+      type: "info",
       duration: 5000
     });
   });
diff --git a/src/views/CardCreatorPage.vue b/src/views/CardCreatorPage.vue
index 85f8dc5a..254fc6cb 100644
--- a/src/views/CardCreatorPage.vue
+++ b/src/views/CardCreatorPage.vue
@@ -739,7 +739,8 @@
               :model="model"
             />
           </div>
-          <div class="text-left flex flex-col">
+
+          <div class="text-left flex flex-col justify-between">
             <div class="py-5 flex flex-col items-start">
               <div class="pl-12 py-3 text-s font-bold">
                 SUMMARY