diff --git a/app/extensions/brave/img/caret_down_grey.svg b/app/extensions/brave/img/caret_down_grey.svg new file mode 100644 index 00000000000..c3dd80fe5a5 --- /dev/null +++ b/app/extensions/brave/img/caret_down_grey.svg @@ -0,0 +1 @@ +caret_down_grey \ No newline at end of file diff --git a/app/renderer/components/dropdown.js b/app/renderer/components/dropdown.js new file mode 100644 index 00000000000..9c8f4994996 --- /dev/null +++ b/app/renderer/components/dropdown.js @@ -0,0 +1,71 @@ +/* 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/. */ + +const React = require('react') +const ImmutableComponent = require('../../../js/components/immutableComponent') +const {StyleSheet, css} = require('aphrodite') +const globalStyles = require('./styles/global') +const commonStyles = require('./styles/commonStyles') + +const caretDownGrey = require('../../extensions/brave/img/caret_down_grey.svg') + +class Dropdown extends ImmutableComponent { + render () { + const className = css( + this.props['data-isFormControl'] && commonStyles.formControl, + styles.dropdown, + this.props['data-isSettings'] && styles.settings + ) + + return + } +} + +class FormDropdown extends ImmutableComponent { + render () { + return + } +} + +class SettingDropdown extends ImmutableComponent { + render () { + return + } +} + +const selectPadding = '0.4em' + +const styles = StyleSheet.create({ + 'dropdown': { + background: `url(${caretDownGrey}) calc(100% - ${selectPadding}) 50% / contain no-repeat`, + backgroundColor: '#fefefe', + backgroundSize: '12px 12px', + boxShadow: `-1px 1px 3px -1px ${globalStyles.color.mediumGray}`, + height: '2rem', + outline: 'none', + // right padding is larger, to account for the down arrow SVG + padding: `${selectPadding} 1.5em ${selectPadding} ${selectPadding}`, + '-webkit-appearance': 'none', + width: 'auto' + }, + 'outlineable': { + ':focus': { + outlineColor: globalStyles.color.statsBlue, + outlineOffset: '-4px', + outlineStyle: 'solid', + outlineWidth: '1px' + } + }, + 'settings': { + width: '280px' + } +}) + +module.exports = { + Dropdown, + FormDropdown, + SettingDropdown +} diff --git a/app/renderer/components/settings.js b/app/renderer/components/settings.js new file mode 100644 index 00000000000..b4a77caefa6 --- /dev/null +++ b/app/renderer/components/settings.js @@ -0,0 +1,39 @@ +/* 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/. */ + +const React = require('react') +const ImmutableComponent = require('../../../js/components/immutableComponent') + +class SettingsList extends ImmutableComponent { + render () { + return
+ { + this.props.dataL10nId + ?
+ : null + } +
+ {this.props.children} +
+
+ } +} + +class SettingItem extends ImmutableComponent { + render () { + return
+ { + this.props.dataL10nId + ? + : null + } + {this.props.children} +
+ } +} + +module.exports = { + SettingsList, + SettingItem +} diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js new file mode 100644 index 00000000000..73938b51144 --- /dev/null +++ b/app/renderer/components/styles/commonStyles.js @@ -0,0 +1,25 @@ +/* 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/. */ + +const {StyleSheet} = require('aphrodite') +const globalStyles = require('./global') + +const styles = StyleSheet.create({ + 'formControl': { + background: 'white', + border: `solid 1px ${globalStyles.color.black20}`, + borderRadius: globalStyles.radius.borderRadius, + boxShadow: `inset 0 1px 1px ${globalStyles.color.black10}`, + boxSizing: 'border-box', + display: 'block', + color: globalStyles.color.darkGray, + fontSize: '14.5px', + height: '2.25em', + outline: 'none', + padding: '0.4em', + width: '100%' + } +}) + +module.exports = styles diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js index 6a28d81c039..18d7d62d524 100644 --- a/app/renderer/components/styles/global.js +++ b/app/renderer/components/styles/global.js @@ -46,6 +46,7 @@ const globalStyles = { gray25: 'rgba(116, 116, 130, 0.25)', gray50: 'rgba(116, 116, 130, 0.5)', black10: 'rgba(0, 0, 0, 0.1)', + black20: 'rgba(0, 0, 0, 0.2)', black25: 'rgba(0, 0, 0, 0.25)', black50: 'rgba(0, 0, 0, 0.5)', black75: 'rgba(0, 0, 0, 0.75)', diff --git a/app/renderer/components/textbox.js b/app/renderer/components/textbox.js new file mode 100644 index 00000000000..fd8a95955d6 --- /dev/null +++ b/app/renderer/components/textbox.js @@ -0,0 +1,74 @@ +/* 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/. */ + +const React = require('react') +const ImmutableComponent = require('../../../js/components/immutableComponent') +const {StyleSheet, css} = require('aphrodite') +const globalStyles = require('./styles/global') +const commonStyles = require('./styles/commonStyles') + +class Textbox extends ImmutableComponent { + render () { + const className = css( + this.props['data-isFormControl'] && commonStyles.formControl, + styles.textbox, + this.props['data-isSettings'] && styles.isSettings, + (this.props.readonly || this.props.readOnly) ? styles.readOnly : styles.outlineable, + this.props['data-isRecoveryKeyTextbox'] && styles.recoveryKeys + ) + + return + } +} + +class FormTextbox extends ImmutableComponent { + render () { + return + } +} + +class SettingTextbox extends ImmutableComponent { + render () { + return + } +} + +class RecoveryKeyTextbox extends ImmutableComponent { + render () { + return + } +} + +const styles = StyleSheet.create({ + 'textbox': { + boxSizing: 'border-box', + width: 'auto' + }, + 'outlineable': { + ':focus': { + outlineColor: globalStyles.color.statsBlue, + outlineOffset: '-4px', + outlineStyle: 'solid', + outlineWidth: '1px' + } + }, + 'isSettings': { + width: '280px' + }, + 'readOnly': { + background: globalStyles.color.veryLightGray, + boxShadow: 'none', + outline: 'none' + }, + 'recoveryKeys': { + marginBottom: '20px' + } +}) + +module.exports = { + Textbox, + FormTextbox, + SettingTextbox, + RecoveryKeyTextbox +} diff --git a/js/about/preferences.js b/js/about/preferences.js index ed7d12e9804..e852497d302 100644 --- a/js/about/preferences.js +++ b/js/about/preferences.js @@ -8,6 +8,10 @@ const ImmutableComponent = require('../components/immutableComponent') const Immutable = require('immutable') const SwitchControl = require('../components/switchControl') const ModalOverlay = require('../components/modalOverlay') +const {SettingsList, SettingItem} = require('../../app/renderer/components/settings') +const {FormTextbox, SettingTextbox, RecoveryKeyTextbox} = require('../../app/renderer/components/textbox') +const {FormDropdown, SettingDropdown} = require('../../app/renderer/components/dropdown') +const Button = require('../components/button') const cx = require('../lib/classSet') const ledgerExportUtil = require('../../app/common/lib/ledgerExportUtil') const addExportFilenamePrefixToTransactions = ledgerExportUtil.addExportFilenamePrefixToTransactions @@ -31,7 +35,6 @@ const WidevineInfo = require('../../app/renderer/components/widevineInfo') const aboutActions = require('./aboutActions') const getSetting = require('../settings').getSetting const SortableTable = require('../components/sortableTable') -const Button = require('../components/button') const searchProviders = require('../data/searchProviders') const punycode = require('punycode') const moment = require('moment') @@ -109,34 +112,6 @@ const changeSetting = (cb, key, e) => { } } -class SettingsList extends ImmutableComponent { - render () { - return
- { - this.props.dataL10nId - ?
- : null - } -
- {this.props.children} -
-
- } -} - -class SettingItem extends ImmutableComponent { - render () { - return
- { - this.props.dataL10nId - ? - : null - } - {this.props.children} -
- } -} - class SettingCheckbox extends ImmutableComponent { constructor () { super() @@ -686,25 +661,25 @@ class GeneralTab extends ImmutableComponent {
- + - + - @@ -717,25 +692,24 @@ class GeneralTab extends ImmutableComponent { } - + - + - +
@@ -300,10 +301,10 @@ class BraveryPanel extends ImmutableComponent { braverySelectTitle: true, disabled: !shieldsUp })} data-l10n-id='cookieControl' /> - +
diff --git a/less/about/preferences.less b/less/about/preferences.less index 290ee9aec64..39a30a3a192 100644 --- a/less/about/preferences.less +++ b/less/about/preferences.less @@ -367,13 +367,6 @@ span.settingsListCopy { } } -input:not([type="checkbox"]), select { - &.form-control { - box-sizing: border-box; - width: 280px; - } -} - input[type="checkbox"][disabled] { opacity: 0.8; pointer-events: none; @@ -742,11 +735,6 @@ table.sortableTable { h3 { margin-bottom: @margin-bottom-header; } - - .firstRecoveryKey, - .secondRecoveryKey { - margin-bottom: 20px; - } } } } diff --git a/less/button.less b/less/button.less index 058974edb29..b1b807fdb02 100644 --- a/less/button.less +++ b/less/button.less @@ -94,14 +94,14 @@ span.buttonSeparator { &.primaryButton { background: linear-gradient(@braveLightOrange, @braveOrange); - border: 1px solid transparent; - border-top: 1px solid @braveLightOrange; - border-bottom: 1px solid @braveOrange; + border: 2px solid transparent; + border-top: 2px solid @braveLightOrange; + border-bottom: 2px solid @braveOrange; box-shadow: @buttonShadow; font-weight: 500; &:hover { - border: 1px solid white; + border: 2px solid white; color: white; cursor: pointer; } diff --git a/less/forms.less b/less/forms.less index 18741fb8a8e..a0b881e3f1f 100644 --- a/less/forms.less +++ b/less/forms.less @@ -5,20 +5,6 @@ select { box-sizing: border-box; } -.form-control { - display: block; - background: white; - border: solid 1px @lightGray; - border-radius: @borderRadius; - box-shadow: inset 0 1px 1px rgba(0,0,0,.075); - box-sizing: border-box; - color: @darkGray; - font-size: 14.5px; - height: 2.25em; - padding: 0.4em; - width: 100%; -} - .flyoutDialog { background-color: @toolbarBackground; border-radius: @borderRadius; diff --git a/test/components/navigationBarTest.js b/test/components/navigationBarTest.js index 47a556d8148..aa6617b5ad7 100644 --- a/test/components/navigationBarTest.js +++ b/test/components/navigationBarTest.js @@ -770,7 +770,7 @@ describe('navigationBar tests', function () { const page1Url = Brave.server.url('page1.html') yield this.app.client.tabByUrl(Brave.newTabUrl).url(page1Url).waitForUrl(page1Url).windowParentByUrl(page1Url) let background = yield this.app.client.getCssProperty(activeTab, 'background') - assert.equal(background.value, 'rgba(0,0,0,0)linear-gradient(rgb(255,255,255),rgb(243,243,243))repeatscroll0%0%/autopadding-boxborder-box') + assert.equal(background.value, 'rgba(0,0,0,0)linear-gradient(white,rgb(243,243,243))repeatscroll0%0%/autopadding-boxborder-box') }) // We need a newer electron build first diff --git a/test/lib/selectors.js b/test/lib/selectors.js index d1cc7cdd0bb..c0494019f23 100644 --- a/test/lib/selectors.js +++ b/test/lib/selectors.js @@ -37,7 +37,7 @@ module.exports = { braveMenu: '.braveMenu:not(.braveShieldsDisabled)', braveMenuDisabled: '.braveMenu.braveShieldsDisabled', adsBlockedStat: '.braveryStat.adsBlockedStat', - adsBlockedControl: '.adsBlockedControl', + adsBlockedControl: '[data-test-id="adsBlockedControl"]', showAdsOption: '[data-l10n-id="allowAdsAndTracking"]', blockAdsOption: '[data-l10n-id="blockAds"]', braveryPanel: '.braveryPanel', @@ -60,7 +60,7 @@ module.exports = { walletSwitch: '.enablePaymentsSwitch .switchBackground', addFundsButton: '.addFunds', advancedSettings: '.advancedSettings', - fundsSelectBox: '.fundsSelectBox', + fundsSelectBox: '[data-test-id="fundsSelectBox"]', paymentsStatus: '.walletStatus', siteSettingItem: '.siteSettingItem', ledgerTable: '.ledgerTable',