feature: update fontSizes and remove react-icons in wallet summary
This commit is contained in:
parent
922c62eb38
commit
c0ace32d0b
|
@ -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='● SHIELDED' isBold size='0.625em' />
|
<ShieldedValue value='● 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='● TRANSPARENT' isBold size='0.625em' />
|
<Label value='● 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>
|
||||||
|
|
Loading…
Reference in New Issue