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,