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 // has correct updated value on the confirm screen the transaction
const editedTransactionAmounts = await driver.findElements( 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]; const editedTransactionAmount = editedTransactionAmounts[0];
assert.equal(await editedTransactionAmount.getText(), '0.0008'); assert.equal(await editedTransactionAmount.getText(), '0.0008');

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

@ -5,12 +5,15 @@
&__row { &__row {
display: flex; display: flex;
justify-content: space-between;
grid-gap: 5px; grid-gap: 5px;
} }
&__title { &__detail-values {
flex-grow: 1; display: flex;
word-break: break-word; flex-wrap: wrap;
justify-content: end;
width: 65%;
} }
.info-tooltip { .info-tooltip {
@ -22,19 +25,6 @@
} }
} }
&__total {
font-weight: bold;
color: $ui-black;
}
&__subtitle {
flex-grow: 1;
}
&__subtext {
text-align: end;
}
.currency-display-component { .currency-display-component {
display: inline; 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} color={detailTitleColor}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FONT_WEIGHT.BOLD}
variant={TYPOGRAPHY.H6} variant={TYPOGRAPHY.H6}
className="transaction-detail-item__title"
> >
{detailTitle} {detailTitle}
</Typography> </Typography>
{detailText && ( <div className="transaction-detail-item__detail-values">
{detailText && (
<Typography variant={TYPOGRAPHY.H6} color={COLORS.UI4}>
{detailText}
</Typography>
)}
<Typography <Typography
color={COLORS.BLACK}
fontWeight={FONT_WEIGHT.BOLD}
variant={TYPOGRAPHY.H6} variant={TYPOGRAPHY.H6}
className="transaction-detail-item__detail-text" margin={[1, 1]}
color={COLORS.UI4}
> >
{detailText} {detailTotal}
</Typography> </Typography>
)} </div>
<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"> <div className="transaction-detail-item__row">
{React.isValidElement(subTitle) ? ( {React.isValidElement(subTitle) ? (
<div className="transaction-detail-item__subtitle">{subTitle}</div> <div>{subTitle}</div>
) : ( ) : (
<Typography <Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4}>
variant={TYPOGRAPHY.H7}
className="transaction-detail-item__subtitle"
color={COLORS.UI4}
>
{subTitle} {subTitle}
</Typography> </Typography>
)} )}
<Typography <Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4} align="end">
variant={TYPOGRAPHY.H7}
color={COLORS.UI4}
className="transaction-detail-item__subtext"
>
{subText} {subText}
</Typography> </Typography>
</div> </div>