From ed29139f9d86e33b7952d24f296226e247fc729a Mon Sep 17 00:00:00 2001
From: Ross Moody <fiftyfivehis@gmail.com>
Date: Thu, 30 May 2019 22:09:27 -0700
Subject: [PATCH] Button focus styling

---
 src/features/welcome/button/index.ts          | 34 ++++++++++++++++---
 src/features/welcome/index.ts                 |  4 ++-
 .../welcome/page/screens/footerBox.tsx        |  6 ++--
 .../welcome/page/screens/importBox.tsx        |  7 ++--
 .../welcome/page/screens/rewardsBox.tsx       |  7 ++--
 .../welcome/page/screens/searchBox.tsx        |  7 ++--
 .../welcome/page/screens/themeBox.tsx         |  7 ++--
 .../welcome/page/screens/welcomeBox.tsx       |  5 ++-
 8 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/src/features/welcome/button/index.ts b/src/features/welcome/button/index.ts
index 666654bdc..7661908cf 100644
--- a/src/features/welcome/button/index.ts
+++ b/src/features/welcome/button/index.ts
@@ -3,7 +3,8 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { ComponentType } from 'react'
-import styled, { css } from 'styled-components'
+import styled, { css } from '../../../theme'
+import Button, { Props as ButtonProps } from '../../../components/buttonsIndicators/button'
 
 interface BaseButtonProps {
   active?: boolean
@@ -19,17 +20,42 @@ const BaseButton = styled<BaseButtonProps, 'button'>('button')`
   border: none;
   cursor: pointer;
   outline: inherit;
-  letter-spacing:1px;
+`
+
+export const FooterButton = styled(Button as ComponentType<ButtonProps>)`
+  outline: none;
+  border: 1px solid ${p => p.theme.palette.grey400};
+  color: ${p => p.theme.color.text};
+
+  &:hover {
+    opacity: .9;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px rgba(255,80,0,0.2);
+  }
 `
 
 export const SkipButton = styled(BaseButton)`
-  color: #7C7D8C;
+  color: ${p => p.theme.color.text};
   text-decoration: underline;
   font-weight: 300;
   letter-spacing: 0;
 
   &:hover {
-    color: #343546;
+    opacity: .9;
+  }
+`
+
+export const PrimaryButton = styled(Button as ComponentType<ButtonProps>)`
+  outline: none;
+
+  &:hover {
+    opacity: .9;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px rgba(255,80,0,0.2);
   }
 `
 
diff --git a/src/features/welcome/index.ts b/src/features/welcome/index.ts
index 423adb9f3..ed487e065 100644
--- a/src/features/welcome/index.ts
+++ b/src/features/welcome/index.ts
@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { SkipButton, Bullet } from './button'
+import { SkipButton, FooterButton, Bullet, PrimaryButton } from './button'
 import { Title, Paragraph } from './text'
 import {
   Footer,
@@ -18,6 +18,8 @@ import {
 
 export {
   SkipButton,
+  PrimaryButton,
+  FooterButton,
   Bullet,
   Title,
   Paragraph,
diff --git a/stories/features/welcome/page/screens/footerBox.tsx b/stories/features/welcome/page/screens/footerBox.tsx
index b00d07a7c..68e444db5 100644
--- a/stories/features/welcome/page/screens/footerBox.tsx
+++ b/stories/features/welcome/page/screens/footerBox.tsx
@@ -11,12 +11,12 @@ import {
   FooterMiddleColumn,
   FooterRightColumn,
   SkipButton,
+  FooterButton,
   Bullet
 } from '../../../../../src/features/welcome/'
 
 // Shared components
 import { ArrowRightIcon } from '../../../../../src/components/icons'
-import { Button } from '../../../../../src/components'
 
 // Utils
 import locale from '../fakeLocale'
@@ -49,7 +49,7 @@ export default class FooterBox extends React.PureComponent<Props, {}> {
             // don't show the next button in the first screen
             currentScreen !== 1
               ? (
-                <Button
+                <FooterButton
                   level='secondary'
                   type='default'
                   size='medium'
@@ -59,7 +59,7 @@ export default class FooterBox extends React.PureComponent<Props, {}> {
                 />
               )
               : currentScreen !== 1 && (
-                <Button
+                <FooterButton
                   level='secondary'
                   type='default'
                   size='medium'
diff --git a/stories/features/welcome/page/screens/importBox.tsx b/stories/features/welcome/page/screens/importBox.tsx
index a8b48f5ad..03ca14ec6 100644
--- a/stories/features/welcome/page/screens/importBox.tsx
+++ b/stories/features/welcome/page/screens/importBox.tsx
@@ -5,10 +5,7 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, Paragraph } from '../../../../../src/features/welcome/'
-
-// Shared components
-import { Button } from '../../../../../src/components'
+import { Content, Title, Paragraph, PrimaryButton } from '../../../../../src/features/welcome/'
 
 // Utils
 import locale from '../fakeLocale'
@@ -49,7 +46,7 @@ export default class ImportBox extends React.PureComponent<Props, State> {
         <WelcomeImportImage />
         <Title>{locale.importFromAnotherBrowser}</Title>
         <Paragraph>{locale.setupImport}</Paragraph>
-          <Button
+          <PrimaryButton
             level='primary'
             type='accent'
             size='large'
diff --git a/stories/features/welcome/page/screens/rewardsBox.tsx b/stories/features/welcome/page/screens/rewardsBox.tsx
index 4d38b8be4..20bc857fc 100644
--- a/stories/features/welcome/page/screens/rewardsBox.tsx
+++ b/stories/features/welcome/page/screens/rewardsBox.tsx
@@ -5,10 +5,7 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, Paragraph } from '../../../../../src/features/welcome/'
-
-// Shared components
-import { Button } from '../../../../../src/components'
+import { Content, Title, Paragraph, PrimaryButton } from '../../../../../src/features/welcome/'
 
 // Utils
 import locale from '../fakeLocale'
@@ -35,7 +32,7 @@ export default class PaymentsBox extends React.PureComponent<Props, {}> {
         <WelcomeRewardsImage />
         <Title>{locale.enableBraveRewards}</Title>
         <Paragraph>{locale.setupBraveRewards}</Paragraph>
-        <Button
+        <PrimaryButton
           level='primary'
           type='accent'
           size='large'
diff --git a/stories/features/welcome/page/screens/searchBox.tsx b/stories/features/welcome/page/screens/searchBox.tsx
index f578b456d..821005815 100644
--- a/stories/features/welcome/page/screens/searchBox.tsx
+++ b/stories/features/welcome/page/screens/searchBox.tsx
@@ -6,12 +6,9 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, Paragraph, SelectGrid } from '../../../../../src/features/welcome/'
+import { Content, Title, Paragraph, SelectGrid, PrimaryButton } from '../../../../../src/features/welcome/'
 import { SelectBox } from '../../../../../src/features/shields'
 
-// Shared components
-import { Button } from '../../../../../src/components'
-
 // Utils
 import locale from '../fakeLocale'
 
@@ -64,7 +61,7 @@ export default class SearchEngineBox extends React.PureComponent<Props, State> {
               <option value='DuckDuckGo'>{locale.fakeSearchProvider1}</option>
               <option value='Google'>{locale.fakeSearchProvider2}</option>
             </SelectBox>
-            <Button
+            <PrimaryButton
               level='primary'
               type='accent'
               size='large'
diff --git a/stories/features/welcome/page/screens/themeBox.tsx b/stories/features/welcome/page/screens/themeBox.tsx
index e1843cd21..014cf6306 100644
--- a/stories/features/welcome/page/screens/themeBox.tsx
+++ b/stories/features/welcome/page/screens/themeBox.tsx
@@ -5,10 +5,7 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, Paragraph } from '../../../../../src/features/welcome/'
-
-// Shared components
-import { Button } from '../../../../../src/components'
+import { Content, Title, Paragraph, PrimaryButton } from '../../../../../src/features/welcome/'
 
 // Utils
 import locale from '../fakeLocale'
@@ -35,7 +32,7 @@ export default class ThemingBox extends React.PureComponent<Props, {}> {
         <WelcomeThemeImage />
         <Title>{locale.chooseYourTheme}</Title>
         <Paragraph>{locale.findToolbarTheme}</Paragraph>
-          <Button
+          <PrimaryButton
             level='primary'
             type='accent'
             size='large'
diff --git a/stories/features/welcome/page/screens/welcomeBox.tsx b/stories/features/welcome/page/screens/welcomeBox.tsx
index 562a5527e..2fb0f111c 100644
--- a/stories/features/welcome/page/screens/welcomeBox.tsx
+++ b/stories/features/welcome/page/screens/welcomeBox.tsx
@@ -5,10 +5,9 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, Paragraph } from '../../../../../src/features/welcome/'
+import { Content, Title, Paragraph, PrimaryButton } from '../../../../../src/features/welcome/'
 
 // Shared components
-import { Button } from '../../../../../src/components'
 import { ArrowRightIcon } from '../../../../../src/components/icons'
 
 // Utils
@@ -36,7 +35,7 @@ export default class ThemingBox extends React.PureComponent<Props, {}> {
         <WelcomeLionImage />
         <Title>{locale.welcome}</Title>
         <Paragraph>{locale.whatIsBrave}</Paragraph>
-        <Button
+        <PrimaryButton
           level='primary'
           type='accent'
           size='large'