more progress

src/renderer/components/ShowMore.js

@@ -39,7 +39,9 @@ class ShowMore extends React.Component {
       ? this.props.hideLabel
       : this.props.showLabel
     return (
-      <div>
+      <div
+        style={this.props.style}
+      >
         {this.state.expanded ? this.props.children : null}
         <FlatButton
           onClick={this.handleClick}

src/renderer/pages/App.js

@@ -1,3 +1,4 @@
+const colors = require('material-ui/styles/colors')
 const React = require('react')
 
 const darkBaseTheme = require('material-ui/styles/baseThemes/darkBaseTheme').default
@@ -20,11 +21,15 @@ const Modals = {
   'unsupported-media-modal': require('../components/unsupported-media-modal')
 }
 
-const MUI_THEME = getMuiTheme(Object.assign(darkBaseTheme, {
-  fontFamily: process.platform === 'win32'
-    ? '\'Segoe UI\', sans-serif'
-    : 'BlinkMacSystemFont, \'Helvetica Neue\', Helvetica, sans-serif'
-}))
+darkBaseTheme.fontFamily = process.platform === 'win32'
+  ? '"Segoe UI", sans-serif'
+  : 'BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif'
+darkBaseTheme.palette.primary1Color = colors.cyan500
+darkBaseTheme.palette.primary2Color = colors.cyan500
+darkBaseTheme.palette.primary3Color = colors.grey600
+darkBaseTheme.palette.accent1Color = colors.redA200
+darkBaseTheme.palette.accent2Color = colors.redA400
+darkBaseTheme.palette.accent3Color = colors.redA100
 
 class App extends React.Component {
   render () {
@@ -51,7 +56,7 @@ class App extends React.Component {
     if (hideControls) cls.push('hide-video-controls')
 
     var vdom = (
-      <MuiThemeProvider muiTheme={MUI_THEME}>
+      <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
         <div className={'app ' + cls.join(' ')}>
           <Header state={state} />
           {this.getErrorPopover()}

src/renderer/pages/CreateTorrentPage.js

@@ -5,6 +5,8 @@ const React = require('react')
 
 const {dispatch, dispatcher} = require('../lib/dispatcher')
 
+const FlatButton = require('material-ui/FlatButton').default
+const RaisedButton = require('material-ui/RaisedButton').default
 const TextField = require('material-ui/TextField').default
 
 const CreateTorrentErrorPage = require('../components/create-torrent-error-page')
@@ -107,6 +109,9 @@ class CreateTorrentPage extends React.Component {
           <div className='torrent-attribute'>{this.state.pathPrefix}</div>
         </div>
         <ShowMore
+          style={{
+            marginBottom: 10
+          }}
           hideLabel='Hide advanced settings...'
           showLabel='Show advanced settings...'
         >
@@ -134,9 +139,19 @@ class CreateTorrentPage extends React.Component {
             </div>
           </div>
         </ShowMore>
-        <div key='buttons' className='float-right'>
-          <button key='cancel' className='button-flat light' onClick={dispatcher('cancel')}>Cancel</button>
-          <button key='create' className='button-raised' onClick={this.handleSubmit}>Create Torrent</button>
+        <div className='float-right'>
+          <FlatButton
+            label='Cancel'
+            style={{
+              marginRight: 10
+            }}
+            onClick={dispatcher('cancel')}
+          />
+          <RaisedButton
+            label='Create Torrent'
+            primary
+            onClick={this.handleSubmit}
+          />
         </div>
       </div>
     )

static/main.css

@@ -124,10 +124,6 @@ table {
  * UTILITY CLASSES
  */
 
-.clickable {
-  cursor: pointer;
-}
-
 .ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -142,26 +138,6 @@ table {
   float: right;
 }
 
-.expand-collapse.expanded::before {
-  content: '▲'
-}
-
-.expand-collapse.collapsed::before {
-  content: '▼'
-}
-
-.expand-collapse::before {
-  margin-right: 5px;
-}
-
-.expand-collapse.collapsed {
-  display: block;
-}
-
-.collapsed {
-  display: none;
-}
-
 /*
  * HEADER
  */