fixed spacing around publish button

react/components/ChannelSelector.jsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import ChannelLoginForm from '../containers/ChannelLoginForm.jsx';
-import ChannelCreateForm from '../containers/ChannelCreateForm.jsx';
-
-const LOGIN = 'Existing';
-const CREATE = 'New';
-
-class ChannelSelector extends React.Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      selectedOption: LOGIN,
-    };
-    this.handleSelection = this.handleSelection.bind(this);
-    this.selectOption = this.selectOption.bind(this);
-  }
-  componentWillMount () {
-    console.log('ChannelSelector will mount');
-    if (this.props.loggedInChannelName) {
-      this.selectOption(this.props.loggedInChannelName);
-    }
-  }
-  componentWillReceiveProps ({ loggedInChannelName }) {
-    if (loggedInChannelName) {
-      this.selectOption(loggedInChannelName);
-    }
-  }
-  handleSelection (event) {
-    const selectedOption = event.target.selectedOptions[0].value;
-    this.selectOption(selectedOption);
-  }
-  selectOption (option) {
-    this.setState({selectedOption: option});
-  }
-  render () {
-    return (
-      <div>
-        { this.props.publishInChannel && (
-          <div>
-            <p id="input-error-channel-select" className="info-message-placeholder info-message--failure">{this.props.channelError}</p>
-            <div className="column column--3">
-              <label className="label" htmlFor="channel-name-select">Channel:</label>
-            </div><div className="column column--7">
-              <select type="text" id="channel-name-select" className="select select--arrow" value={this.state.selectedOption} onChange={this.handleSelection}>
-                { this.props.loggedInChannelName && <option value={this.props.loggedInChannelName} id="publish-channel-select-channel-option">{this.props.loggedInChannelName}</option> }
-                <option value={LOGIN}>Existing</option>
-                <option value={CREATE}>New</option>
-              </select>
-            </div>
-
-            { (this.state.selectedOption === LOGIN) && <ChannelLoginForm /> }
-
-            { (this.state.selectedOption === CREATE) && <ChannelCreateForm /> }
-
-          </div>
-        )}
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = state => {
-  return {
-    loggedInChannelName: state.loggedInChannel.name,
-    publishInChannel   : state.publishInChannel,
-  };
-};
-
-export default connect(mapStateToProps, null)(ChannelSelector);

react/containers/ChannelSelect.jsx

@@ -1,11 +1,31 @@
 import React from 'react';
-import { setPublishInChannel } from '../actions/index';
+import {setPublishInChannel} from '../actions';
-import { connect } from 'react-redux';
+import {connect} from 'react-redux';
+import ChannelLoginForm from '../containers/ChannelLoginForm.jsx';
+import ChannelCreateForm from '../containers/ChannelCreateForm.jsx';
+const LOGIN = 'Existing';
+const CREATE = 'New';
 
 class channelSelect extends React.Component {
   constructor (props) {
     super(props);
+    this.state = {
+      selectedOption: LOGIN,
+    };
     this.toggleAnonymousPublish = this.toggleAnonymousPublish.bind(this);
+    this.handleSelection = this.handleSelection.bind(this);
+    this.selectOption = this.selectOption.bind(this);
+  }
+  componentWillMount () {
+    console.log('ChannelSelector will mount');
+    if (this.props.loggedInChannelName) {
+      this.selectOption(this.props.loggedInChannelName);
+    }
+  }
+  componentWillReceiveProps ({ loggedInChannelName }) {
+    if (loggedInChannelName) {
+      this.selectOption(loggedInChannelName);
+    }
   }
   toggleAnonymousPublish (event) {
     const value = event.target.value;
@@ -15,25 +35,51 @@ class channelSelect extends React.Component {
       this.props.onPublishInChannelChange(true);
     }
   }
+  handleSelection (event) {
+    const selectedOption = event.target.selectedOptions[0].value;
+    this.selectOption(selectedOption);
+  }
+  selectOption (option) {
+    this.setState({selectedOption: option});
+  }
   render () {
     return (
-      <form>
+      <div>
-        <div className="column column--3 column--med-10">
+        <form>
-          <input type="radio" name="anonymous-or-channel" id="anonymous-radio" className="input-radio" value="anonymous" checked={!this.props.publishInChannel} onChange={this.toggleAnonymousPublish}/>
+          <div className="column column--3 column--med-10">
-          <label className="label label--pointer" htmlFor="anonymous-radio">Anonymous</label>
+            <input type="radio" name="anonymous-or-channel" id="anonymous-radio" className="input-radio" value="anonymous" checked={!this.props.publishInChannel} onChange={this.toggleAnonymousPublish}/>
-        </div>
+            <label className="label label--pointer" htmlFor="anonymous-radio">Anonymous</label>
-        <div className="column column--7 column--med-10">
+          </div>
-          <input type="radio" name="anonymous-or-channel" id="channel-radio" className="input-radio" value="in a channel" checked={this.props.publishInChannel} onChange={this.toggleAnonymousPublish}/>
+          <div className="column column--7 column--med-10">
-          <label className="label label--pointer" htmlFor="channel-radio">In a channel</label>
+            <input type="radio" name="anonymous-or-channel" id="channel-radio" className="input-radio" value="in a channel" checked={this.props.publishInChannel} onChange={this.toggleAnonymousPublish}/>
-        </div>
+            <label className="label label--pointer" htmlFor="channel-radio">In a channel</label>
-      </form>
+          </div>
+        </form>
+        { this.props.publishInChannel && (
+          <div>
+            <p id="input-error-channel-select" className="info-message-placeholder info-message--failure">{this.props.channelError}</p>
+            <div className="column column--3">
+              <label className="label" htmlFor="channel-name-select">Channel:</label>
+            </div><div className="column column--7">
+            <select type="text" id="channel-name-select" className="select select--arrow" value={this.state.selectedOption} onChange={this.handleSelection}>
+              { this.props.loggedInChannelName && <option value={this.props.loggedInChannelName} id="publish-channel-select-channel-option">{this.props.loggedInChannelName}</option> }
+              <option value={LOGIN}>Existing</option>
+              <option value={CREATE}>New</option>
+            </select>
+          </div>
+            { (this.state.selectedOption === LOGIN) && <ChannelLoginForm /> }
+            { (this.state.selectedOption === CREATE) && <ChannelCreateForm /> }
+          </div>
+        )}
+      </div>
     );
   }
 }
 
 const mapStateToProps = state => {
   return {
-    publishInChannel: state.publishInChannel,
+    loggedInChannelName: state.loggedInChannel.name,
+    publishInChannel   : state.publishInChannel,
   };
 };
 

react/containers/PublishForm.jsx

@@ -1,14 +1,13 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import {connect} from 'react-redux';
-import { getCookie } from '../utils/cookies.js';
+import {selectFile, clearFile, updateLoggedInChannel, updatePublishStatus, updateError} from '../actions';
+import {getCookie} from '../utils/cookies.js';
 import Dropzone from './Dropzone.jsx';
 import PublishTitleInput from './PublishTitleInput.jsx';
-import ChannelSelector from '../components/ChannelSelector.jsx';
 import PublishUrlInput from './PublishUrlInput.jsx';
 import PublishThumbnailInput from './PublishThumbnailInput.jsx';
 import PublishMetadataInputs from './PublishMetadataInputs.jsx';
-import AnonymousOrChannelSelect from './ChannelSelect.jsx';
+import ChannelSelect from './ChannelSelect.jsx';
-import {selectFile, clearFile, updateLoggedInChannel, updatePublishStatus, updateError} from '../actions';
 import * as publishStates from '../constants/publishing_states';
 
 class PublishForm extends React.Component {
@@ -132,55 +131,43 @@ class PublishForm extends React.Component {
     return (
       <div className="row row--no-bottom">
         <div className="column column--10">
-
           <PublishTitleInput />
-
         </div>
         <div className="column column--5 column--sml-10" >
-
           <div className="row row--padded">
             <Dropzone />
           </div>
-
         </div>
         <div className="column column--5 column--sml-10 align-content-top">
           <div id="publish-active-area" className="row row--padded">
-
             <div className="row row--padded row--no-top row--wide">
               <PublishUrlInput />
             </div>
-
-            <div className="row row--padded row--no-top row--no-bottom row--wide">
-              <AnonymousOrChannelSelect />
-            </div>
-
             <div className="row row--padded row--no-top row--wide">
-              <ChannelSelector />
+              <ChannelSelect />
             </div>
-
             { (this.props.file.type === 'video/mp4') && (
-              <div className="row row--padded row--wide row--no-top">
+              <div className="row row--padded row--no-top row--wide ">
                 <PublishThumbnailInput />
               </div>
             )}
-
             <div className="row row--padded row--no-top row--no-bottom row--wide">
               <PublishMetadataInputs />
             </div>
-
+            { this.props.publishSubmitError && (
-            <div className="row row--padded row--no-top row--wide align-content-center">
+              <div className="row align-content-center">
-              <p className="info-message-placeholder info-message--failure">{this.props.publishSubmitError}</p>
+                <p className="info-message-placeholder info-message--failure">{this.props.publishSubmitError}</p>
+              </div>
+            )}
+            <div className="row row--wide align-content-center">
               <button id="publish-submit" className="button--primary button--large" onClick={this.publish}>Publish</button>
             </div>
-
+            <div className="row row--padded row--no-bottom align-content-center">
-            <div className="row row--short align-content-center">
               <button className="button--cancel" onClick={this.props.onFileClear}>Cancel</button>
             </div>
-
             <div className="row row--short align-content-center">
               <p className="fine-print">By clicking 'Upload', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a className="link--primary" target="_blank" href="https://lbry.io/learn">Read more.</a></p>
             </div>
-
           </div>
         </div>
       </div>