Merge pull request LN-Zap#2685 from LN-Zap/renovate/rebass-4.x

fix(deps): update dependency rebass to v4

.storybook/config.js

@@ -17,10 +17,10 @@ const BackgroundPrimaryWithTheme = withTheme(({ theme, ...rest }) => (
   <BackgroundPrimary
     className={theme.name}
     p={3}
-    css={`
-      height: 100vh;
-      overflow-y: auto !important;
-    `}
+    height="100vh"
+    sx={{
+      overflowY: 'auto !important',
+    }}
     {...rest}
   />
 ))

electron/main.js

@@ -162,7 +162,7 @@ app.on('ready', async () => {
   mainLog.timeEnd('Time until app is ready')
 
   // Get the users preference so that we can:
-  //  - set the background colour of the window to avoid unwanted flicker.
+  //  - set the background color of the window to avoid unwanted flicker.
   //  - Initialise the Language menu with the users locale selected by default.
   //  - Enable autoupdates based on user preferences.
   let autoupdate = {}

package.json

@@ -306,7 +306,8 @@
   },
   "dependencies": {
     "@hot-loader/react-dom": "16.9.0",
-    "@rebass/components": "4.0.0-1",
+    "@rebass/forms": "4.0.3",
+    "@styled-system/theme-get": "5.1.0",
     "axios": "0.19.0",
     "bip21": "2.0.2",
     "bip39-en": "1.1.1",
@@ -350,7 +351,7 @@
     "react-spring": "8.0.27",
     "react-textfit": "1.1.0",
     "react-virtualized": "9.21.1",
-    "rebass": "3.2.2",
+    "rebass": "4.0.3",
     "redux": "4.0.4",
     "redux-electron-ipc": "https://github.com/LN-Zap/redux-electron-ipc#b513220d085ad3e96e459d7efcdfc37bf75417b6",
     "redux-thunk": "2.3.0",

renderer/components/Activity/Activity.js

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { space } from 'styled-system'
 import { List, AutoSizer } from 'react-virtualized'
 import { FormattedDate, injectIntl } from 'react-intl'
-import { Box } from 'rebass'
+import { Box } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import { Bar, Heading, Panel } from 'components/UI'
 import ActivityActions from 'containers/Activity/ActivityActions'

renderer/components/Activity/ActivityActions/ActivityActions.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { injectIntl } from 'react-intl'
-import { Flex } from 'rebass'
+import { Box, Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import { Card } from 'components/UI'
 import ActivityFilter from './ActivityFilter'
@@ -21,12 +21,14 @@ const ActivityActions = ({
 }) => (
   <Card px={3} py={2} width={1} {...rest}>
     <Flex alignItems="center" as="section" justifyContent="space-between">
-      <ActivitySearch
-        placeholder={intl.formatMessage({ ...messages.search_placeholder })}
-        searchText={searchText}
-        updateSearchText={updateSearchText}
-        width={1}
-      />
+      <Box sx={{ flex: 1 }}>
+        <ActivitySearch
+          placeholder={intl.formatMessage({ ...messages.search_placeholder })}
+          searchText={searchText}
+          updateSearchText={updateSearchText}
+          width={1}
+        />
+      </Box>
       <Flex alignItems="center" as="section" justifyContent="flex-end">
         <ActivityFilter changeFilter={changeFilter} filter={filter} filters={filters} mx={3} />
 

renderer/components/Activity/ActivityActions/ActivityFilter.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { FormattedMessage } from 'react-intl'
-import { Flex } from 'rebass'
+import { Flex } from 'rebass/styled-components'
 import { Dropdown } from 'components/UI'
 import { Label } from 'components/Form'
 import messages from './messages'

renderer/components/Activity/ActivityActions/ActivitySearch.js

@@ -10,14 +10,16 @@ const ActivitySearch = ({ searchText, placeholder, updateSearchText, ...rest })
   return (
     <Form {...rest}>
       <Input
-        border={0}
         field="activity-search"
         highlightOnValid={false}
         id="activity-search"
         initialValue={searchText}
         mr={2}
         onValueChange={setValue}
         placeholder={placeholder}
+        sx={{
+          borderWidth: 0,
+        }}
         type="search"
         variant="thin"
       />

renderer/components/Activity/ActivityListItem.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Flex } from 'rebass'
+import { Box, Flex } from 'rebass/styled-components'
 import PropTypes from 'prop-types'
 import Invoice from 'containers/Activity/Invoice'
 import Payment from 'containers/Activity/Payment'
@@ -42,7 +42,7 @@ const ActivityListItem = ({ activity, ...rest }) => {
       <Text color="gray" mr={10} textAlign="center" width={24}>
         <ActivityIcon activity={activity} />
       </Text>
-      <Box css={activity.isSending ? null : { cursor: 'pointer' }} width={1}>
+      <Box sx={activity.isSending ? null : { cursor: 'pointer' }} width={1}>
         <ListItem {...listItemProps} />
       </Box>
     </Flex>

renderer/components/Activity/ActivityModal/ActivityModal.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Box } from 'rebass'
+import { Box } from 'rebass/styled-components'
 import { InvoiceModal } from 'components/Activity/InvoiceModal'
 import { PaymentModal } from 'components/Activity/PaymentModal'
 import { TransactionModal } from 'components/Activity/TransactionModal'

renderer/components/Activity/Invoice/Invoice.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
-import { Box, Flex } from 'rebass'
+import { Box, Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import { Text } from 'components/UI'
 import { CryptoValue, FiatValue } from 'containers/UI'

renderer/components/Activity/Payment/Payment.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { FormattedMessage, FormattedTime, injectIntl } from 'react-intl'
-import { Box, Flex } from 'rebass'
+import { Box, Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import truncateNodePubkey from '@zap/utils/truncateNodePubkey'
 import { Message, Text } from 'components/UI'
@@ -72,7 +72,7 @@ const Payment = ({ payment, showActivityModal, cryptoUnitName, showErrorDetailsD
         data-hint={intl.formatMessage({ ...messages.amount })}
         width={1 / 4}
       >
-        <Box css={payment.status == 'failed' ? { opacity: 0.3 } : null}>
+        <Box opacity={payment.status == 'failed' ? 0.3 : null}>
           <Text mb={1} textAlign="right">
             {'- '}
             <CryptoValue value={payment.value_sat} />

renderer/components/Activity/PaymentModal/PaymentModal.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { FormattedDate, FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
-import { Flex } from 'rebass'
+import { Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import { Bar, DataRow, Header, Panel, Text } from 'components/UI'
 import { extractMemo } from '@zap/utils/crypto'

renderer/components/Activity/Transaction/Transaction.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
-import { Box, Flex } from 'rebass'
+import { Box, Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import { Message, Text } from 'components/UI'
 import { CryptoValue, FiatValue } from 'containers/UI'
@@ -70,7 +70,7 @@ const Transaction = ({ transaction, showActivityModal, cryptoUnitName, intl }) =
         data-hint={intl.formatMessage({ ...messages.amount })}
         width={1 / 4}
       >
-        <Box css={transaction.status == 'failed' ? { opacity: 0.2 } : null}>
+        <Box opactiy={transaction.status == 'failed' ? 0.2 : null}>
           <Text color={isIncoming ? 'superGreen' : null} mb={1} textAlign="right">
             {isIncoming ? `+ ` : `- `}
             <CryptoValue value={amount} />

renderer/components/Activity/TransactionModal/TransactionModal.js

@@ -8,7 +8,7 @@ import {
   FormattedNumber,
   injectIntl,
 } from 'react-intl'
-import { Flex } from 'rebass'
+import { Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import blockExplorer from '@zap/utils/blockExplorer'
 import { Bar, DataRow, Header, Link, Panel, Span, Text, Button } from 'components/UI'
@@ -85,18 +85,6 @@ class TransactionModal extends React.PureComponent {
     return (
       <Panel {...rest}>
         <Panel.Header>
-          <Button
-            css={`
-              position: absolute;
-              bottom: 5px;
-              right: 25px;
-            `}
-            icon={Download}
-            onClick={this.saveInvoice}
-            variant="secondary"
-          >
-            <FormattedMessage {...messages.download_pdf} />
-          </Button>
           <Header
             logo={<Onchain height="45px" width="45px" />}
             subtitle={<FormattedMessage {...messages.subtitle} />}
@@ -271,6 +259,20 @@ class TransactionModal extends React.PureComponent {
             }
           />
         </Panel.Body>
+        <Panel.Footer>
+          <Button
+            icon={Download}
+            onClick={this.saveInvoice}
+            sx={{
+              position: 'absolute',
+              bottom: 3,
+              right: 4,
+            }}
+            variant="secondary"
+          >
+            <FormattedMessage {...messages.download_pdf} />
+          </Button>
+        </Panel.Footer>
       </Panel>
     )
   }

renderer/components/App/App.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
-import { Flex } from 'rebass'
+import { Flex } from 'rebass/styled-components'
 import createScheduler from '@zap/utils/scheduler'
 import Wallet from 'containers/Wallet'
 import Activity from 'containers/Activity'

renderer/components/Autopay/Autopay.js

@@ -1,38 +1,23 @@
 import React from 'react'
 import { ThemeProvider } from 'styled-components'
 import { FormattedMessage } from 'react-intl'
-import { createThemeVariant } from 'themes/util'
+import { autopay } from 'themes'
 import { Panel, Heading } from 'components/UI'
 import AutopayList from 'containers/Autopay/AutopayList'
 import AutopayMerchantList from 'containers/Autopay/AutopayMerchantList'
 import AutopayCreateModal from 'containers/Autopay/AutopayCreateModal'
-import { palette } from 'themes/base'
 import AutopayHeader from './AutopayHeader'
 import AutopayActions from './AutopayActions'
 import messages from './messages'
 
-const customiseTheme = theme => {
-  return createThemeVariant('autopay', {
-    colors: {
-      ...theme.colors,
-      lightningOrange: palette.superBlue,
-    },
-  })
-}
-
 const Autopay = props => (
-  <ThemeProvider theme={customiseTheme}>
+  <ThemeProvider theme={autopay}>
     <>
       <Panel {...props}>
         <Panel.Header mx={4}>
           <AutopayHeader />
         </Panel.Header>
-        <Panel.Body
-          css={`
-            overflow-y: overlay;
-            overflow-x: hidden;
-          `}
-        >
+        <Panel.Body sx={{ overflowY: 'overlay', overflowX: 'hidden' }}>
           <AutopayList />
           <Heading.h1 mt={4} mx={4}>
             <FormattedMessage {...messages.merchant_list_title} />

renderer/components/Autopay/AutopayActions.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box } from 'rebass'
+import { Box } from 'rebass/styled-components'
 import AutopaySearch from 'containers/Autopay/AutopaySearch'
 
 const AutopayActions = props => (

renderer/components/Autopay/AutopayAddButton.js

@@ -1,37 +1,30 @@
 import React from 'react'
-import { Card, Flex } from 'rebass'
-import { themeGet } from 'styled-system'
+import { Card, Flex } from 'rebass/styled-components'
+import { themeGet } from '@styled-system/theme-get'
 import styled, { withTheme } from 'styled-components'
 import { tint } from 'polished'
 import { Text } from 'components/UI'
 
 const Gradient = styled(Card)`
   background: linear-gradient(
     to bottom,
-    ${props => tint(0.2, props.theme.colors[props.bg])},
-    ${props => props.theme.colors[props.bg]}
+    ${props => tint(0.2, themeGet('colors.primaryAccent')(props))},
+    ${themeGet('colors.primaryAccent')}
   );
 `
 
 const AutopayAddButton = props => {
   return (
     <Gradient
-      bg="lightningOrange"
-      borderRadius="50%"
-      boxShadow={`0 0 24px 0 ${themeGet('colors.lightningOrange')(props)}`}
-      css={`
-        height: 35px;
-      `}
-      width={35}
+      bg="primaryAccent"
+      size={35}
+      sx={{
+        boxShadow: `0 0 24px 0 ${themeGet('colors.primaryAccent')(props)}`,
+        borderRadius: '50%',
+      }}
       {...props}
     >
-      <Flex
-        alignItems="center"
-        css={`
-          height: 100%;
-        `}
-        justifyContent="center"
-      >
+      <Flex alignItems="center" height="100%" justifyContent="center">
         <Text fontSize="xl">+</Text>
       </Flex>
     </Gradient>

renderer/components/Autopay/AutopayCardView.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { themeGet } from 'styled-system'
-import { Box, Flex } from 'rebass'
+import { themeGet } from '@styled-system/theme-get'
+import { Box, Flex } from 'rebass/styled-components'
 import { Card, Heading } from 'components/UI'
 import AutopayAddButton from './AutopayAddButton'
 import AutopayLimitBadge from './AutopayLimitBadge'