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/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 _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow"));
+
+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(_PublishDetailsRow.default, {
+    label: _react.default.createElement(_Label.default, {
+      value: 'Name:'
+    }),
+    content: _react.default.createElement("div", {
+      className: "input-area--primary"
+    }, _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 _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow"));
+
+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(_PublishDetailsRow.default, {
+    label: _react.default.createElement(_Label.default, {
+      value: 'Password:'
+    }),
+    content: _react.default.createElement("div", {
+      className: "input-area--primary"
+    }, _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/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 _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow"));
+
+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(_PublishDetailsRow.default, {
+    label: _react.default.createElement(_Label.default, {
+      value: 'Name:'
+    }),
+    content: _react.default.createElement("div", {
+      className: "input-area--primary"
+    }, _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 _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow"));
+
+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(_PublishDetailsRow.default, {
+    label: _react.default.createElement(_Label.default, {
+      value: 'Password:'
+    }),
+    content: _react.default.createElement("div", {
+      className: "input-area--primary"
+    }, _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/SpaceAround/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } _setPrototypeOf(subClass.prototype, superClass && superClass.prototype); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
+
+var SpaceBetween =
+/*#__PURE__*/
+function (_React$Component) {
+  function SpaceBetween() {
+    _classCallCheck(this, SpaceBetween);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(SpaceBetween).apply(this, arguments));
+  }
+
+  _createClass(SpaceBetween, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate() {
+      return false;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return _react.default.createElement("div", {
+        className: 'space-around'
+      }, this.props.children);
+    }
+  }]);
+
+  _inherits(SpaceBetween, _React$Component);
+
+  return SpaceBetween;
+}(_react.default.Component);
+
+var _default = SpaceBetween;
+exports.default = _default;

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 _ErrorDisplay = _interopRequireDefault(require("@components/ErrorDisplay"));
+
 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(_ErrorDisplay.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: 'fine-print'
       }, status), _react.default.createElement(_ProgressBar.default, {
         size: 12
       })));

client/build/containers/ChannelLoginForm/view.js

@@ -11,9 +11,11 @@ var _request = _interopRequireDefault(require("../../utils/request"));
 
 var _ErrorDisplay = _interopRequireDefault(require("@components/ErrorDisplay"));
 
-var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow"));
+var _ChannelLoginNameInput = _interopRequireDefault(require("@components/ChannelLoginNameInput"));
 
-var _Label = _interopRequireDefault(require("@components/Label"));
+var _ChannelLoginPasswordInput = _interopRequireDefault(require("@components/ChannelLoginPasswordInput"));
+
+var _ButtonPrimary = _interopRequireDefault(require("@components/ButtonPrimary"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -37,48 +39,6 @@ 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 ChannelLoginNameInput = function ChannelLoginNameInput(_ref) {
-  var channelName = _ref.channelName,
-      handleInput = _ref.handleInput;
-  return _react.default.createElement(_PublishDetailsRow.default, {
-    label: _react.default.createElement(_Label.default, {
-      value: 'Name:'
-    }),
-    content: _react.default.createElement("div", {
-      className: "input-area--primary"
-    }, _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 ChannelLoginPasswordInput = function ChannelLoginPasswordInput(_ref2) {
-  var channelPassword = _ref2.channelPassword,
-      handleInput = _ref2.handleInput;
-  return _react.default.createElement(_PublishDetailsRow.default, {
-    label: _react.default.createElement(_Label.default, {
-      value: 'Password:'
-    }),
-    content: _react.default.createElement("div", {
-      className: "input-area--primary"
-    }, _react.default.createElement("input", {
-      type: "password",
-      id: "channel-login-password-input",
-      name: "password",
-      className: "input-text",
-      placeholder: "",
-      value: channelPassword,
-      onChange: handleInput
-    }))
-  });
-};
-
 var ChannelLoginForm =
 /*#__PURE__*/
 function (_React$Component) {
@@ -122,12 +82,12 @@ function (_React$Component) {
         }),
         credentials: 'include'
       };
-      (0, _request.default)('login', params).then(function (_ref3) {
-        var success = _ref3.success,
-            channelName = _ref3.channelName,
-            shortChannelId = _ref3.shortChannelId,
-            channelClaimId = _ref3.channelClaimId,
-            message = _ref3.message;
+      (0, _request.default)('login', params).then(function (_ref) {
+        var success = _ref.success,
+            channelName = _ref.channelName,
+            shortChannelId = _ref.shortChannelId,
+            channelClaimId = _ref.channelClaimId,
+            message = _ref.message;
 
         if (success) {
           _this2.props.onChannelLogin(channelName, shortChannelId, channelClaimId);
@@ -153,19 +113,19 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return _react.default.createElement("div", null, _react.default.createElement(ChannelLoginNameInput, {
+      return _react.default.createElement("div", null, _react.default.createElement(_ChannelLoginNameInput.default, {
         channelName: this.state.channelName,
         handleInput: this.handleInput
-      }), _react.default.createElement(ChannelLoginPasswordInput, {
+      }), _react.default.createElement(_ChannelLoginPasswordInput.default, {
         channelPassword: this.state.channelPassword,
         handleInput: this.handleInput
       }), _react.default.createElement(_ErrorDisplay.default, {
         errorMessage: this.state.error,
         defaultMessage: 'Enter the name and password for your channel'
-      }), _react.default.createElement("button", {
-        className: "button--primary",
-        onClick: this.loginToChannel
-      }, "Authenticate"));
+      }), _react.default.createElement(_ButtonPrimary.default, {
+        value: 'Authenticate',
+        onClickHandler: this.loginToChannel
+      }));
     }
   }]);
 

client/build/containers/PublishDetails/view.js

@@ -19,6 +19,12 @@ 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"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -60,14 +66,13 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return _react.default.createElement("div", null, _react.default.createElement(_Row.default, null, _react.default.createElement(_PublishUrlInput.default, null)), _react.default.createElement(_Row.default, null, _react.default.createElement(_ChannelSelect.default, null)), this.props.file.type === 'video/mp4' && _react.default.createElement(_Row.default, null, _react.default.createElement(_PublishThumbnailInput.default, null)), _react.default.createElement(_Row.default, null, _react.default.createElement(_PublishMetadataInputs.default, null)), _react.default.createElement(_Row.default, null, _react.default.createElement("button", {
-        id: "publish-submit",
-        className: "button--primary button--large",
-        onClick: this.onPublishSubmit
-      }, "Publish")), _react.default.createElement(_Row.default, null, _react.default.createElement("button", {
-        className: "button--cancel",
-        onClick: this.props.clearFile
-      }, "Cancel")), _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
+      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("p", {
         className: "fine-print"
       }, "By clicking 'Publish', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. ", _react.default.createElement("a", {
         className: "link--primary",

client/build/containers/PublishMetadataInputs/view.js

@@ -13,6 +13,8 @@ var _PublishLicenseInput = _interopRequireDefault(require("@components/PublishLi
 
 var _PublishNsfwInput = _interopRequireDefault(require("@components/PublishNsfwInput"));
 
+var _ButtonSecondary = _interopRequireDefault(require("@components/ButtonSecondary"));
+
 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); }
@@ -79,10 +81,10 @@ function (_React$Component) {
       }), _react.default.createElement(_PublishNsfwInput.default, {
         nsfw: this.props.nsfw,
         handleInput: this.handleInput
-      })), _react.default.createElement("button", {
-        className: "button--secondary",
-        onClick: this.toggleShowInputs
-      }, this.props.showMetadataInputs ? 'less' : 'more'));
+      })), _react.default.createElement(_ButtonSecondary.default, {
+        value: this.props.showMetadataInputs ? 'less' : 'more',
+        onClickHandler: this.toggleShowInputs
+      }));
     }
   }]);
 

client/scss/_button.scss

@@ -1,60 +0,0 @@
-button {
-  cursor: pointer;
-}
-
-.button--primary, .button--primary:focus {
-  border: 1px solid black;
-  padding: 0.5em;
-  margin: 0.5em 0.3em 0.5em 0.3em;
-  color: black;
-  background-color: white;
-  outline: 0px;
-}
-
-.button--primary:hover {
-  border: 1px solid #4156C5;
-  color: white;
-  background-color: #4156C5;
-}
-
-.button--primary:active{
-  border: 1px solid #ffffff;
-  color: #d0d0d0;
-  background-color: #ffffff;
-}
-
-.button--secondary, .button--secondary:focus {
-  border: 0px;
-  border-bottom: 1px solid black;
-  padding: 0.5em;
-  margin: 0.5em 0.3em 0.5em 0.3em;
-  color: black;
-  background-color: white;
-  outline: 0px;
-}
-
-.button--secondary:hover {
-  border-bottom: 1px solid #9b9b9b;
-  color: #4156C5;
-}
-
-.button--secondary:active {
-  color: #ffffff;;
-}
-
-.button--large{
-  margin: 0px;
-  width: calc(100% - 2px);
-  padding: 2rem;
-  font-size: x-large;
-}
-
-.button--cancel{
-  border: 0px;
-  background-color: white;
-  color: #9b9b9b;
-}
-
-.button--wide {
-  width: 100%;
-}

client/scss/all.scss

@@ -10,7 +10,6 @@
 @import '_link';
 @import '_info-message';
 @import '_input';
-@import '_button';
 @import '_span';
 @import '_video';
 @import '_asset';
@@ -21,10 +20,15 @@
 @import 'components/_page-content';
 @import 'components/_horizontal-split';
 @import 'components/_space-between';
+@import 'components/_space-around';
 @import 'components/_column';
 @import 'components/_row';
 @import 'components/_nav-bar';
 @import 'components/_publish-details-row';
+@import 'components/_button';
+@import 'components/_button-primary';
+@import 'components/_button-secondary';
+@import 'components/_button-tertiary';
 @import 'containers/_dropzone';
 @import 'containers/_publish-url-input';
 @import 'containers/_site-description';

client/scss/components/_button-primary.scss

@@ -0,0 +1,33 @@
+
+.button-primary, .button-primary:focus, .button-primary:active {
+  border: $button-border-width $button-border-strength $primary-color;
+  padding: 0.5em;
+  margin: 0.5em 0.3em 0.5em 0.3em;
+  color: $primary-color;
+  background-color: $background-color;
+  outline: 0;
+}
+
+.button-primary:focus {
+  border-color: $secondary-color;
+  background-color: $tertiary-color;
+}
+
+
+.button-primary:hover {
+  border-color: $interactive-color;
+  color: $background-color;
+  background-color: $interactive-color;
+}
+
+.button-primary:active{
+  border-color: $background-color;
+  color: $secondary-color;
+  background-color: $tertiary-color;
+}
+
+.button-primary--jumbo, .button-primary--jumbo:focus, .button-primary--jumbo:active {
+  width: $button-max-width;
+  padding: $secondary-padding;
+  font-size: x-large;
+}

client/scss/components/_button-secondary.scss

@@ -0,0 +1,22 @@
+.button--secondary, .button--secondary:focus {
+  border: 0;
+  border-bottom: 1px solid $primary-color;
+  padding: 0.5em;
+  margin: 0.5em 0.3em 0.5em 0.3em;
+  color: $primary-color;
+  background-color: $background-color;
+  outline: 0;
+}
+
+.button--secondary:focus{
+  border-bottom: 1px solid $secondary-color;
+  background-color: $tertiary-color;
+}
+
+.button--secondary:hover {
+  color: $interactive-color;
+}
+
+.button--secondary:active {
+  color: $background-color;
+}

client/scss/components/_button-tertiary.scss

@@ -0,0 +1,14 @@
+.button--tertiary, .button--tertiary:focus, .button--tertiary:active {
+  border: 0;
+  color: $secondary-color;
+  background-color: $background-color;
+}
+
+.button--tertiary:hover {
+  color: $primary-color;
+}
+
+.button--tertiary:active, .button--tertiary:focus {
+  color: $secondary-color;
+  background-color: $tertiary-color;
+}

client/scss/components/_button.scss

@@ -0,0 +1,7 @@
+button {
+  cursor: pointer;
+}
+
+$button-border-width: 1px;
+$button-border-strength: solid;
+$button-max-width: calc(100% - 2px);

client/scss/components/_space-around.scss

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

client/src/components/ButtonPrimary/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const ButtonPrimary  = ({ value, onClickHandler }) => {
+  return (
+    <button
+      className={'button button-primary'}
+      onClick={onClickHandler}
+    >
+      {value}
+    </button>
+  );
+};
+
+export default ButtonPrimary;

client/src/components/ButtonPrimaryJumbo/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const ButtonPrimaryJumbo  = ({ value, onClickHandler }) => {
+  return (
+    <button
+      className={'button button-primary button-primary--jumbo'}
+      onClick={onClickHandler}
+    >
+      {value}
+    </button>
+  );
+};
+
+export default ButtonPrimaryJumbo;

client/src/components/ButtonSecondary/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const ButtonPrimary  = ({ value, onClickHandler }) => {
+  return (
+    <button
+      className={'button button--secondary'}
+      onClick={onClickHandler}
+    >
+      {value}
+    </button>
+  );
+};
+
+export default ButtonPrimary;

client/src/components/ButtonTertiary/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const ButtonTertiary  = ({ value, onClickHandler }) => {
+  return (
+    <button
+      className={'button button--tertiary'}
+      onClick={onClickHandler}
+    >
+      {value}
+    </button>
+  );
+};
+
+export default ButtonTertiary;

client/src/components/ChannelCreateNameInput/index.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import Label from '@components/Label';
+import PublishDetailsRow from '@components/PublishDetailsRow';
+
+const ChannelCreateNameInput  = ({ value, error, handleNameInput }) => {
+  return (
+    <PublishDetailsRow
+      label={
+        <Label value={'Name:'} />
+      }
+      content={
+        <div className='input-area--primary'>
+          <span>@</span>
+          <input
+            type='text'
+            name='channel'
+            className='input-text'
+            placeholder='exampleChannelName'
+            value={value}
+            onChange={handleNameInput}
+          />
+          { (value && !error) && (
+            <span className='info-message--success span--absolute'>
+              {'\u2713'}
+            </span>
+          )}
+          { error && (
+            <span className='info-message--failure span--absolute'>
+              {'\u2716'}
+            </span>
+          )}
+        </div>
+      }
+    />
+  );
+};
+
+export default ChannelCreateNameInput;

client/src/components/ChannelCreatePasswordInput/index.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Label from '@components/Label';
+import PublishDetailsRow from '@components/PublishDetailsRow';
+
+const ChannelCreatePasswordInput  = ({ value, handlePasswordInput }) => {
+  return (
+    <PublishDetailsRow
+      label={
+        <Label value={'Password:'} />
+      }
+      content={
+        <div className='input-area--primary'>
+          <input
+            type='password'
+            name='password'
+            className='input-text'
+            placeholder=''
+            value={value}
+            onChange={handlePasswordInput} />
+        </div>
+      }
+    />
+  );
+};
+
+export default ChannelCreatePasswordInput;

client/src/components/ChannelLoginNameInput/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PublishDetailsRow from '@components/PublishDetailsRow';
+import Label from '@components/Label';
+
+const ChannelLoginNameInput  = ({ channelName, handleInput }) => {
+  return (
+    <PublishDetailsRow
+      label={
+        <Label value={'Name:'} />
+      }
+      content={
+        <div className='input-area--primary'>
+          <span>@</span>
+          <input
+            type='text'
+            id='channel-login-name-input'
+            className='input-text'
+            name='name'
+            placeholder='Your Channel Name'
+            value={channelName}
+            onChange={handleInput}
+          />
+        </div>
+      }
+    />
+  );
+};
+
+export default ChannelLoginNameInput;

client/src/components/ChannelLoginPasswordInput/index.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PublishDetailsRow from '@components/PublishDetailsRow';
+import Label from '@components/Label';
+
+const ChannelLoginPasswordInput  = ({ channelPassword, handleInput }) => {
+  return (
+    <PublishDetailsRow
+      label={
+        <Label value={'Password:'} />
+      }
+      content={
+        <div className='input-area--primary'>
+          <input
+            type='password'
+            id='channel-login-password-input'
+            name='password'
+            className='input-text'
+            placeholder=''
+            value={channelPassword}
+            onChange={handleInput}
+          />
+        </div>
+      }
+    />
+  );
+};
+
+export default ChannelLoginPasswordInput;

client/src/components/SpaceAround/index.jsx

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

client/src/containers/ChannelCreateForm/view.jsx

@@ -1,4 +1,8 @@
 import React from 'react';
+import ChannelCreateNameInput from '@components/ChannelCreateNameInput';
+import ChannelCreatePasswordInput from '@components/ChannelCreatePasswordInput';
+import ButtonPrimary from '@components/ButtonPrimary';
+import ErrorDisplay from '@components/ErrorDisplay';
 import ProgressBar from '@components/ProgressBar';
 
 class ChannelCreateForm extends React.Component {
@@ -28,7 +32,7 @@ class ChannelCreateForm extends React.Component {
   }
   handlePasswordInput (event) {
     let value = this.cleansePasswordInput(event.target.value);
-    if (!value){
+    if (!value) {
       this.props.updateChannelCreatePassword('error', 'Please enter a password');
     } else {
       this.props.updateChannelCreatePassword('error', null);
@@ -55,40 +59,28 @@ class ChannelCreateForm extends React.Component {
     return (
       <div>
         { !status ? (
-          <form id='publish-channel-form'>
-            <div className='row row--wide row--short'>
-              <div className='column column--3 column--sml-10'>
-                <label className='label' htmlFor='new-channel-name'>Name:</label>
-              </div><div className='column column--6 column--sml-10'>
-                <div className='input-text--primary flex-container--row flex-container--left-bottom span--relative'>
-                  <span>@</span>
-                  <input type='text' name='channel' id='new-channel-name' className='input-text' placeholder='exampleChannelName' value={name.value} onChange={this.handleNameInput} />
-                  { (name.value && !name.error) && <span id='input-success-channel-name' className='info-message--success span--absolute'>{'\u2713'}</span> }
-                  { name.error && <span id='input-success-channel-name' className='info-message--failure span--absolute'>{'\u2716'}</span> }
+          <div>
+            <ChannelCreateNameInput
+              value={name.value}
+              error={name.error}
+              handleNameInput={this.handleNameInput}
+            />
+            <ChannelCreatePasswordInput
+              value={password.value}
+              handlePasswordInput={this.handlePasswordInput}
+            />
+            <ErrorDisplay
+              errorMessage={formError}
+              defaultMessage={'Choose a name and password for your channel'}
+            />
+            <ButtonPrimary
+              value={'Create Channel'}
+              onClickHandler={this.handleSubmit}
+            />
           </div>
-              </div>
-            </div>
-            <div className='row row--wide row--short'>
-              <div className='column column--3 column--sml-10'>
-                <label className='label' htmlFor='new-channel-password'>Password:</label>
-              </div><div className='column column--6 column--sml-10'>
-                <div className='input-text--primary'>
-                  <input type='password' name='password' id='new-channel-password' className='input-text'  placeholder='' value={password.value} onChange={this.handlePasswordInput} />
-                </div>
-              </div>
-            </div>
-            {formError ? (
-              <p className='info-message--failure'>{formError}</p>
-            ) : (
-              <p className='info-message'>Choose a name and password for your channel</p>
-            )}
-            <div className='row row--wide'>
-              <button className='button--primary' onClick={this.handleSubmit}>Create Channel</button>
-            </div>
-          </form>
         ) : (
           <div>
-            <p className='fine-print'>{status}</p>
+            <p className={'fine-print'}>{status}</p>
             <ProgressBar size={12} />
           </div>
         )}

client/src/containers/ChannelLoginForm/view.jsx

@@ -1,55 +1,9 @@
 import React from 'react';
 import request from '../../utils/request';
 import ErrorDisplay from '@components/ErrorDisplay';
-import PublishDetailsRow from '@components/PublishDetailsRow';
-import Label from '@components/Label';
-
-const ChannelLoginNameInput  = ({ channelName, handleInput }) => {
-  return (
-    <PublishDetailsRow
-      label={
-        <Label value={'Name:'} />
-      }
-      content={
-        <div className='input-area--primary'>
-          <span>@</span>
-          <input
-            type='text'
-            id='channel-login-name-input'
-            className='input-text'
-            name='name'
-            placeholder='Your Channel Name'
-            value={channelName}
-            onChange={handleInput}
-          />
-        </div>
-      }
-    />
-  );
-};
-
-const ChannelLoginPasswordInput  = ({ channelPassword, handleInput }) => {
-  return (
-    <PublishDetailsRow
-      label={
-        <Label value={'Password:'} />
-      }
-      content={
-        <div className='input-area--primary'>
-          <input
-            type='password'
-            id='channel-login-password-input'
-            name='password'
-            className='input-text'
-            placeholder=''
-            value={channelPassword}
-            onChange={handleInput}
-          />
-        </div>
-      }
-    />
-  );
-};
+import ChannelLoginNameInput from '@components/ChannelLoginNameInput';
+import ChannelLoginPasswordInput from '@components/ChannelLoginPasswordInput';
+import ButtonPrimary from '@components/ButtonPrimary';
 
 class ChannelLoginForm extends React.Component {
   constructor (props) {
@@ -108,7 +62,10 @@ class ChannelLoginForm extends React.Component {
           errorMessage={this.state.error}
           defaultMessage={'Enter the name and password for your channel'}
         />
-        <button className='button--primary' onClick={this.loginToChannel}>Authenticate</button>
+        <ButtonPrimary
+          value={'Authenticate'}
+          onClickHandler={this.loginToChannel}
+        />
       </div>
     );
   }

client/src/containers/PublishDetails/view.jsx

@@ -5,6 +5,9 @@ import PublishThumbnailInput from '@containers/PublishThumbnailInput';
 import PublishMetadataInputs from '@containers/PublishMetadataInputs';
 import ChannelSelect from '@containers/ChannelSelect';
 import Row from '@components/Row';
+import ButtonPrimaryJumbo from '@components/ButtonPrimaryJumbo';
+import ButtonTertiary from '@components/ButtonTertiary';
+import SpaceAround from '@components/SpaceAround';
 
 class PublishDetails extends React.Component {
   constructor (props) {
@@ -36,23 +39,24 @@ class PublishDetails extends React.Component {
         </Row>
 
         <Row>
-          <button
-            id='publish-submit'
-            className='button--primary button--large'
-            onClick={this.onPublishSubmit}
-          >
-            Publish
-          </button>
+          <ButtonPrimaryJumbo
+            value={'Publish'}
+            onClickHandler={this.onPublishSubmit}
+          />
         </Row>
 
         <Row>
-          <button className='button--cancel' onClick={this.props.clearFile}>Cancel</button>
+          <SpaceAround>
+            <ButtonTertiary
+              value={'Cancel'}
+              onClickHandler={this.props.clearFile}
+            />
+          </SpaceAround>
         </Row>
 
         <Row>
           <p className='fine-print'>By clicking 'Publish', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a className='link--primary' target='_blank' href='https://lbry.io/learn'>Read more.</a></p>
         </Row>
-
       </div>
     );
   }

client/src/containers/PublishMetadataInputs/view.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PublishDescriptionInput from '@components/PublishDescriptionInput';
 import PublishLicenseInput from '@components/PublishLicenseInput';
 import PublishNsfwInput from '@components/PublishNsfwInput';
+import ButtonSecondary from '@components/ButtonSecondary';
 
 class PublishMetadataInputs extends React.Component {
   constructor (props) {
@@ -33,23 +34,19 @@ class PublishMetadataInputs extends React.Component {
               description={this.props.description}
               handleInput={this.handleInput}
             />
-
             <PublishLicenseInput
               handleSelect={this.handleSelect}
             />
-
             <PublishNsfwInput
               nsfw={this.props.nsfw}
               handleInput={this.handleInput}
             />
           </div>
         )}
-        <button
-          className='button--secondary'
-          onClick={this.toggleShowInputs}
-        >
-          {this.props.showMetadataInputs ? 'less' : 'more'}
-        </button>
+        <ButtonSecondary
+          value={this.props.showMetadataInputs ? 'less' : 'more'}
+          onClickHandler={this.toggleShowInputs}
+        />
       </div>
     );
   }