update notification modal style (#1544)

chillenberger · web-flow · commit 47cfb6e4869c · 2024-06-26T15:38:43.000-06:00
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
@@ -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
@@ -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>
