Skip to content
Permalink
Browse files

feat(ui): mark items with autopay enabled

  • Loading branch information...
korhaliv committed Mar 21, 2019
1 parent 887a298 commit 805d0fe815f923cb6c101ee0697b74f2ee1307ec
@@ -5,6 +5,7 @@ import { themeGet } from 'styled-system'
import { Box, Flex } from 'rebass'
import { Card, Heading } from 'components/UI'
import AutopayAddButton from './AutopayAddButton'
import AutopayLimitBadge from './AutopayLimitBadge'

const CardWithBg = styled(Card)`
position: relative;
@@ -47,7 +48,7 @@ const TextOverlay = styled(Overlay)`
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
`

const AutopayCardView = ({ merchant: { image, nickname, pubkey }, onClick, ...rest }) => (
const AutopayCardView = ({ merchant: { image, nickname, pubkey, isActive }, onClick, ...rest }) => (
<Box {...rest} onClick={() => onClick(`${pubkey}`)}>
<CardWithBg mb="12px" src={image}>
<GradientOverlay />
@@ -57,7 +58,7 @@ const AutopayCardView = ({ merchant: { image, nickname, pubkey }, onClick, ...re
</Heading.h1>
</TextOverlay>
<Overlay alignItems="flex-end" justifyContent="center" mt="12px">
<AutopayAddButton />
{isActive ? <AutopayLimitBadge /> : <AutopayAddButton />}
</Overlay>
</CardWithBg>
</Box>
@@ -0,0 +1,35 @@
import React from 'react'
import { Card, Flex, Box } from 'rebass'
import { themeGet } from 'styled-system'
import styled, { withTheme } from 'styled-components'
import { tint } from 'polished'
import Check from 'components/Icon/Check'

const Gradient = styled(Card)`
background: linear-gradient(
to bottom,
${props => tint(0.2, props.theme.colors[props.bg])},
${props => props.theme.colors[props.bg]}
);
`

const AutopayLimitBadge = props => {
return (
<Gradient
bg="lightningOrange"
borderRadius="50%"
boxShadow={`0 0 24px 0 ${themeGet('colors.lightningOrange')(props)}`}
css={{ height: '35px' }}
width={35}
{...props}
>
<Flex alignItems="center" css={{ height: '100%' }} justifyContent="center">
<Box color="white">
<Check height={20} width={20} />
</Box>
</Flex>
</Gradient>
)
}

export default withTheme(AutopayLimitBadge)
@@ -137,12 +137,16 @@ autopaySelectors.selectedMerchant = createSelector(
autopaySelectors.filteredMerchants = createSelector(
autopaySelectors.merchants,
autopaySelectors.searchQuery,
(merchants, searchQuery) => {
autopaySelectors.autopayList,
(merchants, searchQuery, autopayList) => {
const addIsActive = m => ({ ...m, isActive: [m.pubkey] in autopayList })
if (!searchQuery) {
return merchants
return merchants.map(addIsActive)
}
const cleanedSearchQuery = searchQuery.toLowerCase()
return merchants.filter(m => m.nickname.toLowerCase().includes(cleanedSearchQuery))
return merchants
.filter(m => m.nickname.toLowerCase().includes(cleanedSearchQuery))
.map(addIsActive)
}
)

0 comments on commit 805d0fe

Please sign in to comment.
You can’t perform that action at this time.