centered dropzone instruction text
This commit is contained in:
parent
5c62b98d53
commit
eb2f60d6af
2 changed files with 29 additions and 12 deletions
|
@ -9,22 +9,26 @@ var _react = _interopRequireDefault(require("react"));
|
|||
|
||||
var _FormFeedbackDisplay = _interopRequireDefault(require("@components/FormFeedbackDisplay"));
|
||||
|
||||
var _Row = _interopRequireDefault(require("@components/Row"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var DropzoneInstructionsDisplay = function DropzoneInstructionsDisplay(_ref) {
|
||||
var fileError = _ref.fileError;
|
||||
return _react.default.createElement("div", {
|
||||
className: 'dropzone-instructions-display'
|
||||
}, _react.default.createElement("p", {
|
||||
}, _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
|
||||
className: 'text--large'
|
||||
}, "Drag & drop image or video here to publish"), _react.default.createElement("p", {
|
||||
}, "Drag & drop image or video here to publish")), _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
|
||||
className: 'text--small'
|
||||
}, "OR"), _react.default.createElement("p", {
|
||||
}, "OR")), fileError ? _react.default.createElement("div", null, _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
|
||||
className: 'text--large text--underline'
|
||||
}, "CHOOSE FILE"), _react.default.createElement(_FormFeedbackDisplay.default, {
|
||||
}, "CHOOSE FILE")), _react.default.createElement(_FormFeedbackDisplay.default, {
|
||||
errorMessage: fileError,
|
||||
defaultMessage: false
|
||||
}));
|
||||
})) : _react.default.createElement("p", {
|
||||
className: 'text--large text--underline'
|
||||
}, "CHOOSE FILE"));
|
||||
};
|
||||
|
||||
var _default = DropzoneInstructionsDisplay;
|
||||
|
|
|
@ -1,16 +1,29 @@
|
|||
import React from 'react';
|
||||
import FormFeedbackDisplay from '@components/FormFeedbackDisplay';
|
||||
import Row from '@components/Row';
|
||||
|
||||
const DropzoneInstructionsDisplay = ({fileError}) => {
|
||||
return (
|
||||
<div className={'dropzone-instructions-display'}>
|
||||
<p className={'text--large'}>Drag & drop image or video here to publish</p>
|
||||
<p className={'text--small'}>OR</p>
|
||||
<p className={'text--large text--underline'}>CHOOSE FILE</p>
|
||||
<FormFeedbackDisplay
|
||||
errorMessage={fileError}
|
||||
defaultMessage={false}
|
||||
/>
|
||||
<Row>
|
||||
<p className={'text--large'}>Drag & drop image or video here to publish</p>
|
||||
</Row>
|
||||
<Row>
|
||||
<p className={'text--small'}>OR</p>
|
||||
</Row>
|
||||
{ fileError ? (
|
||||
<div>
|
||||
<Row>
|
||||
<p className={'text--large text--underline'}>CHOOSE FILE</p>
|
||||
</Row>
|
||||
<FormFeedbackDisplay
|
||||
errorMessage={fileError}
|
||||
defaultMessage={false}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<p className={'text--large text--underline'}>CHOOSE FILE</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Add table
Reference in a new issue