Pulled common styles into a file to be shared w/ Textbox + Dropdown

Implement feedback from #6689 (review) Auditors: @luixxiul
brave · Jan 25, 2017 · 7739714 · 7739714
1 parent d9d7483
commit 7739714
Show file tree

Hide file tree

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