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,94 +71,80 @@ 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>
-            <span className="select-quote-popover__receiving-symbol">{swapToSymbol}</span>
+          <div className="select-quote-popover__receiving-label">
-            <div className="select-quote-popover__receiving-label">
+            <span>{t('swapReceiving')}</span>
-              <span>{t('swapReceiving')}</span>
-              <InfoTooltip
-                position="bottom"
-                contentText={t('swapReceivingInfoTooltip')}
-              />
-              <ToggleArrows />
-            </div>
-          </div>
-        </div>
-        <div
-          className="select-quote-popover__column-header select-quote-popover__network-fees"
-          onClick={() => onColumnHeaderClick('rawNetworkFees')}
-        >
-          <div className="select-quote-popover__network-fees-header">
-            <span>{t('swapEstimatedNetworkFees')}</span>
             <InfoTooltip
               position="bottom"
-              contentText={t('swapEstimatedNetworkFeesInfo')}
+              contentText={t('swapReceivingInfoTooltip')}
             />
             <ToggleArrows />
           </div>
         </div>
+        <div
+          className="select-quote-popover__column-header select-quote-popover__network-fees select-quote-popover__network-fees-header"
+          onClick={() => onColumnHeaderClick('rawNetworkFees')}
+        >
+          <span>{t('swapEstimatedNetworkFees')}</span>
+          <InfoTooltip
+            position="bottom"
+            contentText={t('swapEstimatedNetworkFeesInfo')}
+          />
+          <ToggleArrows />
+        </div>
         <div
           className="select-quote-popover__column-header select-quote-popover__quote-source"
           onClick={() => onColumnHeaderClick('liquiditySource')}
         >
-          <>
+          {t('swapQuoteSource')}
-            {t('swapQuoteSource')}
+          <div className="select-quote-popover__quote-source-toggle"><ToggleArrows /></div>
-            <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) => (
-          sortedRows.map(({ destinationTokenValue, networkFees, isBestQuote, quoteSource, aggId }, i) => (
+          <div
-            <div
+            className={classnames('select-quote-popover__row', {
-              className={classnames('select-quote-popover__row', {
+              'select-quote-popover__row--selected': selectedRow === i,
-                'select-quote-popover__row--selected': selectedRow === i,
+              'select-quote-popover__row--no-hover': noRowHover,
-                'select-quote-popover__row--no-hover': noRowHover,
+            })}
-              })}
+            onClick={() => onSelect(aggId)}
-              onClick={() => onSelect(aggId)}
+            key={`select-quote-popover-row-${i}`}
-              key={`select-quote-popover-row-${i}`}
+          >
-            >
+            <div className="select-quote-popover__receiving" >
-              <div
+              <div className="select-quote-popover__receiving-value">
-                className="select-quote-popover__receiving"
+                {isBestQuote && <SunCheckIcon reverseColors={selectedRow !== i} />}
-              >
+                <div className="select-quote-popover__receiving-value-text" title={destinationTokenValue}>{destinationTokenValue}</div>
-                <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>
+              { quoteSource === 'RFQ' && <span className="select-quote-popover__zero-slippage">{t('swapZeroSlippage')}</span> }
+            </div>
+            <div className="select-quote-popover__network-fees" >
+              {networkFees}
+            </div>
+            <div className="select-quote-popover__quote-source" >
               <div
-                className="select-quote-popover__network-fees"
+                className={classnames('select-quote-popover__quote-source-label', {
+                  'select-quote-popover__quote-source-label--green': quoteSource === 'AGG',
+                  'select-quote-popover__quote-source-label--orange': quoteSource === 'RFQ',
+                  'select-quote-popover__quote-source-label--blue': quoteSource === 'DEX',
+                })}
               >
-                {networkFees}
+                {quoteSource}
-              </div>
-              <div
-                className="select-quote-popover__quote-source"
-              >
-                <div
-                  className={classnames('select-quote-popover__quote-source-label', {
-                    'select-quote-popover__quote-source-label--green': quoteSource === 'AGG',
-                    'select-quote-popover__quote-source-label--orange': quoteSource === 'RFQ',
-                    'select-quote-popover__quote-source-label--blue': quoteSource === 'DEX',
-                  })}
-                >
-                  {quoteSource}
-                </div>
-              </div>
-              <div
-                className="select-quote-popover__caret-right"
-                onClick={(event) => {
-                  event.stopPropagation()
-                  onCaretClick(aggId)
-                }}
-                onMouseEnter={() => setRowNowHover(true)}
-                onMouseLeave={() => setRowNowHover(false)}
-              >
-                <i className="fa fa-angle-up" />
               </div>
             </div>
-          ))
+            <div
-        }
+              className="select-quote-popover__caret-right"
-      </div>
+              onClick={(event) => {
+                event.stopPropagation()
+                onCaretClick(aggId)
+              }}
+              onMouseEnter={() => setRowNowHover(true)}
+              onMouseLeave={() => setRowNowHover(false)}
+            >
+              <i className="fa fa-angle-up" />
+            </div>
+          </div>
+        ))
+      }
     </div>
   )
 }