udpated error display and text css

client/build/components/AboutSpeechDetails/index.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var AboutSpeechTwo = function AboutSpeechTwo() {
+var AboutSpeechDetails = function AboutSpeechDetails() {
   return _react.default.createElement("div", null, _react.default.createElement("p", null, "Spee.ch is a media-hosting site that reads from and publishes content to the ", _react.default.createElement("a", {
     className: "link--primary",
     href: "https://lbry.io"
@@ -28,5 +28,5 @@ var AboutSpeechTwo = function AboutSpeechTwo() {
   }, "github issues"), "."));
 };
 
-var _default = AboutSpeechTwo;
+var _default = AboutSpeechDetails;
 exports.default = _default;

client/build/components/AboutSpeechOverview/index.js

@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var AboutSpeechOne = function AboutSpeechOne() {
+var AboutSpeechOverview = function AboutSpeechOverview() {
   return _react.default.createElement("div", null, _react.default.createElement("p", {
-    className: "pull-quote"
+    className: "text--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",
@@ -31,5 +31,5 @@ var AboutSpeechOne = function AboutSpeechOne() {
   }, "DOCUMENTATION")));
 };
 
-var _default = AboutSpeechOne;
+var _default = AboutSpeechOverview;
 exports.default = _default;

client/build/components/DropzoneDropItDisplay/index.js

@@ -13,7 +13,7 @@ var DropzoneDropItDisplay = function DropzoneDropItDisplay() {
   return _react.default.createElement("div", {
     className: "dropzone-dropit-display"
   }, _react.default.createElement("p", {
-    className: "blue"
+    className: "text--interactive"
   }, "Drop it."));
 };
 

client/build/components/DropzoneInstructionsDisplay/index.js

@@ -19,7 +19,7 @@ var DropzoneInstructionsDisplay = function DropzoneInstructionsDisplay(_ref) {
   }, 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"
+    className: "text--underline"
   }, "CHOOSE FILE"));
 };
 

client/build/components/FormFeedbackDisplay/index.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var ErrorDisplay = function ErrorDisplay(_ref) {
+var FormFeedbackDisplay = function FormFeedbackDisplay(_ref) {
   var errorMessage = _ref.errorMessage,
       defaultMessage = _ref.defaultMessage;
   return _react.default.createElement("div", null, errorMessage ? _react.default.createElement("p", {
@@ -19,5 +19,5 @@ var ErrorDisplay = function ErrorDisplay(_ref) {
   }, defaultMessage));
 };
 
-var _default = ErrorDisplay;
+var _default = FormFeedbackDisplay;
 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--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."));
+};
+
+var _default = PublishFinePrint;
+exports.default = _default;

client/build/components/SpaceAround/index.js

@@ -27,16 +27,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 SpaceBetween =
+var SpaceAround =
 /*#__PURE__*/
 function (_React$Component) {
-  function SpaceBetween() {
-    _classCallCheck(this, SpaceBetween);
+  function SpaceAround() {
+    _classCallCheck(this, SpaceAround);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(SpaceBetween).apply(this, arguments));
+    return _possibleConstructorReturn(this, _getPrototypeOf(SpaceAround).apply(this, arguments));
   }
 
-  _createClass(SpaceBetween, [{
+  _createClass(SpaceAround, [{
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate() {
       return false;
@@ -50,10 +50,10 @@ function (_React$Component) {
     }
   }]);
 
-  _inherits(SpaceBetween, _React$Component);
+  _inherits(SpaceAround, _React$Component);
 
-  return SpaceBetween;
+  return SpaceAround;
 }(_react.default.Component);
 
-var _default = SpaceBetween;
+var _default = SpaceAround;
 exports.default = _default;

client/build/containers/AssetTitle/view.js

@@ -11,9 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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("div", null, _react.default.createElement("h3", null, title));
 };
 
 var _default = AssetTitle;

client/build/containers/ChannelCreateForm/view.js

@@ -13,7 +13,7 @@ var _ChannelCreatePasswordInput = _interopRequireDefault(require("@components/Ch
 
 var _ButtonPrimary = _interopRequireDefault(require("@components/ButtonPrimary"));
 
-var _ErrorDisplay = _interopRequireDefault(require("@components/ErrorDisplay"));
+var _FormFeedbackDisplay = _interopRequireDefault(require("@components/FormFeedbackDisplay"));
 
 var _ProgressBar = _interopRequireDefault(require("@components/ProgressBar"));
 
@@ -129,7 +129,7 @@ function (_React$Component) {
       }), _react.default.createElement(_ChannelCreatePasswordInput.default, {
         value: password.value,
         handlePasswordInput: this.handlePasswordInput
-      }), _react.default.createElement(_ErrorDisplay.default, {
+      }), _react.default.createElement(_FormFeedbackDisplay.default, {
         errorMessage: formError,
         defaultMessage: 'Choose a name and password for your channel'
       }), _react.default.createElement(_ButtonPrimary.default, {

client/build/containers/ChannelLoginForm/view.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _request = _interopRequireDefault(require("../../utils/request"));
 
-var _ErrorDisplay = _interopRequireDefault(require("@components/ErrorDisplay"));
+var _FormFeedbackDisplay = _interopRequireDefault(require("@components/FormFeedbackDisplay"));
 
 var _ChannelLoginNameInput = _interopRequireDefault(require("@components/ChannelLoginNameInput"));
 
@@ -119,7 +119,7 @@ function (_React$Component) {
       }), _react.default.createElement(_ChannelLoginPasswordInput.default, {
         channelPassword: this.state.channelPassword,
         handleInput: this.handleInput
-      }), _react.default.createElement(_ErrorDisplay.default, {
+      }), _react.default.createElement(_FormFeedbackDisplay.default, {
         errorMessage: this.state.error,
         defaultMessage: 'Enter the name and password for your channel'
       }), _react.default.createElement(_ButtonPrimary.default, {

client/build/containers/ChannelSelect/view.js

@@ -19,7 +19,7 @@ var _ChooseAnonymousPublishRadio = _interopRequireDefault(require("@components/C
 
 var _ChooseChannelPublishRadio = _interopRequireDefault(require("@components/ChooseChannelPublishRadio"));
 
-var _ErrorDisplay = _interopRequireDefault(require("@components/ErrorDisplay"));
+var _FormFeedbackDisplay = _interopRequireDefault(require("@components/FormFeedbackDisplay"));
 
 var _Label = _interopRequireDefault(require("@components/Label"));
 
@@ -102,7 +102,7 @@ function (_React$Component) {
           publishInChannel: publishInChannel,
           toggleAnonymousPublish: this.toggleAnonymousPublish
         })
-      }), _react.default.createElement(_ErrorDisplay.default, {
+      }), _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(_PublishDetailsRow.default, {

client/build/containers/PublishDetails/view.js

@@ -25,6 +25,8 @@ 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); }
@@ -72,13 +74,7 @@ function (_React$Component) {
       })), _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",
-        target: "_blank",
-        href: "https://lbry.io/learn"
-      }, "Read more."))));
+      }))), _react.default.createElement(_Row.default, null, _react.default.createElement(_PublishFinePrint.default, null)));
     }
   }]);
 

client/build/containers/PublishDisabledMessage/view.js

@@ -43,9 +43,9 @@ function (_React$Component) {
       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"
+        className: "text--secondary"
       }, "Publishing is currently disabled."), _react.default.createElement("p", {
-        className: "text--disabled"
+        className: "text--secondary"
       }, message));
     }
   }]);

client/build/containers/PublishStatus/view.js

@@ -54,11 +54,11 @@ function (_React$Component) {
       }, 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"
+        className: "text--primary"
       }, "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: "text--primary"
       }, 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, {

client/build/containers/PublishTitleInput/view.js

@@ -53,7 +53,7 @@ function (_React$Component) {
       return _react.default.createElement("input", {
         type: "text",
         id: "publish-title",
-        className: "input-text text--large input-text--full-width",
+        className: "input-text input-text--full-width",
         name: "title",
         placeholder: "Give your content a title...",
         onChange: this.handleInput,

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); }
@@ -128,14 +130,10 @@ function (_React$Component) {
         placeholder: "your-url-here",
         onChange: this.handleInput,
         value: claim
-      }))), _react.default.createElement("div", {
-        className: 'publish-url-input-error'
-      }, urlError ? _react.default.createElement("p", {
-        id: "input-error-claim-name",
-        className: "info-message--failure"
-      }, urlError) : _react.default.createElement("p", {
-        className: "info-message"
-      }, "Choose a custom url")));
+      }))), _react.default.createElement(_FormFeedbackDisplay.default, {
+        errorMessage: urlError,
+        defaultMessage: 'Choose a custom url'
+      }));
     }
   }]);
 

client/build/pages/MultisitePage/index.js

@@ -45,7 +45,7 @@ function (_React$Component) {
         pageTitle: 'Multisite',
         pageUri: '/multisite'
       }, _react.default.createElement("p", {
-        className: "pull-quote"
+        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'

client/scss/_input.scss

@@ -2,7 +2,7 @@ input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0px 1000px white inset;
 }
 
-.label, .input-text, .select, .textarea, .text--large {
+.label, .input-text, .select, .textarea {
   margin: 0px;
   padding: 0.3em;
   outline: none;

client/scss/_media-queries.scss

@@ -16,7 +16,7 @@
     font-size: medium;
   }
 
-  .pull-quote {
+  .text--pull-quote {
     font-size: 1.5rem;
   }
 
@@ -69,7 +69,7 @@
     font-size: small;
   }
 
-  .pull-quote, .text--large, .button--large {
+  .text--pull-quote, .button--large {
     font-size: medium;
   }
 
@@ -93,7 +93,7 @@
     font-size: x-small;
   }
 
-  .pull-quote, .text--large, .button--large {
+  .text--pull-quote, .button--large {
     font-size: small;
   }
 

client/scss/_span.scss

@@ -1,9 +0,0 @@
-.span--relative {
-  position: relative;
-}
-
-.span--absolute {
-  position: absolute;
-  bottom: 0px;
-  right: 0px;
-}

client/scss/_text.scss

@@ -1,39 +1,54 @@
-body, button, input, textarea, label, select, option, #channel-publish-in-progress > p, #channel-publish-done > p {
-  font-family: 'Lekton', monospace;
-  font-size: large;
+// set defaults
+h1 {
+ font-size: xx-large;
 }
 
-h3, p {
+h2, h3, p {
 
   font-size: x-large;
 }
 
-.text--large {
-  font-size: 2rem;
+h2 {
+  text-decoration: underline;
 }
 
-.text--disabled {
-  color: #9b9b9b;
+h3 {
+  font-weight: bold;
 }
 
-.pull-quote {
+body, button, input, textarea, label, select, option {
+  font-family: 'Lekton', monospace;
+  font-size: large;
+}
+
+// color modifiers
+.text--primary {
+  color: $primary-color;
+}
+
+.text--secondary {
+  color: $secondary-color;
+}
+
+.text--tertiary {
+  color: $tertiary-color;
+}
+
+.text--interactive {
+  color: $interactive-color;
+}
+
+// special texts
+
+.text--pull-quote {
   font-size: 3rem;
   margin-top: 1rem;
 }
 
-.fine-print {
+.text--fine-print {
   font-size: small;
 }
 
-#show-body > .fine-print {
-  text-align: center;
-}
-
-.blue {
-  color: #4156C5;
-}
-
-.blue--underlined {
-  color: #4156C5;
+.text--underline {
   text-decoration: underline;
 }

client/scss/all.scss

@@ -10,7 +10,6 @@
 @import '_link';
 @import '_info-message';
 @import '_input';
-@import '_span';
 @import '_video';
 @import '_asset';
 @import '_asset-preview';

client/scss/components/_button-primary.scss

@@ -2,7 +2,6 @@
 .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;

client/scss/components/_button-secondary.scss

@@ -1,15 +1,14 @@
 .button--secondary, .button--secondary:focus {
   border: 0;
-  border-bottom: 1px solid $primary-color;
+  border-bottom: $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--secondary:focus{
-  border-bottom: 1px solid $secondary-color;
+  border-color: $secondary-color;
   background-color: $tertiary-color;
 }
 

client/scss/containers/_dropzone.scss

@@ -30,6 +30,7 @@
 
 .dropzone-preview-wrapper {
   position: relative;
+  width: 100%;
   .dropzone-preview-overlay {
     position: absolute;
     left: 0;

client/src/components/AboutSpeechDetails/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const AboutSpeechTwo = () => {
+const AboutSpeechDetails = () => {
   return (
     <div>
       <p>Spee.ch is a media-hosting site that reads from and publishes content to the <a className='link--primary' href='https://lbry.io'>LBRY</a> blockchain.</p>
@@ -12,4 +12,4 @@ const AboutSpeechTwo = () => {
   );
 };
 
-export default AboutSpeechTwo;
+export default AboutSpeechDetails;

client/src/components/AboutSpeechOverview/index.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-const AboutSpeechOne = () => {
+const AboutSpeechOverview = () => {
   return (
     <div>
-      <p className='pull-quote'>Spee.ch is an open-source project.  Please contribute to the existing site, or fork it and make your own.</p>
+      <p className='text--pull-quote'>Spee.ch is an open-source project.  Please contribute to the existing site, or fork it and make your own.</p>
       <p><a className='link--primary' target='_blank' href='https://twitter.com/spee_ch'>TWITTER</a></p>
       <p><a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch'>GITHUB</a></p>
       <p><a className='link--primary' target='_blank' href='https://discord.gg/YjYbwhS'>DISCORD CHANNEL</a></p>
@@ -12,4 +12,4 @@ const AboutSpeechOne = () => {
   );
 };
 
-export default AboutSpeechOne;
+export default AboutSpeechOverview;

client/src/components/DropzoneDropItDisplay/index.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 const DropzoneDropItDisplay = () => {
   return (
     <div className='dropzone-dropit-display'>
-      <p className='blue'>Drop it.</p>
+      <p className='text--interactive'>Drop it.</p>
     </div>
   );
 }

client/src/components/DropzoneInstructionsDisplay/index.jsx

@@ -6,7 +6,7 @@ const DropzoneInstructionsDisplay = ({fileError}) => {
       <p className='info-message-placeholder info-message--failure' id='input-error-file-selection'>{fileError}</p>
       <p>Drag & drop image or video here to publish</p>
       <p className='fine-print'>OR</p>
-      <p className='blue--underlined'>CHOOSE FILE</p>
+      <p className='text--underline'>CHOOSE FILE</p>
     </div>
   );
 };

client/src/components/FormFeedbackDisplay/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const ErrorDisplay = ({ errorMessage, defaultMessage }) => {
+const FormFeedbackDisplay = ({ errorMessage, defaultMessage }) => {
   return (
     <div>
       { errorMessage ? (
@@ -12,4 +12,4 @@ const ErrorDisplay = ({ errorMessage, defaultMessage }) => {
   );
 };
 
-export default ErrorDisplay;
+export default FormFeedbackDisplay;

client/src/components/PublishFinePrint/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const PublishFinePrint  = () => {
+  return (
+    <p className='text--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>
+  );
+};
+
+export default PublishFinePrint;

client/src/components/SpaceAround/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-class SpaceBetween extends React.Component {
+class SpaceAround extends React.Component {
   shouldComponentUpdate () {
     return false;
   }
@@ -13,4 +13,4 @@ class SpaceBetween extends React.Component {
   }
 }
 
-export default SpaceBetween;
+export default SpaceAround;

client/src/containers/AssetTitle/view.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 const AssetTitle = ({ title }) => {
   return (
     <div>
-      <span className='text--large'>{title}</span>
+      <h3>{title}</h3>
     </div>
   );
 };

client/src/containers/ChannelCreateForm/view.jsx

@@ -2,7 +2,7 @@ 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 FormFeedbackDisplay from '@components/FormFeedbackDisplay';
 import ProgressBar from '@components/ProgressBar';
 
 class ChannelCreateForm extends React.Component {
@@ -69,7 +69,7 @@ class ChannelCreateForm extends React.Component {
               value={password.value}
               handlePasswordInput={this.handlePasswordInput}
             />
-            <ErrorDisplay
+            <FormFeedbackDisplay
               errorMessage={formError}
               defaultMessage={'Choose a name and password for your channel'}
             />

client/src/containers/ChannelLoginForm/view.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import request from '../../utils/request';
-import ErrorDisplay from '@components/ErrorDisplay';
+import FormFeedbackDisplay from '@components/FormFeedbackDisplay';
 import ChannelLoginNameInput from '@components/ChannelLoginNameInput';
 import ChannelLoginPasswordInput from '@components/ChannelLoginPasswordInput';
 import ButtonPrimary from '@components/ButtonPrimary';
@@ -58,7 +58,7 @@ class ChannelLoginForm extends React.Component {
           channelPassword={this.state.channelPassword}
           handleInput={this.handleInput}
         />
-        <ErrorDisplay
+        <FormFeedbackDisplay
           errorMessage={this.state.error}
           defaultMessage={'Enter the name and password for your channel'}
         />

client/src/containers/ChannelSelect/view.jsx

@@ -5,7 +5,7 @@ import { LOGIN, CREATE } from '../../constants/publish_channel_select_states';
 import PublishDetailsRow from '@components/PublishDetailsRow';
 import ChooseAnonymousPublishRadio from '@components/ChooseAnonymousPublishRadio';
 import ChooseChannelPublishRadio from '@components/ChooseChannelPublishRadio';
-import ErrorDisplay from '@components/ErrorDisplay';
+import FormFeedbackDisplay from '@components/FormFeedbackDisplay';
 import Label from '@components/Label';
 import ChannelSelectDropdown from '@components/ChannelSelectDropdown';
 
@@ -51,7 +51,7 @@ class ChannelSelect extends React.Component {
             />
           }
         />
-        <ErrorDisplay
+        <FormFeedbackDisplay
           errorMessage={channelError}
           defaultMessage={'Publish anonymously or in a channel'}
         />

client/src/containers/PublishDetails/view.jsx

@@ -8,6 +8,7 @@ import Row from '@components/Row';
 import ButtonPrimaryJumbo from '@components/ButtonPrimaryJumbo';
 import ButtonTertiary from '@components/ButtonTertiary';
 import SpaceAround from '@components/SpaceAround';
+import PublishFinePrint from '@components/PublishFinePrint';
 
 class PublishDetails extends React.Component {
   constructor (props) {
@@ -55,7 +56,7 @@ class PublishDetails extends React.Component {
         </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>
+          <PublishFinePrint />
         </Row>
       </div>
     );

client/src/containers/PublishDisabledMessage/view.jsx

@@ -5,8 +5,8 @@ class PublishDisabledMessage extends React.Component {
     const message = this.props.message;
     return (
       <div className='row dropzone--disabled row--tall flex-container--column flex-container--center-center'>
-        <p className='text--disabled'>Publishing is currently disabled.</p>
-        <p className='text--disabled'>{message}</p>
+        <p className='text--secondary'>Publishing is currently disabled.</p>
+        <p className='text--secondary'>{message}</p>
       </div>
     );
   }

client/src/containers/PublishStatus/view.jsx

@@ -10,14 +10,14 @@ class PublishStatus extends React.Component {
         {status === publishStates.LOAD_START &&
         <div className='row align-content-center'>
           <p>File is loading to server</p>
-          <p className='blue'>0%</p>
+          <p className='text--primary'>0%</p>
         </div>
         }
         {status === publishStates.LOADING &&
         <div>
           <div className='row align-content-center'>
             <p>File is loading to server</p>
-            <p className='blue'>{message}</p>
+            <p className='text--primary'>{message}</p>
           </div>
         </div>
         }

client/src/containers/PublishTitleInput/view.jsx

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

client/src/containers/PublishUrlInput/view.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import UrlMiddle from '@components/PublishUrlMiddleDisplay';
+import FormFeedbackDisplay from '@components/FormFeedbackDisplay';
 
 class PublishUrlInput extends React.Component {
   constructor (props) {
@@ -68,13 +69,10 @@ class PublishUrlInput extends React.Component {
             />
           </div>
         </div>
-        <div className={'publish-url-input-error'}>
-          { urlError ? (
-            <p id='input-error-claim-name' className='info-message--failure'>{urlError}</p>
-          ) : (
-            <p className='info-message'>Choose a custom url</p>
-          )}
-        </div>
+        <FormFeedbackDisplay
+          errorMessage={urlError}
+          defaultMessage={'Choose a custom url'}
+        />
       </div>
     );
   }

client/src/pages/MultisitePage/index.jsx

@@ -5,7 +5,7 @@ class MultisitePage extends React.Component {
   render () {
     return (
       <PageLayout pageTitle={'Multisite'} pageUri={'/multisite'}>
-        <p className='pull-quote'>Introducing Spee.ch Multisite</p>
+        <p className='text--pull-quote'>Introducing Spee.ch Multisite</p>
         <p>Hi there!  My name is <a href={'https://github.com/billbitt'} target={'_blank'}>Bill</a>, and I’d like to speak with you about Spee.ch.  No, not ‘speech,’ ‘<i><a href={'https://spee.ch'} target={'_blank'}>Spee.ch.</a></i>’ You know what, just read on...</p>
         <h2>A Little Background</h2>
         <p>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 <a href={'https://lbry.io/faq/what-is-lbry'} target={'_blank'}>LBRY protocol</a> 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 <a href={'https://www.youtube.com/watch?v=C9LCapt_OYw'} target={'_blank'}>live coded a single-page PHP site</a> that could publish images to the LBRY network.  And just like that, Spee.ch was born!</p>