Add backdrop-filter, and remove vibrancy on application

src/components/AppRegionDrag.js

@@ -4,7 +4,9 @@ import styled from 'styled-components'
 
 export default styled.div`
   -webkit-app-region: drag;
-  background: ${p => p.theme.colors.white};
   height: 40px;
-  z-index: 21;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
 `

src/components/SideBar/Item.js

@@ -30,12 +30,11 @@ const mapDispatchToProps = {
 const Container = styled(Box).attrs({
   horizontal: true,
   align: 'center',
-  color: 'lead',
   p: 2,
   flow: 2,
 })`
   cursor: pointer;
-  color: ${p => (p.isActive ? p.theme.colors.white : '')};
+  color: ${p => (p.isActive ? '#1d2027' : '#b8b8b8')};
   background: ${p => (p.isActive ? 'rgba(255, 255, 255, 0.05)' : '')};
   box-shadow: ${p =>
     p.isActive ? `${p.theme.colors.blue} 4px 0 0 inset` : `${p.theme.colors.blue} 0 0 0 inset`};
@@ -71,9 +70,7 @@ function Item({ children, desc, icon, linkTo, push, location, modal, openModal }
     >
       {icon && <Icon fontSize={3} color={isActive ? 'blue' : void 0} name={icon} />}
       <div>
-        <Text fontWeight="bold" fontSize={1}>
-          {children}
-        </Text>
+        <Text fontSize={1}>{children}</Text>
         {desc && (
           <Box color="steel" fontSize={0}>
             {desc}

src/components/SideBar/index.js

@@ -15,7 +15,6 @@ import { openModal } from 'reducers/modals'
 import { getAccounts } from 'reducers/accounts'
 
 import { formatBTC } from 'helpers/format'
-import { rgba } from 'styles/helpers'
 
 import Box from 'components/base/Box'
 import GrowScroll from 'components/base/GrowScroll'
@@ -34,7 +33,7 @@ const CapsSubtitle = styled(Box).attrs({
 const Container = styled(Box).attrs({
   noShrink: true,
 })`
-  background-color: ${p => rgba(p.theme.colors[p.bg], process.platform === 'darwin' ? 0.4 : 1)};
+  margin-top: 40px;
   width: ${p => p.theme.sizes.sideBarWidth}px;
 `
 
@@ -68,8 +67,8 @@ class SideBar extends PureComponent<Props> {
     const { t, accounts, openModal } = this.props
 
     return (
-      <Container bg="night">
-        <GrowScroll flow={4} py={4}>
+      <Container bg="white">
+        <GrowScroll flow={4} py={3}>
           <Box flow={2}>
             <CapsSubtitle>{t('sidebar.menu')}</CapsSubtitle>
             <div>

src/components/TopBar.js

@@ -2,6 +2,7 @@
 
 import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
+import styled from 'styled-components'
 import { ipcRenderer } from 'electron'
 
 import type { MapStateToProps, MapDispatchToProps } from 'react-redux'
@@ -16,6 +17,35 @@ import { hasPassword } from 'reducers/settings'
 
 import Box from 'components/base/Box'
 
+const Container = styled(Box).attrs({
+  borderColor: '#e2e2e2',
+  borderWidth: 1,
+  borderBottom: true,
+  noShrink: true,
+  px: 3,
+  align: 'center',
+  horizontal: true,
+})`
+  height: 60px;
+  position: absolute;
+  overflow: hidden;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 20;
+`
+
+const Filter = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  margin: -300px;
+  bottom: 0;
+  backdrop-filter: blur(20px);
+  z-index: -1;
+`
+
 const mapStateToProps: MapStateToProps<*, *, *> = state => ({
   hasAccounts: Object.keys(getAccounts(state)).length > 0,
   currentDevice: getCurrentDevice(state),
@@ -100,7 +130,8 @@ class TopBar extends PureComponent<Props, State> {
     const { sync } = this.state
 
     return (
-      <Box bg="white" px={2} noShrink style={{ height: 60, zIndex: 20 }} align="center" horizontal>
+      <Container>
+        <Filter />
         <Box grow>
           {hasAccounts &&
             (sync.progress === true
@@ -111,7 +142,7 @@ class TopBar extends PureComponent<Props, State> {
           {hasPassword && <LockApplication onLock={this.handleLock} />}
           <CountDevices count={devices.length} />
         </Box>
-      </Box>
+      </Container>
     )
   }
 }

src/components/Wrapper.js

@@ -31,19 +31,17 @@ class Wrapper extends Component<{}> {
                 <ModalComponent key={name} />
               ))}
 
-              <Box grow horizontal>
+              <Box grow horizontal bg="white">
                 <SideBar />
 
-                <Box shrink grow bg="cream" color="grey">
+                <Box shrink grow bg="cream" color="grey" relative>
                   <TopBar />
-                  <Box grow relative>
-                    {__PROD__ && <UpdateNotifier />}
-                    <GrowScroll p={4}>
-                      <Route path="/" exact component={DashboardPage} />
-                      <Route path="/settings" component={SettingsPage} />
-                      <Route path="/account/:id" component={AccountPage} />
-                    </GrowScroll>
-                  </Box>
+                  {__PROD__ && <UpdateNotifier />}
+                  <GrowScroll p={3} style={{ paddingTop: 80 }}>
+                    <Route path="/" exact component={DashboardPage} />
+                    <Route path="/settings" component={SettingsPage} />
+                    <Route path="/account/:id" component={AccountPage} />
+                  </GrowScroll>
                 </Box>
               </Box>
             </Fragment>

src/helpers/btc.js

@@ -46,7 +46,7 @@ export async function getAccount({
   hdnode,
   segwit,
   network,
-  asyncDelay = 100,
+  asyncDelay = 500,
 }: {
   allAddresses?: Array<string>,
   currentIndex?: number,

src/main/app.js

@@ -14,7 +14,6 @@ function createMainWindow() {
       ? {
           frame: false,
           titleBarStyle: 'hiddenInset',
-          vibrancy: 'ultra-dark', // https://github.com/electron/electron/issues/10521
         }
       : {}),
     center: true,
@@ -23,6 +22,9 @@ function createMainWindow() {
     width: MIN_WIDTH,
     minHeight: MIN_HEIGHT,
     minWidth: MIN_WIDTH,
+    webPreferences: {
+      blinkFeatures: 'CSSBackdropFilter',
+    },
   }
 
   const window = new BrowserWindow(windowOptions)

src/styles/global.js

@@ -46,12 +46,13 @@ injectGlobal`
   }
 
   .scrollbar-thumb {
-    background: rgba(102, 102, 102, 0.5) !important;
+    background: rgb(102, 102, 102) !important;
     padding: 2px;
     background-clip: content-box !important;
   }
   .scrollbar-track {
     background: transparent !important;
     transition: opacity 0.2s ease-in-out !important;
+    z-index: 20 !important;
   }
 `