From 9e9e39b8b0c2d23b93c508c8d8e9a2f6522ec0e3 Mon Sep 17 00:00:00 2001
From: Berkeley Martinez <berkeleytrue@users.noreply.github.com>
Date: Thu, 4 Jan 2018 09:18:20 -0800
Subject: [PATCH] feat(Flash): Add initial ui

---
 common/app/App.jsx              |  6 ++----
 common/app/Flash/Flash.jsx      | 21 +++++++++++++++++++++
 common/app/Flash/flash.less     | 10 ++++++++++
 common/app/Flash/index.js       |  1 +
 common/app/Flash/ns.json        |  1 +
 common/app/Flash/redux/index.js |  1 +
 common/app/index.less           |  1 +
 7 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 common/app/Flash/Flash.jsx
 create mode 100644 common/app/Flash/flash.less
 create mode 100644 common/app/Flash/index.js
 create mode 100644 common/app/Flash/ns.json
 create mode 100644 common/app/Flash/redux/index.js

diff --git a/common/app/App.jsx b/common/app/App.jsx
index fa54b2fd28..11dde49f91 100644
--- a/common/app/App.jsx
+++ b/common/app/App.jsx
@@ -10,6 +10,7 @@ import {
   isSignedInSelector
 } from './redux';
 
+import Flash from './Flash';
 import Nav from './Nav';
 import Toasts from './Toasts';
 import NotFound from './NotFound';
@@ -60,12 +61,9 @@ export class FreeCodeCamp extends React.Component {
       route
     } = this.props;
     const Child = routes[route] || NotFound;
-    // we render nav after the content
-    // to allow the panes to update
-    // redux store, which will update the bin
-    // buttons in the nav
     return (
       <div className={ `${ns}-container` }>
+        <Flash />
         <Nav />
         <Child />
         <Toasts />
diff --git a/common/app/Flash/Flash.jsx b/common/app/Flash/Flash.jsx
new file mode 100644
index 0000000000..5e9834296b
--- /dev/null
+++ b/common/app/Flash/Flash.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { CloseButton } from 'react-bootstrap';
+
+import ns from './ns.json';
+
+const propTypes = {};
+export default function Flash() {
+  return (
+    <div className={`${ns}-container bg-info`}>
+      <div className={`${ns}-content`}>
+        <div>
+          Content
+        </div>
+        <CloseButton />
+      </div>
+    </div>
+  );
+}
+
+Flash.displayName = 'Flash';
+Flash.propTypes = propTypes;
diff --git a/common/app/Flash/flash.less b/common/app/Flash/flash.less
new file mode 100644
index 0000000000..7a1794247f
--- /dev/null
+++ b/common/app/Flash/flash.less
@@ -0,0 +1,10 @@
+@ns: flash;
+
+.@{ns}-container {
+  width: 100%;
+}
+
+.@{ns}-content {
+  .center(@value: @container-md, @padding: @grid-gutter-width);
+  .row(@justify: around);
+}
diff --git a/common/app/Flash/index.js b/common/app/Flash/index.js
new file mode 100644
index 0000000000..5ad9a0c573
--- /dev/null
+++ b/common/app/Flash/index.js
@@ -0,0 +1 @@
+export { default } from './Flash.jsx';
diff --git a/common/app/Flash/ns.json b/common/app/Flash/ns.json
new file mode 100644
index 0000000000..27f9bb8bd4
--- /dev/null
+++ b/common/app/Flash/ns.json
@@ -0,0 +1 @@
+"flash"
diff --git a/common/app/Flash/redux/index.js b/common/app/Flash/redux/index.js
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/common/app/Flash/redux/index.js
@@ -0,0 +1 @@
+
diff --git a/common/app/index.less b/common/app/index.less
index 4a0fa6d828..1df19011f4 100644
--- a/common/app/index.less
+++ b/common/app/index.less
@@ -1,4 +1,5 @@
 &{ @import "./app.less"; }
 &{ @import "./Map/map.less"; }
 &{ @import "./Nav/nav.less"; }
+&{ @import "./Flash/flash.less"; }
 &{ @import "./routes/index.less"; }