From 5eeb4410748d0b97a1055cab66293c95dacd7d4f Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Mon, 1 Jun 2020 16:44:31 +0100
Subject: [PATCH] Add a BLM banner

---
 src/components/Container/Container.js         | 10 ++++++--
 src/components/LayoutFooter/Footer.js         |  1 +
 src/components/LayoutHeader/Header.js         | 25 +++++++++++++++++++
 .../MarkdownHeader/MarkdownHeader.js          |  6 ++---
 src/components/MarkdownPage/MarkdownPage.js   |  6 ++++-
 src/css/reset.css                             |  1 -
 src/pages/index.js                            |  7 +++++-
 .../NavigationFooter/NavigationFooter.js      |  2 ++
 src/templates/components/Sidebar/Sidebar.js   |  2 ++
 src/theme.js                                  |  3 +++
 10 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/src/components/Container/Container.js b/src/components/Container/Container.js
index 8ed280c5..0a872453 100644
--- a/src/components/Container/Container.js
+++ b/src/components/Container/Container.js
@@ -15,14 +15,20 @@ import type {Node} from 'react';
  * This component wraps page content sections (eg header, footer, main).
  * It provides consistent margin and max width behavior.
  */
-const Container = ({children}: {children: Node}) => (
+const Container = ({
+  children,
+  grayscale,
+}: {
+  children: Node,
+  grayscale: boolean,
+}) => (
   <div
     css={{
       paddingLeft: 20,
       paddingRight: 20,
       marginLeft: 'auto',
       marginRight: 'auto',
-
+      filter: grayscale ? 'grayscale(100%)' : '',
       [media.greaterThan('medium')]: {
         width: '90%',
       },
diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js
index 34c44db6..fde7ab15 100644
--- a/src/components/LayoutFooter/Footer.js
+++ b/src/components/LayoutFooter/Footer.js
@@ -23,6 +23,7 @@ import ossLogoPng from 'images/oss_logo.png';
 const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
   <footer
     css={{
+      filter: 'grayscale(100%)', // BLM
       backgroundColor: colors.darker,
       color: colors.white,
       paddingTop: 10,
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index cfe3e77d..7c05e647 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -34,6 +34,31 @@ const Header = ({location}: {location: Location}) => (
       },
     }}>
     <Container>
+      <div
+        css={{
+          height: 60,
+          fontSize: 20,
+          padding: 20,
+          textAlign: 'center',
+          [media.between('small', 'large')]: {
+            height: 60,
+          },
+          [media.lessThan('small')]: {
+            height: 80,
+          },
+        }}>
+        Black Lives Matter.{' '}
+        <a
+          style={{color: colors.brand}}
+          target="_blank"
+          rel="noopener"
+          rel="noreferrer"
+          href="https://support.eji.org/give/153413/#!/donation/checkout">
+          Support&nbsp;the&nbsp;Equal&nbsp;Justice&nbsp;Initiative.
+        </a>
+      </div>
+    </Container>
+    <Container grayscale={true}>
       <div
         css={{
           display: 'flex',
diff --git a/src/components/MarkdownHeader/MarkdownHeader.js b/src/components/MarkdownHeader/MarkdownHeader.js
index b638d833..029e0bc5 100644
--- a/src/components/MarkdownHeader/MarkdownHeader.js
+++ b/src/components/MarkdownHeader/MarkdownHeader.js
@@ -15,15 +15,15 @@ const MarkdownHeader = ({title}: {title: string}) => (
       css={{
         color: colors.dark,
         marginBottom: 0,
-        marginTop: 40,
+        marginTop: 100, // BLM
         ...fonts.header,
 
         [media.size('medium')]: {
-          marginTop: 60,
+          marginTop: 100, // BLM
         },
 
         [media.greaterThan('large')]: {
-          marginTop: 80,
+          marginTop: 100, // BLM
         },
       }}>
       {title}
diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js
index 7426f1fa..59926396 100644
--- a/src/components/MarkdownPage/MarkdownPage.js
+++ b/src/components/MarkdownPage/MarkdownPage.js
@@ -84,7 +84,11 @@ const MarkdownPage = ({
               <MarkdownHeader title={titlePrefix} />
 
               {(date || hasAuthors) && (
-                <div css={{marginTop: 15}}>
+                <div
+                  css={{
+                    marginTop: 15,
+                    filter: 'grayscale(100%)', // BLM
+                  }}>
                   {date}{' '}
                   {hasAuthors && (
                     <span>
diff --git a/src/css/reset.css b/src/css/reset.css
index 5db3eed6..2046181f 100644
--- a/src/css/reset.css
+++ b/src/css/reset.css
@@ -13,7 +13,6 @@ html {
 body {
   overflow-x: hidden;
   position: relative;
-  filter: grayscale(100%);
 }
 
 * {
diff --git a/src/pages/index.js b/src/pages/index.js
index b5dd5c1c..25c7ca91 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -53,7 +53,12 @@ class Home extends Component {
           title="React &ndash; A JavaScript library for building user interfaces"
           canonicalUrl={createCanonicalUrl('/')}
         />
-        <div css={{width: '100%'}}>
+        <div
+          css={{
+            width: '100%',
+            marginTop: 60, // BLM
+            filter: 'grayscale(100%)', // BLM
+          }}>
           <header
             css={{
               backgroundColor: colors.dark,
diff --git a/src/templates/components/NavigationFooter/NavigationFooter.js b/src/templates/components/NavigationFooter/NavigationFooter.js
index 9ee0e951..d93914a9 100644
--- a/src/templates/components/NavigationFooter/NavigationFooter.js
+++ b/src/templates/components/NavigationFooter/NavigationFooter.js
@@ -15,6 +15,8 @@ const NavigationFooter = ({next, prev, location}) => {
   return (
     <div
       css={{
+        filter: 'grayscale(100%)', // BLM
+
         background: colors.dark,
         color: colors.white,
         paddingTop: 50,
diff --git a/src/templates/components/Sidebar/Sidebar.js b/src/templates/components/Sidebar/Sidebar.js
index b4199931..657aba8d 100644
--- a/src/templates/components/Sidebar/Sidebar.js
+++ b/src/templates/components/Sidebar/Sidebar.js
@@ -37,6 +37,8 @@ class Sidebar extends Component {
         direction="column"
         halign="stretch"
         css={{
+          filter: 'grayscale(100%)', // BLM
+
           width: '100%',
           paddingLeft: 20,
           position: 'relative',
diff --git a/src/theme.js b/src/theme.js
index 50500e00..1b51a0b2 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -132,6 +132,8 @@ const sharedStyles = {
       },
     },
     content: {
+      filter: 'grayscale(100%)', // BLM
+
       marginTop: 40,
       marginBottom: 120,
 
@@ -186,6 +188,7 @@ const sharedStyles = {
   },
 
   markdown: {
+    filter: 'grayscale(100%)', // BLM
     lineHeight: '25px',
 
     '& .gatsby-highlight': {