Feature/transactions detail improvements (#30)
* fix: component import on docz * feature: modify addresses width on transactions details * feature: fix SelectMenuButton padding * feature: add numbers on amount placeholder
This commit is contained in:
parent
641b8fa6b4
commit
9fbc198ce8
|
@ -50,6 +50,7 @@ const SelectMenuButtonWrapper = styled.button`
|
|||
`;
|
||||
/* eslint-disable max-len */
|
||||
const SelectMenuButton = styled.button`
|
||||
padding: 3px 7px;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid ${props => props.theme.colors.text};
|
||||
|
|
|
@ -76,7 +76,7 @@ const Ellipsis = styled(TextComponent)`
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: calc(30vw - 60px);
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
|
@ -152,23 +152,23 @@ export const TransactionDetailsComponent = ({
|
|||
</InfoRow>
|
||||
<Divider />
|
||||
<InfoRow>
|
||||
<ColumnComponent>
|
||||
<ColumnComponent width='100%'>
|
||||
<Label value='TRANSACTION ID' />
|
||||
<Ellipsis value={transactionId} />
|
||||
</ColumnComponent>
|
||||
</InfoRow>
|
||||
<Divider />
|
||||
<InfoRow>
|
||||
<ColumnComponent>
|
||||
<ColumnComponent width='100%'>
|
||||
<Label value='FROM' />
|
||||
<TextComponent value={truncateAddress(from)} />
|
||||
<Ellipsis value={truncateAddress(from)} />
|
||||
</ColumnComponent>
|
||||
</InfoRow>
|
||||
<Divider />
|
||||
<InfoRow>
|
||||
<ColumnComponent>
|
||||
<ColumnComponent width='100%'>
|
||||
<Label value='TO' />
|
||||
<TextComponent value={truncateAddress(to)} />
|
||||
<Ellipsis value={truncateAddress(to)} />
|
||||
</ColumnComponent>
|
||||
</InfoRow>
|
||||
</Wrapper>
|
||||
|
|
|
@ -4,21 +4,21 @@ name: Transaction Details
|
|||
|
||||
import { Playground, PropsTable } from 'docz'
|
||||
|
||||
import { TransactionDetails } from './transaction-details.js'
|
||||
import { TransactionDetailsComponent } from './transaction-details.js'
|
||||
import { DoczWrapper } from '../theme.js'
|
||||
|
||||
# Transaction Details
|
||||
|
||||
## Properties
|
||||
|
||||
<PropsTable of={TransactionDetails} />
|
||||
<PropsTable of={TransactionDetailsComponent} />
|
||||
|
||||
## Basic Usage
|
||||
|
||||
<Playground>
|
||||
<DoczWrapper>
|
||||
{() => (
|
||||
<TransactionDetails
|
||||
<TransactionDetailsComponent
|
||||
type="receive"
|
||||
amount={2851}
|
||||
zecPrice={56}
|
||||
|
|
Loading…
Reference in New Issue