client/build/components/DropzoneDropItDisplay/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var DropzoneDropItDisplay = function DropzoneDropItDisplay() {
+  return _react.default.createElement("div", {
+    className: "dropzone-dropit-display"
+  }, _react.default.createElement("p", {
+    className: "blue"
+  }, "Drop it."));
+};
+
+var _default = DropzoneDropItDisplay;
+exports.default = _default;

client/build/components/DropzoneInstructionsDisplay/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+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", {
+    className: "info-message-placeholder info-message--failure",
+    id: "input-error-file-selection"
+  }, fileError), _react.default.createElement("p", null, "Drag & drop image or video here to publish"), _react.default.createElement("p", {
+    className: "fine-print"
+  }, "OR"), _react.default.createElement("p", {
+    className: "blue--underlined"
+  }, "CHOOSE FILE"));
+};
+
+var _default = DropzoneInstructionsDisplay;
+exports.default = _default;

client/build/components/DropzonePreview/index.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } _setPrototypeOf(subClass.prototype, superClass && superClass.prototype); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
+
+var PublishPreview =
+/*#__PURE__*/
+function (_React$Component) {
+  function PublishPreview(props) {
+    var _this;
+
+    _classCallCheck(this, PublishPreview);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(PublishPreview).call(this, props));
+    _this.state = {
+      imgSource: '',
+      defaultThumbnail: '/assets/img/video_thumb_default.png'
+    };
+    return _this;
+  }
+
+  _createClass(PublishPreview, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setPreviewImageSource(this.props.file);
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(newProps) {
+      if (newProps.file !== this.props.file) {
+        this.setPreviewImageSource(newProps.file);
+      }
+
+      if (newProps.thumbnail !== this.props.thumbnail) {
+        if (newProps.thumbnail) {
+          this.setPreviewImageSourceFromFile(newProps.thumbnail);
+        } else {
+          this.setState({
+            imgSource: this.state.defaultThumbnail
+          });
+        }
+      }
+    }
+  }, {
+    key: "setPreviewImageSourceFromFile",
+    value: function setPreviewImageSourceFromFile(file) {
+      var _this2 = this;
+
+      var previewReader = new FileReader();
+      previewReader.readAsDataURL(file);
+
+      previewReader.onloadend = function () {
+        _this2.setState({
+          imgSource: previewReader.result
+        });
+      };
+    }
+  }, {
+    key: "setPreviewImageSource",
+    value: function setPreviewImageSource(file) {
+      if (file.type !== 'video/mp4') {
+        this.setPreviewImageSourceFromFile(file);
+      } else {
+        if (this.props.thumbnail) {
+          this.setPreviewImageSourceFromFile(this.props.thumbnail);
+        }
+
+        this.setState({
+          imgSource: this.state.defaultThumbnail
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return _react.default.createElement("img", {
+        id: "dropzone-preview",
+        src: this.state.imgSource,
+        className: this.props.dimPreview ? 'publish-preview-dim' : '',
+        alt: "publish preview"
+      });
+    }
+  }]);
+
+  _inherits(PublishPreview, _React$Component);
+
+  return PublishPreview;
+}(_react.default.Component);
+
+;
+PublishPreview.propTypes = {
+  dimPreview: _propTypes.default.bool.isRequired,
+  file: _propTypes.default.object.isRequired,
+  thumbnail: _propTypes.default.object
+};
+var _default = PublishPreview;
+exports.default = _default;

client/build/components/HorizontalSplit/index.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styleCss = _interopRequireDefault(require("./style.css.js"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -47,11 +45,11 @@ function (_React$Component) {
     key: "render",
     value: function render() {
       return _react.default.createElement("div", {
-        style: _styleCss.default.wrapper
+        className: 'horizontal-split'
       }, _react.default.createElement("div", {
-        style: _styleCss.default.column
+        className: 'column'
       }, this.props.leftSide), _react.default.createElement("div", {
-        style: _styleCss.default.column
+        className: 'column'
       }, this.props.rightSide));
     }
   }]);

client/build/components/HorizontalSplit/style.css.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var wrapper = {
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  alignItems: 'flex-start'
-};
-var column = {
-  width: '45%'
-};
-var _default = {
-  wrapper: wrapper,
-  column: column
-};
-exports.default = _default;

client/build/components/PageContent/index.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styleCss = _interopRequireDefault(require("./style.css.js"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -47,8 +45,7 @@ function (_React$Component) {
     key: "render",
     value: function render() {
       return _react.default.createElement("div", {
-        style: _styleCss.default,
+        className: 'page-content'
-        className: 'row--tall flex-container--column'
       }, this.props.children);
     }
   }]);

client/build/components/PageContent/style.css.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var style = {
-  margin: '2em',
+  margin: '2em' // backgroundColor: 'red',
-  backgroundColor: 'red'
+
 };
 var _default = style;
 exports.default = _default;

client/build/components/PublishPreview/index.js

@@ -7,7 +7,13 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _HorizontalSplit = _interopRequireDefault(require("@components/HorizontalSplit"));
+
+var _Dropzone = _interopRequireDefault(require("@containers/Dropzone"));
+
+var _PublishDetails = _interopRequireDefault(require("@containers/PublishDetails"));
+
+var _PublishTitleInput = _interopRequireDefault(require("@containers/PublishTitleInput"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -32,79 +38,19 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || functio
 var PublishPreview =
 /*#__PURE__*/
 function (_React$Component) {
-  function PublishPreview(props) {
+  function PublishPreview() {
-    var _this;
-
     _classCallCheck(this, PublishPreview);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(PublishPreview).call(this, props));
+    return _possibleConstructorReturn(this, _getPrototypeOf(PublishPreview).apply(this, arguments));
-    _this.state = {
-      imgSource: '',
-      defaultThumbnail: '/assets/img/video_thumb_default.png'
-    };
-    return _this;
   }
 
   _createClass(PublishPreview, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.setPreviewImageSource(this.props.file);
-    }
-  }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(newProps) {
-      if (newProps.file !== this.props.file) {
-        this.setPreviewImageSource(newProps.file);
-      }
-
-      if (newProps.thumbnail !== this.props.thumbnail) {
-        if (newProps.thumbnail) {
-          this.setPreviewImageSourceFromFile(newProps.thumbnail);
-        } else {
-          this.setState({
-            imgSource: this.state.defaultThumbnail
-          });
-        }
-      }
-    }
-  }, {
-    key: "setPreviewImageSourceFromFile",
-    value: function setPreviewImageSourceFromFile(file) {
-      var _this2 = this;
-
-      var previewReader = new FileReader();
-      previewReader.readAsDataURL(file);
-
-      previewReader.onloadend = function () {
-        _this2.setState({
-          imgSource: previewReader.result
-        });
-      };
-    }
-  }, {
-    key: "setPreviewImageSource",
-    value: function setPreviewImageSource(file) {
-      if (file.type !== 'video/mp4') {
-        this.setPreviewImageSourceFromFile(file);
-      } else {
-        if (this.props.thumbnail) {
-          this.setPreviewImageSourceFromFile(this.props.thumbnail);
-        }
-
-        this.setState({
-          imgSource: this.state.defaultThumbnail
-        });
-      }
-    }
-  }, {
     key: "render",
     value: function render() {
-      return _react.default.createElement("img", {
+      return _react.default.createElement("div", null, _react.default.createElement(_PublishTitleInput.default, null), _react.default.createElement(_HorizontalSplit.default, {
-        id: "dropzone-preview",
+        leftSide: _react.default.createElement(_Dropzone.default, null),
-        src: this.state.imgSource,
+        rightSide: _react.default.createElement(_PublishDetails.default, null)
-        className: this.props.dimPreview ? 'publish-preview-dim' : '',
+      }));
-        alt: "publish preview"
-      });
     }
   }]);
 
@@ -114,10 +60,5 @@ function (_React$Component) {
 }(_react.default.Component);
 
 ;
-PublishPreview.propTypes = {
-  dimPreview: _propTypes.default.bool.isRequired,
-  file: _propTypes.default.object.isRequired,
-  thumbnail: _propTypes.default.object
-};
 var _default = PublishPreview;
 exports.default = _default;

client/build/containers/Dropzone/view.js

@@ -9,7 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _file = require("../../utils/file");
 
-var _PublishPreview = _interopRequireDefault(require("@components/PublishPreview"));
+var _DropzonePreview = _interopRequireDefault(require("@components/DropzonePreview"));
+
+var _DropzoneDropItDisplay = _interopRequireDefault(require("@components/DropzoneDropItDisplay"));
+
+var _DropzoneInstructionsDisplay = _interopRequireDefault(require("@components/DropzoneInstructionsDisplay"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -156,7 +160,7 @@ function (_React$Component) {
     key: "render",
     value: function render() {
       return _react.default.createElement("div", {
-        className: "row row--tall flex-container--column"
+        className: "dropzone-wrapper"
       }, _react.default.createElement("form", null, _react.default.createElement("input", {
         className: "input-file",
         type: "file",
@@ -166,8 +170,7 @@ function (_React$Component) {
         onChange: this.handleFileInput,
         encType: "multipart/form-data"
       })), _react.default.createElement("div", {
-        id: "preview-dropzone",
+        className: 'dropzone' + (this.state.dragOver ? ' dropzone--drag-over' : ''),
-        className: 'row row--padded row--tall dropzone' + (this.state.dragOver ? ' dropzone--drag-over' : ''),
         onDrop: this.handleDrop,
         onDragOver: this.handleDragOver,
         onDragEnd: this.handleDragEnd,
@@ -176,43 +179,15 @@ function (_React$Component) {
         onMouseEnter: this.handleMouseEnter,
         onMouseLeave: this.handleMouseLeave,
         onClick: this.handleClick
-      }, this.props.file ? _react.default.createElement("div", null, _react.default.createElement(_PublishPreview.default, {
+      }, this.props.file ? _react.default.createElement("div", null, _react.default.createElement(_DropzonePreview.default, {
         dimPreview: this.state.dimPreview,
         file: this.props.file,
         thumbnail: this.props.thumbnail
-      }), _react.default.createElement("div", {
+      }), this.state.dragOver ? _react.default.createElement(_DropzoneDropItDisplay.default, null) : null, this.state.mouseOver ? _react.default.createElement(_DropzoneInstructionsDisplay.default, {
-        id: "dropzone-text-holder",
+        fileError: this.props.fileError
-        className: 'flex-container--column flex-container--center-center'
+      }) : null) : this.state.dragOver ? _react.default.createElement(_DropzoneDropItDisplay.default, null) : _react.default.createElement(_DropzoneInstructionsDisplay.default, {
-      }, this.state.dragOver ? _react.default.createElement("div", {
+        fileError: this.props.fileError
-        id: "dropzone-dragover"
+      })));
-      }, _react.default.createElement("p", {
-        className: "blue"
-      }, "Drop it.")) : null, this.state.mouseOver ? _react.default.createElement("div", {
-        id: "dropzone-instructions"
-      }, _react.default.createElement("p", {
-        className: "info-message-placeholder info-message--failure",
-        id: "input-error-file-selection"
-      }, this.props.fileError), _react.default.createElement("p", null, "Drag & drop image or video here to publish"), _react.default.createElement("p", {
-        className: "fine-print"
-      }, "OR"), _react.default.createElement("p", {
-        className: "blue--underlined"
-      }, "CHOOSE FILE")) : null)) : _react.default.createElement("div", {
-        id: "dropzone-text-holder",
-        className: 'flex-container--column flex-container--center-center'
-      }, this.state.dragOver ? _react.default.createElement("div", {
-        id: "dropzone-dragover"
-      }, _react.default.createElement("p", {
-        className: "blue"
-      }, "Drop it.")) : _react.default.createElement("div", {
-        id: "dropzone-instructions"
-      }, _react.default.createElement("p", {
-        className: "info-message-placeholder info-message--failure",
-        id: "input-error-file-selection"
-      }, this.props.fileError), _react.default.createElement("p", null, "Drag & drop image or video here to publish"), _react.default.createElement("p", {
-        className: "fine-print"
-      }, "OR"), _react.default.createElement("p", {
-        className: "blue--underlined"
-      }, "CHOOSE FILE")))));
     }
   }]);
 

client/build/containers/PublishDetails/view.js

@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactRouterDom = require("react-router-dom");
 
-var _Dropzone = _interopRequireDefault(require("@containers/Dropzone"));
-
 var _PublishTitleInput = _interopRequireDefault(require("@containers/PublishTitleInput"));
 
 var _PublishUrlInput = _interopRequireDefault(require("@containers/PublishUrlInput"));
@@ -63,16 +61,6 @@ function (_React$Component) {
     key: "render",
     value: function render() {
       return _react.default.createElement("div", {
-        className: "row row--no-bottom"
-      }, _react.default.createElement("div", {
-        className: "column column--10"
-      }, _react.default.createElement(_PublishTitleInput.default, null)), _react.default.createElement("div", {
-        className: "column column--5 column--sml-10"
-      }, _react.default.createElement("div", {
-        className: "row row--padded"
-      }, _react.default.createElement(_Dropzone.default, null))), _react.default.createElement("div", {
-        className: "column column--5 column--sml-10 align-content-top"
-      }, _react.default.createElement("div", {
         id: "publish-active-area",
         className: "row row--padded"
       }, _react.default.createElement("div", {
@@ -102,7 +90,7 @@ function (_React$Component) {
         className: "link--primary",
         target: "_blank",
         href: "https://lbry.io/learn"
-      }, "Read more."))))));
+      }, "Read more."))));
     }
   }]);
 

client/build/containers/PublishTool/view.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Dropzone = _interopRequireDefault(require("@containers/Dropzone"));
 
-var _PublishDetails = _interopRequireDefault(require("@containers/PublishDetails"));
+var _PublishPreview = _interopRequireDefault(require("@components/PublishPreview"));
 
 var _PublishStatus = _interopRequireDefault(require("@containers/PublishStatus"));
 
@@ -54,7 +54,7 @@ function (_React$Component) {
           if (this.props.status) {
             return _react.default.createElement(_PublishStatus.default, null);
           } else {
-            return _react.default.createElement(_PublishDetails.default, null);
+            return _react.default.createElement(_PublishPreview.default, null);
           }
         }
 

client/scss/_dropzone.scss

@@ -1,28 +0,0 @@
-.dropzone, .dropzone--disabled {
-  border: 2px dashed #9b9b9b;
-  text-align: center;
-  position: relative;
-}
-
-.dropzone:hover, .dropzone--drag-over {
-  border: 2px dashed #4156C5;
-  cursor: pointer;
-}
-
-#dropzone-text-holder {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-
-#dropzone-dragover, #dropzone-instructions {
-  padding: 1em;
-}
-
-#dropzone-preview {
-  display: block;
-  width: 100%;
-}
-

client/scss/all.scss

@@ -7,18 +7,20 @@
 @import '_tooltip';
 @import '_link';
 @import '_row';
-@import '_column';
+//@import '_column';
 @import '_info-message';
 @import '_input';
 @import '_button';
 @import '_span';
 @import '_video';
-@import 'asset';
+@import '_asset';
-@import 'asset-preview';
+@import '_asset-preview';
-@import 'dropzone';
+@import 'containers/_dropzone';
-@import 'nav-bar';
+@import '_nav-bar';
-@import 'progress-bar';
+@import '_progress-bar';
-@import 'publish-preview';
+@import '_publish-preview';
-@import 'media-queries';
+@import 'components/_horizontal-split';
+@import 'components/_page-content';
+@import '_media-queries';
 
 

client/scss/components/_horizontal-split.scss

@@ -0,0 +1,9 @@
+.horizontal-split {
+  display       : flex;
+  flex-direction : row;
+  justify-content: space-between;
+  align-items    : flex-start;
+  .column {
+    width: calc(50% - 1em);
+  }
+};

client/scss/components/_page-content.scss

@@ -0,0 +1,10 @@
+.page-content {
+  margin: 2em;
+  background-color: blue;
+  // fill the parent flex container
+  flex: 1 0 auto;
+  // be a flex container for children
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+};

client/scss/containers/_dropzone.scss

@@ -0,0 +1,38 @@
+.dropzone-wrapper {
+  background-color: yellow;
+  // fill the parent flex container
+  flex: 1 0 auto;
+  // be a flex container for children
+  display: flex;
+  flex-direction: column;
+}
+
+.dropzone {
+  border: 2px dashed #9b9b9b;
+  background-color: red;
+  // fill the parent flex container
+  flex: 1 0 auto;
+  // be a flex container for children
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.dropzone:hover, .dropzone--active {
+  border: 2px dashed #4156C5;
+  cursor: pointer;
+}
+
+.dropzone-dropit-display, .dropzone-instructions-display {
+  padding: 1em;
+  text-align: center;
+}
+
+#dropzone-preview {
+  display: block;
+  padding: 1em;
+  width: calc(100% - 2em);
+}
+

client/src/components/DropzoneDropItDisplay/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const DropzoneDropItDisplay = () => {
+  return (
+    <div className='dropzone-dropit-display'>
+      <p className='blue'>Drop it.</p>
+    </div>
+  );
+}
+
+export default DropzoneDropItDisplay;

client/src/components/DropzoneInstructionsDisplay/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const DropzoneInstructionsDisplay = ({fileError}) => {
+  return (
+    <div className='dropzone-instructions-display'>
+      <p className='info-message-placeholder info-message--failure' id='input-error-file-selection'>{fileError}</p>
+      <p>Drag & drop image or video here to publish</p>
+      <p className='fine-print'>OR</p>
+      <p className='blue--underlined'>CHOOSE FILE</p>
+    </div>
+  );
+};
+
+export default DropzoneInstructionsDisplay;

client/src/components/DropzonePreview/index.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class PublishPreview extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      imgSource       : '',
+      defaultThumbnail: '/assets/img/video_thumb_default.png',
+    };
+  }
+  componentDidMount () {
+    this.setPreviewImageSource(this.props.file);
+  }
+  componentWillReceiveProps (newProps) {
+    if (newProps.file !== this.props.file) {
+      this.setPreviewImageSource(newProps.file);
+    }
+    if (newProps.thumbnail !== this.props.thumbnail) {
+      if (newProps.thumbnail) {
+        this.setPreviewImageSourceFromFile(newProps.thumbnail);
+      } else {
+        this.setState({imgSource: this.state.defaultThumbnail});
+      }
+    }
+  }
+  setPreviewImageSourceFromFile (file) {
+    const previewReader = new FileReader();
+    previewReader.readAsDataURL(file);
+    previewReader.onloadend = () => {
+      this.setState({imgSource: previewReader.result});
+    };
+  }
+  setPreviewImageSource (file) {
+    if (file.type !== 'video/mp4') {
+      this.setPreviewImageSourceFromFile(file);
+    } else {
+      if (this.props.thumbnail) {
+        this.setPreviewImageSourceFromFile(this.props.thumbnail);
+      }
+      this.setState({imgSource: this.state.defaultThumbnail});
+    }
+  }
+  render () {
+    return (
+      <img
+        id='dropzone-preview'
+        src={this.state.imgSource}
+        className={this.props.dimPreview ? 'publish-preview-dim' : ''}
+        alt='publish preview'
+      />
+    );
+  }
+};
+
+PublishPreview.propTypes = {
+  dimPreview: PropTypes.bool.isRequired,
+  file      : PropTypes.object.isRequired,
+  thumbnail : PropTypes.object,
+};
+
+export default PublishPreview;

client/src/components/HorizontalSplit/index.jsx

@@ -1,18 +1,16 @@
 import React from 'react';
 
-import style from './style.css.js';
-
 class HorizontalSplit extends React.Component {
   shouldComponentUpdate () {
     return false;
   }
   render () {
     return (
-      <div style={style.wrapper}>
+      <div className={'horizontal-split'}>
-        <div style={style.column}>
+        <div className={'column'}>
           {this.props.leftSide}
         </div>
-        <div style={style.column}>
+        <div className={'column'}>
           {this.props.rightSide}
         </div>
       </div>

client/src/components/HorizontalSplit/style.css.js

@@ -1,15 +0,0 @@
-const wrapper = {
-  display       : 'flex',
-  flexDirection : 'row',
-  justifyContent: 'space-between',
-  alignItems    : 'flex-start',
-};
-
-const column = {
-  width: '45%',
-};
-
-export default {
-  wrapper,
-  column,
-};

client/src/components/PageContent/index.jsx

@@ -1,14 +1,12 @@
 import React from 'react';
 
-import style from './style.css.js';
-
 class PageContent extends React.Component {
   shouldComponentUpdate () {
     return false;
   }
   render () {
     return (
-      <div style={style} className={'row--tall flex-container--column'}>
+      <div className={'page-content'}>
         {this.props.children}
       </div>
     );

client/src/components/PageContent/style.css.js

@@ -1,6 +0,0 @@
-const style = {
-  margin         : '2em',
-  backgroundColor: 'red',
-};
-
-export default style;

client/src/components/PublishPreview/index.jsx

@@ -1,62 +1,21 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import HorizontalSplit from '@components/HorizontalSplit';
+import Dropzone from '@containers/Dropzone';
+import PublishDetails from '@containers/PublishDetails';
+import PublishTitleInput from '@containers/PublishTitleInput';
 
 class PublishPreview extends React.Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      imgSource       : '',
-      defaultThumbnail: '/assets/img/video_thumb_default.png',
-    };
-  }
-  componentDidMount () {
-    this.setPreviewImageSource(this.props.file);
-  }
-  componentWillReceiveProps (newProps) {
-    if (newProps.file !== this.props.file) {
-      this.setPreviewImageSource(newProps.file);
-    }
-    if (newProps.thumbnail !== this.props.thumbnail) {
-      if (newProps.thumbnail) {
-        this.setPreviewImageSourceFromFile(newProps.thumbnail);
-      } else {
-        this.setState({imgSource: this.state.defaultThumbnail});
-      }
-    }
-  }
-  setPreviewImageSourceFromFile (file) {
-    const previewReader = new FileReader();
-    previewReader.readAsDataURL(file);
-    previewReader.onloadend = () => {
-      this.setState({imgSource: previewReader.result});
-    };
-  }
-  setPreviewImageSource (file) {
-    if (file.type !== 'video/mp4') {
-      this.setPreviewImageSourceFromFile(file);
-    } else {
-      if (this.props.thumbnail) {
-        this.setPreviewImageSourceFromFile(this.props.thumbnail);
-      }
-      this.setState({imgSource: this.state.defaultThumbnail});
-    }
-  }
   render () {
     return (
-      <img
+      <div>
-        id='dropzone-preview'
+        <PublishTitleInput />
-        src={this.state.imgSource}
+        <HorizontalSplit
-        className={this.props.dimPreview ? 'publish-preview-dim' : ''}
+          leftSide={<Dropzone />}
-        alt='publish preview'
+          rightSide={<PublishDetails />}
-      />
+        />
+      </div>
     );
   }
 };
 
-PublishPreview.propTypes = {
-  dimPreview: PropTypes.bool.isRequired,
-  file      : PropTypes.object.isRequired,
-  thumbnail : PropTypes.object,
-};
-
 export default PublishPreview;

client/src/containers/Dropzone/view.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { validateFile } from '../../utils/file';
-import PublishPreview from '@components/PublishPreview';
+import DropzonePreview from '@components/DropzonePreview';
+import DropzoneDropItDisplay from '@components/DropzoneDropItDisplay';
+import DropzoneInstructionsDisplay from '@components/DropzoneInstructionsDisplay';
 
 class Dropzone extends React.Component {
   constructor (props) {
@@ -80,53 +82,48 @@ class Dropzone extends React.Component {
   }
   render () {
     return (
-      <div className='row row--tall flex-container--column'>
+      <div className='dropzone-wrapper'>
         <form>
-          <input className='input-file' type='file' id='file_input' name='file_input' accept='video/*,image/*' onChange={this.handleFileInput} encType='multipart/form-data' />
+          <input
+            className='input-file'
+            type='file'
+            id='file_input'
+            name='file_input'
+            accept='video/*,image/*'
+            onChange={this.handleFileInput}
+            encType='multipart/form-data'
+          />
         </form>
-        <div id='preview-dropzone' className={'row row--padded row--tall dropzone' + (this.state.dragOver ? ' dropzone--drag-over' : '')} onDrop={this.handleDrop} onDragOver={this.handleDragOver} onDragEnd={this.handleDragEnd} onDragEnter={this.handleDragEnter} onDragLeave={this.handleDragLeave} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.handleClick}>
+        <div
+          className={'dropzone' + (this.state.dragOver ? ' dropzone--drag-over' : '')}
+          onDrop={this.handleDrop}
+          onDragOver={this.handleDragOver}
+          onDragEnd={this.handleDragEnd}
+          onDragEnter={this.handleDragEnter}
+          onDragLeave={this.handleDragLeave}
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+          onClick={this.handleClick}>
           {this.props.file ? (
             <div>
-              <PublishPreview
+              <DropzonePreview
                 dimPreview={this.state.dimPreview}
                 file={this.props.file}
                 thumbnail={this.props.thumbnail}
               />
-              <div id='dropzone-text-holder' className={'flex-container--column flex-container--center-center'}>
+              { this.state.dragOver ? <DropzoneDropItDisplay /> : null }
-                { this.state.dragOver ? (
+              { this.state.mouseOver ? (
-                  <div id='dropzone-dragover'>
+                <DropzoneInstructionsDisplay
-                    <p className='blue'>Drop it.</p>
+                  fileError={this.props.fileError}
-                  </div>
+                />
-                ) : (
+              ) : null }
-                  null
-                )}
-                { this.state.mouseOver ? (
-                  <div id='dropzone-instructions'>
-                    <p className='info-message-placeholder info-message--failure' id='input-error-file-selection'>{this.props.fileError}</p>
-                    <p>Drag & drop image or video here to publish</p>
-                    <p className='fine-print'>OR</p>
-                    <p className='blue--underlined'>CHOOSE FILE</p>
-                  </div>
-                ) : (
-                  null
-                )}
-              </div>
             </div>
           ) : (
-            <div id='dropzone-text-holder' className={'flex-container--column flex-container--center-center'}>
+            this.state.dragOver ? <DropzoneDropItDisplay /> : (
-              { this.state.dragOver ? (
+              <DropzoneInstructionsDisplay
-                <div id='dropzone-dragover'>
+                fileError={this.props.fileError}
-                  <p className='blue'>Drop it.</p>
+              />
-                </div>
+            )
-              ) : (
-                <div id='dropzone-instructions'>
-                  <p className='info-message-placeholder info-message--failure' id='input-error-file-selection'>{this.props.fileError}</p>
-                  <p>Drag & drop image or video here to publish</p>
-                  <p className='fine-print'>OR</p>
-                  <p className='blue--underlined'>CHOOSE FILE</p>
-                </div>
-              )}
-            </div>
           )}
         </div>
       </div>

client/src/containers/PublishDetails/view.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { withRouter } from 'react-router-dom';
-import Dropzone from '@containers/Dropzone';
 import PublishTitleInput from '@containers/PublishTitleInput';
 import PublishUrlInput from '@containers/PublishUrlInput';
 import PublishThumbnailInput from '@containers/PublishThumbnailInput';
@@ -17,43 +16,29 @@ class PublishDetails extends React.Component {
   }
   render () {
     return (
-      <div className='row row--no-bottom'>
+      <div id='publish-active-area' className='row row--padded'>
-        <div className='column column--10'>
+        <div className='row row--padded row--no-top row--wide'>
-          <PublishTitleInput />
+          <PublishUrlInput />
         </div>
-        {/* left column */}
+        <div className='row row--padded row--no-top row--wide'>
-        <div className='column column--5 column--sml-10' >
+          <ChannelSelect />
-          <div className='row row--padded'>
-            <Dropzone />
-          </div>
         </div>
-        {/* right column */}
+        { (this.props.file.type === 'video/mp4') && (
-        <div className='column column--5 column--sml-10 align-content-top'>
+          <div className='row row--padded row--no-top row--wide '>
-          <div id='publish-active-area' className='row row--padded'>
+            <PublishThumbnailInput />
-            <div className='row row--padded row--no-top row--wide'>
-              <PublishUrlInput />
-            </div>
-            <div className='row row--padded row--no-top row--wide'>
-              <ChannelSelect />
-            </div>
-            { (this.props.file.type === 'video/mp4') && (
-              <div className='row row--padded row--no-top row--wide '>
-                <PublishThumbnailInput />
-              </div>
-            )}
-            <div className='row row--padded row--no-top row--no-bottom row--wide'>
-              <PublishMetadataInputs />
-            </div>
-            <div className='row row--wide align-content-center'>
-              <button id='publish-submit' className='button--primary button--large' onClick={this.onPublishSubmit}>Publish</button>
-            </div>
-            <div className='row row--padded row--no-bottom align-content-center'>
-              <button className='button--cancel' onClick={this.props.clearFile}>Cancel</button>
-            </div>
-            <div className='row row--short align-content-center'>
-              <p className='fine-print'>By clicking 'Publish', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a className='link--primary' target='_blank' href='https://lbry.io/learn'>Read more.</a></p>
-            </div>
           </div>
+        )}
+        <div className='row row--padded row--no-top row--no-bottom row--wide'>
+          <PublishMetadataInputs />
+        </div>
+        <div className='row row--wide align-content-center'>
+          <button id='publish-submit' className='button--primary button--large' onClick={this.onPublishSubmit}>Publish</button>
+        </div>
+        <div className='row row--padded row--no-bottom align-content-center'>
+          <button className='button--cancel' onClick={this.props.clearFile}>Cancel</button>
+        </div>
+        <div className='row row--short align-content-center'>
+          <p className='fine-print'>By clicking 'Publish', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a className='link--primary' target='_blank' href='https://lbry.io/learn'>Read more.</a></p>
         </div>
       </div>
     );

client/src/containers/PublishTool/view.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Dropzone from '@containers/Dropzone';
-import PublishDetails from '@containers/PublishDetails';
+import PublishPreview from '@components/PublishPreview';
 import PublishStatus from '@containers/PublishStatus';
 import PublishDisabledMessage from '@containers/PublishDisabledMessage';
 
@@ -17,7 +17,7 @@ class PublishTool extends React.Component {
             <PublishStatus />
           );
         } else {
-          return <PublishDetails />;
+          return <PublishPreview />;
         }
       }
       return <Dropzone />;