m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02:00
Code

Fix UI issues at top of confirm page container (#13314)

Browse Source 
This commit fixes a few issues with ConfirmPageContainerSummary (which
holds the contract being used or action being performed and the money
being sent):

* Remove fixed height so that the secondary currency doesn't get cut off
  or spill over
* Add missing padding
* Fix font size of primary and secondary currencies
* Add top border when there is a "address not in your address book"
  alert at the top

Co-authored-by: Ariella <ariellavu@gmail.com>
This commit is contained in:
Elliot Winkler 2022-01-14 20:12:20 -07:00 committed by GitHub
parent a5873eb7ff
commit 8beaae3361
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
View File

@ -43,6 +43,7 @@ export default class ConfirmPageContainerContent extends Component {
rejectNText: PropTypes.string,
hideTitle: PropTypes.bool,
supportsEIP1559V2: PropTypes.bool,
hasTopBorder: PropTypes.bool,
};
renderContent() {
@ -111,6 +112,7 @@ export default class ConfirmPageContainerContent extends Component {
setUserAcknowledgedGasMissing,
hideUserAcknowledgedGasMissing,
supportsEIP1559V2,
hasTopBorder,
} = this.props;
const primaryAction = hideUserAcknowledgedGasMissing
@ -121,7 +123,11 @@ export default class ConfirmPageContainerContent extends Component {
};
return (
<div className="confirm-page-container-content">
<div
className={classnames('confirm-page-container-content', {
'confirm-page-container-content--with-top-border': hasTopBorder,
})}
>
{warning ? <ConfirmPageContainerWarning warning={warning} /> : null}
{ethGasPriceWarning && (
<ConfirmPageContainerWarning warning={ethGasPriceWarning} />

16
ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss
View File

@ -1,16 +1,18 @@
.confirm-page-container-summary {
padding: 0 24px;
padding: 16px 24px;
background-color: #f9fafa;
height: 120px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-evenly;
&__origin,
&__action-row {
padding-bottom: 8px;
}
&__origin {
@include H6;
padding-bottom: 10px;
}
&__action-row {
@ -34,7 +36,6 @@
}
&__title {
padding: 4px 0;
display: flex;
align-items: center;
}
@ -45,7 +46,7 @@
}
&__title-text {
@include H2;
@include H1;
white-space: nowrap;
overflow: hidden;
@ -53,13 +54,12 @@
}
&__subtitle {
@include H6;
@include H5;
color: var(--oslo-gray);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 42px;
}
&--border {

4
ui/components/app/confirm-page-container/confirm-page-container-content/index.scss
View File

@ -8,6 +8,10 @@
display: flex;
flex-direction: column;
&--with-top-border {
border-top: 1px solid var(--geyser);
}
&__error-container {
padding: 0 16px 16px 16px;
}

1
ui/components/app/confirm-page-container/confirm-page-container.component.js
View File

@ -234,6 +234,7 @@ export default class ConfirmPageContainer extends Component {
ethGasPriceWarning={ethGasPriceWarning}
hideTitle={hideTitle}
supportsEIP1559V2={supportsEIP1559V2}
hasTopBorder={showAddToAddressDialog}
/>
)}
{shouldDisplayWarning && (

2
ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
View File

@ -861,7 +861,7 @@ export default class ConfirmTransactionBase extends Component {
value={hexTransactionAmount}
type={PRIMARY}
showEthLogo
ethLogoHeight="36"
ethLogoHeight="28"
hideLabel
/>
);