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", {
-        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",
-        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, {
+      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))
+      })), _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),
+          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'
+      }));
     }
   }]);
 
@@ -146,4 +143,4 @@ function (_React$Component) {
 }(_react.default.Component);
 
 var _default = PublishUrlInput;
-exports.default = _default;
+exports.default = _default;

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,6 +29,45 @@ 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 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'
+  }, "Bill"), ", and I\u2019d like to speak with you about Spee.ch.  No, not \u2018speech,\u2019 \u2018", _react.default.createElement("i", null, _react.default.createElement("a", {
+    href: 'https://spee.ch',
+    target: '_blank'
+  }, "Spee.ch.")), "\u2019 You know what, just read on..."), _react.default.createElement("h2", null, "A Little Background"), _react.default.createElement("p", null, "Wow, time flies!  A little over a year ago Spee.ch was nothing more than a glimmer in the eye of LBRY CEO Jeremy Kaufman.  At that time, the ", _react.default.createElement("a", {
+    href: 'https://lbry.io/faq/what-is-lbry',
+    target: '_blank'
+  }, "LBRY protocol"), " was still so early in its development, that there were no web-based applications for interacting with the LBRY blockchain. But then, something beautiful happened.  On March 29th, 2017, Jeremy sat down with Jack, and together they ", _react.default.createElement("a", {
+    href: 'https://www.youtube.com/watch?v=C9LCapt_OYw',
+    target: '_blank'
+  }, "live coded a single-page PHP site"), " that could publish images to the LBRY network.  And just like that, Spee.ch was born!"), _react.default.createElement("p", null, "Being that LBRY is an open source project, Jeremy ended the session by inviting community members who were interested in the project to take the reigns and see where Spee.ch could go.  I was one of the devs that did just that, and it wasn\u2019t long before I was on a weekly call dedicated to this project with contributors from around the world."), _react.default.createElement("p", null, "At this point in time, the vision for Spee.ch was pretty simple: create a web-based hosting service that used the LBRY network as a database for free image and video sharing.  In other words, an \u2018imgur on the blockchain.\u2019"), _react.default.createElement("h2", null, "Growth"), _react.default.createElement("p", null, "You might be wondering, \u201CSo, what has the Spee.ch team been doing since then?\u201D. Well, that is a great question. I\u2019m glad you asked."), _react.default.createElement("p", null, "As it turned out, the initial single-serving site was only the beginning.  We wanted to add more features, improve user experience, and continue to rapidly innovate on new ideas to explore what web-based image-hosting on the blockchain could look like.  And now -- a couple of re-designs, ", _react.default.createElement("a", {
+    href: 'https://github.com/lbryio/spee.ch',
+    target: '_blank'
+  }, "1,428 commits"), ", and ", _react.default.createElement("a", {
+    href: 'https://github.com/lbryio/spee.ch/graphs/contributors',
+    target: '_blank'
+  }, "18 contributors"), " later (as of the time of this writing) -- we\u2019ve been through a lot of changes.  We changed the URL scheme, switched out the PHP for Javascript (sorry Jeremy!), added more HTML pages, removed those HTML pages, added Handlebars, removed most of Handlebars, added React, and... you get the picture."), _react.default.createElement("p", null, "It\u2019s been a lot of work, and through all of these changes, we have been guided by our original vision: develop a free web app that allows users to share images and video using a blockchain."), _react.default.createElement("p", null, "However, we ask ourselves constantly: what else can we be doing?  What can we be doing differently?  What features can we be doing better?  And it is those kinds of questions that lead us to this post."), _react.default.createElement("h2", null, "A New Initiative"), _react.default.createElement("p", null, "As Spee.ch developed, we were lucky to find an amazing community spring up around the project that contributed bug reports, bug fixes, feature requests, pull requests, etc., but ultimately we are limited by the hours we have in the day, and while some requests get prioritized, others get shelved. "), _react.default.createElement("p", null, "So we started wondering:  What if instead of having the community help us build our platform, we started helping them build theirs?  We started mulling this over, and the more we thought about it the more we liked it. And thus, Spee.ch Multisite was born."), _react.default.createElement("h2", null, "Spee.ch Multisite"), _react.default.createElement("p", null, "The vision for Spee.ch Multisite is to maintain a foundational codebase that will support a greater variety of content-sharing web apps built on LBRY, allowing these apps to publish and retrieve content from the network via the blockchain."), _react.default.createElement("h3", null, "Run Your Own Spee.ch!"), _react.default.createElement("p", null, "Ok, here\u2019s the tl:dr: the purpose of the Spee.ch Multisite initiative is to enable you to run your own version of Spee.ch."), _react.default.createElement("p", null, "Spee.ch Multisite will provide a helpful set of basic code to get you going, but we purposefully want to give you control and provide a sandbox in which you can develop the look, content, and features for your site.  The shared code base will be developed to support you in that quest. "), _react.default.createElement("p", null, "So if you don\u2019t want your site called or looking anything like Spee.ch, we encourage that! Don\u2019t hesitate to make it your own!"), _react.default.createElement("h3", null, "For the Community by the Community"), _react.default.createElement("p", null, "Initially, sites built on Spee.ch Multisite will look a lot like Spee.ch, but you will be able to add custom pages, update the look of components, and limit the content on your spee.ch site as you see fit."), _react.default.createElement("p", null, "Over time, it is our hope that the project will grow to incorporate many more components and features developed by us and the community to support a wide variety of functionalities beyond what the current spee.ch site is capable of."), _react.default.createElement("h3", null, "A Common Codebase"), _react.default.createElement("p", null, "If you have been following the project, you may have already noticed that the original github repository has grown into two: ", _react.default.createElement("a", {
+    href: 'https://github.com/lbryio/www.spee.ch',
+    target: '_blank'
+  }, "www.spee.ch"), " and ", _react.default.createElement("a", {
+    href: 'https://github.com/lbryio/spee.ch',
+    target: '_blank'
+  }, "spee.ch"), ".  I will save the specifics for a future tech-focused blog post in the coming weeks, but the reason for these changes is to modularise the code so that is it easier for anyone who wants to run their own version of Spee.ch to do so, and to be able to customize their Spee.ch to their liking."), _react.default.createElement("h3", null, "What About the Flagship Spee.ch Site?"), _react.default.createElement("p", null, "Don\u2019t worry!  If you like using ", _react.default.createElement("a", {
+    href: 'https://spee.ch',
+    target: '_blank'
+  }, "Spee.ch"), " and have no intention of running your own site, we will still be here running it for you!  We are dedicated to pushing it forward and using it as patient zero for all additions to the Spee.ch Multisite codebase."), _react.default.createElement("h2", null, "Join Us"), _react.default.createElement("p", null, "Friday, May 18, we will be hosting a live demo showcasing the alpha version of Spee.ch Multisite.  It\u2019s still quite young, but that\u2019s the point: we want to realize this vision together."), _react.default.createElement("p", null, _react.default.createElement("b", null, _react.default.createElement("a", {
+    href: 'https://speech.rsvpify.com/',
+    target: '_blank'
+  }, "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")));
+};
+
 var MultisitePage =
 /*#__PURE__*/
 function (_React$Component) {
@@ -43,49 +80,10 @@ function (_React$Component) {
   _createClass(MultisitePage, [{
     key: "render",
     value: function render() {
-      return _react.default.createElement("div", null, _react.default.createElement(_SEO.default, {
+      return _react.default.createElement(_PageLayout.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"
-      }, "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'
-      }, "Bill"), ", and I\u2019d like to speak with you about Spee.ch.  No, not \u2018speech,\u2019 \u2018", _react.default.createElement("i", null, _react.default.createElement("a", {
-        href: 'https://spee.ch',
-        target: '_blank'
-      }, "Spee.ch.")), "\u2019 You know what, just read on..."), _react.default.createElement("h2", null, "A Little Background"), _react.default.createElement("p", null, "Wow, time flies!  A little over a year ago Spee.ch was nothing more than a glimmer in the eye of LBRY CEO Jeremy Kaufman.  At that time, the ", _react.default.createElement("a", {
-        href: 'https://lbry.io/faq/what-is-lbry',
-        target: '_blank'
-      }, "LBRY protocol"), " was still so early in its development, that there were no web-based applications for interacting with the LBRY blockchain. But then, something beautiful happened.  On March 29th, 2017, Jeremy sat down with Jack, and together they ", _react.default.createElement("a", {
-        href: 'https://www.youtube.com/watch?v=C9LCapt_OYw',
-        target: '_blank'
-      }, "live coded a single-page PHP site"), " that could publish images to the LBRY network.  And just like that, Spee.ch was born!"), _react.default.createElement("p", null, "Being that LBRY is an open source project, Jeremy ended the session by inviting community members who were interested in the project to take the reigns and see where Spee.ch could go.  I was one of the devs that did just that, and it wasn\u2019t long before I was on a weekly call dedicated to this project with contributors from around the world."), _react.default.createElement("p", null, "At this point in time, the vision for Spee.ch was pretty simple: create a web-based hosting service that used the LBRY network as a database for free image and video sharing.  In other words, an \u2018imgur on the blockchain.\u2019"), _react.default.createElement("h2", null, "Growth"), _react.default.createElement("p", null, "You might be wondering, \u201CSo, what has the Spee.ch team been doing since then?\u201D. Well, that is a great question. I\u2019m glad you asked."), _react.default.createElement("p", null, "As it turned out, the initial single-serving site was only the beginning.  We wanted to add more features, improve user experience, and continue to rapidly innovate on new ideas to explore what web-based image-hosting on the blockchain could look like.  And now -- a couple of re-designs, ", _react.default.createElement("a", {
-        href: 'https://github.com/lbryio/spee.ch',
-        target: '_blank'
-      }, "1,428 commits"), ", and ", _react.default.createElement("a", {
-        href: 'https://github.com/lbryio/spee.ch/graphs/contributors',
-        target: '_blank'
-      }, "18 contributors"), " later (as of the time of this writing) -- we\u2019ve been through a lot of changes.  We changed the URL scheme, switched out the PHP for Javascript (sorry Jeremy!), added more HTML pages, removed those HTML pages, added Handlebars, removed most of Handlebars, added React, and... you get the picture."), _react.default.createElement("p", null, "It\u2019s been a lot of work, and through all of these changes, we have been guided by our original vision: develop a free web app that allows users to share images and video using a blockchain."), _react.default.createElement("p", null, "However, we ask ourselves constantly: what else can we be doing?  What can we be doing differently?  What features can we be doing better?  And it is those kinds of questions that lead us to this post."), _react.default.createElement("h2", null, "A New Initiative"), _react.default.createElement("p", null, "As Spee.ch developed, we were lucky to find an amazing community spring up around the project that contributed bug reports, bug fixes, feature requests, pull requests, etc., but ultimately we are limited by the hours we have in the day, and while some requests get prioritized, others get shelved. "), _react.default.createElement("p", null, "So we started wondering:  What if instead of having the community help us build our platform, we started helping them build theirs?  We started mulling this over, and the more we thought about it the more we liked it. And thus, Spee.ch Multisite was born."), _react.default.createElement("h2", null, "Spee.ch Multisite"), _react.default.createElement("p", null, "The vision for Spee.ch Multisite is to maintain a foundational codebase that will support a greater variety of content-sharing web apps built on LBRY, allowing these apps to publish and retrieve content from the network via the blockchain."), _react.default.createElement("h3", null, "Run Your Own Spee.ch!"), _react.default.createElement("p", null, "Ok, here\u2019s the tl:dr: the purpose of the Spee.ch Multisite initiative is to enable you to run your own version of Spee.ch."), _react.default.createElement("p", null, "Spee.ch Multisite will provide a helpful set of basic code to get you going, but we purposefully want to give you control and provide a sandbox in which you can develop the look, content, and features for your site.  The shared code base will be developed to support you in that quest. "), _react.default.createElement("p", null, "So if you don\u2019t want your site called or looking anything like Spee.ch, we encourage that! Don\u2019t hesitate to make it your own!"), _react.default.createElement("h3", null, "For the Community by the Community"), _react.default.createElement("p", null, "Initially, sites built on Spee.ch Multisite will look a lot like Spee.ch, but you will be able to add custom pages, update the look of components, and limit the content on your spee.ch site as you see fit."), _react.default.createElement("p", null, "Over time, it is our hope that the project will grow to incorporate many more components and features developed by us and the community to support a wide variety of functionalities beyond what the current spee.ch site is capable of."), _react.default.createElement("h3", null, "A Common Codebase"), _react.default.createElement("p", null, "If you have been following the project, you may have already noticed that the original github repository has grown into two: ", _react.default.createElement("a", {
-        href: 'https://github.com/lbryio/www.spee.ch',
-        target: '_blank'
-      }, "www.spee.ch"), " and ", _react.default.createElement("a", {
-        href: 'https://github.com/lbryio/spee.ch',
-        target: '_blank'
-      }, "spee.ch"), ".  I will save the specifics for a future tech-focused blog post in the coming weeks, but the reason for these changes is to modularise the code so that is it easier for anyone who wants to run their own version of Spee.ch to do so, and to be able to customize their Spee.ch to their liking."), _react.default.createElement("h3", null, "What About the Flagship Spee.ch Site?"), _react.default.createElement("p", null, "Don\u2019t worry!  If you like using ", _react.default.createElement("a", {
-        href: 'https://spee.ch',
-        target: '_blank'
-      }, "Spee.ch"), " and have no intention of running your own site, we will still be here running it for you!  We are dedicated to pushing it forward and using it as patient zero for all additions to the Spee.ch Multisite codebase."), _react.default.createElement("h2", null, "Join Us"), _react.default.createElement("p", null, "Friday, May 18, we will be hosting a live demo showcasing the alpha version of Spee.ch Multisite.  It\u2019s still quite young, but that\u2019s the point: we want to realize this vision together."), _react.default.createElement("p", null, _react.default.createElement("b", null, _react.default.createElement("a", {
-        href: 'https://speech.rsvpify.com/',
-        target: '_blank'
-      }, "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")))));
+        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';
+
+