Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Style paste component

Browse Source 
[MAILPOET-1808]
This commit is contained in:
Pavel Dohnal
2019-04-11 11:32:43 +02:00
committed by M. Shull
parent 0bdf42b183
commit a685f1632b
3 changed files with 50 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
assets/css/src/components/_importExport.scss
View File

@@ -129,7 +129,7 @@ span {
margin: 20px 0px; margin: 20px 0px;
} }
.import-selection-form { .import_selection_form {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
@@ -138,4 +138,30 @@ span {
margin-right: 2.5em; margin-right: 2.5em;
} }
} }
.import_heading {
color: #23282d;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
.description {
color: #666;
font-size: 13px;
font-style: italic;
font-weight: 600;
margin: 2px 0 5px;
}
.import_paste_texts {
margin-right: 25px;
width: 300px;
}
.import_method_paste {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
} }

42
assets/js/src/subscribers/importExport/import/step_method_selection/method_paste.jsx
View File

@@ -17,25 +17,27 @@ const MethodPaste = ({ setInputValid, setInputInvalid }) => {
}; };
return ( return (
<div> <>
<label htmlFor="paste_input"> <label htmlFor="paste_input" className="import_method_paste">
<span>{MailPoet.I18n.t('pasteLabel')}</span> <div className="import_paste_texts">
<p className="description"> <span className="import_heading">{MailPoet.I18n.t('pasteLabel')}</span>
{ReactStringReplace( <p className="description">
MailPoet.I18n.t('pasteDescription'), {ReactStringReplace(
/\[link\](.*?)\[\/link\]/, MailPoet.I18n.t('pasteDescription'),
match => ( /\[link\](.*?)\[\/link\]/,
<a match => (
href={`${kbLink}`} <a
key="kb-link" href={`${kbLink}`}
target="_blank" key="kb-link"
rel="noopener noreferrer" target="_blank"
> rel="noopener noreferrer"
{ match } >
</a> { match }
) </a>
)} )
</p> )}
</p>
</div>
<textarea <textarea
id="paste_input" id="paste_input"
rows="15" rows="15"
@@ -44,7 +46,7 @@ const MethodPaste = ({ setInputValid, setInputInvalid }) => {
onChange={onChange} onChange={onChange}
/> />
</label> </label>
</div> </>
); );
}; };

2
assets/js/src/subscribers/importExport/import/step_method_selection/select_import_method.jsx
View File

@@ -9,7 +9,7 @@ function SelectImportMethod({
onMethodChange, onMethodChange,
}) { }) {
const renderSelection = () => ( const renderSelection = () => (
<form className="import-selection-form"> <form className="import_selection_form">
<span>{MailPoet.I18n.t('methodSelectionHead')}</span> <span>{MailPoet.I18n.t('methodSelectionHead')}</span>
<label htmlFor="import-paste-method"> <label htmlFor="import-paste-method">
<input <input