Merge pull request #471 from lbryio/scss

Scss

client/build/app.js

@@ -15,7 +15,7 @@ var _AboutPage = _interopRequireDefault(require("@pages/AboutPage"));
 
 var _LoginPage = _interopRequireDefault(require("@pages/LoginPage"));
 
-var _ShowPage = _interopRequireDefault(require("@pages/ShowPage"));
+var _ContentPageWrapper = _interopRequireDefault(require("@pages/ContentPageWrapper"));
 
 var _FourOhFourPage = _interopRequireDefault(require("@pages/FourOhFourPage"));
 
@@ -43,11 +43,11 @@ var App = function App() {
   }), _react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/:identifier/:claim",
-    component: _ShowPage.default
+    component: _ContentPageWrapper.default
   }), _react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/:claim",
-    component: _ShowPage.default
+    component: _ContentPageWrapper.default
   }), _react.default.createElement(_reactRouterDom.Route, {
     component: _FourOhFourPage.default
   }));

client/build/components/AboutChannels/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 ChannelAbout = function ChannelAbout() {
+  return _react.default.createElement("div", null, _react.default.createElement("p", {
+    className: 'large'
+  }, "Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends.  You can create 1 channel, or 100, so whether you're ", _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "/@catalonia2017:43dcf47163caa21d8404d9fe9b30f78ef3e146a8"
+  }, "documenting important events"), ", or making a public repository for ", _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "/@catGifs"
+  }, "cat gifs"), " (password: '1234'), try creating a channel for it!"));
+};
+
+var _default = ChannelAbout;
+exports.default = _default;

client/build/components/AboutSpeechDetails/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Row = _interopRequireDefault(require("@components/Row"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var AboutSpeechDetails = function AboutSpeechDetails() {
+  return _react.default.createElement("div", null, _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
+    className: 'text--large'
+  }, "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", {
+    className: 'text--large'
+  }, "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(_Row.default, null, _react.default.createElement("h3", null, "Contribute"), _react.default.createElement("p", {
+    className: 'text--large'
+  }, "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", {
+    className: 'text--large'
+  }, "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 = AboutSpeechDetails;
+exports.default = _default;

client/build/components/AboutSpeechOverview/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Row = _interopRequireDefault(require("@components/Row"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var AboutSpeechOverview = function AboutSpeechOverview() {
+  return _react.default.createElement("div", null, _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
+    className: 'text--extra-large'
+  }, "Spee.ch is an open-source project.  Please contribute to the existing site, or fork it and make your own.")), _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
+    className: 'text--large'
+  }, _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "https://twitter.com/spee_ch"
+  }, "TWITTER")), _react.default.createElement("p", {
+    className: 'text--large'
+  }, _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "https://github.com/lbryio/spee.ch"
+  }, "GITHUB")), _react.default.createElement("p", {
+    className: 'text--large'
+  }, _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "https://discord.gg/YjYbwhS"
+  }, "DISCORD CHANNEL")), _react.default.createElement("p", {
+    className: 'text--large'
+  }, _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "https://github.com/lbryio/spee.ch/blob/master/README.md"
+  }, "DOCUMENTATION"))));
+};
+
+var _default = AboutSpeechOverview;
+exports.default = _default;

client/build/components/ActiveStatusBar/index.js

@@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var ActiveStatusBar = function ActiveStatusBar() {
   return _react.default.createElement("span", {
-    className: "progress-bar progress-bar--active"
+    className: "progress-bar--active"
   }, "| ");
 };
 

client/build/components/AssetPreview/index.js

@@ -5,19 +5,50 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _reactRedux = require("react-redux");
+var _react = _interopRequireDefault(require("react"));
 
-var _view = _interopRequireDefault(require("./view"));
+var _reactRouterDom = require("react-router-dom");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var mapStateToProps = function mapStateToProps(_ref) {
-  var defaultThumbnail = _ref.site.defaultThumbnail;
-  return {
-    defaultThumbnail: defaultThumbnail
-  };
+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-preview-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 = (0, _reactRedux.connect)(mapStateToProps, null)(_view.default);
-
+var _default = AssetPreview;
 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',
-          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/ButtonPrimary/index.js

@@ -0,0 +1,22 @@
+"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 ButtonPrimary = function ButtonPrimary(_ref) {
+  var value = _ref.value,
+      onClickHandler = _ref.onClickHandler;
+  return _react.default.createElement("button", {
+    className: 'button button-primary',
+    onClick: onClickHandler
+  }, value);
+};
+
+var _default = ButtonPrimary;
+exports.default = _default;

client/build/components/ButtonPrimaryJumbo/index.js

@@ -0,0 +1,22 @@
+"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 ButtonPrimaryJumbo = function ButtonPrimaryJumbo(_ref) {
+  var value = _ref.value,
+      onClickHandler = _ref.onClickHandler;
+  return _react.default.createElement("button", {
+    className: 'button button-primary button-primary--jumbo',
+    onClick: onClickHandler
+  }, value);
+};
+
+var _default = ButtonPrimaryJumbo;
+exports.default = _default;

client/build/components/ButtonSecondary/index.js

@@ -0,0 +1,22 @@
+"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 ButtonPrimary = function ButtonPrimary(_ref) {
+  var value = _ref.value,
+      onClickHandler = _ref.onClickHandler;
+  return _react.default.createElement("button", {
+    className: 'button button--secondary',
+    onClick: onClickHandler
+  }, value);
+};
+
+var _default = ButtonPrimary;
+exports.default = _default;

client/build/components/ButtonTertiary/index.js

@@ -0,0 +1,22 @@
+"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 ButtonTertiary = function ButtonTertiary(_ref) {
+  var value = _ref.value,
+      onClickHandler = _ref.onClickHandler;
+  return _react.default.createElement("button", {
+    className: 'button button--tertiary',
+    onClick: onClickHandler
+  }, value);
+};
+
+var _default = ButtonTertiary;
+exports.default = _default;

client/build/components/ChannelAbout/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 ChannelAbout = function ChannelAbout() {
+  return _react.default.createElement("div", null, _react.default.createElement("p", {
+    className: 'text--large'
+  }, "Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends.  You can create 1 channel, or 100, so whether you're ", _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "/@catalonia2017:43dcf47163caa21d8404d9fe9b30f78ef3e146a8"
+  }, "documenting important events"), ", or making a public repository for ", _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "/@catGifs"
+  }, "cat gifs"), " (password: '1234'), try creating a channel for it!"));
+};
+
+var _default = ChannelAbout;
+exports.default = _default;

client/build/components/ChannelCreateNameInput/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Label = _interopRequireDefault(require("@components/Label"));
+
+var _RowLabeled = _interopRequireDefault(require("@components/RowLabeled"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ChannelCreateNameInput = function ChannelCreateNameInput(_ref) {
+  var value = _ref.value,
+      error = _ref.error,
+      handleNameInput = _ref.handleNameInput;
+  return _react.default.createElement(_RowLabeled.default, {
+    label: _react.default.createElement(_Label.default, {
+      value: 'Name:'
+    }),
+    content: _react.default.createElement("div", {
+      className: "input-area"
+    }, _react.default.createElement("span", null, "@"), _react.default.createElement("input", {
+      type: "text",
+      name: "channel",
+      className: "input-text",
+      placeholder: "exampleChannelName",
+      value: value,
+      onChange: handleNameInput
+    }), value && !error && _react.default.createElement("span", {
+      className: "info-message--success span--absolute"
+    }, "\u2713"), error && _react.default.createElement("span", {
+      className: "info-message--failure span--absolute"
+    }, "\u2716"))
+  });
+};
+
+var _default = ChannelCreateNameInput;
+exports.default = _default;

client/build/components/ChannelCreatePasswordInput/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Label = _interopRequireDefault(require("@components/Label"));
+
+var _RowLabeled = _interopRequireDefault(require("@components/RowLabeled"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ChannelCreatePasswordInput = function ChannelCreatePasswordInput(_ref) {
+  var value = _ref.value,
+      handlePasswordInput = _ref.handlePasswordInput;
+  return _react.default.createElement(_RowLabeled.default, {
+    label: _react.default.createElement(_Label.default, {
+      value: 'Password:'
+    }),
+    content: _react.default.createElement("div", {
+      className: "input-area"
+    }, _react.default.createElement("input", {
+      type: "password",
+      name: "password",
+      className: "input-text",
+      placeholder: "",
+      value: value,
+      onChange: handlePasswordInput
+    }))
+  });
+};
+
+var _default = ChannelCreatePasswordInput;
+exports.default = _default;

client/build/components/ChannelInfoDisplay/index.js

@@ -0,0 +1,24 @@
+"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 ChannelInfoDisplay = function ChannelInfoDisplay(_ref) {
+  var name = _ref.name,
+      longId = _ref.longId,
+      shortId = _ref.shortId;
+  return _react.default.createElement("div", null, _react.default.createElement("h2", null, "channel name: ", name), _react.default.createElement("p", {
+    className: 'text--secondary'
+  }, "full channel id: ", longId), _react.default.createElement("p", {
+    className: 'text--secondary'
+  }, "short channel id: ", shortId));
+};
+
+var _default = ChannelInfoDisplay;
+exports.default = _default;

client/build/components/ChannelLoginNameInput/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _RowLabeled = _interopRequireDefault(require("@components/RowLabeled"));
+
+var _Label = _interopRequireDefault(require("@components/Label"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ChannelLoginNameInput = function ChannelLoginNameInput(_ref) {
+  var channelName = _ref.channelName,
+      handleInput = _ref.handleInput;
+  return _react.default.createElement(_RowLabeled.default, {
+    label: _react.default.createElement(_Label.default, {
+      value: 'Name:'
+    }),
+    content: _react.default.createElement("div", {
+      className: "input-area"
+    }, _react.default.createElement("span", null, "@"), _react.default.createElement("input", {
+      type: "text",
+      id: "channel-login-name-input",
+      className: "input-text",
+      name: "name",
+      placeholder: "Your Channel Name",
+      value: channelName,
+      onChange: handleInput
+    }))
+  });
+};
+
+var _default = ChannelLoginNameInput;
+exports.default = _default;

client/build/components/ChannelLoginPasswordInput/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _RowLabeled = _interopRequireDefault(require("@components/RowLabeled"));
+
+var _Label = _interopRequireDefault(require("@components/Label"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ChannelLoginPasswordInput = function ChannelLoginPasswordInput(_ref) {
+  var channelPassword = _ref.channelPassword,
+      handleInput = _ref.handleInput;
+  return _react.default.createElement(_RowLabeled.default, {
+    label: _react.default.createElement(_Label.default, {
+      value: 'Password:'
+    }),
+    content: _react.default.createElement("div", {
+      className: "input-area"
+    }, _react.default.createElement("input", {
+      type: "password",
+      id: "channel-login-password-input",
+      name: "password",
+      className: "input-text",
+      placeholder: "",
+      value: channelPassword,
+      onChange: handleInput
+    }))
+  });
+};
+
+var _default = ChannelLoginPasswordInput;
+exports.default = _default;

client/build/components/ChannelSelectDropdown/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _publish_channel_select_states = require("../../constants/publish_channel_select_states");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ChannelSelectDropdown = function ChannelSelectDropdown(_ref) {
+  var selectedChannel = _ref.selectedChannel,
+      handleSelection = _ref.handleSelection,
+      loggedInChannelName = _ref.loggedInChannelName;
+  return _react.default.createElement("select", {
+    id: "channel-name-select",
+    className: "select select--arrow",
+    value: selectedChannel,
+    onChange: handleSelection
+  }, loggedInChannelName && _react.default.createElement("option", {
+    value: loggedInChannelName
+  }, loggedInChannelName), _react.default.createElement("option", {
+    value: _publish_channel_select_states.LOGIN
+  }, "Existing"), _react.default.createElement("option", {
+    value: _publish_channel_select_states.CREATE
+  }, "New"));
+};
+
+var _default = ChannelSelectDropdown;
+exports.default = _default;

client/build/components/ChannelTools/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ChannelLoginForm = _interopRequireDefault(require("@containers/ChannelLoginForm"));
+
+var _ChannelCreateForm = _interopRequireDefault(require("@containers/ChannelCreateForm"));
+
+var _Row = _interopRequireDefault(require("@components/Row"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ChannelTools = function ChannelTools() {
+  return _react.default.createElement("div", null, _react.default.createElement(_Row.default, null, _react.default.createElement("h3", null, "Log in to an existing channel:"), _react.default.createElement(_ChannelLoginForm.default, null)), _react.default.createElement(_Row.default, null, _react.default.createElement("h3", null, "Create a brand new channel:"), _react.default.createElement(_ChannelCreateForm.default, null)));
+};
+
+var _default = ChannelTools;
+exports.default = _default;

client/build/components/ChooseAnonymousPublishRadio/index.js

@@ -0,0 +1,30 @@
+"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 ChooseAnonymousPublishRadio = function ChooseAnonymousPublishRadio(_ref) {
+  var publishInChannel = _ref.publishInChannel,
+      toggleAnonymousPublish = _ref.toggleAnonymousPublish;
+  return _react.default.createElement("div", null, _react.default.createElement("input", {
+    type: "radio",
+    name: "anonymous-or-channel",
+    id: "anonymous-radio",
+    className: "input-radio",
+    value: "anonymous",
+    checked: !publishInChannel,
+    onChange: toggleAnonymousPublish
+  }), _react.default.createElement("label", {
+    className: "label-radio",
+    htmlFor: "anonymous-radio"
+  }, "Anonymous"));
+};
+
+var _default = ChooseAnonymousPublishRadio;
+exports.default = _default;

client/build/components/ChooseChannelPublishRadio/index.js

@@ -0,0 +1,30 @@
+"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 ChooseChannelPublishRadio = function ChooseChannelPublishRadio(_ref) {
+  var publishInChannel = _ref.publishInChannel,
+      toggleAnonymousPublish = _ref.toggleAnonymousPublish;
+  return _react.default.createElement("div", null, _react.default.createElement("input", {
+    type: "radio",
+    name: "anonymous-or-channel",
+    id: "channel-radio",
+    className: "input-radio",
+    value: "in a channel",
+    checked: publishInChannel,
+    onChange: toggleAnonymousPublish
+  }), _react.default.createElement("label", {
+    className: "label-radio",
+    htmlFor: "channel-radio"
+  }, "In a channel"));
+};
+
+var _default = ChooseChannelPublishRadio;
+exports.default = _default;

client/build/components/Column/index.js

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

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: 'text--interactive'
+  }, "Drop it."));
+};
+
+var _default = DropzoneDropItDisplay;
+exports.default = _default;

client/build/components/DropzoneInstructionsDisplay/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FormFeedbackDisplay = _interopRequireDefault(require("@components/FormFeedbackDisplay"));
+
+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: 'text--large'
+  }, "Drag & drop image or video here to publish"), _react.default.createElement("p", {
+    className: 'text--small'
+  }, "OR"), _react.default.createElement("p", {
+    className: 'text--large text--underline'
+  }, "CHOOSE FILE"), _react.default.createElement(_FormFeedbackDisplay.default, {
+    errorMessage: fileError,
+    defaultMessage: false
+  }));
+};
+
+var _default = DropzoneInstructionsDisplay;
+exports.default = _default;

client/build/components/DropzonePreviewImage/index.js

@@ -0,0 +1,122 @@
+"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", {
+        src: this.state.imgSource,
+        className: 'dropzone-preview-image ' + (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/FormFeedbackDisplay/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 FormFeedbackDisplay = function FormFeedbackDisplay(_ref) {
+  var errorMessage = _ref.errorMessage,
+      defaultMessage = _ref.defaultMessage;
+  return _react.default.createElement("div", {
+    className: 'form-feedback'
+  }, errorMessage ? _react.default.createElement("p", {
+    className: 'text--small text--failure'
+  }, errorMessage) : _react.default.createElement("div", null, defaultMessage ? _react.default.createElement("p", {
+    className: 'text--small text--secondary'
+  }, defaultMessage) : _react.default.createElement("p", {
+    className: 'text--small'
+  }, "\xA0")));
+};
+
+var _default = FormFeedbackDisplay;
+exports.default = _default;

client/build/components/HorizontalSplit/index.js

@@ -0,0 +1,58 @@
+"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 HorizontalSplit =
+/*#__PURE__*/
+function (_React$Component) {
+  function HorizontalSplit() {
+    _classCallCheck(this, HorizontalSplit);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(HorizontalSplit).apply(this, arguments));
+  }
+
+  _createClass(HorizontalSplit, [{
+    key: "render",
+    value: function render() {
+      return _react.default.createElement("div", {
+        className: 'horizontal-split'
+      }, _react.default.createElement("div", {
+        className: 'column'
+      }, this.props.leftSide), _react.default.createElement("div", {
+        className: 'column'
+      }, this.props.rightSide));
+    }
+  }]);
+
+  _inherits(HorizontalSplit, _React$Component);
+
+  return HorizontalSplit;
+}(_react.default.Component);
+
+var _default = HorizontalSplit;
+exports.default = _default;

client/build/components/InactiveStatusBar/index.js

@@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var InactiveStatusBar = function InactiveStatusBar() {
   return _react.default.createElement("span", {
-    className: "progress-bar progress-bar--inactive"
+    className: "progress-bar--inactive"
   }, "| ");
 };
 

client/build/components/Label/index.js

@@ -0,0 +1,20 @@
+"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 Label = function Label(_ref) {
+  var value = _ref.value;
+  return _react.default.createElement("label", {
+    className: "label"
+  }, value);
+};
+
+var _default = Label;
+exports.default = _default;

client/build/components/NavBar/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SpaceBetween = _interopRequireDefault(require("@components/SpaceBetween"));
+
+var _Logo = _interopRequireDefault(require("@components/Logo"));
+
+var _SiteDescription = _interopRequireDefault(require("@containers/SiteDescription"));
+
+var _NavigationLinks = _interopRequireDefault(require("@containers/NavigationLinks"));
+
+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 NavBar =
+/*#__PURE__*/
+function (_React$Component) {
+  function NavBar() {
+    _classCallCheck(this, NavBar);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(NavBar).apply(this, arguments));
+  }
+
+  _createClass(NavBar, [{
+    key: "render",
+    value: function render() {
+      return _react.default.createElement("div", {
+        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(NavBar, _React$Component);
+
+  return NavBar;
+}(_react.default.Component);
+
+var _default = NavBar;
+exports.default = _default;

client/build/components/NavBarChannelOptionsDropdown/index.js

@@ -15,10 +15,12 @@ function NavBarChannelDropdown(_ref) {
       defaultSelection = _ref.defaultSelection,
       VIEW = _ref.VIEW,
       LOGOUT = _ref.LOGOUT;
-  return _react.default.createElement("select", {
+  return _react.default.createElement("div", {
+    className: 'nav-bar-link link--nav'
+  }, _react.default.createElement("select", {
     type: "text",
     id: "nav-bar-channel-select",
-    className: "select select--arrow link--nav",
+    className: "select select--arrow",
     onChange: handleSelection,
     value: defaultSelection
   }, _react.default.createElement("option", {
@@ -27,9 +29,8 @@ function NavBarChannelDropdown(_ref) {
     value: VIEW
   }, "View"), _react.default.createElement("option", {
     value: LOGOUT
-  }, "Logout"));
+  }, "Logout")));
 }
 
-;
 var _default = NavBarChannelDropdown;
 exports.default = _default;

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

client/build/components/PageLayout/index.js

@@ -7,9 +7,9 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactHelmet = _interopRequireDefault(require("react-helmet"));
+var _SEO = _interopRequireDefault(require("@containers/SEO"));
 
-var _index = _interopRequireDefault(require("@containers/NavBar/index"));
+var _NavBar = _interopRequireDefault(require("@components/NavBar"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -31,35 +31,35 @@ 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 PageLayout =
 /*#__PURE__*/
 function (_React$Component) {
-  function FourOhForPage() {
-    _classCallCheck(this, FourOhForPage);
+  function PageLayout() {
+    _classCallCheck(this, PageLayout);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(FourOhForPage).apply(this, arguments));
+    return _possibleConstructorReturn(this, _getPrototypeOf(PageLayout).apply(this, arguments));
   }
 
-  _createClass(FourOhForPage, [{
+  _createClass(PageLayout, [{
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-          title = _this$props.title,
-          host = _this$props.host;
-      return _react.default.createElement("div", null, _react.default.createElement(_reactHelmet.default, null, _react.default.createElement("title", null, title, " - 404"), _react.default.createElement("link", {
-        rel: "canonical",
-        href: "".concat(host, "/404")
-      })), _react.default.createElement(_index.default, null), _react.default.createElement("div", {
-        className: "row row--padded"
-      }, _react.default.createElement("h2", null, "404"), _react.default.createElement("p", null, "That page does not exist")));
+      return _react.default.createElement("div", {
+        className: 'page-layout'
+      }, _react.default.createElement(_SEO.default, {
+        pageTitle: this.props.pageTitle,
+        pageUri: this.props.pageUri,
+        asset: this.props.asset,
+        channel: this.props.channel
+      }), _react.default.createElement(_NavBar.default, null), _react.default.createElement("div", {
+        className: 'content'
+      }, this.props.children));
     }
   }]);
 
-  _inherits(FourOhForPage, _React$Component);
+  _inherits(PageLayout, _React$Component);
 
-  return FourOhForPage;
+  return PageLayout;
 }(_react.default.Component);
 
-;
-var _default = FourOhForPage;
+var _default = PageLayout;
 exports.default = _default;

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

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

client/build/components/PageLayoutShowLite/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SEO = _interopRequireDefault(require("@containers/SEO"));
+
+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 PageLayoutShowLite =
+/*#__PURE__*/
+function (_React$Component) {
+  function PageLayoutShowLite() {
+    _classCallCheck(this, PageLayoutShowLite);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(PageLayoutShowLite).apply(this, arguments));
+  }
+
+  _createClass(PageLayoutShowLite, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate() {
+      return false;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return _react.default.createElement("div", {
+        className: 'page-layout-show-lite'
+      }, _react.default.createElement(_SEO.default, {
+        pageTitle: this.props.pageTitle,
+        asset: this.props.asset
+      }), _react.default.createElement("div", {
+        className: 'content'
+      }, this.props.children));
+    }
+  }]);
+
+  _inherits(PageLayoutShowLite, _React$Component);
+
+  return PageLayoutShowLite;
+}(_react.default.Component);
+
+var _default = PageLayoutShowLite;
+exports.default = _default;

client/build/components/PublishDescriptionInput/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _RowLabeled = _interopRequireDefault(require("@components/RowLabeled"));
+
+var _Label = _interopRequireDefault(require("@components/Label"));
+
+var _ExpandingTextArea = _interopRequireDefault(require("@components/ExpandingTextArea"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var PublishDescriptionInput = function PublishDescriptionInput(_ref) {
+  var description = _ref.description,
+      handleInput = _ref.handleInput;
+  return _react.default.createElement(_RowLabeled.default, {
+    label: _react.default.createElement(_Label.default, {
+      value: 'Description:'
+    }),
+    content: _react.default.createElement(_ExpandingTextArea.default, {
+      id: "publish-description",
+      className: "textarea textarea--primary textarea--full-width",
+      rows: 1,
+      maxLength: 2000,
+      style: {
+        maxHeight: 200
+      },
+      name: "description",
+      placeholder: "Optional description",
+      value: description,
+      onChange: handleInput
+    })
+  });
+};
+
+var _default = PublishDescriptionInput;
+exports.default = _default;

client/build/components/PublishDetailsRow/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+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); }
+
+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 RowLabeled =
+/*#__PURE__*/
+function (_React$Component) {
+  function RowLabeled() {
+    _classCallCheck(this, RowLabeled);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(RowLabeled).apply(this, arguments));
+  }
+
+  _createClass(RowLabeled, [{
+    key: "render",
+    value: function render() {
+      return _react.default.createElement(_Row.default, null, _react.default.createElement("div", {
+        className: 'publish-details-row'
+      }, _react.default.createElement("div", {
+        className: 'publish-details-label'
+      }, this.props.label), _react.default.createElement("div", {
+        className: 'publish-details-content'
+      }, this.props.content)));
+    }
+  }]);
+
+  _inherits(RowLabeled, _React$Component);
+
+  return RowLabeled;
+}(_react.default.Component);
+
+var _default = RowLabeled;
+exports.default = _default;

client/build/components/PublishFinePrint/index.js

@@ -0,0 +1,23 @@
+"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 PublishFinePrint = function PublishFinePrint() {
+  return _react.default.createElement("p", {
+    className: 'text--extra-small text--secondary'
+  }, "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",
+    target: "_blank",
+    href: "https://lbry.io/learn"
+  }, "Read more."));
+};
+
+var _default = PublishFinePrint;
+exports.default = _default;

client/build/components/PublishLicenseInput/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _RowLabeled = _interopRequireDefault(require("@components/RowLabeled"));
+
+var _Label = _interopRequireDefault(require("@components/Label"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var PublishLicenseInput = function PublishLicenseInput(_ref) {
+  var handleSelect = _ref.handleSelect;
+  return _react.default.createElement(_RowLabeled.default, {
+    label: _react.default.createElement(_Label.default, {
+      value: 'License:'
+    }),
+    content: _react.default.createElement("select", {
+      type: "text",
+      name: "license",
+      id: "publish-license",
+      className: "select select--primary",
+      onChange: handleSelect
+    }, _react.default.createElement("option", {
+      value: " "
+    }, "Unspecified"), _react.default.createElement("option", {
+      value: "Public Domain"
+    }, "Public Domain"), _react.default.createElement("option", {
+      value: "Creative Commons"
+    }, "Creative Commons"))
+  });
+};
+
+var _default = PublishLicenseInput;
+exports.default = _default;

client/build/components/PublishNsfwInput/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _RowLabeled = _interopRequireDefault(require("@components/RowLabeled"));
+
+var _Label = _interopRequireDefault(require("@components/Label"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var PublishNsfwInput = function PublishNsfwInput(_ref) {
+  var nsfw = _ref.nsfw,
+      handleInput = _ref.handleInput;
+  return _react.default.createElement(_RowLabeled.default, {
+    label: _react.default.createElement(_Label.default, {
+      value: 'Mature:'
+    }),
+    content: _react.default.createElement("input", {
+      className: "input-checkbox",
+      type: "checkbox",
+      id: "publish-nsfw",
+      name: "nsfw",
+      value: nsfw,
+      onChange: handleInput
+    })
+  });
+};
+
+var _default = PublishNsfwInput;
+exports.default = _default;

client/build/components/PublishPreview/index.js

@@ -7,7 +7,15 @@ 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"));
+
+var _Row = _interopRequireDefault(require("@components/Row"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -32,79 +40,19 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || functio
 var PublishPreview =
 /*#__PURE__*/
 function (_React$Component) {
-  function PublishPreview(props) {
-    var _this;
-
+  function PublishPreview() {
     _classCallCheck(this, PublishPreview);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(PublishPreview).call(this, props));
-    _this.state = {
-      imgSource: '',
-      defaultThumbnail: '/assets/img/video_thumb_default.png'
-    };
-    return _this;
+    return _possibleConstructorReturn(this, _getPrototypeOf(PublishPreview).apply(this, arguments));
   }
 
   _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 ? 'dim' : '',
-        alt: "publish preview"
-      });
+      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)
+      }));
     }
   }]);
 
@@ -114,10 +62,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/components/PublishUrlMiddleDisplay/index.js

@@ -21,13 +21,13 @@ function UrlMiddle(_ref) {
     if (selectedChannel === loggedInChannelName) {
       return _react.default.createElement("span", {
         id: "url-channel",
-        className: "url-text--secondary"
+        className: "publish-url-text"
       }, loggedInChannelName, ":", loggedInChannelShortId, " /");
     }
 
     return _react.default.createElement("span", {
       id: "url-channel-placeholder",
-      className: "url-text--secondary tooltip"
+      className: "publish-url-text tooltip"
     }, "@channel", _react.default.createElement("span", {
       className: "tooltip-text"
     }, "Select a channel below"), " /");
@@ -35,7 +35,7 @@ function UrlMiddle(_ref) {
 
   return _react.default.createElement("span", {
     id: "url-no-channel-placeholder",
-    className: "url-text--secondary tooltip"
+    className: "publish-url-text tooltip"
   }, "xyz", _react.default.createElement("span", {
     className: "tooltip-text"
   }, "This will be a random id"), " /");

client/build/components/Row/index.js

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

client/build/components/RowLabeled/index.js

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

client/build/components/SpaceAround/index.js

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

client/build/components/SpaceBetween/index.js

@@ -0,0 +1,54 @@
+"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: "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/components/VerticalSplit/index.js

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

client/build/containers/AssetDisplay/view.js

@@ -61,7 +61,7 @@ function (_React$Component) {
           fileExt = _this$props$asset$cla2.fileExt,
           thumbnail = _this$props$asset$cla2.thumbnail;
       return _react.default.createElement("div", {
-        id: "asset-display-component"
+        className: 'asset-display'
       }, status === _asset_display_states.LOCAL_CHECK && _react.default.createElement("div", null, _react.default.createElement("p", null, "Checking to see if Spee.ch has your asset locally...")), status === _asset_display_states.UNAVAILABLE && _react.default.createElement("div", null, _react.default.createElement("p", null, "Sit tight, we're searching the LBRY blockchain for your asset!"), _react.default.createElement(_ProgressBar.default, {
         size: 12
       }), _react.default.createElement("p", null, "Curious what magic is happening here? ", _react.default.createElement("a", {
@@ -79,22 +79,16 @@ function (_React$Component) {
           case 'image/jpeg':
           case 'image/jpg':
           case 'image/png':
-            return _react.default.createElement("img", {
-              className: "asset",
-              src: "/".concat(claimId, "/").concat(name, ".").concat(fileExt),
-              alt: name
-            });
-
           case 'image/gif':
             return _react.default.createElement("img", {
-              className: "asset",
+              className: "asset-image",
               src: "/".concat(claimId, "/").concat(name, ".").concat(fileExt),
               alt: name
             });
 
           case 'video/mp4':
             return _react.default.createElement("video", {
-              className: "asset video",
+              className: "asset-video",
               controls: true,
               poster: thumbnail
             }, _react.default.createElement("source", {

client/build/containers/AssetInfo/view.js

@@ -9,6 +9,14 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactRouterDom = require("react-router-dom");
 
+var _Label = _interopRequireDefault(require("@components/Label"));
+
+var _RowLabeled = _interopRequireDefault(require("@components/RowLabeled"));
+
+var _Row = _interopRequireDefault(require("@components/Row"));
+
+var _SpaceBetween = _interopRequireDefault(require("@components/SpaceBetween"));
+
 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,6 +37,44 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || functio
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
+var AssetShareButtons = function AssetShareButtons(_ref) {
+  var host = _ref.host,
+      name = _ref.name,
+      shortId = _ref.shortId;
+  return _react.default.createElement(_SpaceBetween.default, null, _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "https://twitter.com/intent/tweet?text=".concat(host, "/").concat(shortId, "/").concat(name)
+  }, "twitter"), _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "https://www.facebook.com/sharer/sharer.php?u=".concat(host, "/").concat(shortId, "/").concat(name)
+  }, "facebook"), _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "http://tumblr.com/widgets/share/tool?canonicalUrl=".concat(host, "/").concat(shortId, "/").concat(name)
+  }, "tumblr"), _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "https://www.reddit.com/submit?url=".concat(host, "/").concat(shortId, "/").concat(name, "&title=").concat(name)
+  }, "reddit"));
+};
+
+var ClickToCopy = function ClickToCopy(_ref2) {
+  var id = _ref2.id,
+      value = _ref2.value,
+      copyToClipboard = _ref2.copyToClipboard;
+  return _react.default.createElement("input", {
+    id: id,
+    value: value,
+    onClick: copyToClipboard,
+    type: "text",
+    className: "click-to-copy",
+    readOnly: true,
+    spellCheck: "false"
+  });
+};
+
 var AssetInfo =
 /*#__PURE__*/
 function (_React$Component) {
@@ -45,7 +91,10 @@ function (_React$Component) {
   _createClass(AssetInfo, [{
     key: "copyToClipboard",
     value: function copyToClipboard(event) {
-      var elementToCopy = event.target.dataset.elementtocopy;
+      console.log('event:', event);
+      console.log('event.target:', event.target);
+      console.log('event.target.id:', event.target.id);
+      var elementToCopy = event.target.id;
       var element = document.getElementById(elementToCopy);
       element.select();
 
@@ -72,147 +121,61 @@ function (_React$Component) {
           contentType = _this$props$asset$cla.contentType,
           thumbnail = _this$props$asset$cla.thumbnail,
           host = _this$props$asset$cla.host;
-      return _react.default.createElement("div", null, channelName && _react.default.createElement("div", {
-        className: "row row--padded row--wide row--no-top"
-      }, _react.default.createElement("div", {
-        className: "column column--2 column--med-10"
-      }, _react.default.createElement("span", {
-        className: "text"
-      }, "Channel:")), _react.default.createElement("div", {
-        className: "column column--8 column--med-10"
-      }, _react.default.createElement("span", {
+      return _react.default.createElement("div", null, channelName && _react.default.createElement(_Row.default, null, _react.default.createElement(_RowLabeled.default, {
+        label: _react.default.createElement(_Label.default, {
+          value: 'Channel:'
+        }),
+        content: _react.default.createElement("span", {
           className: "text"
         }, _react.default.createElement(_reactRouterDom.Link, {
           to: "/".concat(channelName, ":").concat(certificateId)
-      }, channelName)))), description && _react.default.createElement("div", {
-        className: "row row--padded row--wide row--no-top"
-      }, _react.default.createElement("span", {
-        className: "text"
-      }, description)), _react.default.createElement("div", {
-        id: "show-share-buttons",
-        className: "row row--padded row--wide row--no-top"
-      }, _react.default.createElement("div", {
-        className: "column column--2 column--med-10"
-      }, _react.default.createElement("span", {
-        className: "text"
-      }, "Share:")), _react.default.createElement("div", {
-        className: "column column--8 column--med-10"
-      }, _react.default.createElement("div", {
-        className: "row row--short row--wide flex-container--row flex-container--space-between-bottom flex-container--wrap"
-      }, _react.default.createElement("a", {
-        className: "link--primary",
-        target: "_blank",
-        href: "https://twitter.com/intent/tweet?text=".concat(host, "/").concat(shortId, "/").concat(name)
-      }, "twitter"), _react.default.createElement("a", {
-        className: "link--primary",
-        target: "_blank",
-        href: "https://www.facebook.com/sharer/sharer.php?u=".concat(host, "/").concat(shortId, "/").concat(name)
-      }, "facebook"), _react.default.createElement("a", {
-        className: "link--primary",
-        target: "_blank",
-        href: "http://tumblr.com/widgets/share/tool?canonicalUrl=".concat(host, "/").concat(shortId, "/").concat(name)
-      }, "tumblr"), _react.default.createElement("a", {
-        className: "link--primary",
-        target: "_blank",
-        href: "https://www.reddit.com/submit?url=".concat(host, "/").concat(shortId, "/").concat(name, "&title=").concat(name)
-      }, "reddit")))), _react.default.createElement("div", {
-        className: "row row--padded row--wide row--no-top"
-      }, _react.default.createElement("div", {
-        id: "show-short-link"
-      }, _react.default.createElement("div", {
-        className: "column column--2 column--med-10"
-      }, _react.default.createElement("span", {
-        className: "text"
-      }, "Link:")), _react.default.createElement("div", {
-        className: "column column--8 column--med-10"
-      }, _react.default.createElement("div", {
-        className: "row row--short row--wide"
-      }, _react.default.createElement("div", {
-        className: "column column--7"
-      }, _react.default.createElement("div", {
-        className: "input-error",
-        id: "input-error-copy-short-link",
-        hidden: "true"
-      }, "error here"), _react.default.createElement("input", {
-        type: "text",
-        id: "short-link",
-        className: "input-disabled input-text--full-width",
-        readOnly: true,
-        spellCheck: "false",
+        }, channelName))
+      })), _react.default.createElement(_Row.default, null, _react.default.createElement(_RowLabeled.default, {
+        label: _react.default.createElement(_Label.default, {
+          value: 'Share:'
+        }),
+        content: _react.default.createElement(AssetShareButtons, {
+          host: host,
+          shortId: shortId
+        })
+      })), _react.default.createElement(_Row.default, null, _react.default.createElement(_RowLabeled.default, {
+        label: _react.default.createElement(_Label.default, {
+          value: 'Link:'
+        }),
+        content: _react.default.createElement(ClickToCopy, {
+          id: 'short-link',
           value: "".concat(host, "/").concat(shortId, "/").concat(name, ".").concat(fileExt),
-        onClick: this.select
-      })), _react.default.createElement("div", {
-        className: "column column--1"
-      }), _react.default.createElement("div", {
-        className: "column column--2"
-      }, _react.default.createElement("button", {
-        className: "button--primary button--wide",
-        "data-elementtocopy": "short-link",
-        onClick: this.copyToClipboard
-      }, "copy"))))), _react.default.createElement("div", {
-        id: "show-embed-code"
-      }, _react.default.createElement("div", {
-        className: "column column--2 column--med-10"
-      }, _react.default.createElement("span", {
-        className: "text"
-      }, "Embed:")), _react.default.createElement("div", {
-        className: "column column--8 column--med-10"
-      }, _react.default.createElement("div", {
-        className: "row row--short row--wide"
-      }, _react.default.createElement("div", {
-        className: "column column--7"
-      }, _react.default.createElement("div", {
-        className: "input-error",
-        id: "input-error-copy-embed-text",
-        hidden: "true"
-      }, "error here"), contentType === 'video/mp4' ? _react.default.createElement("input", {
-        type: "text",
-        id: "embed-text",
-        className: "input-disabled input-text--full-width",
-        readOnly: true,
-        onClick: this.select,
-        spellCheck: "false",
-        value: "<video width=\"100%\" controls poster=\"".concat(thumbnail, "\" src=\"").concat(host, "/").concat(claimId, "/").concat(name, ".").concat(fileExt, "\"/></video>")
-      }) : _react.default.createElement("input", {
-        type: "text",
-        id: "embed-text",
-        className: "input-disabled input-text--full-width",
-        readOnly: true,
-        onClick: this.select,
-        spellCheck: "false",
-        value: "<img src=\"".concat(host, "/").concat(claimId, "/").concat(name, ".").concat(fileExt, "\"/>")
-      })), _react.default.createElement("div", {
-        className: "column column--1"
-      }), _react.default.createElement("div", {
-        className: "column column--2"
-      }, _react.default.createElement("button", {
-        className: "button--primary button--wide",
-        "data-elementtocopy": "embed-text",
-        onClick: this.copyToClipboard
-      }, "copy")))))), _react.default.createElement("div", {
-        className: "row row--padded row--wide row--no-top"
-      }, _react.default.createElement("div", {
-        className: "flex-container--row flex-container--space-between-bottom"
-      }, _react.default.createElement(_reactRouterDom.Link, {
+          copyToClipboard: this.copyToClipboard
+        })
+      })), _react.default.createElement(_Row.default, null, _react.default.createElement(_RowLabeled.default, {
+        label: _react.default.createElement(_Label.default, {
+          value: 'Embed:'
+        }),
+        content: _react.default.createElement("div", null, contentType === 'video/mp4' ? _react.default.createElement(ClickToCopy, {
+          id: 'embed-text-video',
+          value: "<video width=\"100%\" controls poster=\"".concat(thumbnail, "\" src=\"").concat(host, "/").concat(claimId, "/").concat(name, ".").concat(fileExt, "\"/></video>"),
+          copyToClipboard: this.copyToClipboard
+        }) : _react.default.createElement(ClickToCopy, {
+          id: 'embed-text-image',
+          value: "<img src=\"".concat(host, "/").concat(claimId, "/").concat(name, ".").concat(fileExt, "\"/>"),
+          copyToClipboard: this.copyToClipboard
+        }))
+      })), _react.default.createElement(_Row.default, null, _react.default.createElement(_SpaceBetween.default, null, _react.default.createElement(_reactRouterDom.Link, {
         className: "link--primary",
         to: "/".concat(shortId, "/").concat(name, ".").concat(fileExt)
-      }, _react.default.createElement("span", {
-        className: "text"
-      }, "Direct Link")), _react.default.createElement("a", {
-        className: "link--primary",
+      }, "Direct Link"), _react.default.createElement("a", {
+        className: 'link--primary',
         href: "".concat(host, "/").concat(claimId, "/").concat(name, ".").concat(fileExt),
         download: name
       }, "Download"), _react.default.createElement("a", {
-        className: "link--primary",
+        className: 'link--primary',
         target: "_blank",
         href: "https://lbry.io/dmca"
-      }, "Report"))), _react.default.createElement("div", {
-        className: "row row--padded row--wide row--no-top"
-      }, "Hosted via the ", _react.default.createElement("a", {
-        className: "link--primary",
+      }, "Report"))), description && _react.default.createElement(_Row.default, null, _react.default.createElement("p", null, description)), _react.default.createElement(_Row.default, null, _react.default.createElement("p", null, "Hosted via the ", _react.default.createElement("a", {
+        className: 'link--primary',
         href: 'https://lbry.io/get',
         target: '_blank'
-      }, "LBRY blockchain")));
+      }, "LBRY"), " blockchain")));
     }
   }]);
 

client/build/containers/AssetTitle/view.js

@@ -7,13 +7,13 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _Row = _interopRequireDefault(require("@components/Row"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var AssetTitle = function AssetTitle(_ref) {
   var title = _ref.title;
-  return _react.default.createElement("div", null, _react.default.createElement("span", {
-    className: "text--large"
-  }, title));
+  return _react.default.createElement(_Row.default, null, _react.default.createElement("h3", null, title));
 };
 
 var _default = AssetTitle;

client/build/containers/ChannelClaimsDisplay/index.js

@@ -14,7 +14,8 @@ var _view = _interopRequireDefault(require("./view"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var mapStateToProps = function mapStateToProps(_ref) {
-  var show = _ref.show;
+  var show = _ref.show,
+      defaultThumbnail = _ref.site.defaultThumbnail;
   // select channel key
   var request = show.requestList[show.request.id];
   var channelKey = request.key; // select channel claims
@@ -23,7 +24,8 @@ var mapStateToProps = function mapStateToProps(_ref) {
 
   return {
     channelKey: channelKey,
-    channel: channel
+    channel: channel,
+    defaultThumbnail: defaultThumbnail
   };
 };
 

client/build/containers/ChannelClaimsDisplay/view.js

@@ -70,14 +70,17 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props$channel$c = this.props.channel.claimsData,
-          claims = _this$props$channel$c.claims,
-          currentPage = _this$props$channel$c.currentPage,
-          totalPages = _this$props$channel$c.totalPages;
+      var _this$props2 = this.props,
+          _this$props2$channel$ = _this$props2.channel.claimsData,
+          claims = _this$props2$channel$.claims,
+          currentPage = _this$props2$channel$.currentPage,
+          totalPages = _this$props2$channel$.totalPages,
+          defaultThumbnail = _this$props2.defaultThumbnail;
       return _react.default.createElement("div", {
         className: "row row--tall"
       }, claims.length > 0 ? _react.default.createElement("div", null, claims.map(function (claim, index) {
         return _react.default.createElement(_AssetPreview.default, {
+          defaultThumbnail: defaultThumbnail,
           claimData: claim,
           key: "".concat(claim.name, "-").concat(index)
         });

client/build/containers/ChannelCreateForm/view.js

@@ -7,6 +7,14 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _ChannelCreateNameInput = _interopRequireDefault(require("@components/ChannelCreateNameInput"));
+
+var _ChannelCreatePasswordInput = _interopRequireDefault(require("@components/ChannelCreatePasswordInput"));
+
+var _ButtonPrimary = _interopRequireDefault(require("@components/ButtonPrimary"));
+
+var _FormFeedbackDisplay = _interopRequireDefault(require("@components/FormFeedbackDisplay"));
+
 var _ProgressBar = _interopRequireDefault(require("@components/ProgressBar"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -114,63 +122,21 @@ function (_React$Component) {
           password = _this$props.password,
           status = _this$props.status;
       var formError = this.returnErrors();
-      return _react.default.createElement("div", null, !status ? _react.default.createElement("form", {
-        id: "publish-channel-form"
-      }, _react.default.createElement("div", {
-        className: "row row--wide row--short"
-      }, _react.default.createElement("div", {
-        className: "column column--3 column--sml-10"
-      }, _react.default.createElement("label", {
-        className: "label",
-        htmlFor: "new-channel-name"
-      }, "Name:")), _react.default.createElement("div", {
-        className: "column column--6 column--sml-10"
-      }, _react.default.createElement("div", {
-        className: "input-text--primary flex-container--row flex-container--left-bottom span--relative"
-      }, _react.default.createElement("span", null, "@"), _react.default.createElement("input", {
-        type: "text",
-        name: "channel",
-        id: "new-channel-name",
-        className: "input-text",
-        placeholder: "exampleChannelName",
+      return _react.default.createElement("div", null, !status ? _react.default.createElement("div", null, _react.default.createElement(_ChannelCreateNameInput.default, {
         value: name.value,
-        onChange: this.handleNameInput
-      }), name.value && !name.error && _react.default.createElement("span", {
-        id: "input-success-channel-name",
-        className: "info-message--success span--absolute"
-      }, "\u2713"), name.error && _react.default.createElement("span", {
-        id: "input-success-channel-name",
-        className: "info-message--failure span--absolute"
-      }, "\u2716")))), _react.default.createElement("div", {
-        className: "row row--wide row--short"
-      }, _react.default.createElement("div", {
-        className: "column column--3 column--sml-10"
-      }, _react.default.createElement("label", {
-        className: "label",
-        htmlFor: "new-channel-password"
-      }, "Password:")), _react.default.createElement("div", {
-        className: "column column--6 column--sml-10"
-      }, _react.default.createElement("div", {
-        className: "input-text--primary"
-      }, _react.default.createElement("input", {
-        type: "password",
-        name: "password",
-        id: "new-channel-password",
-        className: "input-text",
-        placeholder: "",
+        error: name.error,
+        handleNameInput: this.handleNameInput
+      }), _react.default.createElement(_ChannelCreatePasswordInput.default, {
         value: password.value,
-        onChange: this.handlePasswordInput
-      })))), formError ? _react.default.createElement("p", {
-        className: "info-message--failure"
-      }, formError) : _react.default.createElement("p", {
-        className: "info-message"
-      }, "Choose a name and password for your channel"), _react.default.createElement("div", {
-        className: "row row--wide"
-      }, _react.default.createElement("button", {
-        className: "button--primary",
-        onClick: this.handleSubmit
-      }, "Create Channel"))) : _react.default.createElement("div", null, _react.default.createElement("p", {
-        className: "fine-print"
+        handlePasswordInput: this.handlePasswordInput
+      }), _react.default.createElement(_FormFeedbackDisplay.default, {
+        errorMessage: formError,
+        defaultMessage: 'Choose a name and password for your channel'
+      }), _react.default.createElement(_ButtonPrimary.default, {
+        value: 'Create Channel',
+        onClickHandler: this.handleSubmit
+      })) : _react.default.createElement("div", null, _react.default.createElement("p", {
+        className: 'text--small text--secondary'
       }, status), _react.default.createElement(_ProgressBar.default, {
         size: 12
       })));

client/build/containers/ChannelLoginForm/view.js

@@ -9,6 +9,14 @@ var _react = _interopRequireDefault(require("react"));
 
 var _request = _interopRequireDefault(require("../../utils/request"));
 
+var _FormFeedbackDisplay = _interopRequireDefault(require("@components/FormFeedbackDisplay"));
+
+var _ChannelLoginNameInput = _interopRequireDefault(require("@components/ChannelLoginNameInput"));
+
+var _ChannelLoginPasswordInput = _interopRequireDefault(require("@components/ChannelLoginPasswordInput"));
+
+var _ButtonPrimary = _interopRequireDefault(require("@components/ButtonPrimary"));
+
 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); }
@@ -105,56 +113,19 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return _react.default.createElement("form", {
-        id: "channel-login-form"
-      }, _react.default.createElement("div", {
-        className: "row row--wide row--short"
-      }, _react.default.createElement("div", {
-        className: "column column--3 column--sml-10"
-      }, _react.default.createElement("label", {
-        className: "label",
-        htmlFor: "channel-login-name-input"
-      }, "Name:")), _react.default.createElement("div", {
-        className: "column column--6 column--sml-10"
-      }, _react.default.createElement("div", {
-        className: "input-text--primary flex-container--row flex-container--left-bottom"
-      }, _react.default.createElement("span", null, "@"), _react.default.createElement("input", {
-        type: "text",
-        id: "channel-login-name-input",
-        className: "input-text",
-        name: "name",
-        placeholder: "Your Channel Name",
-        value: this.state.channelName,
-        onChange: this.handleInput
-      })))), _react.default.createElement("div", {
-        className: "row row--wide row--short"
-      }, _react.default.createElement("div", {
-        className: "column column--3 column--sml-10"
-      }, _react.default.createElement("label", {
-        className: "label",
-        htmlFor: "channel-login-password-input"
-      }, "Password:")), _react.default.createElement("div", {
-        className: "column column--6 column--sml-10"
-      }, _react.default.createElement("div", {
-        className: "input-text--primary"
-      }, _react.default.createElement("input", {
-        type: "password",
-        id: "channel-login-password-input",
-        name: "password",
-        className: "input-text",
-        placeholder: "",
-        value: this.state.channelPassword,
-        onChange: this.handleInput
-      })))), this.state.error ? _react.default.createElement("p", {
-        className: "info-message--failure"
-      }, this.state.error) : _react.default.createElement("p", {
-        className: "info-message"
-      }, "Enter the name and password for your channel"), _react.default.createElement("div", {
-        className: "row row--wide"
-      }, _react.default.createElement("button", {
-        className: "button--primary",
-        onClick: this.loginToChannel
-      }, "Authenticate")));
+      return _react.default.createElement("div", null, _react.default.createElement(_ChannelLoginNameInput.default, {
+        channelName: this.state.channelName,
+        handleInput: this.handleInput
+      }), _react.default.createElement(_ChannelLoginPasswordInput.default, {
+        channelPassword: this.state.channelPassword,
+        handleInput: this.handleInput
+      }), _react.default.createElement(_FormFeedbackDisplay.default, {
+        errorMessage: this.state.error,
+        defaultMessage: 'Enter the name and password for your channel'
+      }), _react.default.createElement(_ButtonPrimary.default, {
+        value: 'Authenticate',
+        onClickHandler: this.loginToChannel
+      }));
     }
   }]);
 

client/build/containers/ChannelSelect/view.js

@@ -11,9 +11,19 @@ var _ChannelLoginForm = _interopRequireDefault(require("@containers/ChannelLogin
 
 var _ChannelCreateForm = _interopRequireDefault(require("@containers/ChannelCreateForm"));
 
-var states = _interopRequireWildcard(require("../../constants/publish_channel_select_states"));
+var _publish_channel_select_states = require("../../constants/publish_channel_select_states");
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+var _RowLabeled = _interopRequireDefault(require("@components/RowLabeled"));
+
+var _ChooseAnonymousPublishRadio = _interopRequireDefault(require("@components/ChooseAnonymousPublishRadio"));
+
+var _ChooseChannelPublishRadio = _interopRequireDefault(require("@components/ChooseChannelPublishRadio"));
+
+var _FormFeedbackDisplay = _interopRequireDefault(require("@components/FormFeedbackDisplay"));
+
+var _Label = _interopRequireDefault(require("@components/Label"));
+
+var _ChannelSelectDropdown = _interopRequireDefault(require("@components/ChannelSelectDropdown"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -50,6 +60,15 @@ function (_React$Component) {
   }
 
   _createClass(ChannelSelect, [{
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      var loggedInChannelName = this.props.loggedInChannelName;
+
+      if (loggedInChannelName) {
+        this.props.onChannelSelect(loggedInChannelName);
+      }
+    }
+  }, {
     key: "toggleAnonymousPublish",
     value: function toggleAnonymousPublish(event) {
       var value = event.target.value;
@@ -69,57 +88,33 @@ 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", {
-        type: "radio",
-        name: "anonymous-or-channel",
-        id: "anonymous-radio",
-        className: "input-radio",
-        value: "anonymous",
-        checked: !this.props.publishInChannel,
-        onChange: this.toggleAnonymousPublish
-      }), _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", {
-        type: "radio",
-        name: "anonymous-or-channel",
-        id: "channel-radio",
-        className: "input-radio",
-        value: "in a channel",
-        checked: this.props.publishInChannel,
-        onChange: this.toggleAnonymousPublish
-      }), _react.default.createElement("label", {
-        className: "label label--pointer",
-        htmlFor: "channel-radio"
-      }, "In a channel")), this.props.channelError ? _react.default.createElement("p", {
-        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", {
-        className: "label",
-        htmlFor: "channel-name-select"
-      }, "Channel:")), _react.default.createElement("div", {
-        className: "column column--7"
-      }, _react.default.createElement("select", {
-        type: "text",
-        id: "channel-name-select",
-        className: "select select--arrow",
-        value: this.props.selectedChannel,
-        onChange: this.handleSelection
-      }, this.props.loggedInChannelName && _react.default.createElement("option", {
-        value: this.props.loggedInChannelName,
-        id: "publish-channel-select-channel-option"
-      }, this.props.loggedInChannelName), _react.default.createElement("option", {
-        value: states.LOGIN
-      }, "Existing"), _react.default.createElement("option", {
-        value: states.CREATE
-      }, "New"))), this.props.selectedChannel === states.LOGIN && _react.default.createElement(_ChannelLoginForm.default, null), this.props.selectedChannel === states.CREATE && _react.default.createElement(_ChannelCreateForm.default, null)));
+      var _this$props = this.props,
+          publishInChannel = _this$props.publishInChannel,
+          channelError = _this$props.channelError,
+          selectedChannel = _this$props.selectedChannel,
+          loggedInChannelName = _this$props.loggedInChannelName;
+      return _react.default.createElement("div", null, _react.default.createElement(_RowLabeled.default, {
+        label: _react.default.createElement(_ChooseAnonymousPublishRadio.default, {
+          publishInChannel: publishInChannel,
+          toggleAnonymousPublish: this.toggleAnonymousPublish
+        }),
+        content: _react.default.createElement(_ChooseChannelPublishRadio.default, {
+          publishInChannel: publishInChannel,
+          toggleAnonymousPublish: this.toggleAnonymousPublish
+        })
+      }), _react.default.createElement(_FormFeedbackDisplay.default, {
+        errorMessage: channelError,
+        defaultMessage: 'Publish anonymously or in a channel'
+      }), this.props.publishInChannel && _react.default.createElement("div", null, _react.default.createElement(_RowLabeled.default, {
+        label: _react.default.createElement(_Label.default, {
+          value: 'Channel:'
+        }),
+        content: _react.default.createElement(_ChannelSelectDropdown.default, {
+          selectedChannel: selectedChannel,
+          handleSelection: this.handleSelection,
+          loggedInChannelName: loggedInChannelName
+        })
+      }), selectedChannel === _publish_channel_select_states.LOGIN && _react.default.createElement(_ChannelLoginForm.default, null), selectedChannel === _publish_channel_select_states.CREATE && _react.default.createElement(_ChannelCreateForm.default, null)));
     }
   }]);
 

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 _DropzonePreviewImage = _interopRequireDefault(require("@components/DropzonePreviewImage"));
+
+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: 'row row--padded row--tall dropzone' + (this.state.dragOver ? ' dropzone--drag-over' : ''),
+        className: 'dropzone' + (this.state.dragOver ? ' dropzone--drag-over' : ''),
         onDrop: this.handleDrop,
         onDragOver: this.handleDragOver,
         onDragEnd: this.handleDragEnd,
@@ -176,43 +179,19 @@ 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", {
+        className: 'dropzone-preview-wrapper'
+      }, _react.default.createElement(_DropzonePreviewImage.default, {
         dimPreview: this.state.dimPreview,
         file: this.props.file,
         thumbnail: this.props.thumbnail
       }), _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.")) : 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")))));
+        className: 'dropzone-preview-overlay'
+      }, this.state.dragOver ? _react.default.createElement(_DropzoneDropItDisplay.default, null) : null, this.state.mouseOver ? _react.default.createElement(_DropzoneInstructionsDisplay.default, {
+        fileError: this.props.fileError
+      }) : null)) : this.state.dragOver ? _react.default.createElement(_DropzoneDropItDisplay.default, null) : _react.default.createElement(_DropzoneInstructionsDisplay.default, {
+        fileError: this.props.fileError
+      })));
     }
   }]);
 

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,10 +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"));
 
 var _PublishThumbnailInput = _interopRequireDefault(require("@containers/PublishThumbnailInput"));
@@ -21,6 +17,16 @@ var _PublishMetadataInputs = _interopRequireDefault(require("@containers/Publish
 
 var _ChannelSelect = _interopRequireDefault(require("@containers/ChannelSelect"));
 
+var _Row = _interopRequireDefault(require("@components/Row"));
+
+var _ButtonPrimaryJumbo = _interopRequireDefault(require("@components/ButtonPrimaryJumbo"));
+
+var _ButtonTertiary = _interopRequireDefault(require("@components/ButtonTertiary"));
+
+var _SpaceAround = _interopRequireDefault(require("@components/SpaceAround"));
+
+var _PublishFinePrint = _interopRequireDefault(require("@components/PublishFinePrint"));
+
 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); }
@@ -62,47 +68,13 @@ 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", {
-        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", {
-        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", {
-        className: "button--cancel",
-        onClick: this.props.clearFile
-      }, "Cancel")), _react.default.createElement("div", {
-        className: "row row--short align-content-center"
-      }, _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",
-        target: "_blank",
-        href: "https://lbry.io/learn"
-      }, "Read more."))))));
+      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(_ButtonPrimaryJumbo.default, {
+        value: 'Publish',
+        onClickHandler: this.onPublishSubmit
+      })), _react.default.createElement(_Row.default, null, _react.default.createElement(_SpaceAround.default, null, _react.default.createElement(_ButtonTertiary.default, {
+        value: 'Cancel',
+        onClickHandler: this.props.clearFile
+      }))), _react.default.createElement(_Row.default, null, _react.default.createElement(_PublishFinePrint.default, null)));
     }
   }]);
 

client/build/containers/PublishDisabledMessage/view.js

@@ -40,12 +40,10 @@ function (_React$Component) {
     key: "render",
     value: function render() {
       var message = this.props.message;
-      return _react.default.createElement("div", {
-        className: "row dropzone--disabled row--tall flex-container--column flex-container--center-center"
-      }, _react.default.createElement("p", {
-        className: "text--disabled"
+      return _react.default.createElement("div", null, _react.default.createElement("p", {
+        className: 'text--secondary'
       }, "Publishing is currently disabled."), _react.default.createElement("p", {
-        className: "text--disabled"
+        className: 'text--secondary'
       }, message));
     }
   }]);

client/build/containers/PublishMetadataInputs/view.js

@@ -7,7 +7,13 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _ExpandingTextArea = _interopRequireDefault(require("@components/ExpandingTextArea"));
+var _PublishDescriptionInput = _interopRequireDefault(require("@components/PublishDescriptionInput"));
+
+var _PublishLicenseInput = _interopRequireDefault(require("@components/PublishLicenseInput"));
+
+var _PublishNsfwInput = _interopRequireDefault(require("@components/PublishNsfwInput"));
+
+var _ButtonSecondary = _interopRequireDefault(require("@components/ButtonSecondary"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -67,71 +73,18 @@ 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", {
-        htmlFor: "publish-license",
-        className: "label"
-      }, "Description:")), _react.default.createElement("div", {
-        className: "column column--7 column--sml-10"
-      }, _react.default.createElement(_ExpandingTextArea.default, {
-        id: "publish-description",
-        className: "textarea textarea--primary textarea--full-width",
-        rows: 1,
-        maxLength: 2000,
-        style: {
-          maxHeight: 200
-        },
-        name: "description",
-        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", {
-        htmlFor: "publish-license",
-        className: "label"
-      }, "License:")), _react.default.createElement("div", {
-        className: "column column--7 column--sml-10"
-      }, _react.default.createElement("select", {
-        type: "text",
-        name: "license",
-        id: "publish-license",
-        className: "select select--primary",
-        onChange: this.handleSelect
-      }, _react.default.createElement("option", {
-        value: " "
-      }, "Unspecified"), _react.default.createElement("option", {
-        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", {
-        htmlFor: "publish-nsfw",
-        className: "label"
-      }, "Mature:")), _react.default.createElement("div", {
-        className: "column column--7"
-      }, _react.default.createElement("input", {
-        className: "input-checkbox",
-        type: "checkbox",
-        id: "publish-nsfw",
-        name: "nsfw",
-        value: this.props.nsfw,
-        onChange: this.handleInput
-      })))), _react.default.createElement("button", {
-        className: "button--secondary",
-        onClick: this.toggleShowInputs
-      }, this.props.showMetadataInputs ? 'less' : 'more'));
+      return _react.default.createElement("div", null, this.props.showMetadataInputs && _react.default.createElement("div", null, _react.default.createElement(_PublishDescriptionInput.default, {
+        description: this.props.description,
+        handleInput: this.handleInput
+      }), _react.default.createElement(_PublishLicenseInput.default, {
+        handleSelect: this.handleSelect
+      }), _react.default.createElement(_PublishNsfwInput.default, {
+        nsfw: this.props.nsfw,
+        handleInput: this.handleInput
+      })), _react.default.createElement(_ButtonSecondary.default, {
+        value: this.props.showMetadataInputs ? 'less' : 'more',
+        onClickHandler: this.toggleShowInputs
+      }));
     }
   }]);
 

client/build/containers/PublishStatus/view.js

@@ -11,6 +11,10 @@ var _ProgressBar = _interopRequireDefault(require("@components/ProgressBar"));
 
 var publishStates = _interopRequireWildcard(require("../../constants/publish_claim_states"));
 
+var _ButtonSecondary = _interopRequireDefault(require("@components/ButtonSecondary"));
+
+var _Row = _interopRequireDefault(require("@components/Row"));
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -50,39 +54,41 @@ function (_React$Component) {
           message = _this$props.message,
           clearFile = _this$props.clearFile;
       return _react.default.createElement("div", {
-        className: "row row--tall flex-container--column flex-container--center-center"
+        className: 'publish-status'
       }, status === publishStates.LOAD_START && _react.default.createElement("div", {
-        className: "row align-content-center"
-      }, _react.default.createElement("p", null, "File is loading to server"), _react.default.createElement("p", {
-        className: "blue"
-      }, "0%")), status === publishStates.LOADING && _react.default.createElement("div", null, _react.default.createElement("div", {
-        className: "row align-content-center"
-      }, _react.default.createElement("p", null, "File is loading to server"), _react.default.createElement("p", {
-        className: "blue"
+        className: 'status'
+      }, _react.default.createElement(_Row.default, null, _react.default.createElement("p", null, "le is loading to server")), _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
+        className: 'text--secondary'
+      }, "0%"))), status === publishStates.LOADING && _react.default.createElement("div", {
+        className: 'status'
+      }, _react.default.createElement(_Row.default, null, _react.default.createElement("p", null, "File is loading to server")), _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
+        className: 'text--secondary'
       }, message))), status === publishStates.PUBLISHING && _react.default.createElement("div", {
-        className: "row align-content-center"
-      }, _react.default.createElement("p", null, "Upload complete.  Your file is now being published on the blockchain..."), _react.default.createElement(_ProgressBar.default, {
+        className: 'status'
+      }, _react.default.createElement(_Row.default, null, _react.default.createElement("p", null, "Upload complete.  Your file is now being published on the blockchain...")), _react.default.createElement(_Row.default, null, _react.default.createElement(_ProgressBar.default, {
         size: 12
-      }), _react.default.createElement("p", null, "Curious what magic is happening here? ", _react.default.createElement("a", {
+      })), _react.default.createElement(_Row.default, null, _react.default.createElement("p", null, "Curious what magic is happening here? ", _react.default.createElement("a", {
         className: "link--primary",
         target: "blank",
         href: "https://lbry.io/faq/what-is-lbry"
-      }, "Learn more."))), status === publishStates.SUCCESS && _react.default.createElement("div", {
-        className: "row align-content-center"
-      }, _react.default.createElement("p", null, "Your publish is complete! You are being redirected to it now."), _react.default.createElement("p", null, "If you are not automatically redirected, ", _react.default.createElement("a", {
+      }, "Learn more.")))), status === publishStates.SUCCESS && _react.default.createElement("div", {
+        className: 'status'
+      }, _react.default.createElement(_Row.default, null, _react.default.createElement("p", null, "Your publish is complete! You are being redirected to it now.")), _react.default.createElement(_Row.default, null, _react.default.createElement("p", null, "If you are not automatically redirected, ", _react.default.createElement("a", {
         className: "link--primary",
         target: "_blank",
         href: message
-      }, "click here."))), status === publishStates.FAILED && _react.default.createElement("div", {
-        className: "row align-content-center"
-      }, _react.default.createElement("p", null, "Something went wrong..."), _react.default.createElement("p", null, _react.default.createElement("strong", null, message)), _react.default.createElement("p", null, "For help, post the above error text in the #speech channel on the ", _react.default.createElement("a", {
+      }, "click here.")))), status === publishStates.FAILED && _react.default.createElement("div", {
+        className: 'status'
+      }, _react.default.createElement(_Row.default, null, _react.default.createElement("p", null, "Something went wrong...")), _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
+        className: 'text--strong'
+      }, message)), _react.default.createElement(_Row.default, null, _react.default.createElement("p", null, "For help, post the above error text in the #speech channel on the ", _react.default.createElement("a", {
         className: "link--primary",
         href: "https://chat.lbry.io",
         target: "_blank"
-      }, "lbry discord")), _react.default.createElement("button", {
-        className: "button--secondary",
-        onClick: clearFile
-      }, "Reset")));
+      }, "lbry discord"))), _react.default.createElement(_Row.default, null, _react.default.createElement(_ButtonSecondary.default, {
+        value: 'Reset',
+        onClickHandler: clearFile
+      }))));
     }
   }]);
 

client/build/containers/PublishThumbnailInput/view.js

@@ -7,6 +7,10 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _FormFeedbackDisplay = _interopRequireDefault(require("@components/FormFeedbackDisplay"));
+
+var _SpaceBetween = _interopRequireDefault(require("@components/SpaceBetween"));
+
 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); }
@@ -173,29 +177,27 @@ function (_React$Component) {
         onLoadedData: this.handleVideoLoadedData,
         src: videoSource,
         onSeeked: this.createThumbnail
-      }), sliderValue ? _react.default.createElement("div", null, _react.default.createElement("div", {
-        className: "flex-container--row flex-container--space-between-center",
+      }), sliderValue ? _react.default.createElement("div", null, _react.default.createElement(_SpaceBetween.default, {
         style: {
           width: '100%'
         }
       }, _react.default.createElement("span", {
-        className: "info-message"
+        className: "text--small text--secondary"
       }, "0'00\""), _react.default.createElement("span", {
-        className: "info-message"
+        className: "text--small text--secondary"
       }, totalMinutes, "'", totalSeconds, "\"")), _react.default.createElement("div", null, _react.default.createElement("input", {
         type: "range",
         min: sliderMinRange,
         max: sliderMaxRange,
         value: sliderValue,
-        className: "slider",
+        className: "input-slider",
         onChange: this.handleSliderChange
       }))) : _react.default.createElement("p", {
-        className: "info-message"
-      }, "loading... "), error ? _react.default.createElement("p", {
-        className: "info-message--failure"
-      }, error) : _react.default.createElement("p", {
-        className: "info-message"
-      }, "Use slider to set thumbnail"));
+        className: 'text--small text--secondary'
+      }, "loading... "), _react.default.createElement(_FormFeedbackDisplay.default, {
+        errorMessage: error,
+        defaultMessage: 'Use slider to set thumbnail'
+      }));
     }
   }]);
 

client/build/containers/PublishTitleInput/view.js

@@ -53,9 +53,9 @@ function (_React$Component) {
       return _react.default.createElement("input", {
         type: "text",
         id: "publish-title",
-        className: "input-text text--large input-text--full-width",
+        className: 'text--large input--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/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/build/containers/PublishUrlInput/view.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _PublishUrlMiddleDisplay = _interopRequireDefault(require("@components/PublishUrlMiddleDisplay"));
 
+var _FormFeedbackDisplay = _interopRequireDefault(require("@components/FormFeedbackDisplay"));
+
 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); }
@@ -106,37 +108,32 @@ 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, {
+        className: "publish-url-text"
+      }, "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--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", {
-        id: "input-error-claim-name",
-        className: "info-message--failure"
-      }, urlError) : _react.default.createElement("p", {
-        className: "info-message"
-      }, "Choose a custom url")));
+      }))), _react.default.createElement(_FormFeedbackDisplay.default, {
+        errorMessage: urlError,
+        defaultMessage: 'Choose a custom url'
+      }));
     }
   }]);
 

client/build/containers/SEO/view.js

@@ -65,7 +65,16 @@ function (_React$Component) {
       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 metaTags = (0, _metaTags.createMetaTags)({
+        siteDescription: siteDescription,
+        siteHost: siteHost,
+        siteTitle: siteTitle,
+        siteTwitter: siteTwitter,
+        asset: asset,
+        channel: channel,
+        defaultDescription: defaultDescription,
+        defaultThumbnail: defaultThumbnail
+      });
       var canonicalLink = (0, _canonicalLink.createCanonicalLink)(asset, channel, pageUri, siteHost); // render results
 
       return _react.default.createElement(_reactHelmet.default, {

client/build/containers/SiteDescription/index.js

@@ -0,0 +1,23 @@
+"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;
+  return {
+    siteDescription: site.description
+  };
+};
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, null)(_view.default);
+
+exports.default = _default;

client/build/containers/SiteDescription/view.js

@@ -0,0 +1,56 @@
+"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 SiteDescription =
+/*#__PURE__*/
+function (_React$Component) {
+  function SiteDescription() {
+    _classCallCheck(this, SiteDescription);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(SiteDescription).apply(this, arguments));
+  }
+
+  _createClass(SiteDescription, [{
+    key: "render",
+    value: function render() {
+      return _react.default.createElement("div", {
+        className: 'site-description'
+      }, _react.default.createElement("p", {
+        className: 'text--extra-small'
+      }, this.props.siteDescription));
+    }
+  }]);
+
+  _inherits(SiteDescription, _React$Component);
+
+  return SiteDescription;
+}(_react.default.Component);
+
+var _default = SiteDescription;
+exports.default = _default;

client/build/pages/AboutPage/index.js

@@ -7,9 +7,13 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _SEO = _interopRequireDefault(require("@components/SEO"));
+var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
 
-var _NavBar = _interopRequireDefault(require("@containers/NavBar"));
+var _HorizontalSplit = _interopRequireDefault(require("@components/HorizontalSplit"));
+
+var _AboutSpeechOverview = _interopRequireDefault(require("@components/AboutSpeechOverview"));
+
+var _AboutSpeechDetails = _interopRequireDefault(require("@components/AboutSpeechDetails"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -43,53 +47,13 @@ function (_React$Component) {
   _createClass(AboutPage, [{
     key: "render",
     value: function render() {
-      return _react.default.createElement("div", null, _react.default.createElement(_SEO.default, {
+      return _react.default.createElement(_PageLayout.default, {
         pageTitle: 'About',
         pageUri: 'about'
-      }), _react.default.createElement(_NavBar.default, null), _react.default.createElement("div", {
-        className: "row row--padded"
-      }, _react.default.createElement("div", {
-        className: "column column--5 column--med-10 align-content-top"
-      }, _react.default.createElement("div", {
-        className: "column column--8 column--med-10"
-      }, _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")))), _react.default.createElement("div", {
-        className: "column column--5 column--med-10 align-content-top"
-      }, _react.default.createElement("div", {
-        className: "column column--8 column--med-10"
-      }, _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"), ".")))));
+      }, _react.default.createElement(_HorizontalSplit.default, {
+        leftSide: _react.default.createElement(_AboutSpeechOverview.default, null),
+        rightSide: _react.default.createElement(_AboutSpeechDetails.default, null)
+      }));
     }
   }]);
 
@@ -98,6 +62,5 @@ function (_React$Component) {
   return AboutPage;
 }(_react.default.Component);
 
-;
 var _default = AboutPage;
 exports.default = _default;

client/build/pages/ContentPageWrapper/view.js

@@ -9,11 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _ErrorPage = _interopRequireDefault(require("@pages/ErrorPage"));
 
-var _ShowAssetLite = _interopRequireDefault(require("@containers/ShowAssetLite"));
+var _ShowAssetLite = _interopRequireDefault(require("@pages/ShowAssetLite"));
 
-var _ShowAssetDetails = _interopRequireDefault(require("@containers/ShowAssetDetails"));
+var _ShowAssetDetails = _interopRequireDefault(require("@pages/ShowAssetDetails"));
 
-var _ShowChannel = _interopRequireDefault(require("@containers/ShowChannel"));
+var _ShowChannel = _interopRequireDefault(require("@pages/ShowChannel"));
 
 var _show_request_types = require("../../constants/show_request_types");
 
@@ -37,16 +37,16 @@ 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 ShowPage =
+var ContentPageWrapper =
 /*#__PURE__*/
 function (_React$Component) {
-  function ShowPage() {
-    _classCallCheck(this, ShowPage);
+  function ContentPageWrapper() {
+    _classCallCheck(this, ContentPageWrapper);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(ShowPage).apply(this, arguments));
+    return _possibleConstructorReturn(this, _getPrototypeOf(ContentPageWrapper).apply(this, arguments));
   }
 
-  _createClass(ShowPage, [{
+  _createClass(ContentPageWrapper, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.props.onHandleShowPageUri(this.props.match.params);
@@ -87,11 +87,11 @@ function (_React$Component) {
     }
   }]);
 
-  _inherits(ShowPage, _React$Component);
+  _inherits(ContentPageWrapper, _React$Component);
 
-  return ShowPage;
+  return ContentPageWrapper;
 }(_react.default.Component);
 
 ;
-var _default = ShowPage;
+var _default = ContentPageWrapper;
 exports.default = _default;

client/build/pages/ErrorPage/index.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _NavBar = _interopRequireDefault(require("@containers/NavBar"));
+var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -44,9 +44,10 @@ function (_React$Component) {
     key: "render",
     value: function render() {
       var error = this.props.error;
-      return _react.default.createElement("div", null, _react.default.createElement(_NavBar.default, null), _react.default.createElement("div", {
-        className: "row row--padded"
-      }, _react.default.createElement("p", null, error)));
+      return _react.default.createElement(_PageLayout.default, {
+        pageTitle: 'Error',
+        pageUri: 'error'
+      }, _react.default.createElement("p", null, error));
     }
   }]);
 

client/build/pages/FourOhFourPage/index.js

@@ -5,22 +5,54 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _reactRedux = require("react-redux");
+var _react = _interopRequireDefault(require("react"));
 
-var _view = _interopRequireDefault(require("./view"));
+var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var mapStateToProps = function mapStateToProps(_ref) {
-  var _ref$site = _ref.site,
-      host = _ref$site.host,
-      title = _ref$site.title;
-  return {
-    host: host,
-    title: title
-  };
-};
+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); }
 
-var _default = (0, _reactRedux.connect)(mapStateToProps, null)(_view.default);
+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 FourOhForPage =
+/*#__PURE__*/
+function (_React$Component) {
+  function FourOhForPage() {
+    _classCallCheck(this, FourOhForPage);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(FourOhForPage).apply(this, arguments));
+  }
+
+  _createClass(FourOhForPage, [{
+    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"));
+    }
+  }]);
+
+  _inherits(FourOhForPage, _React$Component);
+
+  return FourOhForPage;
+}(_react.default.Component);
+
+;
+var _default = FourOhForPage;
 exports.default = _default;

client/build/pages/HomePage/index.js

@@ -7,9 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _SEO = _interopRequireDefault(require("@components/SEO"));
-
-var _NavBar = _interopRequireDefault(require("@containers/NavBar"));
+var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
 
 var _PublishTool = _interopRequireDefault(require("@containers/PublishTool"));
 
@@ -45,11 +43,10 @@ function (_React$Component) {
   _createClass(HomePage, [{
     key: "render",
     value: function render() {
-      return _react.default.createElement("div", {
-        className: 'row row--tall flex-container--column'
-      }, _react.default.createElement(_SEO.default, null), _react.default.createElement(_NavBar.default, null), _react.default.createElement("div", {
-        className: 'row row--tall row--padded flex-container--column'
-      }, _react.default.createElement(_PublishTool.default, null)));
+      return _react.default.createElement(_PageLayout.default, {
+        pageTitle: 'Speech',
+        pageUri: ''
+      }, _react.default.createElement(_PublishTool.default, null));
     }
   }]);
 

client/build/pages/LoginPage/view.js

@@ -9,13 +9,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactRouterDom = require("react-router-dom");
 
-var _SEO = _interopRequireDefault(require("@components/SEO"));
+var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
 
-var _NavBar = _interopRequireDefault(require("@containers/NavBar"));
+var _HorizontalSplit = _interopRequireDefault(require("@components/HorizontalSplit"));
 
-var _ChannelLoginForm = _interopRequireDefault(require("@containers/ChannelLoginForm"));
+var _ChannelAbout = _interopRequireDefault(require("@components/ChannelAbout"));
 
-var _ChannelCreateForm = _interopRequireDefault(require("@containers/ChannelCreateForm"));
+var _ChannelTools = _interopRequireDefault(require("@components/ChannelTools"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -57,32 +57,13 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return _react.default.createElement("div", null, _react.default.createElement(_SEO.default, {
+      return _react.default.createElement(_PageLayout.default, {
         pageTitle: 'Login',
         pageUri: 'login'
-      }), _react.default.createElement(_NavBar.default, null), _react.default.createElement("div", {
-        className: "row row--padded"
-      }, _react.default.createElement("div", {
-        className: "column column--5 column--med-10 align-content-top"
-      }, _react.default.createElement("div", {
-        className: "column column--8 column--med-10"
-      }, _react.default.createElement("p", null, "Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends.  You can create 1 channel, or 100, so whether you're ", _react.default.createElement("a", {
-        className: "link--primary",
-        target: "_blank",
-        href: "/@catalonia2017:43dcf47163caa21d8404d9fe9b30f78ef3e146a8"
-      }, "documenting important events"), ", or making a public repository for ", _react.default.createElement("a", {
-        className: "link--primary",
-        target: "_blank",
-        href: "/@catGifs"
-      }, "cat gifs"), " (password: '1234'), try creating a channel for it!"))), _react.default.createElement("div", {
-        className: "column column--5 column--med-10 align-content-top"
-      }, _react.default.createElement("div", {
-        className: "column column--8 column--med-10"
-      }, _react.default.createElement("h3", {
-        className: "h3--no-bottom"
-      }, "Log in to an existing channel:"), _react.default.createElement(_ChannelLoginForm.default, null), _react.default.createElement("h3", {
-        className: "h3--no-bottom"
-      }, "Create a brand new channel:"), _react.default.createElement(_ChannelCreateForm.default, null)))));
+      }, _react.default.createElement(_HorizontalSplit.default, {
+        leftSide: _react.default.createElement(_ChannelAbout.default, null),
+        rightSide: _react.default.createElement(_ChannelTools.default, null)
+      }));
     }
   }]);
 

client/build/pages/MultisitePage/index.js

@@ -7,9 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _SEO = _interopRequireDefault(require("@components/SEO"));
-
-var _NavBar = _interopRequireDefault(require("@containers/NavBar"));
+var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -31,27 +29,9 @@ 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 MultisitePage =
-/*#__PURE__*/
-function (_React$Component) {
-  function MultisitePage() {
-    _classCallCheck(this, MultisitePage);
-
-    return _possibleConstructorReturn(this, _getPrototypeOf(MultisitePage).apply(this, arguments));
-  }
-
-  _createClass(MultisitePage, [{
-    key: "render",
-    value: function render() {
-      return _react.default.createElement("div", null, _react.default.createElement(_SEO.default, {
-        pageTitle: 'Multisite',
-        pageUri: 'multisite'
-      }), _react.default.createElement(_NavBar.default, null), _react.default.createElement("div", {
-        className: "row row--padded flex-container--row flex-container--center-center"
-      }, _react.default.createElement("div", {
-        className: "column column--8 column--med-10"
-      }, _react.default.createElement("p", {
-        className: "pull-quote"
+var MultisiteContent = function MultisiteContent() {
+  return _react.default.createElement("div", null, _react.default.createElement("p", {
+    className: "text--pull-quote"
   }, "Introducing Spee.ch Multisite"), _react.default.createElement("p", null, "Hi there!  My name is ", _react.default.createElement("a", {
     href: 'https://github.com/billbitt',
     target: '_blank'
@@ -85,7 +65,25 @@ function (_React$Component) {
   }, "CLICK HERE TO RSVP!"))), _react.default.createElement("p", null, "At this first demonstration, we will walk through preparing a server environment, installing LBRY and Spee.ch, and how to make local changes to your Spee.ch instance.  Details below:"), _react.default.createElement("ul", null, _react.default.createElement("li", null, "When: Friday, May 18, 2018"), _react.default.createElement("li", null, "Time: 5:00 p.m. PST"), _react.default.createElement("li", null, "Where: Google Hangouts"), _react.default.createElement("li", null, "Link: ", _react.default.createElement("a", {
     href: 'https://meet.google.com/aex-ghqg-kcs',
     target: '_blank'
-      }, "meet.google.com/aex-ghqg-kcs")), _react.default.createElement("li", null, "System Requirements: If you have a server, please make sure you have MySql, Node and NPM installed. If you need help installing the above, or if you need a server to run your own instance on, please join the Hangout 30 minutes ahead of time and we will help get you set up =]"), _react.default.createElement("li", null, "Questions: hello@lbry.io")))));
+  }, "meet.google.com/aex-ghqg-kcs")), _react.default.createElement("li", null, "System Requirements: If you have a server, please make sure you have MySql, Node and NPM installed. If you need help installing the above, or if you need a server to run your own instance on, please join the Hangout 30 minutes ahead of time and we will help get you set up =]"), _react.default.createElement("li", null, "Questions: hello@lbry.io")));
+};
+
+var MultisitePage =
+/*#__PURE__*/
+function (_React$Component) {
+  function MultisitePage() {
+    _classCallCheck(this, MultisitePage);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(MultisitePage).apply(this, arguments));
+  }
+
+  _createClass(MultisitePage, [{
+    key: "render",
+    value: function render() {
+      return _react.default.createElement(_PageLayout.default, {
+        pageTitle: 'Multisite',
+        pageUri: '/multisite'
+      }, _react.default.createElement(MultisiteContent, null));
     }
   }]);
 
@@ -94,6 +92,5 @@ function (_React$Component) {
   return MultisitePage;
 }(_react.default.Component);
 
-;
 var _default = MultisitePage;
 exports.default = _default;

client/build/pages/ShowAssetDetails/view.js

@@ -7,17 +7,17 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _SEO = _interopRequireDefault(require("@components/SEO"));
+var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
 
-var _NavBar = _interopRequireDefault(require("../NavBar"));
+var _HorizontalSplit = _interopRequireDefault(require("@components/HorizontalSplit"));
 
-var _ErrorPage = _interopRequireDefault(require("../../pages/ErrorPage"));
+var _AssetTitle = _interopRequireDefault(require("@containers/AssetTitle"));
 
-var _AssetTitle = _interopRequireDefault(require("../AssetTitle"));
+var _AssetDisplay = _interopRequireDefault(require("@containers/AssetDisplay"));
 
-var _AssetDisplay = _interopRequireDefault(require("../AssetDisplay"));
+var _AssetInfo = _interopRequireDefault(require("@containers/AssetInfo"));
 
-var _AssetInfo = _interopRequireDefault(require("../AssetInfo"));
+var _ErrorPage = _interopRequireDefault(require("@pages/ErrorPage"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -55,25 +55,15 @@ function (_React$Component) {
 
       if (asset) {
         var name = asset.claimData.name;
-        return _react.default.createElement("div", null, _react.default.createElement(_SEO.default, {
+        return _react.default.createElement(_PageLayout.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)))));
+        }, _react.default.createElement(_AssetTitle.default, null), _react.default.createElement(_HorizontalSplit.default, {
+          leftSide: _react.default.createElement(_AssetDisplay.default, null),
+          rightSide: _react.default.createElement(_AssetInfo.default, null)
+        }));
       }
 
-      ;
       return _react.default.createElement(_ErrorPage.default, {
         error: 'loading asset data...'
       });

client/build/pages/ShowAssetLite/view.js

@@ -9,9 +9,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactRouterDom = require("react-router-dom");
 
-var _SEO = _interopRequireDefault(require("@components/SEO"));
+var _PageLayoutShowLite = _interopRequireDefault(require("@components/PageLayoutShowLite"));
 
-var _AssetDisplay = _interopRequireDefault(require("../AssetDisplay"));
+var _AssetDisplay = _interopRequireDefault(require("@containers/AssetDisplay"));
+
+var _SpaceAround = _interopRequireDefault(require("@components/SpaceAround"));
+
+var _VerticalSplit = _interopRequireDefault(require("@components/VerticalSplit"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -33,6 +37,21 @@ 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 AssetLiteFooter = function AssetLiteFooter(_ref) {
+  var name = _ref.name,
+      claimId = _ref.claimId;
+  return _react.default.createElement(_SpaceAround.default, null, _react.default.createElement("p", {
+    className: 'text--extra-small'
+  }, _react.default.createElement(_reactRouterDom.Link, {
+    className: "link--primary",
+    to: "/".concat(claimId, "/").concat(name)
+  }, " hosted on spee.ch"), " via the ", _react.default.createElement("a", {
+    className: "link--primary",
+    href: 'https://lbry.io/get',
+    target: '_blank'
+  }, "LBRY"), " blockchain"));
+};
+
 var ShowLite =
 /*#__PURE__*/
 function (_React$Component) {
@@ -51,27 +70,21 @@ function (_React$Component) {
         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, {
+        return _react.default.createElement(_PageLayoutShowLite.default, {
           pageTitle: name,
           asset: asset
-        }), _react.default.createElement(_AssetDisplay.default, null), _react.default.createElement("div", {
-          className: "fine-print"
-        }, _react.default.createElement(_reactRouterDom.Link, {
-          id: "asset-boilerpate",
-          className: "link--primary",
-          to: "/".concat(claimId, "/").concat(name)
-        }, " hosted on spee.ch"), " via the ", _react.default.createElement("a", {
-          className: "link--primary",
-          href: 'https://lbry.io/get',
-          target: '_blank'
-        }, "LBRY blockchain")));
+        }, _react.default.createElement(_VerticalSplit.default, {
+          top: _react.default.createElement(_AssetDisplay.default, null),
+          bottom: _react.default.createElement(AssetLiteFooter, {
+            name: name,
+            claimId: claimId
+          })
+        }));
       }
 
-      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..."));
+      return _react.default.createElement("div", null, _react.default.createElement("p", {
+        className: 'text--secondary'
+      }, "loading asset data..."));
     }
   }]);
 
@@ -80,6 +93,5 @@ function (_React$Component) {
   return ShowLite;
 }(_react.default.Component);
 
-;
 var _default = ShowLite;
 exports.default = _default;

client/build/pages/ShowChannel/view.js

@@ -7,13 +7,13 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _SEO = _interopRequireDefault(require("@components/SEO"));
+var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
 
 var _ErrorPage = _interopRequireDefault(require("@pages/ErrorPage"));
 
-var _NavBar = _interopRequireDefault(require("../NavBar"));
+var _ChannelInfoDisplay = _interopRequireDefault(require("@components/ChannelInfoDisplay"));
 
-var _ChannelClaimsDisplay = _interopRequireDefault(require("../ChannelClaimsDisplay"));
+var _ChannelClaimsDisplay = _interopRequireDefault(require("@containers/ChannelClaimsDisplay"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -53,23 +53,16 @@ function (_React$Component) {
         var name = channel.name,
             longId = channel.longId,
             shortId = channel.shortId;
-        return _react.default.createElement("div", null, _react.default.createElement(_SEO.default, {
+        return _react.default.createElement(_PageLayout.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))));
+        }, _react.default.createElement(_ChannelInfoDisplay.default, {
+          name: name,
+          longId: longId,
+          shortId: shortId
+        }), _react.default.createElement(_ChannelClaimsDisplay.default, null));
       }
 
-      ;
       return _react.default.createElement(_ErrorPage.default, {
         error: 'loading channel data...'
       });

client/build/utils/metaTags.js

@@ -31,7 +31,12 @@ var determineOgThumbnailContentType = function determineOgThumbnailContentType(t
   return '';
 };
 
-var createBasicMetaTags = function createBasicMetaTags(siteHost, siteDescription, siteTitle, siteTwitter) {
+var createBasicMetaTags = function createBasicMetaTags(_ref) {
+  var siteHost = _ref.siteHost,
+      siteDescription = _ref.siteDescription,
+      siteTitle = _ref.siteTitle,
+      siteTwitter = _ref.siteTwitter,
+      defaultThumbnail = _ref.defaultThumbnail;
   return [{
     property: 'og:title',
     content: siteTitle
@@ -49,11 +54,21 @@ var createBasicMetaTags = function createBasicMetaTags(siteHost, siteDescription
     content: siteTwitter
   }, {
     property: 'twitter:card',
-    content: 'summary'
+    content: 'summary_large_image'
+  }, {
+    property: 'og:image',
+    content: defaultThumbnail
+  }, {
+    property: 'og:image:type',
+    content: 'image/jpeg'
   }];
 };
 
-var createChannelMetaTags = function createChannelMetaTags(siteTitle, siteHost, siteTwitter, channel) {
+var createChannelMetaTags = function createChannelMetaTags(_ref2) {
+  var siteHost = _ref2.siteHost,
+      siteTitle = _ref2.siteTitle,
+      siteTwitter = _ref2.siteTwitter,
+      channel = _ref2.channel;
   var name = channel.name,
       longId = channel.longId;
   return [{
@@ -77,7 +92,13 @@ var createChannelMetaTags = function createChannelMetaTags(siteTitle, siteHost,
   }];
 };
 
-var createAssetMetaTags = function createAssetMetaTags(siteHost, siteTitle, siteTwitter, asset, defaultDescription, defaultThumbnail) {
+var createAssetMetaTags = function createAssetMetaTags(_ref3) {
+  var siteHost = _ref3.siteHost,
+      siteTitle = _ref3.siteTitle,
+      siteTwitter = _ref3.siteTwitter,
+      asset = _ref3.asset,
+      defaultDescription = _ref3.defaultDescription,
+      defaultThumbnail = _ref3.defaultThumbnail;
   var claimData = asset.claimData;
   var contentType = claimData.contentType;
   var embedUrl = "".concat(siteHost, "/").concat(claimData.claimId, "/").concat(claimData.name);
@@ -185,19 +206,43 @@ var createAssetMetaTags = function createAssetMetaTags(siteHost, siteTitle, site
   return metaTags;
 };
 
-var createMetaTags = function createMetaTags(siteDescription, siteHost, siteTitle, siteTwitter, asset, channel, defaultDescription, defaultThumbnail) {
-  if (asset) {
-    return createAssetMetaTags(siteHost, siteTitle, siteTwitter, asset, defaultDescription, defaultThumbnail);
-  }
+var createMetaTags = function createMetaTags(_ref4) {
+  var siteDescription = _ref4.siteDescription,
+      siteHost = _ref4.siteHost,
+      siteTitle = _ref4.siteTitle,
+      siteTwitter = _ref4.siteTwitter,
+      asset = _ref4.asset,
+      channel = _ref4.channel,
+      defaultDescription = _ref4.defaultDescription,
+      defaultThumbnail = _ref4.defaultThumbnail;
 
-  ;
+  if (asset) {
+    return createAssetMetaTags({
+      siteHost: siteHost,
+      siteTitle: siteTitle,
+      siteTwitter: siteTwitter,
+      asset: asset,
+      defaultDescription: defaultDescription,
+      defaultThumbnail: defaultThumbnail
+    });
+  }
 
   if (channel) {
-    return createChannelMetaTags(siteHost, siteTitle, siteTwitter, channel);
+    return createChannelMetaTags({
+      siteHost: siteHost,
+      siteTitle: siteTitle,
+      siteTwitter: siteTwitter,
+      channel: channel
+    });
   }
 
-  ;
-  return createBasicMetaTags(siteDescription, siteHost, siteTitle, siteTwitter);
+  return createBasicMetaTags({
+    siteDescription: siteDescription,
+    siteHost: siteHost,
+    siteTitle: siteTitle,
+    siteTwitter: siteTwitter,
+    defaultThumbnail: defaultThumbnail
+  });
 };
 
 exports.createMetaTags = createMetaTags;

client/scss/_body.scss

@@ -0,0 +1,10 @@
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  word-wrap: break-word;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}

client/scss/_font.scss

@@ -0,0 +1,18 @@
+@font-face {
+  font-family: 'Lekton';
+  src: url('font/Lekton/Lekton-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'Lekton';
+  src: url('font/Lekton/Lekton-Bold.ttf');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Lekton';
+  src: url('font/Lekton/Lekton-Italic.ttf');
+  font-weight: normal;
+  font-style: italic;
+}

client/scss/_html.scss

@@ -0,0 +1,5 @@
+html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}

client/scss/_input.scss

@@ -0,0 +1,50 @@
+input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0px 1000px white inset;
+}
+
+input {
+  margin: 0;
+  outline: none;
+  padding: $input-padding;
+  border: 0;
+  background-color: $background-color;
+  display: inline-block;
+}
+
+.input-text {
+
+}
+
+.input-slider {
+  width: 100%
+}
+
+.input-checkbox {
+  border: 1px solid black;
+  background: white;
+}
+
+.input-file {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+
+.input-radio {
+  cursor: pointer;
+}
+
+// input area wrapper
+
+.input-area {
+  border-bottom: 1px solid $secondary-color;
+}
+
+// modifiers
+
+.input--full-width {
+  width: $input-full-width;
+}

client/scss/_link.scss

@@ -0,0 +1,27 @@
+a, a:visited {
+  text-decoration: none;
+}
+
+.link--primary, .link--primary:visited {
+  color: $interactive-color;
+}
+
+.link--secondary, .link--secondary:visited {
+  margin: 0px;
+  padding: 0.3em;
+  color: $secondary-color;
+}
+
+.link--nav {
+  color: $primary-color;
+  border-bottom: 2px solid white;
+}
+
+.link--nav:hover {
+  color: $interactive-color;
+}
+
+.link--nav-active {
+  color: $interactive-color;
+  border-bottom: 2px solid $interactive-color;
+}

client/scss/_media-queries.scss

@@ -0,0 +1,24 @@
+@media (max-width: $break-point-x-large) {
+  // hide site description in nav bar
+  .site-description {
+    display: none;
+  }
+
+}
+
+@media (max-width: $break-point-large ) {
+
+}
+
+@media (max-width: $break-point-medium) {
+
+
+}
+
+@media (max-width: $break-point-small) {
+
+}
+
+@media (max-width: $break-point-x-small ) {
+
+}

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/_select.scss

@@ -0,0 +1,17 @@
+select {
+  margin: 0;
+  outline: none;
+  padding: $input-padding;
+  border: 0;
+  background-color: $background-color;
+  display: inline-block;
+}
+
+.select--arrow {
+  -moz-appearance:none;
+  -webkit-appearance: none;
+  background: url('icon/downArrow.svg') no-repeat right;
+  cursor: pointer;
+  padding-right: 1.5em;
+  padding-left: $input-padding
+}

client/scss/_text.scss

@@ -0,0 +1,165 @@
+// set defaults
+
+h1, h2, h3, h4, p {
+  margin: 0;
+}
+
+h1 {
+ font-size: $text-xx-large;
+}
+
+h2 {
+  font-size: $text-x-large;
+}
+
+h3 {
+  font-size: $text-large;
+  font-weight: bold;
+}
+
+p, body, button, input, textarea, label, select, option {
+  font-family: 'Lekton', monospace;
+  font-size: $text-large;
+}
+
+.text--extra-large {
+  font-size: $text-xx-large;
+}
+
+.text--large {
+  font-size: $text-large;
+}
+
+.text--medium {
+  font-size: $text-medium;
+}
+
+.text--small {
+  font-size: $text-small;
+}
+
+.text--extra-small {
+  font-size: $text-x-small;
+}
+
+.text--underline {
+  text-decoration: underline;
+}
+
+.text--primary {
+  color: $primary-color;
+}
+
+.text--secondary {
+  color: $secondary-color;
+}
+
+.text--tertiary {
+  color: $tertiary-color;
+}
+
+.text--interactive {
+  color: $interactive-color;
+}
+
+.text--failure {
+  color: $failure-color;
+}
+
+.text--success {
+  color: $success-color;
+}
+
+@media (max-width: $break-point-x-large ) {
+  h1 {
+    font-size: $text-x-large;
+  }
+
+  h2 {
+    font-size: $text-large;
+  }
+
+  h3 {
+    font-size: $text-medium;
+  }
+
+  p, body, button, input, textarea, label, select, option {
+    font-size: $text-medium;
+  }
+
+  .text--extra-large {
+    font-size: $text-x-large;
+  }
+
+  .text--large {
+    font-size: $text-medium;
+  }
+
+  .text--medium {
+    font-size: $text-small;
+  }
+
+}
+
+@media (max-width: $break-point-medium) {
+
+  h1 {
+    font-size: $text-large;
+  }
+
+  h2 {
+    font-size: $text-medium;
+  }
+
+  h3 {
+    font-size: $text-small;
+  }
+
+  p, body, button, input, textarea, label, select, option {
+    font-size: $text-small;
+  }
+
+  .text--extra-large {
+    font-size: $text-large;
+  }
+
+  .text--large {
+    font-size: $text-medium;
+  }
+
+  .text--small {
+    font-size: $text-x-small;
+  }
+
+
+}
+
+@media (max-width: $break-point-x-small) {
+
+  h1 {
+    font-size: $text-medium;
+    font-weight: bold;
+  }
+
+  h2 {
+    font-size: $text-small;
+  }
+
+  p, body, button, input, textarea, label, select, option {
+    font-size: $text-x-small;
+  }
+
+  .text--extra-large {
+    font-size: $text-x-small;
+    font-weight: bold;
+  }
+
+  .text--large {
+    font-size: $text-x-small;
+  }
+
+  .text--medium {
+    font-size: $text-x-small;
+  }
+
+}

client/scss/_textarea.scss

@@ -0,0 +1,10 @@
+textarea {
+  margin: 0;
+  outline: none;
+  padding: $input-padding;
+  border: 0;
+  border-bottom: 1px solid $secondary-color;
+  background-color: $background-color;
+  display: inline-block;
+  width: $input-full-width;
+}

client/scss/_variables.scss

@@ -0,0 +1,37 @@
+$base-color: white;
+$primary-color: black;
+$secondary-color: #9b9b9b;
+$tertiary-color: #ccccc0;
+$interactive-color: blue;
+$success-color: green;
+$failure-color: red;
+
+$primary-padding: 3em;
+$secondary-padding: 2em;
+$thin-padding: 0.3em;
+$full-width-thin-padding: calc(100% - 0.6em);
+
+$background-color: $base-color;
+$font-color: $primary-color;
+
+$button-border-width: 1px;
+$button-border-strength: solid;
+$button-full-width: calc(100% - 2px);
+
+$input-padding: 0.3em;
+$input-full-width: calc(100% - 0.6em);
+
+$text-xx-large: 2.5em;
+$text-x-large: xx-large;
+$text-large: x-large;
+$text-medium: large;
+$text-small: medium;
+$text-x-small: small;
+
+$break-point-xx-large: 1400px;
+$break-point-x-large: 1290px;
+$break-point-large: 1000px;
+$break-point-medium: 800px;
+$break-point-small: 500px;
+$break-point-x-small: 400px;
+

client/scss/_video.scss

@@ -0,0 +1,12 @@
+video:-moz-full-screen {
+  border:none;
+  padding:0;
+}
+video:-webkit-full-screen {
+  border:none;
+  padding:0;
+}
+video:fullscreen {
+  border:none;
+  padding:0;
+}

client/scss/all.scss

@@ -0,0 +1,44 @@
+@import '_variables';
+@import '_reset';
+@import '_font';
+@import '_html';
+@import '_body';
+@import '_react-app';
+@import '_text';
+
+@import '_link';
+@import '_input';
+@import '_select';
+@import '_textarea';
+@import '_video';
+
+@import 'components/_asset-display';
+@import 'components/_asset-preview';
+@import 'components/_button';
+@import 'components/_button-primary';
+@import 'components/_button-secondary';
+@import 'components/_button-tertiary';
+@import 'components/_click-to-copy';
+@import 'components/_column';
+@import 'components/_form-feedback';
+@import 'components/_horizontal-split';
+@import 'components/_label';
+@import 'components/_nav-bar';
+@import 'components/_page-layout';
+@import 'components/_page-layout-show-lite';
+@import 'components/_page-content';
+@import 'components/_progress-bar';
+@import 'components/_publish-preview';
+@import 'components/_space-between';
+@import 'components/_space-around';
+@import 'components/_row';
+@import 'components/_vertical-split';
+@import 'components/_tooltip';
+
+@import 'containers/_dropzone';
+@import 'containers/_publish-url-input';
+@import 'containers/_publish-status';
+
+@import '_media-queries';
+
+