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>

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} />

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 {

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;
   }

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 && (

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
       />
     );