zecfoundation
/
zepio
mirror of https://github.com/ZcashFoundation/zepio.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feature: update fontSizes and remove react-icons in wallet summary

This commit is contained in:
George Lima 2018-12-12 16:04:44 -03:00
parent 922c62eb38
commit c0ace32d0b
1 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/components/wallet-summary.js
View File

@ -1,11 +1,11 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { IoIosMore } from 'react-icons/io';
import { TextComponent } from './text'; import { TextComponent } from './text';
import { RowComponent } from './row'; import { RowComponent } from './row';
import { DropdownComponent } from './dropdown'; import { DropdownComponent } from './dropdown';
import MenuIcon from '../assets/images/menu_icon.svg';
import theme from '../theme'; import theme from '../theme';
@ -21,7 +21,7 @@ const Wrapper = styled.div`
const AllAddresses = styled(TextComponent)` const AllAddresses = styled(TextComponent)`
margin-bottom: 2.5px; margin-bottom: 2.5px;
font-size: 0.625em; font-size: ${props => `${props.theme.fontSize.text}em`};
`; `;
const ValueBox = styled.div` const ValueBox = styled.div`
@ -48,9 +48,10 @@ const SeeMoreButton = styled.button`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
outline: none; outline: none;
border-style: solid;
border-radius: 100%; border-radius: 100%;
border-width: 1px; border-width: 1px;
border-color: ${props => (props.isOpen ? props.theme.colors.activeItem : props.theme.colors.text)}; border-color: ${props => (props.isOpen ? props.theme.colors.activeItem : props.theme.colors.inactiveItem)};
background-color: transparent; background-color: transparent;
padding: 5px; padding: 5px;
cursor: pointer; cursor: pointer;
@ -63,6 +64,11 @@ const SeeMoreButton = styled.button`
} }
`; `;
const SeeMoreIcon = styled.img`
width: 25px;
height: 25px;
`;
type Props = { type Props = {
total: number, total: number,
shielded: number, shielded: number,
@ -81,26 +87,26 @@ export const WalletSummaryComponent = ({
label='All Addresses' label='All Addresses'
renderTrigger={(toggleVisibility, isOpen) => ( renderTrigger={(toggleVisibility, isOpen) => (
<SeeMoreButton onClick={toggleVisibility} isOpen={isOpen}> <SeeMoreButton onClick={toggleVisibility} isOpen={isOpen}>
<IoIosMore color={theme.colors.text} size={15} /> <SeeMoreIcon src={MenuIcon} alt='Menu Icon' />
</SeeMoreButton> </SeeMoreButton>
)} )}
options={addresses.map(addr => ({ label: addr, onClick: x => x }))} options={addresses.map(addr => ({ label: addr, onClick: x => x }))}
/> />
<AllAddresses value='ALL ADDRESSES' isBold /> <AllAddresses value='ALL ADDRESSES' isBold />
<ValueBox> <ValueBox>
<TextComponent size='2.625em' value={`ZEC ${formatNumber(total)}`} isBold /> <TextComponent size={theme.fontSize.zecValueBase * 2.5} value={`ZEC ${formatNumber(total)}`} isBold />
<USDValue value={`USD $${formatNumber(total * dollarValue)}`} size='1.750em' /> <USDValue value={`USD $${formatNumber(total * dollarValue)}`} size={theme.fontSize.zecValueBase * 2} />
</ValueBox> </ValueBox>
<RowComponent> <RowComponent>
<ValueBox> <ValueBox>
<ShieldedValue value='&#9679; SHIELDED' isBold size='0.625em' /> <ShieldedValue value='&#9679; SHIELDED' isBold />
<TextComponent value={`ZEC ${formatNumber(shielded)}`} isBold size='1.125em' /> <TextComponent value={`ZEC ${formatNumber(shielded)}`} isBold size={theme.fontSize.zecValueBase} />
<USDValue value={`USD $${formatNumber(shielded * dollarValue)}`} size='0.750em' /> <USDValue value={`USD $${formatNumber(shielded * dollarValue)}`} />
</ValueBox> </ValueBox>
<ValueBox> <ValueBox>
<Label value='&#9679; TRANSPARENT' isBold size='0.625em' /> <Label value='&#9679; TRANSPARENT' isBold />
<TextComponent value={`ZEC ${formatNumber(transparent)}`} isBold size='1.125em' /> <TextComponent value={`ZEC ${formatNumber(transparent)}`} isBold size={theme.fontSize.zecValueBase} />
<USDValue value={`USD $${formatNumber(transparent * dollarValue)}`} size='0.750em' /> <USDValue value={`USD $${formatNumber(transparent * dollarValue)}`} />
</ValueBox> </ValueBox>
</RowComponent> </RowComponent>
</Wrapper> </Wrapper>