Ensure footer stays on screen

MetaMask · Dec 2, 2020 · 0918248 · 0918248
1 parent c2c811a
commit 0918248
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 14 deletions.
diff --git a/ui/app/pages/swaps/swaps-footer/swaps-footer.js b/ui/app/pages/swaps/swaps-footer/swaps-footer.js
@@ -13,13 +13,14 @@ export default function SwapsFooter({
   disabled,
   showTermsOfService,
   showTopBorder,
+  className = '',
 }) {
   const t = useContext(I18nContext)
 
   return (
     <div className="swaps-footer">
       <div
-        className={classnames('swaps-footer__buttons', {
+        className={classnames('swaps-footer__buttons', className, {
           'swaps-footer__buttons--border': showTopBorder,
         })}
       >
@@ -62,4 +63,5 @@ SwapsFooter.propTypes = {
   disabled: PropTypes.bool,
   showTermsOfService: PropTypes.bool,
   showTopBorder: PropTypes.bool,
+  className: PropTypes.string,
 }
diff --git a/ui/app/pages/swaps/view-quote/index.scss b/ui/app/pages/swaps/view-quote/index.scss
@@ -139,7 +139,7 @@
       &--thin {
         min-height: 36px;
       }
-      
+
       display: flex;
     }
   }
@@ -211,4 +211,8 @@
   &__metamask-rate-info-icon {
     margin-left: 4px;
   }
+
+  &__thin-swaps-footer {
+    max-height: 82px;
+  }
 }
diff --git a/ui/app/pages/swaps/view-quote/view-quote.js b/ui/app/pages/swaps/view-quote/view-quote.js
@@ -462,6 +462,17 @@ export default function ViewQuote() {
       : 'ETH',
   ])
 
+  const viewQuotePriceDifferenceComponent = (
+    <ViewQuotePriceDifference
+      usedQuote={usedQuote}
+      sourceTokenValue={sourceTokenValue}
+      destinationTokenValue={destinationTokenValue}
+    />
+  )
+
+  const isShowingWarning =
+    showInsufficientWarning || viewQuotePriceDifferenceComponent !== null
+
   return (
     <div className="view-quote">
       <div className="view-quote__content">
@@ -477,16 +488,10 @@ export default function ViewQuote() {
         )}
         <div
           className={classnames('view-quote__warning-wrapper', {
-            'view-quote__warning-wrapper--thin': !showInsufficientWarning,
+            'view-quote__warning-wrapper--thin': !isShowingWarning,
           })}
         >
-          {!showInsufficientWarning && (
-            <ViewQuotePriceDifference
-              usedQuote={usedQuote}
-              sourceTokenValue={sourceTokenValue}
-              destinationTokenValue={destinationTokenValue}
-            />
-          )}
+          {!showInsufficientWarning && viewQuotePriceDifferenceComponent}
           {showInsufficientWarning && (
             <ActionableMessage
               message={actionableInsufficientMessage}
@@ -496,7 +501,7 @@ export default function ViewQuote() {
         </div>
         <div
           className={classnames('view-quote__countdown-timer-container', {
-            'view-quote__countdown-timer-container--thin': showInsufficientWarning,
+            'view-quote__countdown-timer-container--thin': isShowingWarning,
           })}
         >
           <CountdownTimer
@@ -508,7 +513,7 @@ export default function ViewQuote() {
         </div>
         <div
           className={classnames('view-quote__main-quote-summary-container', {
-            'view-quote__main-quote-summary-container--thin': showInsufficientWarning,
+            'view-quote__main-quote-summary-container--thin': isShowingWarning,
           })}
         >
           <MainQuoteSummary
@@ -552,7 +557,7 @@ export default function ViewQuote() {
         </div>
         <div
           className={classnames('view-quote__fee-card-container', {
-            'view-quote__fee-card-container--thin': showInsufficientWarning,
+            'view-quote__fee-card-container--thin': isShowingWarning,
             'view-quote__fee-card-container--three-rows':
               approveTxParams && (!balanceError || warningHidden),
           })}
@@ -589,7 +594,7 @@ export default function ViewQuote() {
         submitText={t('swap')}
         onCancel={async () => await dispatch(navigateBackToBuildQuote(history))}
         disabled={balanceError || gasPrice === null || gasPrice === undefined}
-        className={showInsufficientWarning && 'view-quote__thin-swaps-footer'}
+        className={isShowingWarning && 'view-quote__thin-swaps-footer'}
         showTermsOfService
         showTopBorder
       />