Fix bootstrap and make inputs larger

This commit is contained in:
Eric Schultz 2018-10-01 15:04:04 -05:00
parent 1f4314a31e
commit 60760fbb8d
5 changed files with 26 additions and 12 deletions

View file

@ -51,34 +51,44 @@ class NonprofitInfoForm extends React.Component<NonprofitInfoFormProps & Injecte
render() {
return <fieldset >
<BasicField field={this.props.form.$("organization_name")}
label={this.props.intl.formatMessage({id:'registration.wizard.nonprofit.name.label' })}
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.name.placeholder'})}
inputClassNames={"input-lg"}
/>
<BasicField field={this.props.form.$('website')}
label={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.website.label'})}
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.website.placeholder'})}/>
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.website.placeholder'})}
inputClassNames={"input-lg"}/>
<TwoColumnFields>
<BasicField field={this.props.form.$('org_email')}
label={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.email.label'})}
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.email.placeholder'})}/>
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.email.placeholder'})}
inputClassNames={"input-lg"}/>
<BasicField field={this.props.form.$('org_phone')}
label={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.phone.label'})}
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.phone.placeholder'})}/>
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.phone.placeholder'})}
inputClassNames={"input-lg"}/>
</TwoColumnFields>
<ThreeColumnFields>
<BasicField field={this.props.form.$('city')}
label={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.city.label'})}
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.city.placeholder'})}/>
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.city.placeholder'})}
inputClassNames={"input-lg"}/>
<BasicField field={this.props.form.$('state')}
label={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.state.label'})}
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.state.placeholder'})}/>
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.state.placeholder'})}
inputClassNames={"input-lg"}/>
<BasicField field={this.props.form.$('zip')}
label={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.zip.label' })}
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.zip.placeholder'})}/>
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.zip.placeholder'})}
inputClassNames={"input-lg"}/>
</ThreeColumnFields>
<ProgressableButton onClick={this.props.form.onSubmit} className="button" disabled={!this.props.form.isValid} buttonText={this.props.intl.formatMessage({id: this.props.buttonText})}
inProgress={this.props.form.submitting || this.props.form.container().submitting} disableOnProgress={true}/>
</fieldset>

View file

@ -16,7 +16,7 @@ class RegistrationPage extends React.Component<RegistrationPageProps & InjectedI
render() {
return <div className="container"><h1><FormattedMessage id="registration.get_started.header"/></h1><p><FormattedMessage id="registration.get_started.description"/></p><RegistrationWizard/></div>
return <div className="tw-bs"><div className="container"><h1><FormattedMessage id="registration.get_started.header"/></h1><p><FormattedMessage id="registration.get_started.description"/></p><RegistrationWizard/></div></div>
}
}

View file

@ -47,18 +47,22 @@ class UserInfoForm extends React.Component<UserInfoFormProps & InjectedIntlProps
<BasicField field={this.props.form.$("name")}
label={
this.props.intl.formatMessage({id: "registration.wizard.contact.name.label"})}
placeholder={this.props.intl.formatMessage({id: "registration.wizard.contact.name.placeholder"})}/>
placeholder={this.props.intl.formatMessage({id: "registration.wizard.contact.name.placeholder"})}
inputClassNames={"input-lg"}/>
<BasicField field={this.props.form.$('email')}
label={this.props.intl.formatMessage({id: "registration.wizard.contact.email.label"})}
placeholder={this.props.intl.formatMessage({id: "registration.wizard.contact.email.placeholder"})}
inputClassNames={"input-lg"}
/>
</TwoColumnFields>
<BasicField field={this.props.form.$('password')}
label={this.props.intl.formatMessage({id:'registration.wizard.contact.password.label'})}
inputClassNames={"input-lg"}
/>
<BasicField field={this.props.form.$('password_confirmation')}
label={this.props.intl.formatMessage({id:'registration.wizard.contact.password_confirmation.label'})}
inputClassNames={"input-lg"}
/>

View file

@ -105,9 +105,9 @@ class InnerSessionLoginForm extends React.Component<SessionLoginFormProps & Inje
return <form onSubmit={this.form.onSubmit}>
<BasicField field={this.form.$('email')}
label={this.props.intl.formatMessage({id: 'login.email'})}/>
label={this.props.intl.formatMessage({id: 'login.email'})} inputClassNames={"input-lg"}/>
<BasicField field={this.form.$('password')}
label={this.props.intl.formatMessage({id: 'login.password'})}/>
label={this.props.intl.formatMessage({id: 'login.password'})} inputClassNames={"input-lg"}/>
{errorDiv}
<div className={'form-group'}>
<ProgressableButton onClick={this.form.onSubmit} className="button" disabled={!this.form.isValid || this.form.submitting} inProgress={this.form.submitting}

View file

@ -11,11 +11,11 @@ export interface SessionLoginPageProps
class SessionLoginPage extends React.Component<SessionLoginPageProps & InjectedIntlProps, {}> {
render() {
return <div className="container"><div className="row"><div className={'col-sm-6'}>
return <div className="tw-bs"><div className="container"><div className="row"><div className={'col-sm-6'}>
<h1><FormattedMessage id="login.header"/></h1>
<SessionLoginForm buttonText="login.login" buttonTextOnProgress="login.logging_in"/>
</div></div>
</div>;
</div></div>;
}
}