From 0b3f75e0962fa8d4a3f2fac5b5f3e66ee9ead66e Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Tue, 3 Jul 2018 11:37:08 +0200
Subject: [PATCH] Focus state for Button outline

---
 src/components/base/Button/index.js | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/base/Button/index.js b/src/components/base/Button/index.js
index ec4b822f..4a621b83 100644
--- a/src/components/base/Button/index.js
+++ b/src/components/base/Button/index.js
@@ -69,15 +69,23 @@ const buttonStyles: { [_: string]: Style } = {
      `,
   },
   outline: {
-    default: p => `
-      background: transparent;
-      border: 1px solid ${
-        p.outlineColor ? p.theme.colors[p.outlineColor] || p.outlineColor : p.theme.colors.wallet
-      };
-      color: ${
-        p.outlineColor ? p.theme.colors[p.outlineColor] || p.outlineColor : p.theme.colors.wallet
-      };
-    `,
+    default: p => {
+      const c = p.outlineColor
+        ? p.theme.colors[p.outlineColor] || p.outlineColor
+        : p.theme.colors.wallet
+      return `
+        background: transparent;
+        border: 1px solid ${c};
+        color: ${c};
+        box-shadow: ${
+          p.isFocused
+            ? `
+            0 0 0 1px ${darken(c, 0.3)} inset,
+            0 0 0 4px ${rgba(c, 0.3)};`
+            : ''
+        }
+      `
+    },
     active: p => `
       color: ${darken(
         p.outlineColor ? p.theme.colors[p.outlineColor] || p.outlineColor : p.theme.colors.wallet,