feat: creation of warningComponent

Author: NarrowsProjects

lib/public/app.css

@@ -266,6 +266,12 @@ th.text-center, td.text-center {
     border-color: #f5c6cb;
 }
 
+.alert-warning {
+    color: var(--color-warning);
+    background-color: #f8d7da;
+    border-color: #f5c6cb;
+}
+
 .alert-danger hr {
     border-top-color: #f1b0b7;
 }
@@ -712,6 +718,24 @@ label {
     opacity: 0.5;
 }
 
+.btn.btn-warning { background-color: var(--color-warning); color: var(--color-white); }
+
+.pulse-red {
+  animation: pulseRed 2s infinite;
+}
+
+@keyframes pulseRed {
+  0% {
+    box-shadow: 0 0 0px rgba(255, 69, 7, 0.6);
+  }
+  50% {
+    box-shadow: 0 0 10px rgba(255, 69, 7, 0.9);
+  }
+  100% {
+    box-shadow: 0 0 0px rgba(255, 69, 7, 0.6);
+  }
+}
+
 /**
  * Breakpoints :
  * small :           x <  600 (default styles)

lib/public/components/common/messages/warningComponent.js

@@ -0,0 +1,18 @@
+import { DropdownComponent, h } from '/js/src/index.js';
+
+/**
+ * Component to display whenever a page has warnings.
+ *
+ * @param {Array<(string, string)>} warnings an array of warnings and messages
+ * @returns {Component} the warning componen
+ */
+export const warningComponent = (warnings) => {
+    if (!warnings.length) {
+        return null;
+    }
+
+    return DropdownComponent(
+        h('.btn.btn-warning.white.pulse-red', 'Warnings'),
+        h('.flex-column.p2.g2.black', warnings.map(([key, message]) => `${key}: ${message}`)),
+    );
+};