Add margins between quote list columns (#9528)

The quote list columns have been adjusted to add more space in between
the columns. Additionally, the third column cells are now better
aligned under the header. A few unnecessary `<div>`s and CSS classes
have been removed as well.

ui/app/pages/swaps/select-quote-popover/index.scss

@@ -39,29 +39,29 @@
 
   &__sort-list {
     display: flex;
-    flex-flow: column;
+    flex-direction: column;
     align-items: center;
   }
 
+  &__column-headers,
+  &__row {
+    display: flex;
+    align-items: center;
+    padding-left: 20px;
+    width: 100%;
+
+    > * + * {
+      margin-left: 8px;
+    }
+  }
+
   &__column-headers {
     @include H8;
 
     font-weight: bold;
     color: $Black-100;
-    display: flex;
-    align-items: center;
     height: 43px;
-    width: 100%;
-    padding-left: 20px;
     margin-bottom: 4px;
-
-    .select-quote-popover__receiving {
-      width: 96px;
-    }
-
-    .select-quote-popover__quote-source {
-      margin-right: 60px;
-    }
   }
 
   &__column-header {
@@ -69,24 +69,13 @@
     font-size: 12px;
   }
 
-  &__rows {
-    display: flex;
-    flex-flow: column;
-    align-items: center;
-    width: 100%;
-  }
-
   &__row {
     @include H6;
 
     cursor: pointer;
     color: $black;
-    display: flex;
-    align-items: center;
     height: 49px;
-    width: 100%;
     border-bottom: 1px solid $Grey-100;
-    padding-left: 20px;
     margin-bottom: 8px;
     border-radius: 8px;
     background: $Grey-000;
@@ -143,7 +132,37 @@
   &__receiving {
     display: flex;
     flex-direction: column;
-    width: 102px;
+    width: 88px;
+  }
+
+  &__network-fees {
+    width: 99px;
+  }
+
+  &__quote-source {
+    width: 28px;
+    display: flex;
+    align-items: flex-end;
+    margin-right: 3px;
+  }
+
+  &__caret-right {
+    color: $Grey-500;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    i {
+      transform: rotate(90deg);
+    }
+
+    &:hover {
+      border-radius: 8px;
+      background: white;
+      border: 1px solid $Blue-500;
+    }
   }
 
   &__receiving-value {
@@ -168,34 +187,14 @@
     font-weight: normal;
   }
 
-  &__network-fees {
-    width: 110px;
-  }
-
-  &__quote-source {
-    width: 28px;
-    display: flex;
-    align-items: flex-end;
-    margin-right: 18px;
-
-    @media screen and (min-width: 576px) {
-      margin-right: 36px;
-    }
-  }
-
   &__quote-source-toggle {
     margin-left: 2px;
     height: 12px;
   }
 
-  &__receiving-header {
-    display: flex;
-    flex-flow: column;
-  }
-
   &__network-fees-header {
     display: flex;
-    flex-flow: row;
+    flex-direction: row;
     align-items: flex-end;
 
     > span {
@@ -236,25 +235,6 @@
     }
   }
 
-  &__caret-right {
-    color: $Grey-500;
-    width: 32px;
-    height: 32px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    i {
-      transform: rotate(90deg);
-    }
-
-    &:hover {
-      border-radius: 8px;
-      background: white;
-      border: 1px solid $Blue-500;
-    }
-  }
-
   &__quote-source-label {
     height: 18px;
     display: flex;

ui/app/pages/swaps/select-quote-popover/sort-list/sort-list.js

@@ -71,7 +71,6 @@ export default function SortList ({
           className="select-quote-popover__column-header select-quote-popover__receiving"
           onClick={() => onColumnHeaderClick('destinationTokenValue')}
         >
-          <div className="select-quote-popover__receiving-header">
           <span className="select-quote-popover__receiving-symbol">{swapToSymbol}</span>
           <div className="select-quote-popover__receiving-label">
             <span>{t('swapReceiving')}</span>
@@ -82,12 +81,10 @@ export default function SortList ({
             <ToggleArrows />
           </div>
         </div>
-        </div>
         <div
-          className="select-quote-popover__column-header select-quote-popover__network-fees"
+          className="select-quote-popover__column-header select-quote-popover__network-fees select-quote-popover__network-fees-header"
           onClick={() => onColumnHeaderClick('rawNetworkFees')}
         >
-          <div className="select-quote-popover__network-fees-header">
           <span>{t('swapEstimatedNetworkFees')}</span>
           <InfoTooltip
             position="bottom"
@@ -95,18 +92,14 @@ export default function SortList ({
           />
           <ToggleArrows />
         </div>
-        </div>
         <div
           className="select-quote-popover__column-header select-quote-popover__quote-source"
           onClick={() => onColumnHeaderClick('liquiditySource')}
         >
-          <>
           {t('swapQuoteSource')}
           <div className="select-quote-popover__quote-source-toggle"><ToggleArrows /></div>
-          </>
         </div>
       </div>
-      <div className="select-quote-popover__rows">
       {
         sortedRows.map(({ destinationTokenValue, networkFees, isBestQuote, quoteSource, aggId }, i) => (
           <div
@@ -117,23 +110,17 @@ export default function SortList ({
             onClick={() => onSelect(aggId)}
             key={`select-quote-popover-row-${i}`}
           >
-              <div
+            <div className="select-quote-popover__receiving" >
-                className="select-quote-popover__receiving"
-              >
               <div className="select-quote-popover__receiving-value">
                 {isBestQuote && <SunCheckIcon reverseColors={selectedRow !== i} />}
                 <div className="select-quote-popover__receiving-value-text" title={destinationTokenValue}>{destinationTokenValue}</div>
               </div>
               { quoteSource === 'RFQ' && <span className="select-quote-popover__zero-slippage">{t('swapZeroSlippage')}</span> }
             </div>
-              <div
+            <div className="select-quote-popover__network-fees" >
-                className="select-quote-popover__network-fees"
-              >
               {networkFees}
             </div>
-              <div
+            <div className="select-quote-popover__quote-source" >
-                className="select-quote-popover__quote-source"
-              >
               <div
                 className={classnames('select-quote-popover__quote-source-label', {
                   'select-quote-popover__quote-source-label--green': quoteSource === 'AGG',
@@ -159,7 +146,6 @@ export default function SortList ({
         ))
       }
     </div>
-    </div>
   )
 }