Style MailChimp import
[MAILPOET-1808]
This commit is contained in:
@@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user