From c96ae35644e2d228bd4bd35d5353a4a616c2c21d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= <nainpuissant@gmail.com>
Date: Mon, 15 Jan 2018 17:24:52 +0100
Subject: [PATCH] Add vibrancy options on BrowserWindow

---
 src/components/SideBar/index.js | 13 +++++++++++--
 src/main/app.js                 |  4 +++-
 src/styles/global.js            |  1 -
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js
index e06d9083..7acb18d7 100644
--- a/src/components/SideBar/index.js
+++ b/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>
     )
   }
diff --git a/src/main/app.js b/src/main/app.js
index 6e90cd4e..7a6a98fe 100644
--- a/src/main/app.js
+++ b/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 || ''}`
diff --git a/src/styles/global.js b/src/styles/global.js
index e2315e5d..2a5342d7 100644
--- a/src/styles/global.js
+++ b/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 {