Global alert

src/bootstrap/Alert.css

@@ -0,0 +1,17 @@
+.floating-alert {
+    /* Display alert above other components */
+    z-index: 2000;
+}
+
+@media(max-width: 768px) {
+    .floating-alert {
+        margin: 0.5rem;
+    }
+}
+
+@media(min-width: 769px) {
+    .floating-alert {
+        width: 75%;
+        margin: 0.5rem auto;
+    }
+}

src/bootstrap/Alert.js

@@ -8,11 +8,22 @@
 import React from "react";
 import PropTypes from "prop-types";
 
+import "./Alert.css";
+
+export const ALERT_TYPES = Object.freeze({
+    PRIMARY: "primary",
+    SECONDARY: "secondary",
+    SUCCESS: "success",
+    DANGER: "danger",
+    WARNING: "warning",
+    INFO: "info",
+    LIGHT: "light",
+    DARK: "dark",
+});
+
 Alert.propTypes = {
     /** Type of the alert it adds as `alert-${type}` class. */
-    type: PropTypes.string.isRequired,
-    /** Alert message. */
-    message: PropTypes.string,
+    type: PropTypes.oneOf(Object.values(ALERT_TYPES)),
     /** Alert content. */
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),
@@ -20,15 +31,21 @@ Alert.propTypes = {
     ]),
     /** onDismiss handler. */
     onDismiss: PropTypes.func,
+    /** Floating alerts stay on top of the page */
+    floating: PropTypes.bool,
+};
+
+Alert.defaultProps = {
+    type: ALERT_TYPES.DANGER,
+    floating: false,
 };
 
 export function Alert({
-    type, message, onDismiss, children,
+    type, onDismiss, floating, children,
 }) {
     return (
-        <div className={`alert alert-dismissible alert-${type}`}>
+        <div className={`alert alert-dismissible alert-${type} ${floating ? "fixed-top floating-alert" : ""}`.trim()}>
             {onDismiss ? <button type="button" className="close" onClick={onDismiss}>&times;</button> : false}
-            {message}
             {children}
         </div>
     );

src/bootstrap/Modal.js

@@ -41,7 +41,7 @@ export function Modal({ shown, setShown, children }) {
     return (
         <Portal containerId="modal-container">
             <div className={`modal fade ${shown ? "show" : ""}`} role="dialog">
-                <div ref={dialogRef} className="modal-dialog" role="document">
+                <div ref={dialogRef} className="modal-dialog modal-dialog-centered" role="document">
                     <div className="modal-content">
                         {children}
                     </div>