chore: add icon support for theme on send and receive icons;

app/assets/images/menu_icon_light.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" ?>
+<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
+<svg enable-background="new 0 0 256 256" height="256px" id="Layer_1" version="1.1" viewBox="0 0 256 256" width="256px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <circle fill="#222" cx="57.6" cy="128" r="20"/>
+  <circle fill="#222" cx="128" cy="128" r="20"/>
+  <circle fill="#222" cx="198.4" cy="128" r="20"/>
+</svg>

app/assets/images/plus_icon_light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#222" d="M24 9h-9v-9h-6v9h-9v6h9v9h6v-9h9z"/></svg>

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<string>,
   loadAddresses: () => void,
   getNewAddress: ({ type: addressType }) => void,
+  theme: AppTheme,
 };
 
 type State = {
   showAdditionalOptions: boolean,
 };
 
-export class ReceiveView extends PureComponent<Props, State> {
+class Component extends PureComponent<Props, State> {
   state = {
     showAdditionalOptions: false,
   };
@@ -98,13 +107,22 @@ export class ReceiveView extends PureComponent<Props, State> {
   };
 
   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 (
       <div>
         <Label value='Shielded Address' />
@@ -116,8 +134,8 @@ export class ReceiveView extends PureComponent<Props, State> {
         ))}
         <Row justifyContent='space-between'>
           <ActionButton onClick={() => this.generateNewAddress('shielded')}>
-            <ActionIcon
-              src={PlusIcon}
+            <PlusIcon
+              src={plusIcon}
               alt='New Shielded Address'
             />
             <ActionText value='New Shielded Address' />
@@ -128,7 +146,7 @@ export class ReceiveView extends PureComponent<Props, State> {
           >
             <ActionIcon
               isActive={showAdditionalOptions}
-              src={MenuIcon}
+              src={seeMoreIcon}
               alt='More Options'
             />
             <ActionText value={buttonText} />
@@ -161,7 +179,7 @@ export class ReceiveView extends PureComponent<Props, State> {
                     <WalletAddress key={addr} address={addr} />
                   ))}
                   <ActionButton onClick={() => this.generateNewAddress('transparent')}>
-                    <ActionIcon src={PlusIcon} alt='New Transparent Address' />
+                    <PlusIcon src={plusIcon} alt='New Transparent Address' />
                     <ActionText value='New Transparent Address' />
                   </ActionButton>
                 </animated.div>
@@ -173,3 +191,5 @@ export class ReceiveView extends PureComponent<Props, State> {
     );
   }
 }
+
+export const ReceiveView = withTheme(Component);

app/views/send.js

@@ -1,11 +1,12 @@
 // @flow
 
 import React, { Fragment, PureComponent } from 'react';
-import styled, { keyframes } from 'styled-components';
+import styled, { withTheme, keyframes } from 'styled-components';
 import { BigNumber } from 'bignumber.js';
 import { Transition, animated } from 'react-spring';
 
 import { FEES } from '../constants/fees';
+import { DARK } from '../constants/themes';
 
 import { InputLabelComponent } from '../components/input-label';
 import { InputComponent } from '../components/input';
@@ -20,17 +21,16 @@ import { ConfirmDialogComponent } from '../components/confirm-dialog';
 import { formatNumber } from '../utils/format-number';
 import { ascii2hex } from '../utils/ascii-to-hexadecimal';
 
-import type { SendTransactionInput } from '../containers/send';
-import type { State as SendState } from '../redux/modules/send';
-
 import SentIcon from '../assets/images/transaction_sent_icon_dark.svg';
-import MenuIcon from '../assets/images/menu_icon.svg';
+import MenuIconDark from '../assets/images/menu_icon_dark.svg';
+import MenuIconLight from '../assets/images/menu_icon_light.svg';
 import ValidIcon from '../assets/images/green_check_dark.png';
 import InvalidIcon from '../assets/images/error_icon_dark.png';
 import LoadingIcon from '../assets/images/sync_icon_dark.png';
 import ArrowUpIcon from '../assets/images/arrow_up.png';
 
-import { appTheme } from '../theme';
+import type { SendTransactionInput } from '../containers/send';
+import type { State as SendState } from '../redux/modules/send';
 
 const rotate = keyframes`
   from {
@@ -263,6 +263,7 @@ type Props = {
   loadAddresses: () => void,
   loadZECPrice: () => void,
   getAddressBalance: ({ address: string }) => void,
+  theme: AppTheme,
 };
 
 type State = {
@@ -287,7 +288,7 @@ const initialState = {
   isHexMemo: false,
 };
 
-export class SendView extends PureComponent<Props, State> {
+class Component extends PureComponent<Props, State> {
   state = initialState;
 
   componentDidMount() {
@@ -396,14 +397,14 @@ export class SendView extends PureComponent<Props, State> {
   };
 
   renderValidationStatus = () => {
-    const { isToAddressValid } = this.props;
+    const { isToAddressValid, theme } = this.props;
 
     return isToAddressValid ? (
       <ValidateWrapper alignItems='center'>
         <ValidateStatusIcon src={ValidIcon} />
         <ValidateItemLabel
           value='VALID'
-          color={appTheme.colors.transactionReceived}
+          color={theme.colors.transactionReceived}
         />
       </ValidateWrapper>
     ) : (
@@ -411,7 +412,7 @@ export class SendView extends PureComponent<Props, State> {
         <ValidateStatusIcon src={InvalidIcon} />
         <ValidateItemLabel
           value='INVALID'
-          color={appTheme.colors.transactionSent}
+          color={theme.colors.transactionSent}
         />
       </ValidateWrapper>
     );
@@ -500,7 +501,7 @@ export class SendView extends PureComponent<Props, State> {
 
   render() {
     const {
-      addresses, balance, zecPrice, isSending, error, operationId,
+      addresses, balance, zecPrice, isSending, error, operationId, theme,
     } = this.props;
     const {
       showFee, from, amount, to, memo, fee, feeType,
@@ -524,6 +525,10 @@ export class SendView extends PureComponent<Props, State> {
       append: 'USD $',
     });
 
+    const seeMoreIcon = theme.mode === DARK
+      ? MenuIconDark
+      : MenuIconLight;
+
     return (
       <RowComponent id='send-wrapper' justifyContent='space-between'>
         <FormWrapper>
@@ -583,7 +588,7 @@ export class SendView extends PureComponent<Props, State> {
             }))
             }
           >
-            <SeeMoreIcon src={MenuIcon} alt='Show more icon' />
+            <SeeMoreIcon src={seeMoreIcon} alt='Show more icon' />
             <TextComponent value={`${showFee ? 'Hide' : 'Show'} Additional Options`} />
           </ShowFeeButton>
           <RevealsMain>
@@ -617,7 +622,7 @@ export class SendView extends PureComponent<Props, State> {
                             onChange={this.handleChange('fee')}
                             value={String(fee)}
                             disabled={feeType !== FEES.CUSTOM}
-                            bgColor={appTheme.colors.blackTwo}
+                            bgColor={theme.colors.blackTwo}
                             name='fee'
                           />
                         </ColumnComponent>
@@ -625,7 +630,7 @@ export class SendView extends PureComponent<Props, State> {
                           <SelectComponent
                             placement='top'
                             value={String(feeType)}
-                            bgColor={appTheme.colors.blackTwo}
+                            bgColor={theme.colors.blackTwo}
                             onChange={this.handleChangeFeeType}
                             options={Object.keys(FEES).map(cur => ({
                               label: cur.toLowerCase(),
@@ -690,3 +695,5 @@ export class SendView extends PureComponent<Props, State> {
     );
   }
 }
+
+export const SendView = withTheme(Component);