chore: add icon support for theme on send and receive icons;
This commit is contained in:
parent
5d8c7bd9df
commit
18710f69cf
Before Width: | Height: | Size: 502 B After Width: | Height: | Size: 502 B |
|
@ -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>
|
After Width: | Height: | Size: 499 B |
Before Width: | Height: | Size: 146 B After Width: | Height: | Size: 146 B |
|
@ -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>
|
After Width: | Height: | Size: 146 B |
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue