diff --git a/app/components/transaction-details.js b/app/components/transaction-details.js
index 077c751..c3fdea5 100644
--- a/app/components/transaction-details.js
+++ b/app/components/transaction-details.js
@@ -17,7 +17,7 @@ import formatNumber from '../utils/formatNumber';
import truncateAddress from '../utils/truncateAddress';
const Wrapper = styled.div`
- width: 100%;
+ width: 30vw;
background-color: ${props => props.theme.colors.background};
display: flex;
flex-direction: column;
@@ -52,17 +52,28 @@ const CloseIconImg = styled.img`
const InfoRow = styled(RowComponent)`
justify-content: space-between;
- width: 100%;
- padding: 15px 30px;
+ align-items: center;
+ width: 30vw;
+ height: 80px;
+ padding: 0 30px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
`;
const Divider = styled.div`
width: 100%;
background-color: ${props => props.theme.colors.transactionsDetailsLabel};
- height: 2px;
+ height: 1px;
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 = {
amount: number,
type: 'send' | 'receive',
@@ -74,7 +85,7 @@ type Props = {
handleClose: () => void,
};
-export const TransactionDetails = ({
+export const TransactionDetailsComponent = ({
amount,
type,
zecPrice,
@@ -91,7 +102,7 @@ export const TransactionDetails = ({
-
+
-
+
@@ -133,43 +140,32 @@ export const TransactionDetails = ({
isBold
color={theme.colors.transactionsDetailsLabel}
/>
-
+
-
+
-
+
-
+
-
);
};