diff --git a/app/renderer/components/dropdown.js b/app/renderer/components/dropdown.js index 63e35d2c03e..ba1b3c50456 100644 --- a/app/renderer/components/dropdown.js +++ b/app/renderer/components/dropdown.js @@ -6,12 +6,14 @@ 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'] && styles.formControl, + this.props['data-isFormControl'] && commonStyles.formControl, styles.dropdown, this.props['data-isSettings'] && styles.settings ) @@ -37,20 +39,6 @@ class SettingDropdown extends ImmutableComponent { const selectPadding = '0.4em' 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%' - }, 'dropdown': { background: `url(${caretDownGrey}) calc(100% - ${selectPadding}) 50% / contain no-repeat`, backgroundColor: '#fefefe', 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/textbox.js b/app/renderer/components/textbox.js index b9cf0bfe386..fd8a95955d6 100644 --- a/app/renderer/components/textbox.js +++ b/app/renderer/components/textbox.js @@ -6,11 +6,12 @@ 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'] && styles.formControl, + this.props['data-isFormControl'] && commonStyles.formControl, styles.textbox, this.props['data-isSettings'] && styles.isSettings, (this.props.readonly || this.props.readOnly) ? styles.readOnly : styles.outlineable, @@ -40,20 +41,6 @@ class RecoveryKeyTextbox extends ImmutableComponent { } 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%' - }, 'textbox': { boxSizing: 'border-box', width: 'auto'