Merge pull request #423 from reactjs/sync-c9b99007

Sync with reactjs.org @ c9b9900

Author: jhonmike

content/docs/components-and-props.md

@@ -233,7 +233,7 @@ function Comment(props) {
 
 [](codepen://components-and-props/extracting-components-continued)
 
-Extrair componentes pode parecer um trabalho pesado no começo, mas ter uma paleta de componentes reutilizáveis compensa em aplicativos maiores. Uma boa regra é que se uma parte da sua UI for usada várias vezes (`Button`, `Panel`, `Avatar`) ou for complexa o suficiente por si só (`App`, `FeedStory`, `Comment`) é uma boa candidata a se tornar um componente reutilizável.
+Extrair componentes pode parecer um trabalho pesado no começo, mas ter uma paleta de componentes reutilizáveis compensa em aplicativos maiores. Uma boa regra é que se uma parte da sua UI for usada várias vezes (`Button`, `Panel`, `Avatar`) ou for complexa o suficiente por si só (`App`, `FeedStory`, `Comment`) é uma boa candidata a ser extraída para um componente separado.
 
 ## Props são Somente Leitura {#props-are-read-only}
 

src/components/Container/Container.js

@@ -22,7 +22,6 @@ const Container = ({children}: {children: Node}) => (
       paddingRight: 20,
       marginLeft: 'auto',
       marginRight: 'auto',
-
       [media.greaterThan('medium')]: {
         width: '90%',
       },

src/components/LayoutHeader/Header.js

@@ -33,6 +33,34 @@ const Header = ({location}: {location: Location}) => (
         display: 'none',
       },
     }}>
+    <Container>
+      <div
+        css={{
+          height: 60,
+          fontSize: 20,
+          padding: 20,
+          textAlign: 'center',
+          [media.between('small', 'large')]: {
+            fontSize: 22,
+            height: 60,
+          },
+          [media.lessThan('small')]: {
+            height: 80,
+          },
+          [media.greaterThan('medium')]: {
+            fontSize: 25,
+          },
+        }}>
+        Black Lives Matter.{' '}
+        <a
+          style={{color: colors.brand}}
+          target="_blank"
+          rel="noopener"
+          href="https://support.eji.org/give/153413/#!/donation/checkout">
+          Support&nbsp;the&nbsp;Equal&nbsp;Justice&nbsp;Initiative.
+        </a>
+      </div>
+    </Container>
     <Container>
       <div
         css={{

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}

src/components/MarkdownPage/MarkdownPage.js

@@ -84,7 +84,10 @@ const MarkdownPage = ({
               <MarkdownHeader title={titlePrefix} />
 
               {(date || hasAuthors) && (
-                <div css={{marginTop: 15}}>
+                <div
+                  css={{
+                    marginTop: 15,
+                  }}>
                   {date}{' '}
                   {hasAuthors && (
                     <span>

src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js

@@ -43,7 +43,7 @@ class StickyResponsiveSidebar extends Component<Props, State> {
   render() {
     const {open} = this.state;
     const smallScreenSidebarStyles = {
-      top: 0,
+      top: 60,
       left: 0,
       bottom: 0,
       right: 0,
@@ -117,18 +117,18 @@ class StickyResponsiveSidebar extends Component<Props, State> {
               transition: 'transform 0.5s ease',
             }}
             css={{
-              marginTop: 60,
+              marginTop: 80,
 
               [media.size('xsmall')]: {
-                marginTop: 40,
+                marginTop: 60,
               },
 
               [media.between('small', 'medium')]: {
-                marginTop: 0,
+                marginTop: 70,
               },
 
               [media.between('medium', 'large')]: {
-                marginTop: 50,
+                marginTop: 70,
               },
 
               [media.greaterThan('small')]: {

src/css/reset.css

@@ -13,7 +13,6 @@ html {
 body {
   overflow-x: hidden;
   position: relative;
-  filter: grayscale(100%);
 }
 
 * {

src/pages/index.js

@@ -53,7 +53,11 @@ class Home extends Component {
           title="React – Uma biblioteca JavaScript para criar interfaces de usuário"
           canonicalUrl={createCanonicalUrl('/')}
         />
-        <div css={{width: '100%'}}>
+        <div
+          css={{
+            width: '100%',
+            marginTop: 60, // BLM
+          }}>
           <header
             css={{
               backgroundColor: colors.dark,