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

hotfix: TransactionsDetails dimensions

This commit is contained in:
George Lima 2018-12-19 15:30:38 -03:00
parent a9e5678e5e
commit ed0622c22f
1 changed files with 24 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/components/transaction-details.js
View File

@ -17,7 +17,7 @@ import formatNumber from '../utils/formatNumber';
import truncateAddress from '../utils/truncateAddress'; import truncateAddress from '../utils/truncateAddress';
const Wrapper = styled.div` const Wrapper = styled.div`
width: 100%; width: 30vw;
background-color: ${props => props.theme.colors.background}; background-color: ${props => props.theme.colors.background};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -52,17 +52,28 @@ const CloseIconImg = styled.img`
const InfoRow = styled(RowComponent)` const InfoRow = styled(RowComponent)`
justify-content: space-between; justify-content: space-between;
width: 100%; align-items: center;
padding: 15px 30px; width: 30vw;
height: 80px;
padding: 0 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`; `;
const Divider = styled.div` const Divider = styled.div`
width: 100%; width: 100%;
background-color: ${props => props.theme.colors.transactionsDetailsLabel}; background-color: ${props => props.theme.colors.transactionsDetailsLabel};
height: 2px; height: 1px;
opacity: 0.5; opacity: 0.5;
`; `;
const Label = styled(TextComponent)`
font-weight: ${props => props.theme.fontWeight.bold};
color: ${props => props.theme.colors.transactionsDetailsLabel};
margin-bottom: 5px;
`;
type Props = { type Props = {
amount: number, amount: number,
type: 'send' | 'receive', type: 'send' | 'receive',
@ -74,7 +85,7 @@ type Props = {
handleClose: () => void, handleClose: () => void,
}; };
export const TransactionDetails = ({ export const TransactionDetailsComponent = ({
amount, amount,
type, type,
zecPrice, zecPrice,
@ -91,7 +102,7 @@ export const TransactionDetails = ({
<CloseIconImg src={CloseIcon} onClick={handleClose} /> <CloseIconImg src={CloseIcon} onClick={handleClose} />
</CloseIconWrapper> </CloseIconWrapper>
<TitleWrapper> <TitleWrapper>
<TextComponent value='Transactions Details' align='center' /> <TextComponent value='Transaction Details' align='center' />
</TitleWrapper> </TitleWrapper>
<Icon <Icon
src={isReceived ? ReceivedIcon : SentIcon} src={isReceived ? ReceivedIcon : SentIcon}
@ -120,11 +131,7 @@ export const TransactionDetails = ({
/> />
<InfoRow> <InfoRow>
<ColumnComponent> <ColumnComponent>
<TextComponent <Label value='DATE' />
value='DATE'
isBold
color={theme.colors.transactionsDetailsLabel}
/>
<TextComponent value={dateFns.format(date, 'MMMM D, YYYY HH:MMA')} /> <TextComponent value={dateFns.format(date, 'MMMM D, YYYY HH:MMA')} />
</ColumnComponent> </ColumnComponent>
<ColumnComponent> <ColumnComponent>
@ -133,43 +140,32 @@ export const TransactionDetails = ({
isBold isBold
color={theme.colors.transactionsDetailsLabel} color={theme.colors.transactionsDetailsLabel}
/> />
<TextComponent value={formatNumber({ value: amount * 0.1 })} /> <TextComponent
value={formatNumber({ value: amount * 0.1, append: 'ZEC ' })}
/>
</ColumnComponent> </ColumnComponent>
</InfoRow> </InfoRow>
<Divider /> <Divider />
<InfoRow> <InfoRow>
<ColumnComponent> <ColumnComponent>
<TextComponent <Label value='TRANSACTION ID' />
value='TRANSACTION ID'
isBold
color={theme.colors.transactionsDetailsLabel}
/>
<TextComponent value={transactionId} /> <TextComponent value={transactionId} />
</ColumnComponent> </ColumnComponent>
</InfoRow> </InfoRow>
<Divider /> <Divider />
<InfoRow> <InfoRow>
<ColumnComponent> <ColumnComponent>
<TextComponent <Label value='FROM' />
value='FROM'
isBold
color={theme.colors.transactionsDetailsLabel}
/>
<TextComponent value={truncateAddress(from)} /> <TextComponent value={truncateAddress(from)} />
</ColumnComponent> </ColumnComponent>
</InfoRow> </InfoRow>
<Divider /> <Divider />
<InfoRow> <InfoRow>
<ColumnComponent> <ColumnComponent>
<TextComponent <Label value='TO' />
value='TO'
isBold
color={theme.colors.transactionsDetailsLabel}
/>
<TextComponent value={truncateAddress(to)} /> <TextComponent value={truncateAddress(to)} />
</ColumnComponent> </ColumnComponent>
</InfoRow> </InfoRow>
<Divider />
</Wrapper> </Wrapper>
); );
}; };