Style MailChimp import

[MAILPOET-1808]
This commit is contained in:
Pavel Dohnal
2019-04-15 11:33:00 +02:00
committed by M. Shull
parent e198152dda
commit f01680a9f1
2 changed files with 34 additions and 17 deletions

View File

@@ -164,4 +164,23 @@ span {
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.mailpoet_import_mailchimp {
.mailpoet_mailchimp_key, .mailpoet_mailchimp_lists {
align-items: center;
display: flex;
flex-wrap: nowrap;
margin-bottom: 40px;
}
.mailpoet_mailchimp_key_input {
align-items: center;
display: flex;
margin-right: 20px;
}
.import_heading {
display: block;
width: 300px;
}
}
} }

View File

@@ -69,10 +69,8 @@ const MethodMailChimp = ({ onFinish }) => {
const showListsSelection = () => { const showListsSelection = () => {
if (!mailChimpLoadedLists) return null; if (!mailChimpLoadedLists) return null;
return ( return (
<> <div className="mailpoet_mailchimp_lists">
<div> <span className="import_heading">{MailPoet.I18n.t('methodMailChimpSelectList')}</span>
<span className="import_heading">{MailPoet.I18n.t('methodMailChimpSelectList')}</span>
</div>
<Selection <Selection
field={{ field={{
id: 'segments', id: 'segments',
@@ -84,7 +82,7 @@ const MethodMailChimp = ({ onFinish }) => {
}} }}
onValueChange={e => setSelectedLists(e.target.value)} onValueChange={e => setSelectedLists(e.target.value)}
/> />
</> </div>
); );
}; };
@@ -94,16 +92,16 @@ const MethodMailChimp = ({ onFinish }) => {
); );
return ( return (
<> <div className="mailpoet_import_mailchimp">
<label htmlFor="paste_input" className="import_method_paste"> <div className="mailpoet_mailchimp_key">
<div> <label htmlFor="mailpoet_mailchimp_key_input" className="mailpoet_mailchimp_key_input">
<span className="import_heading">{MailPoet.I18n.t('methodMailChimpLabel')}</span> <span className="import_heading">{MailPoet.I18n.t('methodMailChimpLabel')}</span>
</div> <input
<input id="mailpoet_mailchimp_key_input"
id="paste_input" type="text"
type="text" onChange={keyChange}
onChange={keyChange} />
/> </label>
<button className="button" type="button" onClick={verifyButtonClicked}> <button className="button" type="button" onClick={verifyButtonClicked}>
{MailPoet.I18n.t('methodMailChimpVerify')} {MailPoet.I18n.t('methodMailChimpVerify')}
</button> </button>
@@ -113,14 +111,14 @@ const MethodMailChimp = ({ onFinish }) => {
: null : null
} }
</span> </span>
{showListsSelection()} </div>
</label> {showListsSelection()}
<PreviousNextStepButtons <PreviousNextStepButtons
canGoNext={Array.isArray(selectedLists) && selectedLists.length > 0} canGoNext={Array.isArray(selectedLists) && selectedLists.length > 0}
hidePrevious hidePrevious
onNextAction={process} onNextAction={process}
/> />
</> </div>
); );
}; };