diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js index 85a957ef1..665d1924f 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js +++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js @@ -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 ( -
+
{warning ? : null} {ethGasPriceWarning && ( diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss index 8bb39b705..d8f7a307c 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss +++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss @@ -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 { diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/index.scss b/ui/components/app/confirm-page-container/confirm-page-container-content/index.scss index 96da686c9..b932af183 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container-content/index.scss +++ b/ui/components/app/confirm-page-container/confirm-page-container-content/index.scss @@ -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; } diff --git a/ui/components/app/confirm-page-container/confirm-page-container.component.js b/ui/components/app/confirm-page-container/confirm-page-container.component.js index 7767159ed..fdf0b8a96 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container.component.js +++ b/ui/components/app/confirm-page-container/confirm-page-container.component.js @@ -232,6 +232,7 @@ export default class ConfirmPageContainer extends Component { ethGasPriceWarning={ethGasPriceWarning} hideTitle={hideTitle} supportsEIP1559V2={supportsEIP1559V2} + hasTopBorder={showAddToAddressDialog} /> )} {shouldDisplayWarning && ( diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js index efbd680a4..5b3b2ba4a 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -864,7 +864,7 @@ export default class ConfirmTransactionBase extends Component { value={hexTransactionAmount} type={PRIMARY} showEthLogo - ethLogoHeight="36" + ethLogoHeight="28" hideLabel /> );