fixed publish preview columns

client/build/components/AboutPageContent/index.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _AboutSpeechOne = _interopRequireDefault(require("@components/AboutSpeechOne"));
-
-var _AboutSpeechTwo = _interopRequireDefault(require("@components/AboutSpeechTwo"));
-
-var _HorizontalSplit = _interopRequireDefault(require("@components/HorizontalSplit"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var AboutPageContent = function AboutPageContent() {
-  return _react.default.createElement(_HorizontalSplit.default, {
-    leftSide: _react.default.createElement(_AboutSpeechOne.default, null),
-    rightSide: _react.default.createElement(_AboutSpeechTwo.default, null)
-  });
-};
-
-var _default = AboutPageContent;
-exports.default = _default;

client/build/components/AboutSpeechOne/index.js

@@ -1,35 +0,0 @@
-"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 AboutSpeechOne = function AboutSpeechOne() {
-  return _react.default.createElement("div", null, _react.default.createElement("p", {
-    className: "pull-quote"
-  }, "Spee.ch is an open-source project.  Please contribute to the existing site, or fork it and make your own."), _react.default.createElement("p", null, _react.default.createElement("a", {
-    className: "link--primary",
-    target: "_blank",
-    href: "https://twitter.com/spee_ch"
-  }, "TWITTER")), _react.default.createElement("p", null, _react.default.createElement("a", {
-    className: "link--primary",
-    target: "_blank",
-    href: "https://github.com/lbryio/spee.ch"
-  }, "GITHUB")), _react.default.createElement("p", null, _react.default.createElement("a", {
-    className: "link--primary",
-    target: "_blank",
-    href: "https://discord.gg/YjYbwhS"
-  }, "DISCORD CHANNEL")), _react.default.createElement("p", null, _react.default.createElement("a", {
-    className: "link--primary",
-    target: "_blank",
-    href: "https://github.com/lbryio/spee.ch/blob/master/README.md"
-  }, "DOCUMENTATION")));
-};
-
-var _default = AboutSpeechOne;
-exports.default = _default;

client/build/components/AboutSpeechTwo/index.js

@@ -1,32 +0,0 @@
-"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 AboutSpeechTwo = function AboutSpeechTwo() {
-  return _react.default.createElement("div", null, _react.default.createElement("p", null, "Spee.ch is a media-hosting site that reads from and publishes content to the ", _react.default.createElement("a", {
-    className: "link--primary",
-    href: "https://lbry.io"
-  }, "LBRY"), " blockchain."), _react.default.createElement("p", null, "Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the ", _react.default.createElement("a", {
-    className: "link--primary",
-    href: "https://lbry.io/get"
-  }, "LBRY"), " network.  This means that your images are stored in multiple locations without a single point of failure."), _react.default.createElement("h3", null, "Contribute"), _react.default.createElement("p", null, "If you have an idea for your own spee.ch-like site on top of LBRY, fork our ", _react.default.createElement("a", {
-    className: "link--primary",
-    href: "https://github.com/lbryio/spee.ch"
-  }, "github repo"), " and go to town!"), _react.default.createElement("p", null, "If you want to improve spee.ch, join our ", _react.default.createElement("a", {
-    className: "link--primary",
-    href: "https://chat.lbry.io"
-  }, "discord channel"), " or solve one of our ", _react.default.createElement("a", {
-    className: "link--primary",
-    href: "https://github.com/lbryio/spee.ch/issues"
-  }, "github issues"), "."));
-};
-
-var _default = AboutSpeechTwo;
-exports.default = _default;

client/build/components/AssetPreview/view.js

@@ -1,54 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactRouterDom = require("react-router-dom");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var AssetPreview = function AssetPreview(_ref) {
-  var defaultThumbnail = _ref.defaultThumbnail,
-      _ref$claimData = _ref.claimData,
-      name = _ref$claimData.name,
-      claimId = _ref$claimData.claimId,
-      fileExt = _ref$claimData.fileExt,
-      contentType = _ref$claimData.contentType,
-      thumbnail = _ref$claimData.thumbnail;
-  var directSourceLink = "".concat(claimId, "/").concat(name, ".").concat(fileExt);
-  var showUrlLink = "/".concat(claimId, "/").concat(name);
-  return _react.default.createElement("div", {
-    className: "asset-holder"
-  }, _react.default.createElement(_reactRouterDom.Link, {
-    to: showUrlLink
-  }, function () {
-    switch (contentType) {
-      case 'image/jpeg':
-      case 'image/jpg':
-      case 'image/png':
-      case 'image/gif':
-        return _react.default.createElement("img", {
-          className: 'asset-preview-image',
-          src: directSourceLink,
-          alt: name
-        });
-
-      case 'video/mp4':
-        return _react.default.createElement("img", {
-          className: 'asset-preview-video',
-          src: thumbnail || defaultThumbnail,
-          alt: name
-        });
-
-      default:
-        return _react.default.createElement("p", null, "unsupported file type");
-    }
-  }()));
-};
-
-var _default = AssetPreview;
-exports.default = _default;

client/build/components/Column/index.js

@@ -7,14 +7,6 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _SEO = _interopRequireDefault(require("@components/SEO"));
-
-var _ErrorPage = _interopRequireDefault(require("@pages/ErrorPage"));
-
-var _NavBar = _interopRequireDefault(require("../NavBar"));
-
-var _ChannelClaimsDisplay = _interopRequireDefault(require("../ChannelClaimsDisplay"));
-
 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); }
@@ -35,52 +27,33 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
 
-var ShowChannel =
+var Column =
 /*#__PURE__*/
 function (_React$Component) {
-  function ShowChannel() {
-    _classCallCheck(this, ShowChannel);
+  function Column() {
+    _classCallCheck(this, Column);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(ShowChannel).apply(this, arguments));
+    return _possibleConstructorReturn(this, _getPrototypeOf(Column).apply(this, arguments));
   }
 
-  _createClass(ShowChannel, [{
+  _createClass(Column, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate() {
+      return false;
+    }
+  }, {
     key: "render",
     value: function render() {
-      var channel = this.props.channel;
-
-      if (channel) {
-        var name = channel.name,
-            longId = channel.longId,
-            shortId = channel.shortId;
-        return _react.default.createElement("div", null, _react.default.createElement(_SEO.default, {
-          pageTitle: name,
-          channel: channel
-        }), _react.default.createElement(_NavBar.default, null), _react.default.createElement("div", {
-          className: "row row--tall row--padded"
-        }, _react.default.createElement("div", {
-          className: "column column--10"
-        }, _react.default.createElement("h2", null, "channel name: ", name), _react.default.createElement("p", {
-          className: 'fine-print'
-        }, "full channel id: ", longId), _react.default.createElement("p", {
-          className: 'fine-print'
-        }, "short channel id: ", shortId)), _react.default.createElement("div", {
-          className: "column column--10"
-        }, _react.default.createElement(_ChannelClaimsDisplay.default, null))));
-      }
-
-      ;
-      return _react.default.createElement(_ErrorPage.default, {
-        error: 'loading channel data...'
-      });
+      return _react.default.createElement("div", {
+        className: 'column'
+      }, this.props.children);
     }
   }]);
 
-  _inherits(ShowChannel, _React$Component);
+  _inherits(Column, _React$Component);
 
-  return ShowChannel;
+  return Column;
 }(_react.default.Component);
 
-;
-var _default = ShowChannel;
+var _default = Column;
 exports.default = _default;

client/build/components/HomePageContent/index.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _PublishTool = _interopRequireDefault(require("@containers/PublishTool"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var HomePageContent = function HomePageContent() {
-  return _react.default.createElement(_PublishTool.default, null);
-};
-
-var _default = HomePageContent;
-exports.default = _default;

client/build/components/NavBar/index.js

@@ -7,11 +7,13 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactRouterDom = require("react-router-dom");
+var _SpaceBetween = _interopRequireDefault(require("@components/SpaceBetween"));
 
-var _SEO = _interopRequireDefault(require("@components/SEO"));
+var _Logo = _interopRequireDefault(require("@components/Logo"));
 
-var _AssetDisplay = _interopRequireDefault(require("../AssetDisplay"));
+var _SiteDescription = _interopRequireDefault(require("@containers/SiteDescription"));
+
+var _NavigationLinks = _interopRequireDefault(require("@containers/NavigationLinks"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -33,47 +35,28 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
 
-var ShowLite =
+var NavBar =
 /*#__PURE__*/
 function (_React$Component) {
-  function ShowLite() {
-    _classCallCheck(this, ShowLite);
+  function NavBar() {
+    _classCallCheck(this, NavBar);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(ShowLite).apply(this, arguments));
+    return _possibleConstructorReturn(this, _getPrototypeOf(NavBar).apply(this, arguments));
   }
 
-  _createClass(ShowLite, [{
+  _createClass(NavBar, [{
     key: "render",
     value: function render() {
-      var asset = this.props.asset;
-
-      if (asset) {
-        var _asset$claimData = asset.claimData,
-            name = _asset$claimData.name,
-            claimId = _asset$claimData.claimId;
       return _react.default.createElement("div", {
-          className: "row row--tall flex-container--column flex-container--center-center show-lite-container"
-        }, _react.default.createElement(_SEO.default, {
-          pageTitle: name,
-          asset: asset
-        }), _react.default.createElement(_AssetDisplay.default, null), _react.default.createElement(_reactRouterDom.Link, {
-          id: "asset-boilerpate",
-          className: "link--primary fine-print",
-          to: "/".concat(claimId, "/").concat(name)
-        }, "hosted via Spee.ch"));
-      }
-
-      return _react.default.createElement("div", {
-        className: "row row--tall row--padded flex-container--column flex-container--center-center"
-      }, _react.default.createElement("p", null, "loading asset data..."));
+        className: 'nav-bar'
+      }, _react.default.createElement(_SpaceBetween.default, null, _react.default.createElement(_Logo.default, null), _react.default.createElement(_SiteDescription.default, null), _react.default.createElement(_NavigationLinks.default, null)));
     }
   }]);
 
-  _inherits(ShowLite, _React$Component);
+  _inherits(NavBar, _React$Component);
 
-  return ShowLite;
+  return NavBar;
 }(_react.default.Component);
 
-;
-var _default = ShowLite;
+var _default = NavBar;
 exports.default = _default;

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

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var style = {
-  margin: '2em' // backgroundColor: 'red',
-
-};
-var _default = style;
-exports.default = _default;

client/build/components/PageLayout/index.js

@@ -7,14 +7,12 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _SEO = _interopRequireDefault(require("@components/SEO"));
+var _SEO = _interopRequireDefault(require("@containers/SEO"));
 
-var _NavBar = _interopRequireDefault(require("@containers/NavBar"));
+var _NavBar = _interopRequireDefault(require("@components/NavBar"));
 
 var _PageContent = _interopRequireDefault(require("@components/PageContent"));
 
-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); }
@@ -53,8 +51,7 @@ function (_React$Component) {
     key: "render",
     value: function render() {
       return _react.default.createElement("div", {
-        style: _styleCss.default,
-        className: 'row--tall flex-container--column'
+        className: 'page-layout'
       }, _react.default.createElement(_SEO.default, {
         pageTitle: this.props.pageTitle,
         pageUri: this.props.pageUri

client/build/components/PublishPreview/index.js

@@ -15,6 +15,8 @@ var _PublishDetails = _interopRequireDefault(require("@containers/PublishDetails
 
 var _PublishTitleInput = _interopRequireDefault(require("@containers/PublishTitleInput"));
 
+var _Row = _interopRequireDefault(require("@components/Row"));
+
 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,7 +49,7 @@ function (_React$Component) {
   _createClass(PublishPreview, [{
     key: "render",
     value: function render() {
-      return _react.default.createElement("div", null, _react.default.createElement(_PublishTitleInput.default, null), _react.default.createElement(_HorizontalSplit.default, {
+      return _react.default.createElement("div", null, _react.default.createElement(_Row.default, null, _react.default.createElement(_PublishTitleInput.default, null)), _react.default.createElement(_HorizontalSplit.default, {
         leftSide: _react.default.createElement(_Dropzone.default, null),
         rightSide: _react.default.createElement(_PublishDetails.default, null)
       }));

client/build/components/Row/index.js

@@ -7,16 +7,6 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactHelmet = _interopRequireDefault(require("react-helmet"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _pageTitle = require("../../utils/pageTitle");
-
-var _metaTags = require("../../utils/metaTags");
-
-var _canonicalLink = require("../../utils/canonicalLink");
-
 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); }
@@ -37,59 +27,33 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
 
-var SEO =
+var Row =
 /*#__PURE__*/
 function (_React$Component) {
-  function SEO() {
-    _classCallCheck(this, SEO);
+  function Row() {
+    _classCallCheck(this, Row);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(SEO).apply(this, arguments));
+    return _possibleConstructorReturn(this, _getPrototypeOf(Row).apply(this, arguments));
   }
 
-  _createClass(SEO, [{
+  _createClass(Row, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate() {
+      return false;
+    }
+  }, {
     key: "render",
     value: function render() {
-      // props from state
-      var _this$props = this.props,
-          defaultDescription = _this$props.defaultDescription,
-          defaultThumbnail = _this$props.defaultThumbnail,
-          siteDescription = _this$props.siteDescription,
-          siteHost = _this$props.siteHost,
-          siteTitle = _this$props.siteTitle,
-          siteTwitter = _this$props.siteTwitter; // props from parent
-
-      var _this$props2 = this.props,
-          asset = _this$props2.asset,
-          channel = _this$props2.channel,
-          pageUri = _this$props2.pageUri;
-      var pageTitle = this.props.pageTitle; // create page title, tags, and canonical link
-
-      pageTitle = (0, _pageTitle.createPageTitle)(siteTitle, pageTitle);
-      var metaTags = (0, _metaTags.createMetaTags)(siteDescription, siteHost, siteTitle, siteTwitter, asset, channel, defaultDescription, defaultThumbnail);
-      var canonicalLink = (0, _canonicalLink.createCanonicalLink)(asset, channel, pageUri, siteHost); // render results
-
-      return _react.default.createElement(_reactHelmet.default, {
-        title: pageTitle,
-        meta: metaTags,
-        link: [{
-          rel: 'canonical',
-          href: canonicalLink
-        }]
-      });
+      return _react.default.createElement("div", {
+        className: 'row'
+      }, this.props.children);
     }
   }]);
 
-  _inherits(SEO, _React$Component);
+  _inherits(Row, _React$Component);
 
-  return SEO;
+  return Row;
 }(_react.default.Component);
 
-;
-SEO.propTypes = {
-  pageTitle: _propTypes.default.string,
-  pageUri: _propTypes.default.string,
-  channel: _propTypes.default.object,
-  asset: _propTypes.default.object
-};
-var _default = SEO;
+var _default = Row;
 exports.default = _default;

client/build/components/SEO/index.js

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _reactRedux = require("react-redux");
-
-var _view = _interopRequireDefault(require("./view"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var mapStateToProps = function mapStateToProps(_ref) {
-  var site = _ref.site;
-  var defaultDescription = site.defaultDescription,
-      defaultThumbnail = site.defaultThumbnail,
-      siteDescription = site.description,
-      siteHost = site.host,
-      siteTitle = site.title,
-      siteTwitter = site.twitter;
-  return {
-    defaultDescription: defaultDescription,
-    defaultThumbnail: defaultThumbnail,
-    siteDescription: siteDescription,
-    siteHost: siteHost,
-    siteTitle: siteTitle,
-    siteTwitter: siteTwitter
-  };
-};
-
-var _default = (0, _reactRedux.connect)(mapStateToProps, null)(_view.default);
-
-exports.default = _default;

client/build/components/SpaceBetween/index.js

@@ -0,0 +1,59 @@
+"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 }; }
+
+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 SpaceBetween =
+/*#__PURE__*/
+function (_React$Component) {
+  function SpaceBetween() {
+    _classCallCheck(this, SpaceBetween);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(SpaceBetween).apply(this, arguments));
+  }
+
+  _createClass(SpaceBetween, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate() {
+      return false;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return _react.default.createElement("div", {
+        className: 'space-between'
+      }, this.props.children);
+    }
+  }]);
+
+  _inherits(SpaceBetween, _React$Component);
+
+  return SpaceBetween;
+}(_react.default.Component);
+
+var _default = SpaceBetween;
+exports.default = _default;

client/build/containers/ChannelSelect/view.js

@@ -69,9 +69,7 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return _react.default.createElement("div", null, _react.default.createElement("form", null, _react.default.createElement("div", {
-        className: "column column--3 column--med-10"
-      }, _react.default.createElement("input", {
+      return _react.default.createElement("div", null, _react.default.createElement("form", null, _react.default.createElement("div", null, _react.default.createElement("input", {
         type: "radio",
         name: "anonymous-or-channel",
         id: "anonymous-radio",
@@ -82,9 +80,7 @@ function (_React$Component) {
       }), _react.default.createElement("label", {
         className: "label label--pointer",
         htmlFor: "anonymous-radio"
-      }, "Anonymous")), _react.default.createElement("div", {
-        className: "column column--7 column--med-10"
-      }, _react.default.createElement("input", {
+      }, "Anonymous")), _react.default.createElement("div", null, _react.default.createElement("input", {
         type: "radio",
         name: "anonymous-or-channel",
         id: "channel-radio",
@@ -99,14 +95,10 @@ function (_React$Component) {
         className: "info-message--failure"
       }, this.props.channelError) : _react.default.createElement("p", {
         className: "info-message"
-      }, "Publish anonymously or in a channel")), this.props.publishInChannel && _react.default.createElement("div", null, _react.default.createElement("div", {
-        className: "column column--3"
-      }, _react.default.createElement("label", {
+      }, "Publish anonymously or in a channel")), this.props.publishInChannel && _react.default.createElement("div", null, _react.default.createElement("div", null, _react.default.createElement("label", {
         className: "label",
         htmlFor: "channel-name-select"
-      }, "Channel:")), _react.default.createElement("div", {
-        className: "column column--7"
-      }, _react.default.createElement("select", {
+      }, "Channel:")), _react.default.createElement("div", null, _react.default.createElement("select", {
         type: "text",
         id: "channel-name-select",
         className: "select select--arrow",

client/build/containers/NavigationLinks/_index.js

@@ -0,0 +1 @@
+"use strict";

client/build/containers/NavigationLinks/index.js

@@ -14,13 +14,14 @@ var _view = _interopRequireDefault(require("./view"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var mapStateToProps = function mapStateToProps(_ref) {
-  var channel = _ref.channel,
-      site = _ref.site;
+  var _ref$channel$loggedIn = _ref.channel.loggedInChannel,
+      name = _ref$channel$loggedIn.name,
+      shortId = _ref$channel$loggedIn.shortId,
+      longId = _ref$channel$loggedIn.longId;
   return {
-    channelName: channel.loggedInChannel.name,
-    channelShortId: channel.loggedInChannel.shortId,
-    channelLongId: channel.loggedInChannel.longId,
-    siteDescription: site.description
+    channelName: name,
+    channelShortId: shortId,
+    channelLongId: longId
   };
 };
 

client/build/containers/NavigationLinks/view.js

@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactRouterDom = require("react-router-dom");
 
-var _Logo = _interopRequireDefault(require("@components/Logo"));
-
 var _NavBarChannelOptionsDropdown = _interopRequireDefault(require("@components/NavBarChannelOptionsDropdown"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,20 +34,20 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 var VIEW = 'VIEW';
 var LOGOUT = 'LOGOUT';
 
-var NavBar =
+var NavigationLinks =
 /*#__PURE__*/
 function (_React$Component) {
-  function NavBar(props) {
+  function NavigationLinks(props) {
     var _this;
 
-    _classCallCheck(this, NavBar);
+    _classCallCheck(this, NavigationLinks);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(NavBar).call(this, props));
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(NavigationLinks).call(this, props));
     _this.handleSelection = _this.handleSelection.bind(_assertThisInitialized(_assertThisInitialized(_this)));
     return _this;
   }
 
-  _createClass(NavBar, [{
+  _createClass(NavigationLinks, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.props.checkForLoggedInChannel();
@@ -76,17 +74,8 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var siteDescription = this.props.siteDescription;
       return _react.default.createElement("div", {
-        className: "row row--wide nav-bar"
-      }, _react.default.createElement("div", {
-        className: "row row--padded row--short flex-container--row flex-container--space-between-center"
-      }, _react.default.createElement(_Logo.default, null), _react.default.createElement("div", {
-        className: "nav-bar--center"
-      }, _react.default.createElement("span", {
-        className: "nav-bar-tagline"
-      }, siteDescription)), _react.default.createElement("div", {
-        className: "nav-bar--right"
+        className: "navigation-links"
       }, _react.default.createElement(_reactRouterDom.NavLink, {
         className: "nav-bar-link link--nav",
         activeClassName: "link--nav-active",
@@ -107,15 +96,15 @@ function (_React$Component) {
         className: "nav-bar-link link--nav",
         activeClassName: "link--nav-active",
         to: "/login"
-      }, "Channel"))));
+      }, "Channel"));
     }
   }]);
 
-  _inherits(NavBar, _React$Component);
+  _inherits(NavigationLinks, _React$Component);
 
-  return NavBar;
+  return NavigationLinks;
 }(_react.default.Component);
 
-var _default = (0, _reactRouterDom.withRouter)(NavBar);
+var _default = (0, _reactRouterDom.withRouter)(NavigationLinks);
 
 exports.default = _default;

client/build/containers/PublishDetails/view.js

@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactRouterDom = require("react-router-dom");
 
-var _PublishTitleInput = _interopRequireDefault(require("@containers/PublishTitleInput"));
-
 var _PublishUrlInput = _interopRequireDefault(require("@containers/PublishUrlInput"));
 
 var _PublishThumbnailInput = _interopRequireDefault(require("@containers/PublishThumbnailInput"));
@@ -19,6 +17,8 @@ var _PublishMetadataInputs = _interopRequireDefault(require("@containers/Publish
 
 var _ChannelSelect = _interopRequireDefault(require("@containers/ChannelSelect"));
 
+var _Row = _interopRequireDefault(require("@components/Row"));
+
 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); }
@@ -60,31 +60,14 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return _react.default.createElement("div", {
-        id: "publish-active-area",
-        className: "row row--padded"
-      }, _react.default.createElement("div", {
-        className: "row row--padded row--no-top row--wide"
-      }, _react.default.createElement(_PublishUrlInput.default, null)), _react.default.createElement("div", {
-        className: "row row--padded row--no-top row--wide"
-      }, _react.default.createElement(_ChannelSelect.default, null)), this.props.file.type === 'video/mp4' && _react.default.createElement("div", {
-        className: "row row--padded row--no-top row--wide "
-      }, _react.default.createElement(_PublishThumbnailInput.default, null)), _react.default.createElement("div", {
-        className: "row row--padded row--no-top row--no-bottom row--wide"
-      }, _react.default.createElement(_PublishMetadataInputs.default, null)), _react.default.createElement("div", {
-        className: "row row--wide align-content-center"
-      }, _react.default.createElement("button", {
+      return _react.default.createElement("div", null, _react.default.createElement(_Row.default, null, _react.default.createElement(_PublishUrlInput.default, null)), _react.default.createElement(_Row.default, null, _react.default.createElement(_ChannelSelect.default, null)), this.props.file.type === 'video/mp4' && _react.default.createElement(_Row.default, null, _react.default.createElement(_PublishThumbnailInput.default, null)), _react.default.createElement(_Row.default, null, _react.default.createElement(_PublishMetadataInputs.default, null)), _react.default.createElement(_Row.default, null, _react.default.createElement("button", {
         id: "publish-submit",
         className: "button--primary button--large",
         onClick: this.onPublishSubmit
-      }, "Publish")), _react.default.createElement("div", {
-        className: "row row--padded row--no-bottom align-content-center"
-      }, _react.default.createElement("button", {
+      }, "Publish")), _react.default.createElement(_Row.default, null, _react.default.createElement("button", {
         className: "button--cancel",
         onClick: this.props.clearFile
-      }, "Cancel")), _react.default.createElement("div", {
-        className: "row row--short align-content-center"
-      }, _react.default.createElement("p", {
+      }, "Cancel")), _react.default.createElement(_Row.default, null, _react.default.createElement("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. ", _react.default.createElement("a", {
         className: "link--primary",

client/build/containers/PublishMetadataInputs/view.js

@@ -67,19 +67,10 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return _react.default.createElement("div", {
-        id: "publish-details",
-        className: "row row--padded row--no-top row--wide"
-      }, this.props.showMetadataInputs && _react.default.createElement("div", null, _react.default.createElement("div", {
-        className: "row row--no-top"
-      }, _react.default.createElement("div", {
-        className: "column column--3 column--med-10 align-content-top"
-      }, _react.default.createElement("label", {
+      return _react.default.createElement("div", null, this.props.showMetadataInputs && _react.default.createElement("div", null, _react.default.createElement("div", null, _react.default.createElement("div", null, _react.default.createElement("label", {
         htmlFor: "publish-license",
         className: "label"
-      }, "Description:")), _react.default.createElement("div", {
-        className: "column column--7 column--sml-10"
-      }, _react.default.createElement(_ExpandingTextArea.default, {
+      }, "Description:")), _react.default.createElement("div", null, _react.default.createElement(_ExpandingTextArea.default, {
         id: "publish-description",
         className: "textarea textarea--primary textarea--full-width",
         rows: 1,
@@ -91,16 +82,10 @@ function (_React$Component) {
         placeholder: "Optional description",
         value: this.props.description,
         onChange: this.handleInput
-      }))), _react.default.createElement("div", {
-        className: "row row--no-top"
-      }, _react.default.createElement("div", {
-        className: "column column--3 column--med-10"
-      }, _react.default.createElement("label", {
+      }))), _react.default.createElement("div", null, _react.default.createElement("div", null, _react.default.createElement("label", {
         htmlFor: "publish-license",
         className: "label"
-      }, "License:")), _react.default.createElement("div", {
-        className: "column column--7 column--sml-10"
-      }, _react.default.createElement("select", {
+      }, "License:")), _react.default.createElement("div", null, _react.default.createElement("select", {
         type: "text",
         name: "license",
         id: "publish-license",
@@ -112,16 +97,10 @@ function (_React$Component) {
         value: "Public Domain"
       }, "Public Domain"), _react.default.createElement("option", {
         value: "Creative Commons"
-      }, "Creative Commons")))), _react.default.createElement("div", {
-        className: "row row--no-top"
-      }, _react.default.createElement("div", {
-        className: "column column--3"
-      }, _react.default.createElement("label", {
+      }, "Creative Commons")))), _react.default.createElement("div", null, _react.default.createElement("div", null, _react.default.createElement("label", {
         htmlFor: "publish-nsfw",
         className: "label"
-      }, "Mature:")), _react.default.createElement("div", {
-        className: "column column--7"
-      }, _react.default.createElement("input", {
+      }, "Mature:")), _react.default.createElement("div", null, _react.default.createElement("input", {
         className: "input-checkbox",
         type: "checkbox",
         id: "publish-nsfw",

client/build/containers/PublishTitleInput/view.js

@@ -55,7 +55,7 @@ function (_React$Component) {
         id: "publish-title",
         className: "input-text text--large input-text--full-width",
         name: "title",
-        placeholder: "Give your post a title...",
+        placeholder: "Give your content a title...",
         onChange: this.handleInput,
         value: this.props.title
       });

client/build/containers/PublishUrlInput/view.js

@@ -106,32 +106,31 @@ function (_React$Component) {
           publishInChannel = _this$props2.publishInChannel,
           selectedChannel = _this$props2.selectedChannel,
           urlError = _this$props2.urlError;
-      return _react.default.createElement("div", {
-        className: "column column--10 column--sml-10"
+      return _react.default.createElement("div", null, _react.default.createElement("div", {
+        className: 'publish-url-input'
       }, _react.default.createElement("div", {
-        className: "input-text--primary span--relative"
+        className: 'align-left'
       }, _react.default.createElement("span", {
         className: "url-text--secondary"
-      }, "spee.ch / "), _react.default.createElement(_PublishUrlMiddleDisplay.default, {
+      }, "spee.ch\xA0/\xA0")), _react.default.createElement("div", {
+        className: 'shrink'
+      }, _react.default.createElement(_PublishUrlMiddleDisplay.default, {
         publishInChannel: publishInChannel,
         selectedChannel: selectedChannel,
         loggedInChannelName: loggedInChannelName,
         loggedInChannelShortId: loggedInChannelShortId
-      }), _react.default.createElement("input", {
+      })), _react.default.createElement("div", {
+        className: 'fill'
+      }, _react.default.createElement("input", {
         type: "text",
-        id: "claim-name-input",
-        className: "input-text",
+        className: "input-text input-text--full-width",
         name: "claim",
         placeholder: "your-url-here",
         onChange: this.handleInput,
         value: claim
-      }), claim && !urlError && _react.default.createElement("span", {
-        id: "input-success-claim-name",
-        className: "info-message--success span--absolute"
-      }, "\u2713"), urlError && _react.default.createElement("span", {
-        id: "input-success-channel-name",
-        className: "info-message--failure span--absolute"
-      }, "\u2716")), _react.default.createElement("div", null, urlError ? _react.default.createElement("p", {
+      }))), _react.default.createElement("div", {
+        className: 'publish-url-input-error'
+      }, urlError ? _react.default.createElement("p", {
         id: "input-error-claim-name",
         className: "info-message--failure"
       }, urlError) : _react.default.createElement("p", {

client/build/containers/ShowAssetDetails/index.js

@@ -1,38 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _reactRedux = require("react-redux");
-
-var _view = _interopRequireDefault(require("./view"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var mapStateToProps = function mapStateToProps(_ref) {
-  var show = _ref.show;
-  // select request info
-  var requestId = show.request.id; // select asset info
-
-  var asset;
-  var request = show.requestList[requestId] || null;
-  var assetList = show.assetList;
-
-  if (request && assetList) {
-    var assetKey = request.key; // note: just store this in the request
-
-    asset = assetList[assetKey] || null;
-  }
-
-  ; // return props
-
-  return {
-    asset: asset
-  };
-};
-
-var _default = (0, _reactRedux.connect)(mapStateToProps, null)(_view.default);
-
-exports.default = _default;

client/build/containers/ShowAssetDetails/view.js

@@ -1,90 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _SEO = _interopRequireDefault(require("@components/SEO"));
-
-var _NavBar = _interopRequireDefault(require("../NavBar"));
-
-var _ErrorPage = _interopRequireDefault(require("../../pages/ErrorPage"));
-
-var _AssetTitle = _interopRequireDefault(require("../AssetTitle"));
-
-var _AssetDisplay = _interopRequireDefault(require("../AssetDisplay"));
-
-var _AssetInfo = _interopRequireDefault(require("../AssetInfo"));
-
-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 ShowAssetDetails =
-/*#__PURE__*/
-function (_React$Component) {
-  function ShowAssetDetails() {
-    _classCallCheck(this, ShowAssetDetails);
-
-    return _possibleConstructorReturn(this, _getPrototypeOf(ShowAssetDetails).apply(this, arguments));
-  }
-
-  _createClass(ShowAssetDetails, [{
-    key: "render",
-    value: function render() {
-      var asset = this.props.asset;
-
-      if (asset) {
-        var name = asset.claimData.name;
-        return _react.default.createElement("div", null, _react.default.createElement(_SEO.default, {
-          pageTitle: "".concat(name, " - details"),
-          asset: asset
-        }), _react.default.createElement(_NavBar.default, null), _react.default.createElement("div", {
-          className: "row row--tall row--padded"
-        }, _react.default.createElement("div", {
-          className: "column column--10"
-        }, _react.default.createElement(_AssetTitle.default, null)), _react.default.createElement("div", {
-          className: "column column--5 column--sml-10 align-content-top"
-        }, _react.default.createElement("div", {
-          className: "row row--padded show-details-container"
-        }, _react.default.createElement(_AssetDisplay.default, null))), _react.default.createElement("div", {
-          className: "column column--5 column--sml-10 align-content-top"
-        }, _react.default.createElement("div", {
-          className: "row row--padded"
-        }, _react.default.createElement(_AssetInfo.default, null)))));
-      }
-
-      ;
-      return _react.default.createElement(_ErrorPage.default, {
-        error: 'loading asset data...'
-      });
-    }
-  }]);
-
-  _inherits(ShowAssetDetails, _React$Component);
-
-  return ShowAssetDetails;
-}(_react.default.Component);
-
-;
-var _default = ShowAssetDetails;
-exports.default = _default;

client/build/containers/ShowAssetLite/index.js

@@ -1,38 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _reactRedux = require("react-redux");
-
-var _view = _interopRequireDefault(require("./view"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var mapStateToProps = function mapStateToProps(_ref) {
-  var show = _ref.show;
-  // select request info
-  var requestId = show.request.id; // select asset info
-
-  var asset;
-  var request = show.requestList[requestId] || null;
-  var assetList = show.assetList;
-
-  if (request && assetList) {
-    var assetKey = request.key; // note: just store this in the request
-
-    asset = assetList[assetKey] || null;
-  }
-
-  ; // return props
-
-  return {
-    asset: asset
-  };
-};
-
-var _default = (0, _reactRedux.connect)(mapStateToProps, null)(_view.default);
-
-exports.default = _default;

client/build/containers/SiteDescription/index.js

@@ -12,21 +12,9 @@ var _view = _interopRequireDefault(require("./view"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var mapStateToProps = function mapStateToProps(_ref) {
-  var show = _ref.show;
-  // select request info
-  var requestId = show.request.id; // select request
-
-  var previousRequest = show.requestList[requestId] || null; // select channel
-
-  var channel;
-
-  if (previousRequest) {
-    var channelKey = previousRequest.key;
-    channel = show.channelList[channelKey] || null;
-  }
-
+  var site = _ref.site;
   return {
-    channel: channel
+    siteDescription: site.description
   };
 };
 

client/build/containers/SiteDescription/view.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
-
 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); }
@@ -29,30 +27,28 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
 
-var FourOhForPage =
+var SiteDescription =
 /*#__PURE__*/
 function (_React$Component) {
-  function FourOhForPage() {
-    _classCallCheck(this, FourOhForPage);
+  function SiteDescription() {
+    _classCallCheck(this, SiteDescription);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(FourOhForPage).apply(this, arguments));
+    return _possibleConstructorReturn(this, _getPrototypeOf(SiteDescription).apply(this, arguments));
   }
 
-  _createClass(FourOhForPage, [{
+  _createClass(SiteDescription, [{
     key: "render",
     value: function render() {
-      return _react.default.createElement(_PageLayout.default, {
-        pageTitle: '404',
-        pageUri: '/404'
-      }, _react.default.createElement("h2", null, "404"), _react.default.createElement("p", null, "That page does not exist"));
+      return _react.default.createElement("div", {
+        className: "site-description"
+      }, this.props.siteDescription);
     }
   }]);
 
-  _inherits(FourOhForPage, _React$Component);
+  _inherits(SiteDescription, _React$Component);
 
-  return FourOhForPage;
+  return SiteDescription;
 }(_react.default.Component);
 
-;
-var _default = FourOhForPage;
+var _default = SiteDescription;
 exports.default = _default;

client/build/pages/ShowAssetLite/view.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactRouterDom = require("react-router-dom");
 
-var _SEO = _interopRequireDefault(require("@components/SEO"));
+var _SEO = _interopRequireDefault(require("@containers/SEO"));
 
 var _AssetDisplay = _interopRequireDefault(require("@containers/AssetDisplay"));
 

client/scss/_body.scss

@@ -3,15 +3,8 @@ body {
   padding: 0;
   height: 100%;
   word-wrap: break-word;
-}
-
-
-body {
   display: -webkit-flex;
   display: flex;
-}
-
-body {
   -webkit-flex-direction: column;
   flex-direction: column;
 }

client/scss/_column.scss

@@ -1,45 +0,0 @@
-.column {
-  display: inline-block;
-  padding: 0px;
-  margin: 0px;
-}
-
-.column--1 {
-  width: 10%;
-}
-
-.column--2 {
-  width: 20%;
-}
-
-.column--3 {
-  width: 30%;
-}
-
-.column--4 {
-  width: 40%;
-}
-
-.column--5 {
-  width: 50%;
-}
-
-.column--6 {
-  width: 60%;
-}
-
-.column--7 {
-  width: 70%;
-}
-
-.column--8 {
-  width: 80%;
-}
-
-.column--9 {
-  width: 90%;
-}
-
-.column--10 {
-  width: 100%;
-}

client/scss/_react-app.scss

@@ -0,0 +1,7 @@
+#react-app {
+  flex: 1 0 auto;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}

client/scss/_row.scss

@@ -1,38 +0,0 @@
-.row {
-  clear: both;
-  margin: 0px;
-}
-
-.row--padded {
-  padding: 3rem;
-}
-
-.row--margined {
-  margin: 3rem;
-}
-
-.row--wide {
-  padding-right: 0px;
-  padding-left: 0px;
-}
-
-.row--short {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
-.row--tall {
-  flex: 1 0 auto;
-}
-
-.row--no-top {
-  padding-top: 0px;
-}
-
-.row--no-bottom {
-  padding-bottom: 0px;
-}
-
-.row--no-right {
-  padding-right: 0px;
-}

client/scss/all.scss

@@ -2,12 +2,11 @@
 @import '_font';
 @import '_html';
 @import '_body';
+@import '_react-app';
 @import '_text';
 @import '_flex-container';
 @import '_tooltip';
 @import '_link';
-@import '_row';
-//@import '_column';
 @import '_info-message';
 @import '_input';
 @import '_button';
@@ -15,12 +14,18 @@
 @import '_video';
 @import '_asset';
 @import '_asset-preview';
-@import 'containers/_dropzone';
-@import '_nav-bar';
 @import '_progress-bar';
 @import '_publish-preview';
-@import 'components/_horizontal-split';
+@import 'components/_page-layout';
 @import 'components/_page-content';
+@import 'components/_horizontal-split';
+@import 'components/_space-between';
+@import 'components/_column';
+@import 'components/_row';
+@import 'components/_nav-bar';
+@import 'containers/_dropzone';
+@import 'containers/_publish-url-input';
+@import 'containers/_site-description';
 @import '_media-queries';
 
 

client/scss/components/_column.scss

@@ -0,0 +1,4 @@
+.column {
+  padding-left: 2em;
+  padding-right: 2em;
+}

client/scss/components/_horizontal-split.scss

@@ -4,6 +4,7 @@
   justify-content: space-between;
   align-items    : flex-start;
   .column {
-    width: calc(50% - 1em);
+    width: 50%;
+    padding: 0 2em 0 2em;
   }
 };

client/scss/components/_nav-bar.scss

@@ -1,7 +1,11 @@
 .nav-bar {
+  padding-left: 2em;
+  padding-right: 2em;
   border-bottom: 0.5px solid #cacaca;
 }
 
+// old
+
 .nav-bar--left {
   align-self: center;
 }

client/scss/components/_page-content.scss

@@ -1,6 +1,5 @@
 .page-content {
   margin: 2em;
-  background-color: blue;
   // fill the parent flex container
   flex: 1 0 auto;
   // be a flex container for children

client/scss/components/_page-layout.scss

@@ -0,0 +1,5 @@
+.page-layout {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+}

client/scss/components/_row.scss

@@ -0,0 +1,3 @@
+.row {
+  padding-bottom: 2em;
+}

client/scss/components/_space-between.scss

@@ -0,0 +1,5 @@
+.space-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

client/scss/containers/_dropzone.scss

@@ -1,5 +1,4 @@
 .dropzone-wrapper {
-  background-color: yellow;
   // fill the parent flex container
   flex: 1 0 auto;
   // be a flex container for children
@@ -9,7 +8,6 @@
 
 .dropzone {
   border: 2px dashed #9b9b9b;
-  background-color: red;
   // fill the parent flex container
   flex: 1 0 auto;
   // be a flex container for children
@@ -30,12 +28,6 @@
   text-align: center;
 }
 
-.dropzone-preview-image {
-  display: block;
-  padding: 1em;
-  width: calc(100% - 2em);
-}
-
 .dropzone-preview-wrapper {
   position: relative;
   .dropzone-preview-overlay {
@@ -51,4 +43,8 @@
   }
 }
 
-
+.dropzone-preview-image {
+  display: block;
+  padding: 1em;
+  width: calc(100% - 2em);
+}

client/scss/containers/_publish-url-input.scss

@@ -0,0 +1,14 @@
+.publish-url-input {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: baseline;
+  border-bottom: solid 1px grey;
+  .shrink {
+    flex: 0 1 auto;
+  };
+  .fill {
+    flex: 1 0 auto;
+  };
+}

client/scss/containers/_site-description.scss

@@ -0,0 +1,3 @@
+.site-description {
+  font-size: small;
+}

client/src/components/Column/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+class Column extends React.Component {
+  shouldComponentUpdate () {
+    return false;
+  }
+  render () {
+    return (
+      <div className={'column'}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default Column;

client/src/components/NavBar/index.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import SpaceBetween from '@components/SpaceBetween';
+import Logo from '@components/Logo';
+import SiteDescription from '@containers/SiteDescription';
+import NavigationLinks from '@containers/NavigationLinks';
+
+class NavBar extends React.Component {
+  render () {
+    return (
+      <div className={'nav-bar'}>
+        <SpaceBetween >
+          <Logo />
+          <SiteDescription />
+          <NavigationLinks />
+        </SpaceBetween>
+      </div>
+    );
+  }
+}
+
+export default NavBar;

client/src/components/PageLayout/index.jsx

@@ -1,18 +1,16 @@
 import React from 'react';
 
-import SEO from '@components/SEO';
-import NavBar from '@containers/NavBar';
+import SEO from '@containers/SEO';
+import NavBar from '@components/NavBar';
 import PageContent from '@components/PageContent';
 
-import style from './style.css.js';
-
 class PageLayout extends React.Component {
   shouldComponentUpdate () {
     return false;
   }
   render () {
     return (
-      <div style={style} className={'row--tall flex-container--column'}>
+      <div className={'page-layout'}>
         <SEO pageTitle={this.props.pageTitle} pageUri={this.props.pageUri} />
         <NavBar />
         <PageContent>

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

@@ -1,5 +0,0 @@
-const style = {
-  // backgroundColor: 'grey',
-};
-
-export default style;

client/src/components/PublishPreview/index.jsx

@@ -3,12 +3,15 @@ import HorizontalSplit from '@components/HorizontalSplit';
 import Dropzone from '@containers/Dropzone';
 import PublishDetails from '@containers/PublishDetails';
 import PublishTitleInput from '@containers/PublishTitleInput';
+import Row from '@components/Row';
 
 class PublishPreview extends React.Component {
   render () {
     return (
       <div>
+        <Row>
           <PublishTitleInput />
+        </Row>
         <HorizontalSplit
           leftSide={<Dropzone />}
           rightSide={<PublishDetails />}

client/src/components/Row/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+class Row extends React.Component {
+  shouldComponentUpdate () {
+    return false;
+  }
+  render () {
+    return (
+      <div className={'row'}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default Row;

client/src/components/SpaceBetween/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+class SpaceBetween extends React.Component {
+  shouldComponentUpdate () {
+    return false;
+  }
+  render () {
+    return (
+      <div className={'space-between'}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default SpaceBetween;

client/src/containers/ChannelSelect/view.jsx

@@ -25,11 +25,11 @@ class ChannelSelect extends React.Component {
     return (
       <div>
         <form>
-          <div className='column column--3 column--med-10'>
+          <div>
             <input type='radio' name='anonymous-or-channel' id='anonymous-radio' className='input-radio' value='anonymous' checked={!this.props.publishInChannel} onChange={this.toggleAnonymousPublish} />
             <label className='label label--pointer' htmlFor='anonymous-radio'>Anonymous</label>
           </div>
-          <div className='column column--7 column--med-10'>
+          <div>
             <input type='radio' name='anonymous-or-channel' id='channel-radio' className='input-radio' value='in a channel' checked={this.props.publishInChannel} onChange={this.toggleAnonymousPublish} />
             <label className='label label--pointer' htmlFor='channel-radio'>In a channel</label>
           </div>
@@ -41,9 +41,10 @@ class ChannelSelect extends React.Component {
         </form>
         { this.props.publishInChannel && (
           <div>
-            <div className='column column--3'>
+            <div>
               <label className='label' htmlFor='channel-name-select'>Channel:</label>
-            </div><div className='column column--7'>
+            </div>
+            <div>
               <select type='text' id='channel-name-select' className='select select--arrow' value={this.props.selectedChannel} onChange={this.handleSelection}>
                 { this.props.loggedInChannelName && <option value={this.props.loggedInChannelName} id='publish-channel-select-channel-option'>{this.props.loggedInChannelName}</option> }
                 <option value={states.LOGIN}>Existing</option>

client/src/containers/NavBar/view.jsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { NavLink, withRouter } from 'react-router-dom';
-import Logo from '@components/Logo';
-import NavBarChannelDropdown from '@components/NavBarChannelOptionsDropdown';
-
-const VIEW = 'VIEW';
-const LOGOUT = 'LOGOUT';
-
-class NavBar extends React.Component {
-  constructor (props) {
-    super(props);
-    this.handleSelection = this.handleSelection.bind(this);
-  }
-  componentDidMount () {
-    this.props.checkForLoggedInChannel();
-  }
-  handleSelection (event) {
-    const value = event.target.selectedOptions[0].value;
-    switch (value) {
-      case LOGOUT:
-        this.props.logOutChannel();
-        break;
-      case VIEW:
-        // redirect to channel page
-        this.props.history.push(`/${this.props.channelName}:${this.props.channelLongId}`);
-        break;
-      default:
-        break;
-    }
-  }
-  render () {
-    const { siteDescription } =  this.props;
-    return (
-      <div className='row row--wide nav-bar'>
-        <div className='row row--padded row--short flex-container--row flex-container--space-between-center'>
-          <Logo />
-          <div className='nav-bar--center'>
-            <span className='nav-bar-tagline'>{siteDescription}</span>
-          </div>
-          <div className='nav-bar--right'>
-            <NavLink className='nav-bar-link link--nav' activeClassName='link--nav-active' to='/' exact>Publish</NavLink>
-            <NavLink className='nav-bar-link link--nav'  activeClassName='link--nav-active' to='/about'>About</NavLink>
-            { this.props.channelName ? (
-              <NavBarChannelDropdown
-                channelName={this.props.channelName}
-                handleSelection={this.handleSelection}
-                defaultSelection={this.props.channelName}
-                VIEW={VIEW}
-                LOGOUT={LOGOUT}
-              />
-            ) : (
-              <NavLink id='nav-bar-login-link' className='nav-bar-link link--nav' activeClassName='link--nav-active' to='/login'>Channel</NavLink>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default withRouter(NavBar);

client/src/containers/NavigationLinks/index.jsx

@@ -2,12 +2,11 @@ import { connect } from 'react-redux';
 import { logOutChannel, checkForLoggedInChannel } from '../../actions/channel';
 import View from './view';
 
-const mapStateToProps = ({ channel, site }) => {
+const mapStateToProps = ({ channel: { loggedInChannel: { name, shortId, longId } } }) => {
   return {
-    channelName   : channel.loggedInChannel.name,
-    channelShortId: channel.loggedInChannel.shortId,
-    channelLongId : channel.loggedInChannel.longId,
-    siteDescription: site.description,
+    channelName   : name,
+    channelShortId: shortId,
+    channelLongId : longId,
   };
 };
 

client/src/containers/NavigationLinks/view.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { NavLink, withRouter } from 'react-router-dom';
+import NavBarChannelDropdown from '@components/NavBarChannelOptionsDropdown';
+
+const VIEW = 'VIEW';
+const LOGOUT = 'LOGOUT';
+
+class NavigationLinks extends React.Component {
+  constructor (props) {
+    super(props);
+    this.handleSelection = this.handleSelection.bind(this);
+  }
+  componentDidMount () {
+    this.props.checkForLoggedInChannel();
+  }
+  handleSelection (event) {
+    const value = event.target.selectedOptions[0].value;
+    switch (value) {
+      case LOGOUT:
+        this.props.logOutChannel();
+        break;
+      case VIEW:
+        // redirect to channel page
+        this.props.history.push(`/${this.props.channelName}:${this.props.channelLongId}`);
+        break;
+      default:
+        break;
+    }
+  }
+  render () {
+    return (
+      <div className='navigation-links'>
+        <NavLink className='nav-bar-link link--nav' activeClassName='link--nav-active' to='/' exact>Publish</NavLink>
+        <NavLink className='nav-bar-link link--nav'  activeClassName='link--nav-active' to='/about'>About</NavLink>
+        { this.props.channelName ? (
+          <NavBarChannelDropdown
+            channelName={this.props.channelName}
+            handleSelection={this.handleSelection}
+            defaultSelection={this.props.channelName}
+            VIEW={VIEW}
+            LOGOUT={LOGOUT}
+          />
+        ) : (
+          <NavLink id='nav-bar-login-link' className='nav-bar-link link--nav' activeClassName='link--nav-active' to='/login'>Channel</NavLink>
+        )}
+      </div>
+    );
+  }
+}
+
+export default withRouter(NavigationLinks);

client/src/containers/PublishDetails/view.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { withRouter } from 'react-router-dom';
-import PublishTitleInput from '@containers/PublishTitleInput';
 import PublishUrlInput from '@containers/PublishUrlInput';
 import PublishThumbnailInput from '@containers/PublishThumbnailInput';
 import PublishMetadataInputs from '@containers/PublishMetadataInputs';
 import ChannelSelect from '@containers/ChannelSelect';
+import Row from '@components/Row';
 
 class PublishDetails extends React.Component {
   constructor (props) {
-    super(props)
+    super(props);
     this.onPublishSubmit = this.onPublishSubmit.bind(this);
   }
   onPublishSubmit () {
@@ -16,30 +16,43 @@ class PublishDetails extends React.Component {
   }
   render () {
     return (
-      <div id='publish-active-area' className='row row--padded'>
-        <div className='row row--padded row--no-top row--wide'>
+      <div>
+        <Row>
           <PublishUrlInput />
-        </div>
-        <div className='row row--padded row--no-top row--wide'>
+        </Row>
+
+        <Row>
           <ChannelSelect />
-        </div>
-        { (this.props.file.type === 'video/mp4') && (
-          <div className='row row--padded row--no-top row--wide '>
+        </Row>
+
+        { this.props.file.type === 'video/mp4' && (
+          <Row>
             <PublishThumbnailInput />
-          </div>
+          </Row>
         )}
-        <div className='row row--padded row--no-top row--no-bottom row--wide'>
+
+        <Row>
           <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'>
+        </Row>
+
+        <Row>
+          <button
+            id='publish-submit'
+            className='button--primary button--large'
+            onClick={this.onPublishSubmit}
+          >
+            Publish
+          </button>
+        </Row>
+
+        <Row>
           <button className='button--cancel' onClick={this.props.clearFile}>Cancel</button>
-        </div>
-        <div className='row row--short align-content-center'>
+        </Row>
+
+        <Row>
           <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>
+        </Row>
+
       </div>
     );
   }

client/src/containers/PublishMetadataInputs/view.jsx

@@ -24,13 +24,14 @@ class PublishMetadataInputs extends React.Component {
   }
   render () {
     return (
-      <div id='publish-details' className='row row--padded row--no-top row--wide'>
+      <div>
         {this.props.showMetadataInputs && (
           <div>
-            <div className='row row--no-top'>
-              <div className='column column--3 column--med-10 align-content-top'>
+            <div>
+              <div>
                 <label htmlFor='publish-license' className='label'>Description:</label>
-              </div><div className='column column--7 column--sml-10'>
+              </div>
+              <div>
                 <ExpandingTextArea
                   id='publish-description'
                   className='textarea textarea--primary textarea--full-width'
@@ -44,11 +45,18 @@ class PublishMetadataInputs extends React.Component {
               </div>
             </div>
 
-            <div className='row row--no-top'>
-              <div className='column column--3 column--med-10'>
+            <div>
+              <div>
                 <label htmlFor='publish-license' className='label'>License:</label>
-              </div><div className='column column--7 column--sml-10'>
-                <select type='text' name='license' id='publish-license' className='select select--primary' onChange={this.handleSelect}>
+              </div>
+              <div>
+                <select
+                  type='text'
+                  name='license'
+                  id='publish-license'
+                  className='select select--primary'
+                  onChange={this.handleSelect}
+                >
                   <option value=' '>Unspecified</option>
                   <option value='Public Domain'>Public Domain</option>
                   <option value='Creative Commons'>Creative Commons</option>
@@ -56,16 +64,29 @@ class PublishMetadataInputs extends React.Component {
               </div>
             </div>
 
-            <div className='row row--no-top'>
-              <div className='column column--3'>
+            <div>
+              <div>
                 <label htmlFor='publish-nsfw' className='label'>Mature:</label>
-              </div><div className='column column--7'>
-                <input className='input-checkbox' type='checkbox' id='publish-nsfw' name='nsfw' value={this.props.nsfw} onChange={this.handleInput} />
+              </div>
+              <div>
+                <input
+                  className='input-checkbox'
+                  type='checkbox'
+                  id='publish-nsfw'
+                  name='nsfw'
+                  value={this.props.nsfw}
+                  onChange={this.handleInput}
+                />
               </div>
             </div>
           </div>
         )}
-        <button className='button--secondary' onClick={this.toggleShowInputs}>{this.props.showMetadataInputs ? 'less' : 'more'}</button>
+        <button
+          className='button--secondary'
+          onClick={this.toggleShowInputs}
+        >
+          {this.props.showMetadataInputs ? 'less' : 'more'}
+        </button>
       </div>
     );
   }

client/src/containers/PublishTitleInput/view.jsx

@@ -12,7 +12,7 @@ class PublishTitleInput extends React.Component {
   }
   render () {
     return (
-      <input type='text' id='publish-title' className='input-text text--large input-text--full-width' name='title' placeholder='Give your post a title...' onChange={this.handleInput} value={this.props.title} />
+      <input type='text' id='publish-title' className='input-text text--large input-text--full-width' name='title' placeholder='Give your content a title...' onChange={this.handleInput} value={this.props.title} />
     );
   }
 }

client/src/containers/PublishUrlInput/view.jsx

@@ -44,20 +44,31 @@ class PublishUrlInput extends React.Component {
   render () {
     const { claim, loggedInChannelName, loggedInChannelShortId, publishInChannel, selectedChannel, urlError } = this.props;
     return (
-      <div className='column column--10 column--sml-10'>
-        <div className='input-text--primary span--relative'>
-          <span className='url-text--secondary'>spee.ch / </span>
+      <div>
+        <div className={'publish-url-input'}>
+          <div className={'align-left'}>
+            <span className='url-text--secondary'>spee.ch&nbsp;/&nbsp;</span>
+          </div>
+          <div className={'shrink'}>
             <UrlMiddle
               publishInChannel={publishInChannel}
               selectedChannel={selectedChannel}
               loggedInChannelName={loggedInChannelName}
               loggedInChannelShortId={loggedInChannelShortId}
             />
-          <input type='text' id='claim-name-input' className='input-text' name='claim' placeholder='your-url-here' onChange={this.handleInput} value={claim} />
-          { (claim && !urlError) && <span id='input-success-claim-name' className='info-message--success span--absolute'>{'\u2713'}</span> }
-          { urlError && <span id='input-success-channel-name' className='info-message--failure span--absolute'>{'\u2716'}</span> }
           </div>
-        <div>
+          <div className={'fill'}>
+            <input
+              type='text'
+              className='input-text input-text--full-width'
+              name='claim'
+              placeholder='your-url-here'
+              onChange={this.handleInput}
+              value={claim}
+            />
+          </div>
+        </div>
+        <div className={'publish-url-input-error'}>
           { urlError ? (
             <p id='input-error-claim-name' className='info-message--failure'>{urlError}</p>
           ) : (

client/src/containers/SiteDescription/index.jsx

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import View from './view';
+
+const mapStateToProps = ({ site }) => {
+  return {
+    siteDescription: site.description,
+  };
+};
+
+export default connect(mapStateToProps, null)(View);

client/src/containers/SiteDescription/view.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+class SiteDescription extends React.Component {
+  render () {
+    return (
+      <div className='site-description'>
+        {this.props.siteDescription}
+      </div>
+    );
+  }
+}
+
+export default SiteDescription;

client/src/pages/ShowAssetLite/view.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import SEO from '@components/SEO';
+import SEO from '@containers/SEO';
 import AssetDisplay from '@containers/AssetDisplay';
 
 class ShowLite extends React.Component {

server/render/renderFullPage.js

@@ -16,10 +16,8 @@ module.exports = (helmet, html, preloadedState) => {
             <!--google font-->
             <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
         </head>
-        <body id="main-body">
-            <div class="row row--tall flex-container--column">
-                <div id="react-app" class="row row--tall flex-container--column">${html}</div>
-            </div>
+        <body>
+            <div id="react-app">${html}</div>
             <script>
                 window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\\u003c')}
             </script>