From c150ac2fa881d361dc349e8a19f0525070a1f310 Mon Sep 17 00:00:00 2001
From: Brady Pascoe <18705892+bpas247@users.noreply.github.com>
Date: Thu, 2 Jul 2020 20:22:44 -0700
Subject: [PATCH] in solidarity

https://twitter.com/kwuchu/status/1267436741692133376
https://github.com/reactjs/reactjs.org
https://react-bootstrap.github.io/

Adds a banner for the Black Lives Matter movement, to spread
awareness for the cause.
---
 docs/lib/UI/Banner.js | 19 +++++++++++++++++++
 docs/lib/UI/Layout.js |  2 ++
 docs/lib/UI/Nav.js    |  2 +-
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 docs/lib/UI/Banner.js

diff --git a/docs/lib/UI/Banner.js b/docs/lib/UI/Banner.js
new file mode 100644
index 000000000..7d6fab91c
--- /dev/null
+++ b/docs/lib/UI/Banner.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+export default function Banner() {
+  return (
+    <div className="bg-dark fixed-top" style={{ width: "100%", minHeight: "4em" }}>
+      <div className="mx-auto d-flex flex-column flex-md-row justify-content-center" style={{ width: "65vw" }}>
+        <span className="text-light mr-3 h4">Black Lives Matter.</span>
+        <a
+          className="h4 banner-link"
+          target="_blank"
+          rel="noreferrer"
+          href="https://support.eji.org/give/153413/#!/donation/checkout"
+        >
+          Support the Equal Justice Initiative.
+      </a>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/docs/lib/UI/Layout.js b/docs/lib/UI/Layout.js
index 3ceb25f5a..9985c7474 100644
--- a/docs/lib/UI/Layout.js
+++ b/docs/lib/UI/Layout.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Helmet from 'react-helmet';
 import Footer from './Footer';
 import Nav from './Nav';
+import Banner from './Banner';
 
 export default (props) => {
   return (
@@ -15,6 +16,7 @@ export default (props) => {
             { 'property': 'og:type', 'content': 'article' }
         ]}
       />
+      <Banner />
       <Nav />
       {props.children}
       <Footer />
diff --git a/docs/lib/UI/Nav.js b/docs/lib/UI/Nav.js
index 06990a976..85a7ccb3d 100644
--- a/docs/lib/UI/Nav.js
+++ b/docs/lib/UI/Nav.js
@@ -20,7 +20,7 @@ export default class UINav extends React.Component {
   }
   render() {
     return (
-        <Navbar className="header" color="faded" light expand="md">
+        <Navbar className="header" color="faded" light expand="md" style={{ marginTop: "100px" }}>
           <Container>
             <NavbarBrand className="mr-auto" tag={Link} to="/">reactstrap</NavbarBrand>
             <NavbarToggler onClick={this.toggleNavbar} />