From f82b1cd761ad603ac3b44e1625e2188049a0ad8a Mon Sep 17 00:00:00 2001
From: Dan <39170265+chillenberger@users.noreply.github.com>
Date: Wed, 26 Jun 2024 15:34:33 -0600
Subject: [PATCH] update notification modal style

---
 .../notifications/product/product_banner/product_banner.scss | 5 +++++
 .../notifications/product/product_banner/template.html       | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/pgml-dashboard/src/components/notifications/product/product_banner/product_banner.scss b/pgml-dashboard/src/components/notifications/product/product_banner/product_banner.scss
index 2ccacde9d..b3c21465c 100644
--- a/pgml-dashboard/src/components/notifications/product/product_banner/product_banner.scss
+++ b/pgml-dashboard/src/components/notifications/product/product_banner/product_banner.scss
@@ -39,6 +39,11 @@ div[data-controller="notifications-product-product-banner"] {
 
   .close {
       color: #{$gray-100};
+      font-size: 24px;
+
+      &:hover {
+          color: #{$gray-200};
+      }
   }
 
   .more-info {
diff --git a/pgml-dashboard/src/components/notifications/product/product_banner/template.html b/pgml-dashboard/src/components/notifications/product/product_banner/template.html
index f072cce89..152ce347a 100644
--- a/pgml-dashboard/src/components/notifications/product/product_banner/template.html
+++ b/pgml-dashboard/src/components/notifications/product/product_banner/template.html
@@ -76,8 +76,8 @@
       %>
 
       <%+ Modal::new(format!(r#"
-        <div class="d-flex flex-column gap-4 align-items-center">
-          <a class="btn btn-tertiary" data-action="click->notifications-product-product-banner#hideModal"><span class="material-symbols-outlined close position-absolute top-0 end-0 m-2">close</span></a>
+        <div class="d-flex flex-column gap-4 align-items-center text-center">
+          <a class="btn btn-tertiary position-absolute top-0 end-0" data-action="click->notifications-product-product-banner#hideModal"><span class="material-symbols-outlined close m-2">close</span></a>
           <span class="material-symbols-outlined {display} preset-icon" style="font-size: 44px">{icon}</span>
           {title}
           <p class="m-0" data-action="click->notifications-product-product-banner#followModalLink">{message}</p>