From beeb8e8554335a4e370e147c07d639b01d7592bf Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Mon, 16 Oct 2017 13:03:58 -0700
Subject: [PATCH 1/2] Header focus style improvements

---
 src/components/LayoutHeader/Header.js     | 34 +++++++++++++++++++++--
 src/components/LayoutHeader/HeaderLink.js |  8 +++++-
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index 48037360..5eb06683 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -47,6 +47,12 @@ const Header = ({location}) => (
             marginRight: 10,
             height: '100%',
             alignItems: 'center',
+            color: colors.brand,
+
+            ':focus': {
+              outline: 0,
+              color: colors.white,
+            },
 
             [media.greaterThan('small')]: {
               width: 'calc(100% / 6)',
@@ -59,7 +65,7 @@ const Header = ({location}) => (
           <img src={logoSvg} alt="" height="20" />
           <span
             css={{
-              color: colors.brand,
+              color: 'inherit',
               marginLeft: 10,
               fontWeight: 700,
               fontSize: 20,
@@ -94,6 +100,7 @@ const Header = ({location}) => (
             WebkitOverflowScrolling: 'touch',
             height: '100%',
             width: '60%',
+
             [media.size('xsmall')]: {
               flexGrow: '1',
               width: 'auto',
@@ -170,6 +177,12 @@ const Header = ({location}) => (
               backgroundPositionY: 'center',
               backgroundPositionX: 'left',
 
+              ':focus': {
+                outline: 0,
+                backgroundColor: colors.lighter,
+                borderRadius: '0.25rem',
+              },
+
               [media.lessThan('large')]: {
                 fontSize: 16,
               },
@@ -207,10 +220,18 @@ const Header = ({location}) => (
           <a
             css={{
               padding: '5px 10px',
-              backgroundColor: colors.lighter,
-              borderRadius: 15,
               whiteSpace: 'nowrap',
               ...fonts.small,
+
+              ':hover': {
+                color: colors.brand,
+              },
+
+              ':focus': {
+                outline: 0,
+                backgroundColor: colors.lighter,
+                borderRadius: 15,
+              },
             }}
             href="https://github.com/facebook/react/releases"
             target="_blank"
@@ -223,9 +244,16 @@ const Header = ({location}) => (
               marginLeft: 10,
               whiteSpace: 'nowrap',
               ...fonts.small,
+
               ':hover': {
                 color: colors.brand,
               },
+
+              ':focus': {
+                outline: 0,
+                backgroundColor: colors.lighter,
+                borderRadius: 15,
+              },
             }}
             href="https://github.com/facebook/react/"
             target="_blank"
diff --git a/src/components/LayoutHeader/HeaderLink.js b/src/components/LayoutHeader/HeaderLink.js
index 6ad92ca5..69d91423 100644
--- a/src/components/LayoutHeader/HeaderLink.js
+++ b/src/components/LayoutHeader/HeaderLink.js
@@ -27,6 +27,12 @@ const style = {
   paddingRight: 15,
   fontWeight: 300,
 
+  ':focus': {
+    outline: 0,
+    backgroundColor: colors.lighter,
+    color: colors.white,
+  },
+
   [media.size('xsmall')]: {
     paddingLeft: 8,
     paddingRight: 8,
@@ -42,7 +48,7 @@ const style = {
     paddingRight: 20,
     fontSize: 18,
 
-    ':hover': {
+    ':hover:not(:focus)': {
       color: colors.brand,
     },
   },

From c0affe4dd8ecc8e74d5c674e3d4d8d0e95508ca0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Mon, 16 Oct 2017 15:23:41 -0700
Subject: [PATCH 2/2] Added some padding to search input

---
 src/components/LayoutHeader/Header.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index 5eb06683..d3bc48fa 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -170,12 +170,12 @@ const Header = ({location}) => (
               fontWeight: 300,
               fontFamily: 'inherit',
               position: 'relative',
-              paddingLeft: '24px',
+              padding: '5px 5px 5px 29px',
               backgroundImage: 'url(/search.svg)',
               backgroundSize: '16px 16px',
               backgroundRepeat: 'no-repeat',
               backgroundPositionY: 'center',
-              backgroundPositionX: 'left',
+              backgroundPositionX: '5px',
 
               ':focus': {
                 outline: 0,
@@ -195,7 +195,7 @@ const Header = ({location}) => (
                 paddingLeft: '16px',
 
                 ':focus': {
-                  paddingLeft: '24px',
+                  paddingLeft: '29px',
                   width: '8rem',
                   outline: 'none',
                 },