Material UI: consistent JSX style

src/renderer/components/Heading.js

@@ -17,15 +17,14 @@ class Heading extends React.Component {
 
   render () {
     const HeadingTag = 'h' + this.props.level
+    const style = {
+      color: colors.grey100,
+      fontSize: 20,
+      marginBottom: 15,
+      marginTop: 30
+    }
     return (
-      <HeadingTag
+      <HeadingTag style={style}>
-        style={{
-          color: colors.grey100,
-          fontSize: 20,
-          marginBottom: 15,
-          marginTop: 30
-        }}
-      >
         {this.props.children}
       </HeadingTag>
     )

src/renderer/components/path-selector.js

@@ -7,6 +7,9 @@ const remote = electron.remote
 const RaisedButton = require('material-ui/RaisedButton').default
 const TextField = require('material-ui/TextField').default
 
+// Lets you pick a file or directory.
+// Uses the system Open File dialog.
+// You can't edit the text field directly.
 class PathSelector extends React.Component {
   static get propTypes () {
     return {
@@ -43,48 +46,39 @@ class PathSelector extends React.Component {
 
   render () {
     const id = this.props.title.replace(' ', '-').toLowerCase()
+    const wrapperStyle = {
+      alignItems: 'center',
+      display: 'flex',
+      width: '100%'
+    }
+    const labelStyle = {
+      flex: '0 auto',
+      marginRight: 10,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+    const textareaStyle = {
+      color: colors.grey50
+    }
+    const textFieldStyle = {
+      flex: '1',
+      fontSize: 14
+    }
+    const text = this.props.displayValue || this.props.value
+    const buttonStyle = {
+      marginLeft: 10
+    }
+
     return (
-      <div
+      <div className={this.props.className} style={wrapperStyle}>
-        className={this.props.className}
+        <div className='label' style={labelStyle}>
-        style={{
-          alignItems: 'center',
-          display: 'flex',
-          width: '100%'
-        }}
-      >
-        <div
-          className='label'
-          style={{
-            flex: '0 auto',
-            marginRight: 10,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap'
-          }}
-        >
           {this.props.title}:
         </div>
-        <TextField
+        <TextField className='control' disabled id={id} value={text}
-          className='control'
+          inputStyle={textareaStyle} style={textFieldStyle} />
-          disabled
+        <RaisedButton className='control' label='Change' onClick={this.handleClick}
-          id={id}
+          style={buttonStyle} />
-          inputStyle={{
-            color: colors.grey50
-          }}
-          style={{
-            flex: '1',
-            fontSize: 14
-          }}
-          value={this.props.displayValue || this.props.value}
-        />
-        <RaisedButton
-          className='control'
-          label='Change'
-          onClick={this.handleClick}
-          style={{
-            marginLeft: 10
-          }}
-        />
       </div>
     )
   }

src/renderer/pages/create-torrent-page.js

@@ -14,6 +14,8 @@ const CreateTorrentErrorPage = require('../components/create-torrent-error-page'
 const Heading = require('../components/heading')
 const ShowMore = require('../components/show-more')
 
+// Shows a basic UI to create a torrent, from an already-selected file or folder.
+// Includes a "Show Advanced..." button and more advanced UI.
 class CreateTorrentPage extends React.Component {
   constructor (props) {
     super(props)
@@ -92,7 +94,7 @@ class CreateTorrentPage extends React.Component {
             marginBottom: 10
           }}
           hideLabel='Hide advanced settings...'
-          showLabel='Show advanced settings...' >
+          showLabel='Show advanced settings...'>
           {this.renderAdvanced()}
         </ShowMore>
         <div className='float-right'>
@@ -101,18 +103,20 @@ class CreateTorrentPage extends React.Component {
             style={{
               marginRight: 10
             }}
-            onClick={dispatcher('cancel')}
+            onClick={dispatcher('cancel')} />
-          />
           <RaisedButton
             label='Create Torrent'
             primary
-            onClick={this.handleSubmit}
+            onClick={this.handleSubmit} />
-          />
         </div>
       </div>
     )
   }
 
+  // Renders everything after clicking Show Advanced...:
+  // * Is Private? (private torrents, not announced to DHT)
+  // * Announce list (trackers)
+  // * Comment
   renderAdvanced () {
     // Create file list
     var maxFileElems = 100

src/renderer/pages/player-page.js

@@ -392,16 +392,14 @@ function renderPlayerControls (state) {
       <div
         key='cursor'
         className='playback-cursor'
-        style={playbackCursorStyle}
+        style={playbackCursorStyle} />
-      />
       <div
         key='scrub-bar'
         className='scrub-bar'
         draggable='true'
         onDragStart={handleDragStart}
         onClick={handleScrub}
-        onDrag={handleScrub}
+        onDrag={handleScrub} />
-      />
     </div>,
 
     <i
@@ -516,8 +514,7 @@ function renderPlayerControls (state) {
         type='range' min='0' max='1' step='0.05'
         value={volume}
         onChange={handleVolumeScrub}
-        style={volumeStyle}
+        style={volumeStyle} />
-      />
     </div>
   ))
 

src/renderer/pages/preferences-page.js

@@ -33,8 +33,7 @@ class PreferencesPage extends React.Component {
           }}
           onChange={this.handleDownloadPathChange}
           title='Download location'
-          value={this.props.state.unsaved.prefs.downloadPath}
+          value={this.props.state.unsaved.prefs.downloadPath} />
-        />
       </Preference>
     )
   }
@@ -50,8 +49,7 @@ class PreferencesPage extends React.Component {
           className='control'
           checked={!this.props.state.unsaved.prefs.openExternalPlayer}
           label={'Play torrent media files using WebTorrent'}
-          onCheck={this.handleOpenExternalPlayerChange}
+          onCheck={this.handleOpenExternalPlayerChange} />
-        />
       </Preference>
     )
   }
@@ -81,8 +79,7 @@ class PreferencesPage extends React.Component {
           displayValue={playerName}
           onChange={this.handleExternalPlayerPathChange}
           title='External player'
-          value={this.props.state.unsaved.prefs.externalPlayerPath}
+          value={this.props.state.unsaved.prefs.externalPlayerPath} />
-        />
       </Preference>
     )
   }
@@ -110,8 +107,7 @@ class PreferencesPage extends React.Component {
         <RaisedButton
           className='control'
           onClick={this.handleSetDefaultApp}
-          label='Make WebTorrent the default'
+          label='Make WebTorrent the default' />
-        />
       </Preference>
     )
   }
@@ -127,7 +123,7 @@ class PreferencesPage extends React.Component {
       marginRight: 25
     }
     return (
-      <div style={style} >
+      <div style={style}>
         <PreferencesSection title='Downloads'>
           {this.downloadPathSelector()}
         </PreferencesSection>

src/renderer/pages/torrent-list-page.js

@@ -198,8 +198,7 @@ module.exports = class TorrentList extends React.Component {
           key='download-button'
           className={'button-round icon download ' + torrentSummary.status}
           title={downloadTooltip}
-          onClick={dispatcher('toggleTorrent', infoHash)}
+          onClick={dispatcher('toggleTorrent', infoHash)}>
-        >
           {downloadIcon}
         </i>
       )
@@ -221,8 +220,7 @@ module.exports = class TorrentList extends React.Component {
             key='play-button'
             title={playTooltip}
             className={'button-round icon play ' + playClass}
-            onClick={dispatcher('playFile', infoHash)}
+            onClick={dispatcher('playFile', infoHash)}>
-          >
             {playIcon}
           </i>
         )