Separate input and select styles using Aphrodite

Fixes #5972

- Create aphrodite components for "text" input type
- Create aphrodite components for "select" input type
- Small LESS updates to primary button (not Aphrodite component yet)
- Update about:styles

Auditors: @bbondy, @luixxiul, @cezaraugusto, @bradleyrichter

app/renderer/components/dropdown.js

@@ -0,0 +1,82 @@
+/* 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 caretDownGrey = require('../../extensions/brave/img/caret_down_grey.svg')
+
+class Dropdown extends ImmutableComponent {
+  render () {
+    const className = css(
+      this.props['data-isFormControl'] && styles.formControl,
+      styles.dropdown,
+      this.props['data-isSettings'] && styles.settings
+    )
+
+    return <select className={className} {...this.props}>
+      {this.props.children}
+    </select>
+  }
+}
+
+class FormDropdown extends ImmutableComponent {
+  render () {
+    return <Dropdown data-isFormControl='true' {...this.props} />
+  }
+}
+
+class SettingDropdown extends ImmutableComponent {
+  render () {
+    return <FormDropdown data-isSettings='true' {...this.props} />
+  }
+}
+
+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',
+    backgroundSize: '12px 12px',
+    boxShadow: `-1px 1px 3px -1px ${globalStyles.color.mediumGray}`,
+    height: '2rem',
+    outline: 'none',
+    padding: 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
+}

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 <div className='settingsListContainer'>
+      {
+        this.props.dataL10nId
+        ? <div className='settingsListTitle' data-l10n-id={this.props.dataL10nId} />
+        : null
+      }
+      <div className='settingsList'>
+        {this.props.children}
+      </div>
+    </div>
+  }
+}
+
+class SettingItem extends ImmutableComponent {
+  render () {
+    return <div className='settingItem'>
+      {
+        this.props.dataL10nId
+          ? <span data-l10n-id={this.props.dataL10nId} />
+          : null
+      }
+      {this.props.children}
+    </div>
+  }
+}
+
+module.exports = {
+  SettingsList,
+  SettingItem
+}

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)',

app/renderer/components/textbox.js

@@ -0,0 +1,87 @@
+/* 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')
+
+class Textbox extends ImmutableComponent {
+  render () {
+    const className = css(
+      this.props['data-isFormControl'] && styles.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 <input type='text' className={className} {...this.props} />
+  }
+}
+
+class FormTextbox extends ImmutableComponent {
+  render () {
+    return <Textbox data-isFormControl='true' {...this.props} />
+  }
+}
+
+class SettingTextbox extends ImmutableComponent {
+  render () {
+    return <FormTextbox data-isSettings='true' {...this.props} />
+  }
+}
+
+class RecoveryKeyTextbox extends ImmutableComponent {
+  render () {
+    return <SettingTextbox data-isRecoveryKey='true' {...this.props} />
+  }
+}
+
+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'
+  },
+  '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
+}