Update view-quote designs to better represent the metamask fee (#9633)

* Update view-quote designs to better represent the metamask fee

* Code clean up

* Copy updates

app/_locales/en/messages.json

@@ -1729,7 +1729,7 @@
     "message": "MetaMask fee"
   },
   "swapMetaMaskFeeDescription": {
-    "message": "A service fee of $1% is automatically factored into each quote, which supports ongoing development to make MetaMask even better.",
+    "message": "We find the best price from the top liquidity sources, every time. A fee of $1% is automatically factored into each quote, which supports ongoing development to make MetaMask even better.",
     "description": "Provides information about the fee that metamask takes for swaps. $1 is a decimal number."
   },
   "swapNQuotesAvailable": {
@@ -1753,6 +1753,10 @@
   "swapQuoteDetailsSlippageInfo": {
     "message": "If the price changes between the time your order is placed and confirmed it’s called \"slippage\". Your Swap will automatically cancel if slippage exceeds your \"max slippage\" setting."
   },
+  "swapQuoteIncludesRate": {
+    "message": "Quote includes a $1% MetaMask fee",
+    "description": "Provides information about the fee that metamask takes for swaps. $1 is a decimal number."
+  },
   "swapQuoteNofN": {
     "message": "Quote $1 of $2",
     "description": "A count of loaded quotes shown to the user while they are waiting for quotes to be fetched. $1 is the number of quotes already loaded, and $2 is the total number of quotes to load."

ui/app/pages/swaps/main-quote-summary/index.scss

@@ -22,7 +22,7 @@
 
   &__quote-backdrop {
     width: 310px;
-    height: 179.15px;
+    height: 164px;
   }
 
   &__details {
@@ -49,13 +49,14 @@
   }
 
   &__quote-details-top {
-    height: 137px;
+    height: 94px;
     display: flex;
     flex-flow: column;
     justify-content: center;
     align-items: center;
     width: 100%;
     padding: 12px;
+    padding-top: 2px;
     margin-top: 4px;
   }
 

ui/app/pages/swaps/main-quote-summary/quote-backdrop.js

@@ -5,13 +5,13 @@ export default function QuotesBackdrop ({
   withTopTab,
 }) {
   return (
-    <svg width="311" height="199" viewBox="25.5 29.335899353027344 311 199"fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="311" height="164" viewBox="25.5 29.335899353027344 311 164" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g filter="url(#filter0_d)">
-        <path d="M25.5 57.5046C25.5 53.0864 29.0817 49.5046 33.5 49.5046H328.5C332.918 49.5046 336.5 53.0864 336.5 57.5046V221.005C336.5 225.423 332.918 229.005 328.5 229.005H33.5C29.0817 229.005 25.5 225.423 25.5 221.005V57.5046Z" fill="url(#paint0_linear)" />
+        <path d="M25.4749 54C25.4749 49.5817 29.0566 46 33.4749 46H328.475C332.893 46 336.475 49.5817 336.475 54V185.5C336.475 189.918 332.893 193.5 328.475 193.5H33.4749C29.0566 193.5 25.4749 189.918 25.4749 185.5V54Z" fill="url(#paint0_linear)" />
-        {withTopTab && <path d="M121.705 34.8352C122.929 31.816 125.861 29.8406 129.119 29.8406H230.883C234.141 29.8406 237.073 31.816 238.297 34.8352L251.468 62.9263C253.601 68.1861 249.73 73.9317 244.054 73.9317H115.948C110.272 73.9317 106.401 68.1861 108.534 62.9263L121.705 34.8352Z" fill="url(#paint1_linear)" />}
+        {withTopTab && <path d="M132.68 34.3305C133.903 31.3114 136.836 29.3359 140.094 29.3359H219.858C223.116 29.3359 226.048 31.3114 227.272 34.3305L237.443 59.4217C239.575 64.6815 235.705 70.4271 230.029 70.4271H129.922C124.247 70.4271 120.376 64.6814 122.508 59.4217L132.68 34.3305Z" fill="url(#paint1_linear)" />}
       </g>
       <defs>
-        <filter id="filter0_d" x="-13.5" y="0.840576" width="389" height="277.164" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+        <filter id="filter0_d" x="-13.5251" y="0.335938" width="389" height="242.164" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
           <feFlood floodOpacity="0" result="BackgroundImageFix" />
           <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
           <feOffset dy="10" />
@@ -20,11 +20,11 @@ export default function QuotesBackdrop ({
           <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
           <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
         </filter>
-        <linearGradient id="paint0_linear" x1="25.5" y1="94.1976" x2="342.259" y2="94.1976" gradientUnits="userSpaceOnUse">
+        <linearGradient id="paint0_linear" x1="25.4749" y1="90.693" x2="342.234" y2="90.693" gradientUnits="userSpaceOnUse">
           <stop stopColor="#037DD6" />
           <stop offset="0.994792" stopColor="#1098FC" />
         </linearGradient>
-        <linearGradient id="paint1_linear" x1="25.5" y1="94.1976" x2="342.259" y2="94.1976" gradientUnits="userSpaceOnUse">
+        <linearGradient id="paint1_linear" x1="25.4749" y1="90.693" x2="342.234" y2="90.693" gradientUnits="userSpaceOnUse">
           <stop stopColor="#037DD6" />
           <stop offset="0.994792" stopColor="#1098FC" />
         </linearGradient>

ui/app/pages/swaps/view-quote/index.scss

@@ -13,6 +13,7 @@
     height: 100%;
     padding-left: 20px;
     padding-right: 20px;
+    justify-content: space-between;
 
     @media screen and (max-width: 576px) {
       overflow-y: auto;
@@ -38,16 +39,11 @@
 
   &__view-other-button-container {
     border-radius: 28px;
-    margin-top: 38px;
     width: 100%;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
-
-    @media screen and (min-width: 576px) {
-      margin-top: auto;
-    }
   }
 
   &__view-other-button,
@@ -131,13 +127,9 @@
 
   &__fee-card-container {
     width: 100%;
-    margin-top: auto;
+    margin-top: 8px;
     margin-bottom: 8px;
 
-    @media screen and (max-width: 576px) {
-      margin-top: 16px;
-    }
-
     @media screen and (min-width: 576px) {
       margin-bottom: 0;
 
@@ -158,4 +150,19 @@
       margin-top: 8px;
     }
   }
+
+  &__metamask-rate {
+    display: flex;
+    margin-top: 8%;
+  }
+
+  &__metamask-rate-text {
+    @include H7;
+
+    color: $Grey-500;
+  }
+
+  &__metamask-rate-info-icon {
+    margin-left: 4px;
+  }
 }

ui/app/pages/swaps/view-quote/view-quote.js

@@ -72,6 +72,7 @@ import { useTokenTracker } from '../../../hooks/useTokenTracker'
 import { QUOTES_EXPIRED_ERROR } from '../../../helpers/constants/swaps'
 import CountdownTimer from '../countdown-timer'
 import SwapsFooter from '../swaps-footer'
+import InfoTooltip from '../../../components/ui/info-tooltip'
 
 export default function ViewQuote () {
   const history = useHistory()
@@ -199,6 +200,7 @@ export default function ViewQuote () {
     sourceTokenDecimals,
     sourceTokenSymbol,
     sourceTokenValue,
+    metaMaskFee,
   } = renderableDataForUsedQuote
 
   const { feeInFiat, feeInEth } = getRenderableGasFeesForQuote(
@@ -494,6 +496,14 @@ export default function ViewQuote () {
             <i className="fa fa-arrow-right" />
           </div>
         </div>
+        <div className="view-quote__metamask-rate">
+          <p className="view-quote__metamask-rate-text">{ t('swapQuoteIncludesRate', [metaMaskFee]) }</p>
+          <InfoTooltip
+            position="top"
+            contentText={t('swapMetaMaskFeeDescription', [metaMaskFee])}
+            wrapperClassName="view-quote__metamask-rate-info-icon"
+          />
+        </div>
         <div
           className={classnames('view-quote__fee-card-container', {
             'view-quote__fee-card-container--thin': showWarning,