styling improvements, including implementing alerts with phx hook to clear flash after bootstrap alert close event

assets/css/_bs-custom.scss

@@ -10,3 +10,5 @@ $font-family-sans-serif: Lato, system-ui, -apple-system, "Segoe UI", Roboto,
   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
 // $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
 //   "Liberation Mono", "Courier New", monospace !important;
+
+$enable-shadows: true;

assets/css/_fonts.scss

@@ -5,7 +5,7 @@
 // @import "../node_modules/@fontsource/lato/300-italic.css"; /* light | italic */
 @import "../node_modules/@fontsource/lato/400.css"; /* normal | normal */
 // @import "../node_modules/@fontsource/lato/400-italic.css"; /* normal | italic */
-// @import "../node_modules/@fontsource/lato/700.css";        /* bold | normal */
+@import "../node_modules/@fontsource/lato/700.css"; /* bold | normal */
 // @import "../node_modules/@fontsource/lato/700-italic.css"; /* bold | italic */
 // @import "../node_modules/@fontsource/lato/900.css";        /* black | normal */
 // @import "../node_modules/@fontsource/lato/900-italic.css"; /* black | italic */

assets/css/app.scss

@@ -16,10 +16,7 @@
 /* Navbar toggler icon override */
 @import "nav-burger";
 
-/* Alerts and form errors */
-.alert:empty {
-  display: none;
-}
+/* Form errors */
 .invalid-feedback {
   color: #a94442;
   display: block;

assets/js/_alert-remover.js

@@ -0,0 +1,10 @@
+// This will tell liveview to clear a flash key
+// after a bootstrap alert close event
+export const AlertRemover = {
+  mounted() {
+    this.el.addEventListener("closed.bs.alert", () => {
+      // Bootstrap finished removing the alert element
+      this.pushEvent("lv:clear-flash", this.el.dataset);
+    });
+  },
+};

assets/js/app.js

@@ -6,6 +6,8 @@ import "../css/app.scss";
 // Import icons for sprite-loader
 // navbar brand icon
 import "../node_modules/@mdi/svg/svg/skull-crossbones.svg";
+// x/close for alerts etc
+import "../node_modules/bootstrap-icons/icons/x.svg";
 
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured
@@ -24,15 +26,20 @@ import { LiveSocket } from "phoenix_live_view";
 // Bootstrap v5 js imports
 import "bootstrap/js/dist/collapse";
 import "bootstrap/js/dist/dropdown";
+import "bootstrap/js/dist/alert";
 // Boostrap helpers
-import "./_hamburger";
+import "./_hamburger-helper";
+import { AlertRemover } from "./_alert-remover";
 
 // LiveSocket setup
+let Hooks = {};
+Hooks.AlertRemover = AlertRemover;
 let csrfToken = document
   .querySelector("meta[name='csrf-token']")
   .getAttribute("content");
 let liveSocket = new LiveSocket("/live", Socket, {
   params: { _csrf_token: csrfToken },
+  hooks: Hooks,
 });
 
 // Show progress bar on live navigation and form submits