From 145878ffc2713f705010f91f6edb58b0e5407c6d Mon Sep 17 00:00:00 2001
From: balajidharma <balajidharma@hotmail.com>
Date: Sat, 22 Jul 2023 12:43:01 -0400
Subject: [PATCH] Issue #28 - Fixed

---
 resources/js/Components/NotificationBar.vue   | 19 ++++++++-----------
 resources/js/Pages/Admin/Menu/Index.vue       |  1 +
 resources/js/Pages/Admin/Menu/Item/Index.vue  |  1 +
 resources/js/Pages/Admin/Permission/Index.vue |  1 +
 resources/js/Pages/Admin/Role/Index.vue       |  1 +
 resources/js/Pages/Admin/User/AccountInfo.vue |  1 +
 resources/js/Pages/Admin/User/Index.vue       |  1 +
 7 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/resources/js/Components/NotificationBar.vue b/resources/js/Components/NotificationBar.vue
index f2609d5..bd445bc 100644
--- a/resources/js/Components/NotificationBar.vue
+++ b/resources/js/Components/NotificationBar.vue
@@ -15,12 +15,11 @@ const props = defineProps({
   color: {
     type: String,
     required: true
-  }
+  },
 })
 
-const componentClass = computed(() => props.outline
-  ? colorsOutline[props.color]
-  : colorsBgLight[props.color]
+const componentClass = computed(() =>
+  props.outline ? colorsOutline[props.color] : colorsBgLight[props.color]
 )
 
 const isDismissed = ref(false)
@@ -38,7 +37,7 @@ const hasRightSlot = computed(() => slots.right)
   <div
     v-if="!isDismissed"
     :class="componentClass"
-    class="px-3 py-6 md:py-3 mb-6 last:mb-0 border rounded transition-colors duration-150"
+    class="px-3 py-6 md:py-3 mb-6 last:mb-0 border rounded-lg transition-colors duration-150"
   >
     <BaseLevel>
       <div class="flex flex-col md:flex-row items-center">
@@ -50,17 +49,15 @@ const hasRightSlot = computed(() => slots.right)
           size="24"
           class="md:mr-2"
         />
-        <span class="text-center md:text-left"><slot /></span>
+        <span class="text-center md:text-left md:py-2"><slot /></span>
       </div>
-      <slot
-        v-if="hasRightSlot"
-        name="right"
-      />
+      <slot v-if="hasRightSlot" name="right" />
       <BaseButton
         v-else
         :icon="mdiClose"
-        :outline="outline"
         small
+        rounded-full
+        color="white"
         @click="dismiss"
       />
     </BaseLevel>
diff --git a/resources/js/Pages/Admin/Menu/Index.vue b/resources/js/Pages/Admin/Menu/Index.vue
index e71d417..58920b6 100644
--- a/resources/js/Pages/Admin/Menu/Index.vue
+++ b/resources/js/Pages/Admin/Menu/Index.vue
@@ -66,6 +66,7 @@ function destroy(id) {
         />
       </SectionTitleLineWithButton>
       <NotificationBar
+        :key="Date.now()"
         v-if="$page.props.flash.message"
         color="success"
         :icon="mdiAlertBoxOutline"
diff --git a/resources/js/Pages/Admin/Menu/Item/Index.vue b/resources/js/Pages/Admin/Menu/Item/Index.vue
index ef54911..3692179 100644
--- a/resources/js/Pages/Admin/Menu/Item/Index.vue
+++ b/resources/js/Pages/Admin/Menu/Item/Index.vue
@@ -72,6 +72,7 @@ function destroy(id) {
         </BaseButtons>
       </SectionTitleLineWithButton>
       <NotificationBar
+        :key="Date.now()"
         v-if="$page.props.flash.message"
         color="success"
         :icon="mdiAlertBoxOutline"
diff --git a/resources/js/Pages/Admin/Permission/Index.vue b/resources/js/Pages/Admin/Permission/Index.vue
index 57befc0..14ce78e 100644
--- a/resources/js/Pages/Admin/Permission/Index.vue
+++ b/resources/js/Pages/Admin/Permission/Index.vue
@@ -65,6 +65,7 @@ function destroy(id) {
         />
       </SectionTitleLineWithButton>
       <NotificationBar
+        :key="Date.now()"
         v-if="$page.props.flash.message"
         color="success"
         :icon="mdiAlertBoxOutline"
diff --git a/resources/js/Pages/Admin/Role/Index.vue b/resources/js/Pages/Admin/Role/Index.vue
index dc36390..206fc7c 100644
--- a/resources/js/Pages/Admin/Role/Index.vue
+++ b/resources/js/Pages/Admin/Role/Index.vue
@@ -65,6 +65,7 @@ function destroy(id) {
         />
       </SectionTitleLineWithButton>
       <NotificationBar
+        :key="Date.now()"
         v-if="$page.props.flash.message"
         color="success"
         :icon="mdiAlertBoxOutline"
diff --git a/resources/js/Pages/Admin/User/AccountInfo.vue b/resources/js/Pages/Admin/User/AccountInfo.vue
index 0538f9d..19c539b 100644
--- a/resources/js/Pages/Admin/User/AccountInfo.vue
+++ b/resources/js/Pages/Admin/User/AccountInfo.vue
@@ -53,6 +53,7 @@ const passwordForm = useForm({
         />
       </SectionTitleLineWithButton>
       <NotificationBar
+        :key="Date.now()"
         v-if="$page.props.flash.message"
         color="success"
         :icon="mdiAlertBoxOutline"
diff --git a/resources/js/Pages/Admin/User/Index.vue b/resources/js/Pages/Admin/User/Index.vue
index 7122b8a..d319064 100644
--- a/resources/js/Pages/Admin/User/Index.vue
+++ b/resources/js/Pages/Admin/User/Index.vue
@@ -65,6 +65,7 @@ function destroy(id) {
         />
       </SectionTitleLineWithButton>
       <NotificationBar
+        :key="Date.now()"
         v-if="$page.props.flash.message"
         color="success"
         :icon="mdiAlertBoxOutline"