From 8beaae3361528351d9a32a3d0b17ff52af2eeecf Mon Sep 17 00:00:00 2001
From: Elliot Winkler <elliot.winkler@gmail.com>
Date: Fri, 14 Jan 2022 20:12:20 -0700
Subject: [PATCH] Fix UI issues at top of confirm page container (#13314)

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>
---
 .../confirm-page-container-content.component.js  |  8 +++++++-
 .../confirm-page-container-summary/index.scss    | 16 ++++++++--------
 .../confirm-page-container-content/index.scss    |  4 ++++
 .../confirm-page-container.component.js          |  1 +
 .../confirm-transaction-base.component.js        |  2 +-
 5 files changed, 21 insertions(+), 10 deletions(-)

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 (
-      <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} />
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 dc23050e9..10f326594 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
@@ -234,6 +234,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 67e53af49..d23912787 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -861,7 +861,7 @@ export default class ConfirmTransactionBase extends Component {
         value={hexTransactionAmount}
         type={PRIMARY}
         showEthLogo
-        ethLogoHeight="36"
+        ethLogoHeight="28"
         hideLabel
       />
     );