alert component

common/constants.js

@@ -25,7 +25,7 @@ export const system = {
   link: "#2935ff",
   green: "#28a745",
   yellow: " #FFC940",
-  red: "#ff0000",
+  red: "#E05435",
   slate: "#27292e",
   moonstone: "#807d78",
   wall: "#cfced3",

components/core/Alert.js

@@ -0,0 +1,74 @@
+import * as React from "react";
+import * as Strings from "~/common/strings";
+import * as Constants from "~/common/constants";
+
+import { error } from "~/common/messages";
+
+import { css } from "@emotion/react";
+
+const STYLES_ALERT = css`
+  box-sizing: border-box;
+  z-index: ${Constants.zindex.modal};
+  position: fixed;
+  top: 56px;
+  width: calc(100% - ${Constants.sizes.navigation}px);
+  min-height: 48px;
+  background-color: ${Constants.system.red};
+  color: ${Constants.system.white};
+  padding: 12px 48px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    width: calc(100% - 60px);
+  }
+`;
+
+export class Alert extends React.Component {
+  state = {
+    alert: null,
+  };
+
+  componentDidMount = () => {
+    window.addEventListener("create-alert", this._handleCreate);
+    window.addEventListener("delete-alert", this._handleDelete);
+    window.addEventListener("click", this._handleDelete);
+  };
+
+  componentWillUnmount = () => {
+    window.removeEventListener("create-alert", this._handleCreate);
+    window.removeEventListener("delete-alert", this._handleDelete);
+    window.removeEventListener("click", this._handleDelete);
+  };
+
+  _handleCreate = (e) => {
+    this.setState({ alert: e.detail.alert });
+  };
+
+  _handleDelete = (e) => {
+    if (this.state.alert) {
+      this.setState({ alert: null });
+    }
+  };
+
+  render() {
+    if (!this.state.alert) {
+      return null;
+    }
+    return (
+      <div
+        css={STYLES_ALERT}
+        style={
+          this.state.alert.status === "INFO"
+            ? { backgroundColor: Constants.system.brand }
+            : null
+        }
+      >
+        {this.state.alert.message
+          ? this.state.alert.message
+          : error[this.state.alert.decorator]}
+      </div>
+    );
+  }
+}

components/core/ApplicationLayout.js

@@ -5,6 +5,7 @@ import * as SVG from "~/common/svg";
 import { css } from "@emotion/react";
 import { GlobalTooltip } from "~/components/system/components/fragments/GlobalTooltip";
 import { Boundary } from "~/components/system/components/fragments/Boundary";
+import { Alert } from "~/components/core/Alert";
 
 const STYLES_SCROLL = css`
   overflow-y: scroll;
@@ -197,6 +198,7 @@ export default class ApplicationLayout extends React.Component {
 
         <div css={STYLES_CONTENT}>
           <GlobalTooltip elementRef={this._body} allowedTypes={["body"]} />
+          <Alert />
           <div css={STYLES_HEADER}>{this.props.header}</div>
           <div
             css={STYLES_BODY_WEB}