Merge pull request #17 from loeck/next

Use the same webpack as electron-webpack for internals

src/components/SideBar/index.js

@@ -3,6 +3,8 @@
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'
 
+import { rgba } from 'styles/helpers'
+
 import Box, { GrowScroll } from 'components/base/Box'
 import Item from './Item'
 
@@ -15,11 +17,18 @@ const CapsSubtitle = styled(Box).attrs({
   font-weight: bold;
 `
 
+const Container = styled(GrowScroll).attrs({
+  flow: 4,
+  py: 4,
+})`
+  background-color: ${p => rgba(p.theme.color, 0.4)};
+`
+
 class SideBar extends PureComponent<{}> {
   render() {
     return (
       <Box noShrink style={{ width: 250 }}>
-        <GrowScroll flow={4} py={4} bg="night">
+        <Container>
           <Box flow={2}>
             <CapsSubtitle>{'Menu'}</CapsSubtitle>
             <div>
@@ -46,7 +55,7 @@ class SideBar extends PureComponent<{}> {
               </Item>
             </div>
           </Box>
-        </GrowScroll>
+        </Container>
       </Box>
     )
   }

src/main/app.js

@@ -6,7 +6,9 @@ import { app, BrowserWindow } from 'electron' // eslint-disable-line import/no-e
 let mainWindow
 
 function createMainWindow() {
-  const window = new BrowserWindow()
+  const window = new BrowserWindow({
+    vibrancy: 'dark',
+  })
 
   const url = __DEV__
     ? `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT || ''}`

src/styles/global.js

@@ -22,7 +22,6 @@ injectGlobal`
     line-height: 1.5;
     font-size: 16px;
     font-family: "Open Sans", Arial, Helvetica, sans-serif;
-    background: white;
   }
 
   #app {

webpack/internals.config.js

@@ -1,6 +1,5 @@
 const path = require('path')
 const fs = require('fs')
-const webpack = require('webpack')
 const webpackMain = require('electron-webpack/webpack.main.config') // eslint-disable-line import/no-extraneous-dependencies
 
 const define = require('./define')
@@ -11,41 +10,30 @@ const dirs = p =>
     .filter(f => fs.statSync(path.join(p, f)).isDirectory())
     .map(d => path.resolve(__dirname, `${p}/${d}`))
     .reduce((result, value) => {
-      const [key] = value.split('/').slice(-1)
+      const [key] = value.split(path.sep).slice(-1)
       result[key] = value
       return result
     }, {})
 
 module.exports = webpackMain().then(config => ({
-  target: 'electron-main',
+  context: config.context,
+  devtool: config.devtool,
+  target: config.target,
 
   entry: dirs(path.resolve(__dirname, '../src/internals')),
 
   resolve: {
-    extensions: ['.js', '.json', '.node'],
+    extensions: config.resolve.extensions,
   },
 
   externals: ['node-hid', ...config.externals],
 
   output: {
     path: path.resolve(__dirname, '../dist/internals'),
-    filename: '[name].js',
-    libraryTarget: 'commonjs2',
+    ...config.output,
   },
 
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        use: 'babel-loader',
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.node$/,
-        use: 'node-loader',
-      },
-    ],
-  },
+  module: config.module,
 
-  plugins: [define, new webpack.optimize.ModuleConcatenationPlugin()],
+  plugins: [define, ...config.plugins],
 }))