From c9b990070fc35d31b56957263e1ea9fe2fe67b40 Mon Sep 17 00:00:00 2001
From: Sunil Pai <threepointone@gmail.com>
Date: Sat, 6 Jun 2020 02:55:25 +0100
Subject: [PATCH] remove grayscale treatment (#3024)

As per https://twitter.com/sliminality/status/1269033413488459776, there's feedback that the contrast isn't great for reading. I myself have trouble with low contrast text, (and long sightedness), and I thought it was fine. I was clearly mistaken. Removing this for now to get back to a non harmful position, and we can decide later what to do instead.
---
 src/components/Container/Container.js                    | 9 +--------
 src/components/LayoutFooter/FooterNav.js                 | 1 -
 src/components/LayoutHeader/Header.js                    | 2 +-
 src/components/MarkdownPage/MarkdownPage.js              | 1 -
 src/pages/index.js                                       | 1 -
 .../components/NavigationFooter/NavigationFooter.js      | 2 --
 src/templates/components/Sidebar/Sidebar.js              | 2 --
 src/theme.js                                             | 2 --
 8 files changed, 2 insertions(+), 18 deletions(-)

diff --git a/src/components/Container/Container.js b/src/components/Container/Container.js
index 0a872453..36c932ea 100644
--- a/src/components/Container/Container.js
+++ b/src/components/Container/Container.js
@@ -15,20 +15,13 @@ 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,
-  grayscale,
-}: {
-  children: Node,
-  grayscale: boolean,
-}) => (
+const Container = ({children}: {children: Node}) => (
   <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/FooterNav.js b/src/components/LayoutFooter/FooterNav.js
index 66acdf72..d94c7db6 100644
--- a/src/components/LayoutFooter/FooterNav.js
+++ b/src/components/LayoutFooter/FooterNav.js
@@ -34,7 +34,6 @@ const FooterNav = ({children, title, layoutHasSidebar = false}: Props) => (
       css={{
         display: 'inline-flex',
         flexDirection: 'column',
-        filter: 'grayscale(100%)',
       }}>
       {children}
     </div>
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index 21daf78f..9a49192e 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -61,7 +61,7 @@ const Header = ({location}: {location: Location}) => (
         </a>
       </div>
     </Container>
-    <Container grayscale={true}>
+    <Container>
       <div
         css={{
           display: 'flex',
diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js
index 59926396..1c098c9d 100644
--- a/src/components/MarkdownPage/MarkdownPage.js
+++ b/src/components/MarkdownPage/MarkdownPage.js
@@ -87,7 +87,6 @@ const MarkdownPage = ({
                 <div
                   css={{
                     marginTop: 15,
-                    filter: 'grayscale(100%)', // BLM
                   }}>
                   {date}{' '}
                   {hasAuthors && (
diff --git a/src/pages/index.js b/src/pages/index.js
index 25c7ca91..f6d18d6b 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -57,7 +57,6 @@ class Home extends Component {
           css={{
             width: '100%',
             marginTop: 60, // BLM
-            filter: 'grayscale(100%)', // BLM
           }}>
           <header
             css={{
diff --git a/src/templates/components/NavigationFooter/NavigationFooter.js b/src/templates/components/NavigationFooter/NavigationFooter.js
index d93914a9..9ee0e951 100644
--- a/src/templates/components/NavigationFooter/NavigationFooter.js
+++ b/src/templates/components/NavigationFooter/NavigationFooter.js
@@ -15,8 +15,6 @@ 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 657aba8d..b4199931 100644
--- a/src/templates/components/Sidebar/Sidebar.js
+++ b/src/templates/components/Sidebar/Sidebar.js
@@ -37,8 +37,6 @@ 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 bcb01f56..50500e00 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -132,8 +132,6 @@ const sharedStyles = {
       },
     },
     content: {
-      filter: 'grayscale(100%)', // BLM
-
       marginTop: 40,
       marginBottom: 120,