m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Confirm transaction screen - wrap lengthier values (#12733)

Browse Source
This commit is contained in:
Jyoti Puri 2021-11-22 22:49:29 +05:30 committed by GitHub
parent 0431821fca
commit 42fea3d323
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
test/e2e/tests/send-edit.spec.js
View File

@ -62,7 +62,7 @@ describe('Editing Confirm Transaction', function () {
// has correct updated value on the confirm screen the transaction
const editedTransactionAmounts = await driver.findElements(
'.transaction-detail-item__row .transaction-detail-item__detail-text .currency-display-component__text',
'.transaction-detail-item__row .transaction-detail-item__detail-values .currency-display-component__text:last-of-type',
);
const editedTransactionAmount = editedTransactionAmounts[0];
assert.equal(await editedTransactionAmount.getText(), '0.0008');

22
ui/components/app/transaction-detail-item/index.scss
View File

@ -5,12 +5,15 @@
&__row {
display: flex;
justify-content: space-between;
grid-gap: 5px;
}
&__title {
flex-grow: 1;
word-break: break-word;
&__detail-values {
display: flex;
flex-wrap: wrap;
justify-content: end;
width: 65%;
}
.info-tooltip {
@ -22,19 +25,6 @@
}
}
&__total {
font-weight: bold;
color: $ui-black;
}
&__subtitle {
flex-grow: 1;
}
&__subtext {
text-align: end;
}
.currency-display-component {
display: inline;
}

39
ui/components/app/transaction-detail-item/transaction-detail-item.component.js
View File

@ -23,46 +23,35 @@ export default function TransactionDetailItem({
color={detailTitleColor}
fontWeight={FONT_WEIGHT.BOLD}
variant={TYPOGRAPHY.H6}
className="transaction-detail-item__title"
>
{detailTitle}
</Typography>
{detailText && (
<div className="transaction-detail-item__detail-values">
{detailText && (
<Typography variant={TYPOGRAPHY.H6} color={COLORS.UI4}>
{detailText}
</Typography>
)}
<Typography
color={COLORS.BLACK}
fontWeight={FONT_WEIGHT.BOLD}
variant={TYPOGRAPHY.H6}
className="transaction-detail-item__detail-text"
color={COLORS.UI4}
margin={[1, 1]}
>
{detailText}
{detailTotal}
</Typography>
)}
<Typography
color={COLORS.BLACK}
fontWeight={FONT_WEIGHT.BOLD}
variant={TYPOGRAPHY.H6}
className="transaction-detail-item__total"
>
{detailTotal}
</Typography>
</div>
</div>
<div className="transaction-detail-item__row">
{React.isValidElement(subTitle) ? (
<div className="transaction-detail-item__subtitle">{subTitle}</div>
<div>{subTitle}</div>
) : (
<Typography
variant={TYPOGRAPHY.H7}
className="transaction-detail-item__subtitle"
color={COLORS.UI4}
>
<Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4}>
{subTitle}
</Typography>
)}
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.UI4}
className="transaction-detail-item__subtext"
>
<Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4} align="end">
{subText}
</Typography>
</div>