Added CommonFormTextbox and commonFormStyles to commonForm.js

Also:
- Replaced aphrodite with aphrodite/no-important on textbox.js
- Moved the styles from loginRequired.js to commonForm.js

Auditors:

Test Plan: n/a

app/renderer/components/commonForm.js

@@ -10,6 +10,7 @@ const globalStyles = require('./styles/global')
 const commonStyles = require('./styles/commonStyles')
 
 const {FormDropdown} = require('./dropdown')
+const {FormTextbox} = require('./textbox')
 
 class CommonForm extends ImmutableComponent {
   render () {
@@ -23,6 +24,12 @@ class CommonFormDropdown extends ImmutableComponent {
   }
 }
 
+class CommonFormTextbox extends ImmutableComponent {
+  render () {
+    return <FormTextbox data-isCommonForm='true' {...this.props} />
+  }
+}
+
 class CommonFormClickable extends ImmutableComponent {
   render () {
     return <div className={css(styles.CommonFormClickable)} {...this.props} />
@@ -71,6 +78,7 @@ const styles = StyleSheet.create({
     padding: 0,
     top: '40px',
     cursor: 'default',
+    width: '100%',
     maxWidth: '422px',
     WebkitUserSelect: 'none'
 
@@ -109,13 +117,42 @@ const styles = StyleSheet.create({
   }
 })
 
+const commonFormStyles = StyleSheet.create({
+  sectionWrapper: {
+    display: 'flex',
+    justifyContent: 'space-between'
+  },
+  inputWrapper: {
+    display: 'flex',
+    flexFlow: 'column',
+    justifyContent: 'space-around'
+  },
+  inputWrapper__label: {
+    marginRight: `calc(${globalStyles.spacing.dialogInsideMargin} / 2)`
+  },
+  inputWrapper__input: {
+    flexGrow: 1
+  },
+  input__bottomRow: {
+    marginTop: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
+  },
+  input__marginRow: {
+    marginTop: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
+  },
+  input__box: {
+    fontSize: globalStyles.fontSize.flyoutDialog
+  }
+})
+
 module.exports = {
   CommonForm,
   CommonFormDropdown,
+  CommonFormTextbox,
   CommonFormClickable,
   CommonFormSection,
   CommonFormTitle,
   CommonFormSubSection,
   CommonFormButtonWrapper,
-  CommonFormBottomWrapper
+  CommonFormBottomWrapper,
+  commonFormStyles
 }

app/renderer/components/textbox.js

@@ -4,7 +4,7 @@
 
 const React = require('react')
 const ImmutableComponent = require('../../../js/components/immutableComponent')
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('./styles/global')
 const commonStyles = require('./styles/commonStyles')
 
@@ -14,8 +14,9 @@ class Textbox extends ImmutableComponent {
     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-isCommonForm'] && styles.isCommonForm,
+      this.props['data-isSettings'] && styles.isSettings,
       this.props['data-isRecoveryKeyTextbox'] && styles.recoveryKeys
     )
 
@@ -73,6 +74,10 @@ const styles = StyleSheet.create({
       outlineWidth: '1px'
     }
   },
+  isCommonForm: {
+    fontSize: globalStyles.fontSize.flyoutDialog,
+    width: '100%'
+  },
   isSettings: {
     width: '280px'
   },

js/components/loginRequired.js

@@ -9,17 +9,18 @@ const appActions = require('../actions/appActions')
 const KeyCodes = require('../../app/common/constants/keyCodes')
 const urlResolve = require('url').resolve
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const commonStyles = require('../../app/renderer/components/styles/commonStyles')
+
 const {
   CommonForm,
   CommonFormSection,
   CommonFormTitle,
-  CommonFormButtonWrapper
+  CommonFormTextbox,
+  CommonFormButtonWrapper,
+  commonFormStyles
 } = require('../../app/renderer/components/commonForm')
 
-const {StyleSheet, css} = require('aphrodite/no-important')
-const globalStyles = require('../../app/renderer/components/styles/global')
-const commonStyles = require('../../app/renderer/components/styles/commonStyles')
-
 class LoginRequired extends React.Component {
   constructor () {
     super()
@@ -89,38 +90,40 @@ class LoginRequired extends React.Component {
         <CommonFormSection data-l10n-id='basicAuthMessage' data-l10n-args={JSON.stringify(l10nArgs)} />
         <CommonFormSection>
           <div className={css(styles.sectionWrapper)}>
-            <div data-test-id='loginLabel' className={css(styles.inputWrapper, styles.inputWrapper__label)}>
+            <div data-test-id='loginLabel'
+              className={css(commonFormStyles.inputWrapper,
+              commonFormStyles.inputWrapper__label
+            )}>
               <label data-l10n-id='basicAuthUsernameLabel' htmlFor='loginUsername' />
-              <label className={css(styles.input__bottomRow)} data-l10n-id='basicAuthPasswordLabel' htmlFor='loginPassword' />
+              <label className={css(commonFormStyles.input__bottomRow)} data-l10n-id='basicAuthPasswordLabel' htmlFor='loginPassword' />
             </div>
             {
               !this.isFolder
-              ? <div id='loginInput' className={css(styles.inputWrapper, styles.inputWrapper__input)}>
+              ? <div id='loginInput' className={css(
+                  commonFormStyles.inputWrapper,
+                  commonFormStyles.inputWrapper__input
+                )}>
                 <input className={css(
                   commonStyles.formControl,
                   commonStyles.textbox,
                   commonStyles.textbox__outlineable,
-                  styles.input__box
+                  commonFormStyles.input__box
                 )}
                   spellCheck='false'
                   onKeyDown={this.onKeyDown}
                   onChange={this.onUsernameChange}
                   value={this.state.username}
                   ref={(loginUsername) => { this.loginUsername = loginUsername }}
                 />
-                <input className={css(
-                  commonStyles.formControl,
-                  commonStyles.textbox,
-                  commonStyles.textbox__outlineable,
-                  styles.input__box,
-                  styles.input__bottomRow
-                )}
-                  spellCheck='false'
-                  type='password'
-                  onKeyDown={this.onKeyDown}
-                  onChange={this.onPasswordChange}
-                  value={this.state.password}
-                />
+                <div className={css(commonFormStyles.input__marginRow)}>
+                  <CommonFormTextbox
+                    spellCheck='false'
+                    type='password'
+                    onKeyDown={this.onKeyDown}
+                    onChange={this.onPasswordChange}
+                    value={this.state.password}
+                  />
+                </div>
               </div>
               : null
             }
@@ -141,23 +144,6 @@ const styles = StyleSheet.create({
   sectionWrapper: {
     display: 'flex',
     justifyContent: 'space-between'
-  },
-  inputWrapper: {
-    display: 'flex',
-    flexFlow: 'column',
-    justifyContent: 'space-around'
-  },
-  inputWrapper__label: {
-    marginRight: `calc(${globalStyles.spacing.dialogInsideMargin} / 2)`
-  },
-  inputWrapper__input: {
-    flexGrow: 1
-  },
-  input__bottomRow: {
-    marginTop: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
-  },
-  input__box: {
-    fontSize: globalStyles.fontSize.flyoutDialog
   }
 })