diff --git a/app/assets/images/menu_icon.svg b/app/assets/images/menu_icon_dark.svg similarity index 100% rename from app/assets/images/menu_icon.svg rename to app/assets/images/menu_icon_dark.svg diff --git a/app/assets/images/menu_icon_light.svg b/app/assets/images/menu_icon_light.svg new file mode 100644 index 0000000..2297682 --- /dev/null +++ b/app/assets/images/menu_icon_light.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/app/assets/images/plus_icon.svg b/app/assets/images/plus_icon_dark.svg similarity index 100% rename from app/assets/images/plus_icon.svg rename to app/assets/images/plus_icon_dark.svg diff --git a/app/assets/images/plus_icon_light.svg b/app/assets/images/plus_icon_light.svg new file mode 100644 index 0000000..e4bf654 --- /dev/null +++ b/app/assets/images/plus_icon_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/views/receive.js b/app/views/receive.js index d6af6ac..a5d7d59 100644 --- a/app/views/receive.js +++ b/app/views/receive.js @@ -1,16 +1,20 @@ // @flow import React, { PureComponent } from 'react'; -import styled from 'styled-components'; +import styled, { withTheme } from 'styled-components'; import { Transition, animated } from 'react-spring'; +import { DARK } from '../constants/themes'; + import { InputLabelComponent } from '../components/input-label'; import { RowComponent } from '../components/row'; import { TextComponent } from '../components/text'; import { WalletAddress } from '../components/wallet-address'; -import MenuIcon from '../assets/images/menu_icon.svg'; -import PlusIcon from '../assets/images/plus_icon.svg'; +import MenuIconDark from '../assets/images/menu_icon_dark.svg'; +import MenuIconLight from '../assets/images/menu_icon_light.svg'; +import PlusIconDark from '../assets/images/plus_icon_dark.svg'; +import PlusIconLight from '../assets/images/plus_icon_light.svg'; import type { addressType } from '../redux/modules/receive'; @@ -54,7 +58,11 @@ const ActionIcon = styled.img` border: 1px solid ${props => props.theme.colors.text}; border-radius: 100%; margin-right: 11.5px; - padding: 5px; + padding: 2px; +`; + +const PlusIcon = styled(ActionIcon)` + padding: 6.5px; `; const RevealsMain = styled.div` @@ -70,13 +78,14 @@ type Props = { addresses: Array, loadAddresses: () => void, getNewAddress: ({ type: addressType }) => void, + theme: AppTheme, }; type State = { showAdditionalOptions: boolean, }; -export class ReceiveView extends PureComponent { +class Component extends PureComponent { state = { showAdditionalOptions: false, }; @@ -98,13 +107,22 @@ export class ReceiveView extends PureComponent { }; render() { - const { addresses } = this.props; + const { addresses, theme } = this.props; const { showAdditionalOptions } = this.state; const buttonText = `${showAdditionalOptions ? 'Hide' : 'Show'} Other Address Types`; const shieldedAddresses = addresses.filter(addr => addr.startsWith('z')); const transparentAddresses = addresses.filter(addr => addr.startsWith('t')); + + const seeMoreIcon = theme.mode === DARK + ? MenuIconDark + : MenuIconLight; + + const plusIcon = theme.mode === DARK + ? PlusIconDark + : PlusIconLight; + return (