From b2630fe8ac17f2bae2fdef555ac6a26ad5c7f1fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= Date: Thu, 1 Feb 2018 17:41:44 +0100 Subject: [PATCH] Add backdrop-filter, and remove vibrancy on application --- src/components/AppRegionDrag.js | 6 ++++-- src/components/SideBar/Item.js | 7 ++----- src/components/SideBar/index.js | 7 +++---- src/components/TopBar.js | 35 +++++++++++++++++++++++++++++++-- src/components/Wrapper.js | 18 ++++++++--------- src/helpers/btc.js | 2 +- src/main/app.js | 4 +++- src/styles/global.js | 3 ++- 8 files changed, 56 insertions(+), 26 deletions(-) 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; } `