diff --git a/src/components/AppRegionDrag.js b/src/components/AppRegionDrag.js
index 9be9f09d..61c12801 100644
--- a/src/components/AppRegionDrag.js
+++ b/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;
`
diff --git a/src/components/SideBar/Item.js b/src/components/SideBar/Item.js
index 038e64a3..962e622e 100644
--- a/src/components/SideBar/Item.js
+++ b/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 && }
-
- {children}
-
+
{children}
{desc && (
{desc}
diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js
index da5d8922..bfa10a27 100644
--- a/src/components/SideBar/index.js
+++ b/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 {
const { t, accounts, openModal } = this.props
return (
-
-
+
+
{t('sidebar.menu')}
diff --git a/src/components/TopBar.js b/src/components/TopBar.js
index a70dde7a..36f67c23 100644
--- a/src/components/TopBar.js
+++ b/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
{
const { sync } = this.state
return (
-
+
+
{hasAccounts &&
(sync.progress === true
@@ -111,7 +142,7 @@ class TopBar extends PureComponent {
{hasPassword && }
-
+
)
}
}
diff --git a/src/components/Wrapper.js b/src/components/Wrapper.js
index efd6bf01..0f330bbf 100644
--- a/src/components/Wrapper.js
+++ b/src/components/Wrapper.js
@@ -31,19 +31,17 @@ class Wrapper extends Component<{}> {
))}
-
+
-
+
-
- {__PROD__ && }
-
-
-
-
-
-
+ {__PROD__ && }
+
+
+
+
+
diff --git a/src/helpers/btc.js b/src/helpers/btc.js
index ba760279..1c8ef560 100644
--- a/src/helpers/btc.js
+++ b/src/helpers/btc.js
@@ -46,7 +46,7 @@ export async function getAccount({
hdnode,
segwit,
network,
- asyncDelay = 100,
+ asyncDelay = 500,
}: {
allAddresses?: Array,
currentIndex?: number,
diff --git a/src/main/app.js b/src/main/app.js
index 0bbe8d3a..53dde287 100644
--- a/src/main/app.js
+++ b/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)
diff --git a/src/styles/global.js b/src/styles/global.js
index 4cf30cd2..a08115d4 100644
--- a/src/styles/global.js
+++ b/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;
}
`