Material UI: upgrade modals

Also clean up the Create Torrent page, delete some redundant CSS, prevent click-and-drag inside a TextField from moving the whole window, and make all label and input fonts  a consistent 14px size.

src/renderer/components/modal-ok-cancel.js

@@ -0,0 +1,24 @@
+const React = require('react')
+const FlatButton = require('material-ui/FlatButton').default
+const RaisedButton = require('material-ui/RaisedButton').default
+
+module.exports = class ModalOKCancel extends React.Component {
+  render () {
+    const cancelStyle = { marginRight: 10, color: 'black' }
+    const {cancelText, onCancel, okText, onOK} = this.props
+    return (
+      <div className='float-right'>
+        <FlatButton
+          className='control'
+          style={cancelStyle}
+          label={cancelText}
+          onClick={onCancel} />
+        <RaisedButton
+          className='control'
+          primary
+          label={okText}
+          onClick={onOK} />
+      </div>
+    )
+  }
+}

src/renderer/components/open-torrent-address-modal.js

@@ -1,32 +1,40 @@
 const React = require('react')
+const TextField = require('material-ui/TextField').default
 
+const ModalOKCancel = require('./modal-ok-cancel')
 const {dispatch, dispatcher} = require('../lib/dispatcher')
 
 module.exports = class OpenTorrentAddressModal extends React.Component {
   render () {
-    // TODO: dcposch remove janky inline <script>
     return (
       <div className='open-torrent-address-modal'>
         <p><label>Enter torrent address or magnet link</label></p>
-        <p>
-          <input id='add-torrent-url' type='text' onKeyPress={handleKeyPress} />
-        </p>
-        <p className='float-right'>
-          <button className='button button-flat' onClick={dispatcher('exitModal')}>Cancel</button>
-          <button className='button button-raised' onClick={handleOK}>OK</button>
-        </p>
-        <script>document.querySelector('#add-torrent-url').focus()</script>
+        <div>
+          <TextField
+            className='control'
+            ref={(c) => { this.torrentURL = c }}
+            fullWidth
+            onKeyDown={handleKeyDown.bind(this)} />
+        </div>
+        <ModalOKCancel
+          cancelText='CANCEL'
+          onCancel={dispatcher('exitModal')}
+          okText='OK'
+          onOK={handleOK.bind(this)} />
       </div>
     )
   }
+
+  componentDidMount () {
+    this.torrentURL.input.focus()
+  }
 }
 
-function handleKeyPress (e) {
-  if (e.which === 13) handleOK() /* hit Enter to submit */
+function handleKeyDown (e) {
+  if (e.which === 13) this.handleOK() /* hit Enter to submit */
 }
 
 function handleOK () {
   dispatch('exitModal')
-  // TODO: dcposch use React refs instead
-  dispatch('addTorrent', document.querySelector('#add-torrent-url').value)
+  dispatch('addTorrent', this.torrentURL.input.value)
 }

src/renderer/components/path-selector.js

@@ -62,8 +62,7 @@ class PathSelector extends React.Component {
       color: colors.grey50
     }
     const textFieldStyle = {
-      flex: '1',
-      fontSize: 14
+      flex: '1'
     }
     const text = this.props.displayValue || this.props.value
     const buttonStyle = {

src/renderer/components/remove-torrent-modal.js

@@ -1,5 +1,6 @@
 const React = require('react')
 
+const ModalOKCancel = require('./modal-ok-cancel')
 const {dispatch, dispatcher} = require('../lib/dispatcher')
 
 module.exports = class RemoveTorrentModal extends React.Component {
@@ -8,15 +9,16 @@ module.exports = class RemoveTorrentModal extends React.Component {
     const message = state.modal.deleteData
       ? 'Are you sure you want to remove this torrent from the list and delete the data file?'
       : 'Are you sure you want to remove this torrent from the list?'
-    const buttonText = state.modal.deleteData ? 'Remove Data' : 'Remove'
+    const buttonText = state.modal.deleteData ? 'REMOVE DATA' : 'REMOVE'
 
     return (
       <div>
         <p><strong>{message}</strong></p>
-        <p className='float-right'>
-          <button className='button button-flat' onClick={dispatcher('exitModal')}>Cancel</button>
-          <button className='button button-raised' onClick={handleRemove}>{buttonText}</button>
-        </p>
+        <ModalOKCancel
+          cancelText='CANCEL'
+          onCancel={dispatcher('exitModal')}
+          okText={buttonText}
+          onOK={handleRemove} />
       </div>
     )
 

src/renderer/components/unsupported-media-modal.js

@@ -2,6 +2,7 @@ const React = require('react')
 const electron = require('electron')
 const path = require('path')
 
+const ModalOKCancel = require('./modal-ok-cancel')
 const {dispatcher} = require('../lib/dispatcher')
 
 module.exports = class UnsupportedMediaModal extends React.Component {
@@ -15,22 +16,25 @@ module.exports = class UnsupportedMediaModal extends React.Component {
     const playerName = playerPath
       ? path.basename(playerPath).split('.')[0]
       : 'VLC'
-    const onPlay = dispatcher('openExternalPlayer')
-    const actionButton = state.modal.externalPlayerInstalled
-      ? (<button className='button-raised' onClick={onPlay}>Play in {playerName}</button>)
-      : (<button className='button-raised' onClick={() => this.onInstall()}>Install VLC</button>)
-    const playerMessage = state.modal.externalPlayerNotFound
+    const onAction = state.modal.externalPlayerInstalled
+      ? dispatcher('openExternalPlayer')
+      : () => this.onInstall()
+    const actionText = state.modal.externalPlayerInstalled
+      ? 'PLAY IN ' + playerName.toUpperCase()
+      : 'INSTALL VLC'
+    const errorMessage = state.modal.externalPlayerNotFound
       ? 'Couldn\'t run external player. Please make sure it\'s installed.'
       : ''
     return (
       <div>
         <p><strong>Sorry, we can't play that file.</strong></p>
         <p>{message}</p>
-        <p className='float-right'>
-          <button className='button-flat' onClick={dispatcher('backToList')}>Cancel</button>
-          {actionButton}
-        </p>
-        <p className='error-text'>{playerMessage}</p>
+        <ModalOKCancel
+          cancelText='CANCEL'
+          onCancel={dispatcher('backToList')}
+          okText={actionText}
+          onOK={onAction} />
+        <p className='error-text'>{errorMessage}</p>
       </div>
     )
   }

src/renderer/components/update-available-modal.js

@@ -1,6 +1,7 @@
 const React = require('react')
 const electron = require('electron')
 
+const ModalOKCancel = require('./modal-ok-cancel')
 const {dispatch} = require('../lib/dispatcher')
 
 module.exports = class UpdateAvailableModal extends React.Component {
@@ -13,10 +14,11 @@ module.exports = class UpdateAvailableModal extends React.Component {
           We have an auto-updater for Windows and Mac.
           We don't have one for Linux yet, so you'll have to download the new version manually.
         </p>
-        <p className='float-right'>
-          <button className='button button-flat' onClick={handleSkip}>Skip This Release</button>
-          <button className='button button-raised' onClick={handleShow}>Show Download Page</button>
-        </p>
+        <ModalOKCancel
+          cancelText='SKIP THIS RELEASE'
+          onCancel={handleSkip}
+          okText='SHOW DOWNLOAD PAGE'
+          onOK={handleShow} />
       </div>
     )