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>
+        <div>
-          <input id='add-torrent-url' type='text' onKeyPress={handleKeyPress} />
+          <TextField
-        </p>
+            className='control'
-        <p className='float-right'>
+            ref={(c) => { this.torrentURL = c }}
-          <button className='button button-flat' onClick={dispatcher('exitModal')}>Cancel</button>
+            fullWidth
-          <button className='button button-raised' onClick={handleOK}>OK</button>
+            onKeyDown={handleKeyDown.bind(this)} />
-        </p>
+        </div>
-        <script>document.querySelector('#add-torrent-url').focus()</script>
+        <ModalOKCancel
+          cancelText='CANCEL'
+          onCancel={dispatcher('exitModal')}
+          okText='OK'
+          onOK={handleOK.bind(this)} />
       </div>
     )
   }
+
+  componentDidMount () {
+    this.torrentURL.input.focus()
+  }
 }
 
-function handleKeyPress (e) {
+function handleKeyDown (e) {
-  if (e.which === 13) handleOK() /* hit Enter to submit */
+  if (e.which === 13) this.handleOK() /* hit Enter to submit */
 }
 
 function handleOK () {
   dispatch('exitModal')
-  // TODO: dcposch use React refs instead
+  dispatch('addTorrent', this.torrentURL.input.value)
-  dispatch('addTorrent', document.querySelector('#add-torrent-url').value)
 }

src/renderer/components/path-selector.js

@@ -62,8 +62,7 @@ class PathSelector extends React.Component {
       color: colors.grey50
     }
     const textFieldStyle = {
-      flex: '1',
+      flex: '1'
-      fontSize: 14
     }
     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'>
+        <ModalOKCancel
-          <button className='button button-flat' onClick={dispatcher('exitModal')}>Cancel</button>
+          cancelText='CANCEL'
-          <button className='button button-raised' onClick={handleRemove}>{buttonText}</button>
+          onCancel={dispatcher('exitModal')}
-        </p>
+          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 onAction = state.modal.externalPlayerInstalled
-    const actionButton = state.modal.externalPlayerInstalled
+      ? dispatcher('openExternalPlayer')
-      ? (<button className='button-raised' onClick={onPlay}>Play in {playerName}</button>)
+      : () => this.onInstall()
-      : (<button className='button-raised' onClick={() => this.onInstall()}>Install VLC</button>)
+    const actionText = state.modal.externalPlayerInstalled
-    const playerMessage = state.modal.externalPlayerNotFound
+      ? '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'>
+        <ModalOKCancel
-          <button className='button-flat' onClick={dispatcher('backToList')}>Cancel</button>
+          cancelText='CANCEL'
-          {actionButton}
+          onCancel={dispatcher('backToList')}
-        </p>
+          okText={actionText}
-        <p className='error-text'>{playerMessage}</p>
+          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'>
+        <ModalOKCancel
-          <button className='button button-flat' onClick={handleSkip}>Skip This Release</button>
+          cancelText='SKIP THIS RELEASE'
-          <button className='button button-raised' onClick={handleShow}>Show Download Page</button>
+          onCancel={handleSkip}
-        </p>
+          okText='SHOW DOWNLOAD PAGE'
+          onOK={handleShow} />
       </div>
     )
 

src/renderer/pages/App.js

@@ -2,6 +2,7 @@ const colors = require('material-ui/styles/colors')
 const React = require('react')
 
 const darkBaseTheme = require('material-ui/styles/baseThemes/darkBaseTheme').default
+const lightBaseTheme = require('material-ui/styles/baseThemes/lightBaseTheme').default
 const getMuiTheme = require('material-ui/styles/getMuiTheme').default
 const MuiThemeProvider = require('material-ui/styles/MuiThemeProvider').default
 
@@ -21,9 +22,11 @@ const Modals = {
   'unsupported-media-modal': require('../components/unsupported-media-modal')
 }
 
-darkBaseTheme.fontFamily = process.platform === 'win32'
+const fontFamily = process.platform === 'win32'
   ? '"Segoe UI", sans-serif'
   : 'BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif'
+lightBaseTheme.fontFamily = fontFamily
+darkBaseTheme.fontFamily = fontFamily
 darkBaseTheme.palette.primary1Color = colors.cyan500
 darkBaseTheme.palette.primary2Color = colors.cyan500
 darkBaseTheme.palette.primary3Color = colors.grey600
@@ -92,12 +95,14 @@ class App extends React.Component {
     if (!state.modal) return
     const ModalContents = Modals[state.modal.id]
     return (
+      <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
         <div key='modal' className='modal'>
           <div key='modal-background' className='modal-background' />
           <div key='modal-content' className='modal-content'>
             <ModalContents state={state} />
           </div>
         </div>
+      </MuiThemeProvider>
     )
   }
 

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

@@ -99,12 +99,14 @@ class CreateTorrentPage extends React.Component {
         </ShowMore>
         <div className='float-right'>
           <FlatButton
+            className='control'
             label='Cancel'
             style={{
               marginRight: 10
             }}
             onClick={dispatcher('cancel')} />
           <RaisedButton
+            className='control'
             label='Create Torrent'
             primary
             onClick={this.handleSubmit} />
@@ -138,7 +140,7 @@ class CreateTorrentPage extends React.Component {
         <div key='private' className='torrent-attribute'>
           <label>Private:</label>
           <Checkbox
-            className='torrent-is-private'
+            className='torrent-is-private control'
             style={{display: ''}}
             checked={this.state.isPrivate}
             onCheck={this.setIsPrivate} />
@@ -146,7 +148,7 @@ class CreateTorrentPage extends React.Component {
         <div key='trackers' className='torrent-attribute'>
           <label>Trackers:</label>
           <TextField
-            className='torrent-trackers'
+            className='torrent-trackers control'
             style={textFieldStyle}
             textareaStyle={textareaStyle}
             multiLine
@@ -158,7 +160,7 @@ class CreateTorrentPage extends React.Component {
         <div key='comment' className='torrent-attribute'>
           <label>Comment:</label>
           <TextField
-            className='torrent-comment'
+            className='torrent-comment control'
             style={textFieldStyle}
             textareaStyle={textareaStyle}
             hintText='Optionally describe your torrent...'

static/main.css

@@ -265,14 +265,9 @@ table {
   font-weight: bold;
 }
 
-.open-torrent-address-modal input {
-  width: 100%;
-}
-
 .create-torrent {
   padding: 10px 25px;
   overflow: hidden;
-  font: 16px/24px BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
 }
 
 .create-torrent .torrent-attribute {
@@ -323,6 +318,15 @@ i:not(.disabled):hover { /* Show they're clickable without pointer: cursor */
   text-align: center;
 }
 
+/*
+ * INPUTS
+ */
+input,
+textarea,
+.control {
+  font-size: 14px !important;
+}
+
 /*
  * TORRENT LIST
  */