Merge branch 'master' into next

LN-Zap · Aug 7, 2019 · 44fd4c0 · 44fd4c0
2 parents bdffdcb + f1e4d94
commit 44fd4c0
Show file tree

Hide file tree

Showing 26 changed files with 49 additions and 35 deletions.
diff --git 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
@@ -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
@@ -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
@@ -28,12 +28,7 @@ const Dialog = ({ header, onClose, buttons, width, children }) => {
   )
 
   return (
-    <Card
-      bg="primaryColor"
-      borderRadius={5}
-      boxShadow="0 3px 4px 0 rgba(0, 0, 0, 0.5)"
-      width={width}
-    >
+    <Card bg="primaryColor" borderRadius={5} boxShadow="m" width={width}>
       <CloseButton onClick={onClose} size="s" />
       <Flex
         alignItems="center"

diff --git a/renderer/components/UI/Dropdown.js b/renderer/components/UI/Dropdown.js
@@ -66,7 +66,7 @@ export const Menu = styled(Box)`
   overflow-y: auto;
   list-style-type: none;
   border-radius: 3px;
-  box-shadow: 0 3px 4px 0 rgba(30, 30, 30, 0.5);
+  box-shadow: ${themeGet('shadows.s')};
   right: ${props => (props.justify === 'right' ? 0 : null)};
 `
 

diff --git 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
@@ -42,7 +42,7 @@ class Notification extends React.Component {
     return (
       <Card
         borderRadius="5px"
-        boxShadow="0 3px 4px 0 rgba(30, 30, 30, 0.5)"
+        boxShadow="s"
         css={`
           cursor: pointer;
         `}

diff --git a/renderer/components/UI/Page.js b/renderer/components/UI/Page.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Flex } from 'rebass'
+import { themeGet } from 'styled-system'
 
 const Page = props => (
   <Flex
@@ -12,7 +13,7 @@ const Page = props => (
       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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,14 +85,16 @@ const createThemeVariant = (name, colors) => {
     },
   }
 
-  return {
+  const theme = {
     name,
     ...base,
     colors,
     buttons,
     cards,
     messages,
   }
+
+  return merge({}, theme, rest)
 }
 
 export default createThemeVariant
diff --git a/stories/_general/color.stories.js b/stories/_general/color.stories.js
@@ -11,9 +11,8 @@ const Swatch = ({ name, color }) => (
   <Element>
     <Flex mb={2}>
       <Card
-        // bg={color}
         borderRadius={8}
-        boxShadow="0 2px 6px rgba(0, 0, 0, 0.3)"
+        boxShadow="s"
         css={`
           background: ${color};
           height: 50px;

diff --git a/test/unit/components/UI/__snapshots__/Card.spec.js.snap b/test/unit/components/UI/__snapshots__/Card.spec.js.snap
@@ -5,7 +5,7 @@ exports[`component.UI.Card should render correctly 1`] = `
   as="section"
   bg="primaryColor"
   borderRadius={5}
-  boxShadow="0 2px 24px 0 rgba(0, 0, 0, 0.5)"
+  boxShadow="m"
   color="primaryText"
   p={3}
 >

diff --git 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`] = `
 <Styled(styled.div)
   bg="primaryColor"
   borderRadius={5}
-  boxShadow="0 3px 4px 0 rgba(0, 0, 0, 0.5)"
+  boxShadow="m"
   width={550}
 >
   <CloseButton
@@ -117,7 +117,7 @@ exports[`component.UI.Dialog should render correctly with two buttons 1`] = `
 <Styled(styled.div)
   bg="primaryColor"
   borderRadius={5}
-  boxShadow="0 3px 4px 0 rgba(0, 0, 0, 0.5)"
+  boxShadow="m"
   width={550}
 >
   <CloseButton

diff --git a/test/unit/components/UI/__snapshots__/Modal.spec.js.snap b/test/unit/components/UI/__snapshots__/Modal.spec.js.snap
@@ -34,7 +34,6 @@ exports[`component.UI.Modal should render correctly 1`] = `
   overflow: hidden;
   min-width: 900px;
   min-height: 425px;
-  box-shadow: 0 20px 70px rgba(0,0,0,0.55);
 }
 
 .c1 {

diff --git a/test/unit/components/UI/__snapshots__/Notification.spec.js.snap b/test/unit/components/UI/__snapshots__/Notification.spec.js.snap
@@ -50,7 +50,7 @@ exports[`component.UI.Notification should render correctly 1`] = `
   padding-right: 16px;
   border-radius: 5px;
   border-radius: 5px;
-  box-shadow: 0 3px 4px 0 rgba(30,30,30,0.5);
+  box-shadow: s;
   cursor: pointer;
 }
 

diff --git a/test/unit/components/UI/__snapshots__/Page.spec.js.snap b/test/unit/components/UI/__snapshots__/Page.spec.js.snap
@@ -14,7 +14,6 @@ exports[`component.UI.Page should render correctly 1`] = `
   overflow: hidden;
   min-width: 900px;
   min-height: 425px;
-  box-shadow: 0 20px 70px rgba(0,0,0,0.55);
 }
 
 <article

diff --git a/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap b/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap
@@ -14,7 +14,6 @@ exports[`component.UI.Sidebar should render correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   overflow: hidden;
-  box-shadow: 0 2px 24px 0 rgba(0,0,0,0.5);
   z-index: 1;
 }
 

diff --git a/test/unit/components/UI/__snapshots__/Toggle.spec.js.snap b/test/unit/components/UI/__snapshots__/Toggle.spec.js.snap
@@ -50,7 +50,7 @@ exports[`component.UI.Toggle should render correctly 1`] = `
   -webkit-transition: 0.4s;
   transition: 0.4s;
   border-radius: 50%;
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
+  box-shadow: 0 2px 3px 0 rgba(0,0,0,0.3);
 }
 
 .c0 input:checked + .slider {

diff --git a/yarn.lock b/yarn.lock
@@ -6875,10 +6875,10 @@ electron-updater@4.1.2:
     pako "^1.0.10"
     semver "^6.2.0"
 
-electron@5.0.8:
-  version "5.0.8"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-5.0.8.tgz#b240726ce9e3510d3af30a981486c9850462c718"
-  integrity sha512-wkUVE2GaYCsqQTsISSHWkIkcdpwLwZ1jhzAXSFFoSzsTgugmzhX60rJjIccotUmZ0iPzw+u4ahfcaJ0eslrPNQ==
+electron@5.0.9:
+  version "5.0.9"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-5.0.9.tgz#d7000dcb69b74a85b81cb168e7ffdcac254464e5"
+  integrity sha512-yCt+lnQr47OWB3Oei19odMVB8VKzecTwZLm75PB56f/keeJAM3UqV7+dtjKlPdKt0hJ4sWxe4vjxGPO/oZDv7A==
   dependencies:
     "@types/node" "^10.12.18"
     electron-download "^4.1.0"