misc changes

src/main/windows/main.js

@@ -23,7 +23,7 @@ var log = require('../log')
 var menu = require('../menu')
 var tray = require('../tray')
 
-var HEADER_HEIGHT = 37
+var HEADER_HEIGHT = 38
 var TORRENT_HEIGHT = 100
 
 function init () {

src/renderer/main.js

@@ -9,16 +9,17 @@ const fs = require('fs')
 const React = require('react')
 const ReactDOM = require('react-dom')
 
-// Required by Material UI -- adds `onTouchTap` event
-require('react-tap-event-plugin')()
-
 const config = require('../config')
-const App = require('./views/app')
 const telemetry = require('./lib/telemetry')
 const sound = require('./lib/sound')
 const State = require('./lib/state')
 const TorrentPlayer = require('./lib/torrent-player')
 
+// Required by Material UI -- adds `onTouchTap` event
+require('react-tap-event-plugin')()
+
+const App = require('./components/App')
+
 const MediaController = require('./controllers/media-controller')
 const UpdateController = require('./controllers/update-controller')
 const PrefsController = require('./controllers/prefs-controller')

src/renderer/views/PageHeading.js

@@ -0,0 +1,18 @@
+const React = require('react')
+
+const colors = require('material-ui/styles/colors')
+
+class PageHeading extends React.Component {
+  render () {
+    <h2
+      style={{
+        color: colors.grey100,
+        fontSize: 20,
+        marginBottom: 15,
+        marginTop: 30
+      }}
+    >{this.props.children}</h2>
+  }
+}
+
+module.exports = PageHeading

src/renderer/views/PreferencesPage.js

@@ -5,7 +5,9 @@ const Checkbox = require('material-ui/Checkbox').default
 const colors = require('material-ui/styles/colors')
 const RaisedButton = require('material-ui/RaisedButton').default
 
-const PathSelector = require('./PathSelector')
+const PageHeading = require('../components/PageHeading')
+const PathSelector = require('../componets/PathSelector')
+
 const {dispatch} = require('../lib/dispatcher')
 
 class PreferencesPage extends React.Component {
@@ -118,8 +120,8 @@ class PreferencesPage extends React.Component {
       <div
         style={{
           color: colors.grey400,
-          marginLeft: 20,
+          marginLeft: 25,
-          marginRight: 20
+          marginRight: 25
         }}
       >
         <PreferencesSection title='Downloads'>
@@ -148,16 +150,11 @@ class PreferencesSection extends React.Component {
     return (
       <div
         style={{
-          marginBottom: 30,
+          marginBottom: 25,
-          marginTop: 30
+          marginTop: 25
         }}
       >
-        <h2
+        <PageHeading>{this.props.title}</PageHeading>
-          style={{
-            color: colors.grey50,
-            fontSize: 22
-          }}
-        >{this.props.title}</h2>
         {this.props.children}
       </div>
     )

src/renderer/views/app.js

@@ -7,9 +7,9 @@ const MuiThemeProvider = require('material-ui/styles/MuiThemeProvider').default
 const Header = require('./header')
 
 const Views = {
-  'home': require('./torrent-list'),
+  'home': require('./TorrentListPage'),
-  'player': require('./player'),
+  'player': require('./PlayerPage'),
-  'create-torrent': require('./create-torrent'),
+  'create-torrent': require('./CreateTorrentPage'),
   'preferences': require('./PreferencesPage')
 }
 
@@ -24,7 +24,7 @@ var muiTheme = getMuiTheme(Object.assign(darkBaseTheme, {
   fontFamily: 'BlinkMacSystemFont, \'Helvetica Neue\', Helvetica, sans-serif'
 }))
 
-module.exports = class App extends React.Component {
+class App extends React.Component {
   constructor (props) {
     super(props)
     this.state = props.state
@@ -104,3 +104,5 @@ module.exports = class App extends React.Component {
     return (<View state={state} />)
   }
 }
+
+module.exports = App

src/renderer/views/create-torrent.js

@@ -6,7 +6,7 @@ const prettyBytes = require('prettier-bytes')
 const {dispatch, dispatcher} = require('../lib/dispatcher')
 const CreateTorrentErrorPage = require('./create-torrent-error-page')
 
-module.exports = class CreateTorrentPage extends React.Component {
+class CreateTorrentPage extends React.Component {
   render () {
     var state = this.props.state
     var info = state.location.current()
@@ -129,3 +129,5 @@ function findCommonPrefix (a, b) {
   if (i === b.length) return b
   return a.substring(0, i)
 }
+
+module.exports = CreateTorrentPage