centered dropzone instruction text

This commit is contained in:
bill bittner 2018-07-11 17:06:06 -07:00
parent 5c62b98d53
commit eb2f60d6af
2 changed files with 29 additions and 12 deletions

View file

@ -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;

View file

@ -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>
);
};