diff --git a/app/renderer/components/commonForm.js b/app/renderer/components/commonForm.js
index 6e96fabbb1e..47aadf1a8c4 100644
--- a/app/renderer/components/commonForm.js
+++ b/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
+ }
+}
+
class CommonFormClickable extends ImmutableComponent {
render () {
return
@@ -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
}
diff --git a/app/renderer/components/textbox.js b/app/renderer/components/textbox.js
index 6049252dedc..0975925ab13 100644
--- a/app/renderer/components/textbox.js
+++ b/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'
},
diff --git a/js/components/loginRequired.js b/js/components/loginRequired.js
index 1a45513e508..7bf58c9db57 100644
--- a/js/components/loginRequired.js
+++ b/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,18 +90,24 @@ class LoginRequired extends React.Component {
-
+
-
+
{
!this.isFolder
- ?