diff --git a/package.json b/package.json index f4f9ae4c42b..bd500b904e7 100644 --- a/package.json +++ b/package.json @@ -246,7 +246,7 @@ "cross-env": "5.2.0", "cross-spawn": "6.0.5", "csp-html-webpack-plugin": "3.0.3", - "electron": "5.0.8", + "electron": "5.0.9", "electron-builder": "20.41.0", "electron-devtools-installer": "2.2.4", "electron-updater": "4.1.2", diff --git a/renderer/components/UI/Card.js b/renderer/components/UI/Card.js index 46110b79f0b..0e0933df1ea 100644 --- a/renderer/components/UI/Card.js +++ b/renderer/components/UI/Card.js @@ -12,7 +12,7 @@ const Card = React.forwardRef((props, ref) => { as="section" bg="primaryColor" borderRadius={5} - boxShadow="0 2px 24px 0 rgba(0, 0, 0, 0.5)" + boxShadow="m" color="primaryText" p={3} {...props} diff --git a/renderer/components/UI/CryptoAmountInput.js b/renderer/components/UI/CryptoAmountInput.js index 9ec972f7704..8c1e0bd065f 100644 --- a/renderer/components/UI/CryptoAmountInput.js +++ b/renderer/components/UI/CryptoAmountInput.js @@ -67,7 +67,7 @@ class CryptoAmountInput extends React.Component { case 'lits': return { precision: 0, - step: '0.00000001', + step: '1', placeholder: '00000000', pattern: '[0-9]*', } diff --git a/renderer/components/UI/Dialog.js b/renderer/components/UI/Dialog.js index 10b4127abb0..f733d7a0b88 100644 --- a/renderer/components/UI/Dialog.js +++ b/renderer/components/UI/Dialog.js @@ -28,12 +28,7 @@ const Dialog = ({ header, onClose, buttons, width, children }) => { ) return ( - + (props.justify === 'right' ? 0 : null)}; ` diff --git a/renderer/components/UI/GlobalStyle.js b/renderer/components/UI/GlobalStyle.js index 2e59064af11..1cb2ff54a8f 100644 --- a/renderer/components/UI/GlobalStyle.js +++ b/renderer/components/UI/GlobalStyle.js @@ -117,7 +117,7 @@ const GlobalStyle = createGlobalStyle` line-height: 1.4; padding: 6px 10px; word-wrap: break-word; - box-shadow: 0 3px 4px 0 rgba(30, 30, 30, 0.5), 0 2px 4px 0 rgba(0, 0, 0, 0.5); + box-shadow: ${themeGet('shadows.s')}; } [data-hint]:hover::before, diff --git a/renderer/components/UI/Notification.js b/renderer/components/UI/Notification.js index b6820af3366..e6d183e7cb8 100644 --- a/renderer/components/UI/Notification.js +++ b/renderer/components/UI/Notification.js @@ -42,7 +42,7 @@ class Notification extends React.Component { return ( ( ( overflow: hidden; min-width: 900px; min-height: 425px; - box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55); + box-shadow: ${themeGet('shadows.l')}; `} {...props} /> diff --git a/renderer/components/UI/Select.js b/renderer/components/UI/Select.js index 12b0d40929b..a4169ed0d07 100644 --- a/renderer/components/UI/Select.js +++ b/renderer/components/UI/Select.js @@ -4,6 +4,7 @@ import { asField } from 'informed' import { compose } from 'redux' import { injectIntl, intlShape } from 'react-intl' import styled, { withTheme } from 'styled-components' +import { themeGet } from 'styled-system' import Downshift from 'downshift' import { Box, Flex } from 'rebass' import system from '@rebass/components' @@ -28,7 +29,7 @@ const SelectOptionList = styled.ul` transition: opacity 0.1s ease; background-color: ${props => props.theme.colors.secondaryColor}; border-radius: 5px; - box-shadow: 0 3px 4px 0 rgba(30, 30, 30, 0.5); + box-shadow: ${themeGet('shadows.s')}; ` const SelectOptionItem = styled( diff --git a/renderer/components/UI/Sidebar.js b/renderer/components/UI/Sidebar.js index 16fe504e680..38e1007f487 100644 --- a/renderer/components/UI/Sidebar.js +++ b/renderer/components/UI/Sidebar.js @@ -1,10 +1,11 @@ import React from 'react' import styled from 'styled-components' +import { themeGet } from 'styled-system' import { Flex } from 'rebass' const SidebarBox = styled(Flex)` overflow: hidden; - box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.5); + box-shadow: ${themeGet('shadows.m')}; z-index: 1; ` diff --git a/renderer/components/UI/Toggle.js b/renderer/components/UI/Toggle.js index fd0d4776247..f6c691bbf55 100644 --- a/renderer/components/UI/Toggle.js +++ b/renderer/components/UI/Toggle.js @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' +import { themeGet } from 'styled-system' import { Flex } from 'rebass' import { BasicCheckbox, asField } from 'informed' import Text from './Text' @@ -43,7 +44,7 @@ const Wrapper = styled.div` background-color: white; transition: 0.4s; border-radius: 50%; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); + box-shadow: ${themeGet('shadows.xs')}; } input:checked + .slider { diff --git a/renderer/components/UI/Tooltip.js b/renderer/components/UI/Tooltip.js index 39e6482b845..62d413cf470 100644 --- a/renderer/components/UI/Tooltip.js +++ b/renderer/components/UI/Tooltip.js @@ -73,7 +73,7 @@ class Tooltip extends React.Component { bg="secondaryColor" border="1px solid gray" borderRadius={5} - boxShadow="0 3px 4px 0 rgba(30, 30, 30, 0.5)" + boxShadow="s" p={2} pl={3} > diff --git a/renderer/themes/base.js b/renderer/themes/base.js index 8a419dafaea..d24ac9b96fd 100644 --- a/renderer/themes/base.js +++ b/renderer/themes/base.js @@ -1,5 +1,12 @@ export const space = [0, 4, 8, 16, 32, 45, 72, 108] +export const shadows = { + xs: '0 2px 3px 0 rgba(0, 0, 0, 0.3)', + s: '0 2px 4px 0 rgba(0, 0, 0, 0.4)', + m: '0 2px 24px 0 rgba(0, 0, 0, 0.5)', + l: '0 20px 70px 0 rgba(0, 0, 0, 0.6)', +} + export const palette = { white: '#ffffff', black: '#000000', @@ -85,6 +92,7 @@ export default { letterSpacings, lineHeights, palette, + shadows, statuses, bars, } diff --git a/renderer/themes/dark/index.js b/renderer/themes/dark/index.js index a60a6363295..4d62ab7572c 100644 --- a/renderer/themes/dark/index.js +++ b/renderer/themes/dark/index.js @@ -1,4 +1,4 @@ import createThemeVariant from '../util' import colors from './colors' -export default createThemeVariant('dark', colors) +export default createThemeVariant('dark', { colors }) diff --git a/renderer/themes/light/index.js b/renderer/themes/light/index.js index c2688f6dcfd..a01c912f06d 100644 --- a/renderer/themes/light/index.js +++ b/renderer/themes/light/index.js @@ -1,4 +1,7 @@ import createThemeVariant from '../util' import colors from './colors' +import shadows from './shadows' -export default createThemeVariant('light', colors) +const theme = createThemeVariant('light', { colors, shadows }) + +export default theme diff --git a/renderer/themes/light/shadows.js b/renderer/themes/light/shadows.js new file mode 100644 index 00000000000..2e9494f99a7 --- /dev/null +++ b/renderer/themes/light/shadows.js @@ -0,0 +1,3 @@ +export default { + m: '0 2px 12px 0 rgba(0, 0, 0, 0.2)', +} diff --git a/renderer/themes/util.js b/renderer/themes/util.js index c614c35319d..7d090aaf36c 100644 --- a/renderer/themes/util.js +++ b/renderer/themes/util.js @@ -1,7 +1,10 @@ import { tint } from 'polished' +import merge from 'lodash/merge' import base from './base' -const createThemeVariant = (name, colors) => { +const createThemeVariant = (name, overrides = {}) => { + const { colors, ...rest } = overrides + const buttons = { normal: { backgroundColor: colors.tertiaryColor, @@ -82,7 +85,7 @@ const createThemeVariant = (name, colors) => { }, } - return { + const theme = { name, ...base, colors, @@ -90,6 +93,8 @@ const createThemeVariant = (name, colors) => { cards, messages, } + + return merge({}, theme, rest) } export default createThemeVariant diff --git a/stories/_general/color.stories.js b/stories/_general/color.stories.js index 724d1921a3d..2bf2bb49085 100644 --- a/stories/_general/color.stories.js +++ b/stories/_general/color.stories.js @@ -11,9 +11,8 @@ const Swatch = ({ name, color }) => ( diff --git a/test/unit/components/UI/__snapshots__/Dialog.spec.js.snap b/test/unit/components/UI/__snapshots__/Dialog.spec.js.snap index 4f71252f18c..fabc0b7dc87 100644 --- a/test/unit/components/UI/__snapshots__/Dialog.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Dialog.spec.js.snap @@ -63,7 +63,7 @@ exports[`component.UI.Dialog should render correctly with one button 1`] = `