Update material-ui

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ jobs:
           - '16'
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
       - run: npm install

.github/workflows/package.yml

@@ -6,7 +6,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
-    - uses: actions/setup-node@v6
+    - uses: actions/setup-node@v3
       with:
         node-version: '16'
     - uses: actions/cache@v3
@@ -28,7 +28,7 @@ jobs:
     runs-on: macos-latest
     steps:
     - uses: actions/checkout@v3
-    - uses: actions/setup-node@v6
+    - uses: actions/setup-node@v3
       with:
         node-version: '16'
     - uses: actions/cache@v3
@@ -49,7 +49,7 @@ jobs:
     runs-on: windows-latest
     steps:
     - uses: actions/checkout@v3
-    - uses: actions/setup-node@v6
+    - uses: actions/setup-node@v3
       with:
         node-version: '16'
     - uses: actions/cache@v3

README.md

@@ -13,7 +13,7 @@
 
 <p align="center">
   <a href="https://discord.gg/cnXkm4Z"><img src="https://img.shields.io/discord/612575111718895616" alt="discord"></a>
-  <a href="https://github.com/webtorrent/webtorrent-desktop/actions/workflows/ci.yml"><img src="https://github.com/webtorrent/webtorrent-desktop/actions/workflows/ci.yml/badge.svg" alt="GitHub CI action"></a>
+  <a href="https://travis-ci.org/webtorrent/webtorrent-desktop"><img src="https://img.shields.io/travis/webtorrent/webtorrent-desktop/master.svg" alt="travis"></a>
   <a href="https://github.com/webtorrent/webtorrent-desktop/releases"><img src="https://img.shields.io/github/release/webtorrent/webtorrent-desktop.svg" alt="github release version"></a>
   <a href="https://github.com/webtorrent/webtorrent-desktop/releases"><img src="https://img.shields.io/github/downloads/webtorrent/webtorrent-desktop/total.svg" alt="github release downloads"></a>
   <a href="https://standardjs.com"><img src="https://img.shields.io/badge/code_style-standard-brightgreen.svg" alt="Standard - JavaScript Style Guide"></a>

package.json

@@ -21,7 +21,8 @@
     "url": "https://github.com/webtorrent/webtorrent-desktop/issues"
   },
   "dependencies": {
-    "@electron/remote": "2.1.3",
+    "@electron/remote": "2.0.8",
+    "@material-ui/core": "4.12.4",
     "airplayer": "github:webtorrent/airplayer#fix-security",
     "application-config": "2.0.0",
     "arch": "2.2.0",
@@ -30,7 +31,7 @@
     "capture-frame": "4.0.0",
     "chokidar": "3.5.3",
     "chromecasts": "1.10.2",
-    "create-torrent": "5.0.9",
+    "create-torrent": "5.0.6",
     "debounce": "1.2.1",
     "dlnacasts": "0.1.0",
     "drag-drop": "7.2.0",
@@ -39,50 +40,49 @@
     "iso-639-1": "2.1.15",
     "languagedetect": "2.0.0",
     "location-history": "1.1.2",
-    "material-ui": "0.20.2",
+    "music-metadata": "7.13.0",
-    "music-metadata": "7.14.0",
     "network-address": "1.1.2",
     "parse-torrent": "9.1.5",
     "prettier-bytes": "1.0.4",
     "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "rimraf": "4.4.0",
+    "rimraf": "3.0.2",
     "run-parallel": "1.2.0",
     "semver": "7.3.8",
     "simple-concat": "1.0.1",
     "simple-get": "4.0.1",
     "srt-to-vtt": "1.1.3",
     "vlc-command": "1.2.0",
-    "webtorrent": "1.9.7",
+    "webtorrent": "1.8.32",
     "winreg": "1.2.4"
   },
   "devDependencies": {
-    "@babel/cli": "7.28.6",
+    "@babel/cli": "7.19.3",
-    "@babel/core": "7.29.0",
+    "@babel/core": "7.19.3",
-    "@babel/eslint-parser": "7.28.6",
+    "@babel/eslint-parser": "7.19.1",
-    "@babel/plugin-transform-react-jsx": "7.28.6",
+    "@babel/plugin-transform-react-jsx": "7.19.0",
     "cross-zip": "4.0.0",
-    "depcheck": "1.4.7",
+    "depcheck": "1.4.3",
-    "electron": "27.3.11",
+    "electron": "15.5.7",
-    "electron-notarize": "1.2.2",
+    "electron-notarize": "1.2.1",
     "electron-osx-sign": "0.6.0",
-    "electron-packager": "17.1.2",
+    "electron-packager": "15.5.2",
-    "electron-winstaller": "5.4.0",
+    "electron-winstaller": "5.0.0",
-    "gh-release": "7.0.2",
+    "gh-release": "6.0.4",
-    "minimist": "1.2.8",
+    "minimist": "1.2.6",
-    "nodemon": "2.0.22",
+    "nodemon": "2.0.20",
-    "open": "8.4.2",
+    "open": "8.4.0",
-    "plist": "3.1.0",
+    "plist": "3.0.6",
-    "pngjs": "7.0.0",
+    "pngjs": "6.0.0",
     "run-series": "1.1.9",
     "spectron": "19.0.0",
     "standard": "17.0.0",
-    "tape": "5.9.0"
+    "tape": "5.6.1"
   },
   "engines": {
     "node": "^16.0.0 || ^18.0.0",
-    "npm": "^7.10.0 || ^8.0.0 || ^9.0.0 || ^10.0.0"
+    "npm": "^7.10.0 || ^8.0.0"
   },
   "homepage": "https://webtorrent.io",
   "keywords": [
@@ -99,8 +99,8 @@
   "main": "index.js",
   "optionalDependencies": {
     "appdmg": "^0.6.0",
-    "electron-installer-debian": "^3.2.0",
+    "electron-installer-debian": "^3.1.0",
-    "electron-installer-redhat": "^3.4.0"
+    "electron-installer-redhat": "^3.3.0"
   },
   "private": true,
   "productName": "WebTorrent",
@@ -113,10 +113,12 @@
     "clean": "node ./bin/clean.js",
     "gh-release": "gh-release",
     "install-system-deps": "brew install fakeroot dpkg rpm",
+    "lint": "standard",
+    "lint:fix": "standard --fix",
     "open-config": "node ./bin/open-config.js",
     "package": "node ./bin/package.js",
     "start": "npm run build && electron --no-sandbox .",
-    "test": "standard && depcheck --ignores=standard,@babel/eslint-parser --ignore-dirs=build,dist",
+    "test": "npm run lint && depcheck --ignores=standard,@babel/eslint-parser --ignore-dirs=build,dist",
     "test-integration": "npm run build && node ./test",
     "update-authors": "./bin/update-authors.sh",
     "watch": "nodemon --exec \"npm run start\" --ext js,css --ignore build/ --ignore dist/"

src/main/windows/main.js

@@ -91,11 +91,11 @@ function init (state, options) {
   })
 
   win.on('move', debounce(e => {
-    send('windowBoundsChanged', main.win.getBounds())
+    send('windowBoundsChanged', e.sender.getBounds())
   }, 1000))
 
   win.on('resize', debounce(e => {
-    send('windowBoundsChanged', main.win.getBounds())
+    send('windowBoundsChanged', e.sender.getBounds())
   }, 1000))
 
   win.on('close', e => {

src/renderer/components/delete-all-torrents-modal.js

@@ -16,6 +16,7 @@ module.exports = class DeleteAllTorrentsModal extends React.Component {
         <p><strong>{message}</strong></p>
         <ModalOKCancel
           cancelText='CANCEL'
+          color='secondary'
           onCancel={dispatcher('exitModal')}
           okText={buttonText}
           onOK={handleRemove}

src/renderer/components/heading.js

@@ -1,7 +1,7 @@
 const React = require('react')
 const PropTypes = require('prop-types')
 
-const colors = require('material-ui/styles/colors')
+const grey = require('@material-ui/core/colors/grey').default
 
 class Heading extends React.Component {
   static get propTypes () {
@@ -19,7 +19,7 @@ class Heading extends React.Component {
   render () {
     const HeadingTag = 'h' + this.props.level
     const style = {
-      color: colors.grey100,
+      color: grey['100'],
       fontSize: 20,
       marginBottom: 15,
       marginTop: 30

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

@@ -1,26 +1,28 @@
 const React = require('react')
-const FlatButton = require('material-ui/FlatButton').default
+const Button = require('@material-ui/core/Button').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
+    const { cancelText, color = 'primary', onCancel, okText, onOK } = this.props
     return (
       <div className='float-right'>
-        <FlatButton
+        <Button
           className='control cancel'
-          style={cancelStyle}
-          label={cancelText}
           onClick={onCancel}
-        />
+          style={cancelStyle}
-        <RaisedButton
+        >
-          className='control ok'
+          {cancelText}
-          primary
+        </Button>
-          label={okText}
+        <Button
-          onClick={onOK}
           autoFocus
-        />
+          className='control ok'
+          onClick={onOK}
+          color={color}
+          variant='contained'
+        >
+          {okText}
+        </Button>
       </div>
     )
   }

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

@@ -1,5 +1,5 @@
 const React = require('react')
-const TextField = require('material-ui/TextField').default
+const TextField = require('@material-ui/core/TextField').default
 const { clipboard } = require('electron')
 
 const ModalOKCancel = require('./modal-ok-cancel')

src/renderer/components/path-selector.js

@@ -1,12 +1,12 @@
 const path = require('path')
 
-const colors = require('material-ui/styles/colors')
 const remote = require('@electron/remote')
 const React = require('react')
 const PropTypes = require('prop-types')
 
-const RaisedButton = require('material-ui/RaisedButton').default
+const Button = require('@material-ui/core/Button').default
-const TextField = require('material-ui/TextField').default
+const TextField = require('@material-ui/core/TextField').default
+const grey = require('@material-ui/core/colors/grey').default
 
 // Lets you pick a file or directory.
 // Uses the system Open File dialog.
@@ -53,10 +53,8 @@ class PathSelector extends React.Component {
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap'
     }
-    const textareaStyle = {
-      color: colors.grey50
-    }
     const textFieldStyle = {
+      color: grey['50'],
       flex: '1'
     }
     const text = this.props.value || ''
@@ -70,13 +68,20 @@ class PathSelector extends React.Component {
           {this.props.title}:
         </div>
         <TextField
-          className='control' disabled id={id} value={text}
+          className='control'
-          inputStyle={textareaStyle} style={textFieldStyle}
+          disabled
+          id={id}
+          style={textFieldStyle}
+          value={text}
         />
-        <RaisedButton
+        <Button
-          className='control' label='Change' onClick={this.handleClick}
+          className='control'
+          onClick={this.handleClick}
           style={buttonStyle}
-        />
+          variant='contained'
+        >
+          Change
+        </Button>
       </div>
     )
   }

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

@@ -16,6 +16,7 @@ module.exports = class RemoveTorrentModal extends React.Component {
         <p><strong>{message}</strong></p>
         <ModalOKCancel
           cancelText='CANCEL'
+          color='secondary'
           onCancel={dispatcher('exitModal')}
           okText={buttonText}
           onOK={handleRemove}

src/renderer/components/show-more.js

@@ -1,7 +1,7 @@
 const React = require('react')
 const PropTypes = require('prop-types')
 
-const RaisedButton = require('material-ui/RaisedButton').default
+const Button = require('@material-ui/core/Button').default
 
 class ShowMore extends React.Component {
   static get propTypes () {
@@ -42,11 +42,13 @@ class ShowMore extends React.Component {
     return (
       <div className='show-more' style={this.props.style}>
         {this.state.expanded ? this.props.children : null}
-        <RaisedButton
+        <Button
           className='control'
           onClick={this.handleClick}
-          label={label}
+          variant='contained'
-        />
+        >
+          {label}
+        </Button>
       </div>
     )
   }

src/renderer/pages/app.js

@@ -1,10 +1,9 @@
-const colors = require('material-ui/styles/colors')
 const createGetter = require('fn-getter')
 const React = require('react')
 
-const darkBaseTheme = require('material-ui/styles/baseThemes/darkBaseTheme').default
+const { ThemeProvider, createTheme } = require('@material-ui/core/styles')
-const getMuiTheme = require('material-ui/styles/getMuiTheme').default
+const grey = require('@material-ui/core/colors/grey').default
-const MuiThemeProvider = require('material-ui/styles/MuiThemeProvider').default
+const red = require('@material-ui/core/colors/red').default
 
 const Header = require('../components/header')
 
@@ -33,17 +32,8 @@ const fontFamily = process.platform === 'win32'
   ? '"Segoe UI", sans-serif'
   : 'BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif'
 
-darkBaseTheme.fontFamily = fontFamily
+let darkTheme
-darkBaseTheme.userAgent = false
+let lightTheme
-darkBaseTheme.palette.primary1Color = colors.grey50
-darkBaseTheme.palette.primary2Color = colors.grey50
-darkBaseTheme.palette.primary3Color = colors.grey600
-darkBaseTheme.palette.accent1Color = colors.redA200
-darkBaseTheme.palette.accent2Color = colors.redA400
-darkBaseTheme.palette.accent3Color = colors.redA100
-
-let darkMuiTheme
-let lightMuiTheme
 
 class App extends React.Component {
   render () {
@@ -64,19 +54,66 @@ class App extends React.Component {
     if (state.window.isFocused) cls.push('is-focused')
     if (hideControls) cls.push('hide-video-controls')
 
-    if (!darkMuiTheme) {
+    if (!darkTheme) {
-      darkMuiTheme = getMuiTheme(darkBaseTheme)
+      darkTheme = createTheme({
+        overrides: {
+          MuiButton: {
+            contained: {
+              backgroundColor: '#303030',
+              color: 'white',
+              '&:hover': {
+                backgroundColor: '#414141',
+                // Reset on touch devices, it doesn't add specificity
+                '@media (hover: none)': {
+                  backgroundColor: '#303030',
+                  color: 'white'
+                }
+              }
+            }
+          },
+          MuiCheckbox: {
+            root: {
+              padding: '0px',
+              marginRight: '16px'
+            }
+          },
+          MuiFormControlLabel: {
+            label: {
+              color: 'white',
+              fontSize: '0.875rem'
+            },
+            root: {
+              marginLeft: '0px',
+              marginRight: '0px'
+            }
+          }
+        },
+        palette: {
+          primary: {
+            main: grey['50']
+          },
+          secondary: {
+            main: grey['50']
+          },
+          type: 'dark'
+        },
+        typography: {
+          fontFamily
+        }
+      }, {
+        userAgent: false
+      })
     }
 
     return (
-      <MuiThemeProvider muiTheme={darkMuiTheme}>
+      <ThemeProvider theme={darkTheme}>
         <div className={'app ' + cls.join(' ')}>
           <Header state={state} />
           {this.getErrorPopover()}
           <div key='content' className='content'>{this.getView()}</div>
           {this.getModal()}
         </div>
-      </MuiThemeProvider>
+      </ThemeProvider>
     )
   }
 
@@ -102,23 +139,32 @@ class App extends React.Component {
     const state = this.props.state
     if (!state.modal) return
 
-    if (!lightMuiTheme) {
+    if (!lightTheme) {
-      const lightBaseTheme = require('material-ui/styles/baseThemes/lightBaseTheme').default
+      lightTheme = createTheme({
-      lightBaseTheme.fontFamily = fontFamily
+        palette: {
-      lightBaseTheme.userAgent = false
+          secondary: {
-      lightMuiTheme = getMuiTheme(lightBaseTheme)
+            main: red.A200
+          },
+          type: 'light'
+        },
+        typography: {
+          fontFamily
+        }
+      }, {
+        userAgent: false
+      })
     }
 
     const ModalContents = Modals[state.modal.id]()
     return (
-      <MuiThemeProvider muiTheme={lightMuiTheme}>
+      <ThemeProvider theme={lightTheme}>
         <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>
+      </ThemeProvider>
     )
   }
 

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

@@ -3,17 +3,16 @@ const path = require('path')
 const prettyBytes = require('prettier-bytes')
 const React = require('react')
 
-const { dispatch, dispatcher } = require('../lib/dispatcher')
+const Button = require('@material-ui/core/Button').default
-
+const TextField = require('@material-ui/core/TextField').default
-const FlatButton = require('material-ui/FlatButton').default
+const Checkbox = require('@material-ui/core/Checkbox').default
-const RaisedButton = require('material-ui/RaisedButton').default
-const TextField = require('material-ui/TextField').default
-const Checkbox = require('material-ui/Checkbox').default
 
 const CreateTorrentErrorPage = require('../components/create-torrent-error-page')
 const Heading = require('../components/heading')
 const ShowMore = require('../components/show-more')
 
+const { dispatch, dispatcher } = require('../lib/dispatcher')
+
 // 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 {
@@ -99,20 +98,23 @@ class CreateTorrentPage extends React.Component {
           {this.renderAdvanced()}
         </ShowMore>
         <div className='float-right'>
-          <FlatButton
+          <Button
             className='control cancel'
-            label='Cancel'
+            onClick={dispatcher('cancel')}
             style={{
               marginRight: 10
             }}
-            onClick={dispatcher('cancel')}
+          >
-          />
+            Cancel
-          <RaisedButton
+          </Button>
+          <Button
             className='control create-torrent-button'
-            label='Create Torrent'
-            primary
             onClick={this.handleSubmit}
-          />
+            color='primary'
+            variant='contained'
+          >
+            Create Torrent
+          </Button>
         </div>
       </div>
     )
@@ -134,10 +136,6 @@ class CreateTorrentPage extends React.Component {
       fileElems.push(<div key='more'>+ {files.length - maxFileElems} more</div>)
     }
 
-    // Align the text fields
-    const textFieldStyle = { width: '' }
-    const textareaStyle = { margin: 0 }
-
     return (
       <div key='advanced' className='create-torrent-advanced'>
         <div key='private' className='torrent-attribute'>
@@ -146,34 +144,32 @@ class CreateTorrentPage extends React.Component {
             className='torrent-is-private control'
             style={{ display: '' }}
             checked={this.state.isPrivate}
-            onCheck={this.handleSetIsPrivate}
+            onChange={this.handleSetIsPrivate}
           />
         </div>
         <div key='trackers' className='torrent-attribute'>
           <label>Trackers:</label>
           <TextField
             className='torrent-trackers control'
-            style={textFieldStyle}
+            fullWidth
-            textareaStyle={textareaStyle}
+            maxRows={10}
-            multiLine
+            minRows={2}
-            rows={2}
+            multiline
-            rowsMax={10}
-            value={this.state.trackers}
             onChange={this.handleSetTrackers}
+            value={this.state.trackers}
           />
         </div>
         <div key='comment' className='torrent-attribute'>
           <label>Comment:</label>
           <TextField
             className='torrent-comment control'
-            style={textFieldStyle}
+            fullWidth
-            textareaStyle={textareaStyle}
+            maxRows={10}
-            hintText='Optionally describe your torrent...'
+            minRows={2}
-            multiLine
+            multiline
-            rows={2}
-            rowsMax={10}
-            value={this.state.comment}
             onChange={this.handleSetComment}
+            placeholder='Optionally describe your torrent...'
+            value={this.state.comment}
           />
         </div>
         <div key='files' className='torrent-attribute'>

src/renderer/pages/preferences-page.js

@@ -1,10 +1,12 @@
 const React = require('react')
 const PropTypes = require('prop-types')
 
-const colors = require('material-ui/styles/colors')
+const Button = require('@material-ui/core/Button').default
-const Checkbox = require('material-ui/Checkbox').default
+const Checkbox = require('@material-ui/core/Checkbox').default
-const RaisedButton = require('material-ui/RaisedButton').default
+const FormControlLabel = require('@material-ui/core/FormControlLabel').default
-const TextField = require('material-ui/TextField').default
+const TextField = require('@material-ui/core/TextField').default
+const grey = require('@material-ui/core/colors/grey').default
+
 const Heading = require('../components/heading')
 const PathSelector = require('../components/path-selector')
 
@@ -63,11 +65,15 @@ class PreferencesPage extends React.Component {
   openExternalPlayerCheckbox () {
     return (
       <Preference>
-        <Checkbox
+        <FormControlLabel
-          className='control'
+          control={
-          checked={!this.props.state.saved.prefs.openExternalPlayer}
+            <Checkbox
+              className='control'
+              checked={!this.props.state.saved.prefs.openExternalPlayer}
+              onChange={this.handleOpenExternalPlayerChange}
+            />
+          }
           label='Play torrent media files using WebTorrent'
-          onCheck={this.handleOpenExternalPlayerChange}
         />
       </Preference>
     )
@@ -80,11 +86,15 @@ class PreferencesPage extends React.Component {
   highestPlaybackPriorityCheckbox () {
     return (
       <Preference>
-        <Checkbox
+        <FormControlLabel
-          className='control'
+          control={
-          checked={this.props.state.saved.prefs.highestPlaybackPriority}
+            <Checkbox
+              className='control'
+              checked={this.props.state.saved.prefs.highestPlaybackPriority}
+              onChange={this.handleHighestPlaybackPriorityChange}
+            />
+          }
           label='Highest Playback Priority'
-          onCheck={this.handleHighestPlaybackPriorityChange}
         />
         <p>Pauses all active torrents to allow playback to use all of the available bandwidth.</p>
       </Preference>
@@ -126,11 +136,15 @@ class PreferencesPage extends React.Component {
   autoAddTorrentsCheckbox () {
     return (
       <Preference>
-        <Checkbox
+        <FormControlLabel
-          className='control'
+          control={
-          checked={this.props.state.saved.prefs.autoAddTorrents}
+            <Checkbox
+              className='control'
+              checked={this.props.state.saved.prefs.autoAddTorrents}
+              onChange={(e, value) => { this.handleAutoAddTorrentsChange(e, value) }}
+            />
+          }
           label='Watch for new .torrent files and add them immediately'
-          onCheck={(e, value) => { this.handleAutoAddTorrentsChange(e, value) }}
         />
       </Preference>
     )
@@ -188,11 +202,13 @@ class PreferencesPage extends React.Component {
     return (
       <Preference>
         <p>WebTorrent is not currently the default torrent app.</p>
-        <RaisedButton
+        <Button
           className='control'
           onClick={this.handleSetDefaultApp}
-          label='Make WebTorrent the default'
+          variant='contained'
-        />
+        >
+          Make WebTorrent the default
+        </Button>
       </Preference>
     )
   }
@@ -208,11 +224,15 @@ class PreferencesPage extends React.Component {
 
     return (
       <Preference>
-        <Checkbox
+        <FormControlLabel
-          className='control'
+          control={
-          checked={this.props.state.saved.prefs.startup}
+            <Checkbox
+              className='control'
+              checked={this.props.state.saved.prefs.startup}
+              onChange={this.handleStartupChange}
+            />
+          }
           label='Open WebTorrent on startup'
-          onCheck={this.handleStartupChange}
         />
       </Preference>
     )
@@ -221,11 +241,15 @@ class PreferencesPage extends React.Component {
   soundNotificationsCheckbox () {
     return (
       <Preference>
-        <Checkbox
+        <FormControlLabel
-          className='control'
+          control={
-          checked={this.props.state.saved.prefs.soundNotifications}
+            <Checkbox
+              className='control'
+              checked={this.props.state.saved.prefs.soundNotifications}
+              onChange={this.handleSoundNotificationsChange}
+            />
+          }
           label='Enable sounds'
-          onCheck={this.handleSoundNotificationsChange}
         />
       </Preference>
     )
@@ -240,21 +264,16 @@ class PreferencesPage extends React.Component {
   }
 
   setGlobalTrackers () {
-    // Align the text fields
-    const textFieldStyle = { width: '100%' }
-    const textareaStyle = { margin: 0 }
-
     return (
       <Preference>
         <TextField
           className='torrent-trackers control'
-          style={textFieldStyle}
+          fullWidth
-          textareaStyle={textareaStyle}
+          maxRows={10}
-          multiLine
+          minRows={2}
-          rows={2}
+          multiline
-          rowsMax={10}
-          value={this.state.globalTrackers}
           onChange={this.handleSetGlobalTrackers}
+          value={this.state.globalTrackers}
         />
       </Preference>
     )
@@ -274,7 +293,7 @@ class PreferencesPage extends React.Component {
 
   render () {
     const style = {
-      color: colors.grey400,
+      color: grey['400'],
       marginLeft: 25,
       marginRight: 25
     }

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

@@ -1,8 +1,8 @@
 const React = require('react')
 const prettyBytes = require('prettier-bytes')
 
-const Checkbox = require('material-ui/Checkbox').default
+const Checkbox = require('@material-ui/core/Checkbox').default
-const LinearProgress = require('material-ui/LinearProgress').default
+const LinearProgress = require('@material-ui/core/LinearProgress').default
 
 const TorrentSummary = require('../lib/torrent-summary')
 const TorrentPlayer = require('../lib/torrent-player')
@@ -124,19 +124,19 @@ module.exports = class TorrentList extends React.Component {
       const isActive = ['downloading', 'seeding'].includes(torrentSummary.status)
       return (
         <Checkbox
-          key='download-button'
+          checked={isActive}
           className={'control download ' + torrentSummary.status}
+          key='download-button'
+          onChange={dispatcher('toggleTorrent', infoHash)}
+          onClick={stopPropagation}
           style={{
             display: 'inline-block',
-            width: 32
+            marginRight: '12px',
+            '& .MuiSvgIconRoot': {
+              width: '20px',
+              height: '20px'
+            }
           }}
-          iconStyle={{
-            width: 20,
-            height: 20
-          }}
-          checked={isActive}
-          onClick={stopPropagation}
-          onCheck={dispatcher('toggleTorrent', infoHash)}
         />
       )
     }
@@ -155,7 +155,7 @@ module.exports = class TorrentList extends React.Component {
       }
       return (
         <div key='progress-bar' style={styles.wrapper}>
-          <LinearProgress style={styles.progress} mode='determinate' value={progress} />
+          <LinearProgress style={styles.progress} value={progress} variant='determinate' />
         </div>
       )
     }

static/main.css

@@ -71,6 +71,7 @@ table {
 
 .app {
   -webkit-user-select: none;
+  -webkit-app-region: drag;
   height: 100%;
   display: flex;
   flex-flow: column;
@@ -142,7 +143,6 @@ table {
  */
 
 .header {
-  -webkit-app-region: drag;
   background: rgb(40, 40, 40);
   border-bottom: 1px solid rgb(30, 30, 30);
   height: 38px; /* vertically center OS menu buttons (OS X) */
@@ -354,7 +354,7 @@ textarea,
   text-shadow: rgba(0, 0, 0, 0.5) 0 0 4px;
 }
 
-.torrent .metadata span:not(:last-child)::after {
+.torrent .metadata .ellipsis > span:not(:last-child):not(.control)::after {
   content: ' • ';
   opacity: 0.7;
   padding-left: 4px;