Merge pull request #486 from brave/welcome-btns

Button focus styling
brave · Jun 5, 2019 · b0ec08c · b0ec08c
2 parents 7f88568 + ed29139
commit b0ec08c
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'