diff --git a/src/features/welcome/index.ts b/src/features/welcome/index.ts
index ed487e065d05..68bdaa697a79 100644
--- a/src/features/welcome/index.ts
+++ b/src/features/welcome/index.ts
@@ -4,6 +4,7 @@
import { SkipButton, FooterButton, Bullet, PrimaryButton } from './button'
import { Title, Paragraph } from './text'
+import { SelectBox } from './select'
import {
Footer,
FooterLeftColumn,
@@ -31,5 +32,6 @@ export {
Page,
Panel,
SelectGrid,
- SlideContent
+ SlideContent,
+ SelectBox
}
diff --git a/src/features/welcome/select/carat.svg b/src/features/welcome/select/carat.svg
new file mode 100644
index 000000000000..61aadff2c5cb
--- /dev/null
+++ b/src/features/welcome/select/carat.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/features/welcome/select/index.ts b/src/features/welcome/select/index.ts
new file mode 100644
index 000000000000..716bf9fc265d
--- /dev/null
+++ b/src/features/welcome/select/index.ts
@@ -0,0 +1,60 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 styled, { css } from '../../../theme'
+import palette from '../../../theme/colors'
+import caratUrl from './carat.svg'
+
+export interface SelectBoxProps {
+ id?: string
+ multiple?: boolean
+ autoFocus?: boolean
+ disabled?: boolean
+ value?: string
+ onChange?: (e: any) => void
+ children: React.ReactNode
+}
+
+export const SelectBox = styled('select')`
+ box-sizing: border-box;
+ position: relative;
+ -webkit-font-smoothing: antialiased;
+ border-radius: 4px;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ appearance: none;
+ height: 32px;
+ color: ${p => p.theme.color.text};
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 18px;
+ font-family: ${p => p.theme.fontFamily.heading};
+ border: 1px solid ${p => p.theme.color.inputBorder};
+ background: url(${caratUrl}) 97% / 16px no-repeat transparent;
+ /* avoid text overflow w/ carat */
+ -webkit-padding-start: 10px;
+ -webkit-padding-end: 32px;
+ outline-width: 2px;
+ outline-color: ${p => p.theme.color.brandBrave};
+ cursor: pointer;
+
+ > option {
+ /* see https://github.com/brave/brave-browser/issues/4213 for info */
+ color: ${palette.black};
+ }
+
+ ${(p: SelectBoxProps) => p.disabled
+ ? css`
+ user-select: none;
+ opacity: 0.6;
+ ` : ''
+ }
+ ${(p: SelectBoxProps) => p.multiple
+ ? css`
+ padding: 6px;
+ background: none;
+ ` : ''
+ }
+`
diff --git a/stories/features/welcome/page/fakeLocale.ts b/stories/features/welcome/page/fakeLocale.ts
index 5dbdc8f74302..77be6e3f2534 100644
--- a/stories/features/welcome/page/fakeLocale.ts
+++ b/stories/features/welcome/page/fakeLocale.ts
@@ -9,8 +9,11 @@ const locale = {
letsGo: 'Let\'s go',
// second screen
importFromAnotherBrowser: 'Import bookmarks & settings',
- setupImport: 'Brave makes it easy to set up your usual environment by importing bookmarks and settings from other browsers installed on your computer.',
+ setupImport: 'Set up your usual browsing environment by importing bookmarks and settings from your old browser. Advanced import options can be found in Settings.',
import: 'Import',
+ importFrom: 'Import from...',
+ fakeBrowser1: 'Chrome',
+ fakeBrowser2: 'Firefox',
imported: 'Imported',
// third screen
setDefault: 'Set default',
diff --git a/stories/features/welcome/page/screens/importBox.tsx b/stories/features/welcome/page/screens/importBox.tsx
index 03ca14ec62fd..528911953c7e 100644
--- a/stories/features/welcome/page/screens/importBox.tsx
+++ b/stories/features/welcome/page/screens/importBox.tsx
@@ -5,7 +5,8 @@
import * as React from 'react'
// Feature-specific components
-import { Content, Title, Paragraph, PrimaryButton } from '../../../../../src/features/welcome/'
+import { Content, Title, Paragraph, PrimaryButton, SelectGrid } from '../../../../../src/features/welcome/'
+import { SelectBox } from '../../../../../src/features/welcome'
// Utils
import locale from '../fakeLocale'
@@ -20,22 +21,28 @@ interface Props {
}
interface State {
- onClickFired: boolean
+ importSelected: boolean
}
export default class ImportBox extends React.PureComponent {
constructor (props: Props) {
super(props)
- this.state = { onClickFired: false }
+ this.state = {
+ importSelected: false
+ }
}
onClickImport = () => {
- this.setState({ onClickFired: !this.state.onClickFired })
this.props.onClick()
}
+ onChangeImportOption = (event: React.ChangeEvent) => {
+ this.setState({ importSelected: event.target.value !== '' })
+ }
+
render () {
const { index, currentScreen } = this.props
+ const { importSelected } = this.state
return (
{
{locale.importFromAnotherBrowser}
{locale.setupImport}
-
+
+
+
+
+
+
+
+
)
}
diff --git a/stories/features/welcome/page/screens/searchBox.tsx b/stories/features/welcome/page/screens/searchBox.tsx
index 821005815d8d..fbcd9220e508 100644
--- a/stories/features/welcome/page/screens/searchBox.tsx
+++ b/stories/features/welcome/page/screens/searchBox.tsx
@@ -7,7 +7,7 @@ import * as React from 'react'
// Feature-specific components
import { Content, Title, Paragraph, SelectGrid, PrimaryButton } from '../../../../../src/features/welcome/'
-import { SelectBox } from '../../../../../src/features/shields'
+import { SelectBox } from '../../../../../src/features/welcome'
// Utils
import locale from '../fakeLocale'