From 7fcf62554989ce72ecd7110df32abc39947bea3d Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Fri, 5 Jun 2020 13:36:40 -0500
Subject: [PATCH] asset outdated warning inline on full screen (#8734)

The asset list item and transaction list item do not make great use of
screen realestate when in fullscreen mode on larger displays/windows.
This PR adds in a new prop for list-item for displaying content in the
middle of the list-item when on these types of screens. To facilitate
this, some updates were made to styling to allow for the list item to
better control how items are laid out in various breakpoints.

This works makes it possible to display the outdated balance warning
inline in the middle section of the list item, and convert to a tooltip
when on small displays.
---
 .../app/asset-list-item/asset-list-item.js    | 28 ++++++++++-
 .../app/asset-list-item/asset-list-item.scss  | 20 ++++++++
 .../components/app/token-cell/token-cell.js   | 32 +++++--------
 .../app/transaction-list-item/index.scss      |  5 ++
 ui/app/components/ui/list-item/index.scss     | 47 ++++++++++++++++---
 .../ui/list-item/list-item.component.js       | 45 +++++++++++-------
 6 files changed, 131 insertions(+), 46 deletions(-)

diff --git a/ui/app/components/app/asset-list-item/asset-list-item.js b/ui/app/components/app/asset-list-item/asset-list-item.js
index ffd2028a6..bf2bcc656 100644
--- a/ui/app/components/app/asset-list-item/asset-list-item.js
+++ b/ui/app/components/app/asset-list-item/asset-list-item.js
@@ -3,6 +3,9 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import Identicon from '../../ui/identicon'
 import ListItem from '../../ui/list-item'
+import Tooltip from '../../ui/tooltip-v2'
+import InfoIcon from '../../ui/icon/info-icon.component'
+
 
 const AssetListItem = ({
   className,
@@ -15,12 +18,34 @@ const AssetListItem = ({
   primary,
   secondary,
 }) => {
+  const titleIcon = warning
+    ? (
+      <Tooltip
+        wrapperClassName="asset-list-item__warning-tooltip"
+        interactive
+        position="bottom"
+        html={warning}
+      >
+        <InfoIcon severity="warning" />
+      </Tooltip>
+    )
+    : null
+
+  const midContent = warning
+    ? (
+      <>
+        <InfoIcon severity="warning" />
+        <div className="asset-list-item__warning">{warning}</div>
+      </>
+    )
+    : null
+
   return (
     <ListItem
       className={classnames('asset-list-item', className)}
       data-testid={dataTestId}
       title={primary}
-      titleIcon={warning}
+      titleIcon={titleIcon}
       subtitle={secondary}
       onClick={onClick}
       icon={(
@@ -31,6 +56,7 @@ const AssetListItem = ({
           image={tokenImage}
         />
       )}
+      midContent={midContent}
       rightContent={<i className="fas fa-chevron-right asset-list-item__chevron-right" />}
     />
   )
diff --git a/ui/app/components/app/asset-list-item/asset-list-item.scss b/ui/app/components/app/asset-list-item/asset-list-item.scss
index 4cb68b6be..230659ac5 100644
--- a/ui/app/components/app/asset-list-item/asset-list-item.scss
+++ b/ui/app/components/app/asset-list-item/asset-list-item.scss
@@ -7,4 +7,24 @@
     margin-top: 6px;
     font-size: 14px;
   }
+
+  &__warning {
+    flex: 1;
+    margin-left: 8px;
+    color: $Grey-500;
+  }
+
+  .list-item__mid-content {
+    display: none;
+  }
+
+  @media (min-width: 576px) {
+    &__warning-tooltip {
+      display: none;
+    }
+
+    .list-item__mid-content {
+      display: flex;
+    }
+  }
 }
diff --git a/ui/app/components/app/token-cell/token-cell.js b/ui/app/components/app/token-cell/token-cell.js
index 2408f4290..87b3210a8 100644
--- a/ui/app/components/app/token-cell/token-cell.js
+++ b/ui/app/components/app/token-cell/token-cell.js
@@ -2,12 +2,10 @@ import classnames from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { conversionUtil, multiplyCurrencies } from '../../../helpers/utils/conversion-util'
-import Tooltip from '../../ui/tooltip-v2'
 import AssetListItem from '../asset-list-item'
 import { useSelector } from 'react-redux'
 import { getTokenExchangeRates, getConversionRate, getCurrentCurrency, getSelectedAddress } from '../../../selectors'
 import { useI18nContext } from '../../../hooks/useI18nContext'
-import InfoIcon from '../../ui/icon/info-icon.component'
 import { formatCurrency } from '../../../helpers/utils/confirm-tx.util'
 
 export default function TokenCell ({ address, outdatedBalance, symbol, string, image, onClick }) {
@@ -47,25 +45,17 @@ export default function TokenCell ({ address, outdatedBalance, symbol, string, i
 
   const warning = outdatedBalance
     ? (
-      <Tooltip
-        interactive
-        position="bottom"
-        html={(
-          <div className="token-cell__outdated-tooltip">
-            { t('troubleTokenBalances') }
-            <a
-              href={`https://ethplorer.io/address/${userAddress}`}
-              rel="noopener noreferrer"
-              target="_blank"
-              style={{ color: '#F7861C' }}
-            >
-              { t('here') }
-            </a>
-          </div>
-        )}
-      >
-        <InfoIcon severity="warning" />
-      </Tooltip>
+      <span>
+        { t('troubleTokenBalances') }
+        <a
+          href={`https://ethplorer.io/address/${userAddress}`}
+          rel="noopener noreferrer"
+          target="_blank"
+          style={{ color: '#F7861C' }}
+        >
+          { t('here') }
+        </a>
+      </span>
     )
     : null
 
diff --git a/ui/app/components/app/transaction-list-item/index.scss b/ui/app/components/app/transaction-list-item/index.scss
index b2d344f36..3f7af9586 100644
--- a/ui/app/components/app/transaction-list-item/index.scss
+++ b/ui/app/components/app/transaction-list-item/index.scss
@@ -10,6 +10,8 @@
   }
 
   &__secondary-currency {
+    font-size: 12px;
+    margin-top: 4px;
     color: $Grey-500;
   }
 
@@ -46,5 +48,8 @@
       white-space: nowrap;
       line-height: 1rem;
     }
+    &:empty {
+      padding-top: 0;
+    }
   }
 }
diff --git a/ui/app/components/ui/list-item/index.scss b/ui/app/components/ui/list-item/index.scss
index 6696bb5ad..d4712a6ab 100644
--- a/ui/app/components/ui/list-item/index.scss
+++ b/ui/app/components/ui/list-item/index.scss
@@ -11,19 +11,28 @@
 
   display: flex;
   justify-content: flex-start;
-  align-items: stretch;
+  align-items: center;
 
-  &__icon > * {
-    margin: 8px 14px 0 0;
+  &__icon {
+    display: flex;
+    align-items: center;
+    > * {
+      margin: 0 16px 0 0;
+    }
   }
 
   &__col {
-    align-self: center;
+    align-items: center;
     &-main {
-      flex-grow: 1;
+      flex: 1;
+      display: flex;
     }
   }
 
+  &__main-content {
+    align-self: center;
+  }
+
   &__heading {
     font-size: 16px;
     line-height: 160%;
@@ -42,10 +51,36 @@
     font-size: 12px;
     line-height: 14px;
     color: $Grey-500;
+    margin-top: 4px;
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__mid-content {
+    display: none;
   }
 
   &__right-content {
-    margin: 0 0 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
     text-align: right;
+    align-items: flex-end;
+  }
+
+  @media (min-width: 576px) {
+    &__col-main {
+      flex: 1.5;
+    }
+    &__mid-content {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      flex: 2;
+    }
+    &__right-content {
+      flex: 1;
+    }
   }
 }
diff --git a/ui/app/components/ui/list-item/list-item.component.js b/ui/app/components/ui/list-item/list-item.component.js
index 07bdb1535..5aca13d21 100644
--- a/ui/app/components/ui/list-item/list-item.component.js
+++ b/ui/app/components/ui/list-item/list-item.component.js
@@ -11,6 +11,7 @@ export default function ListItem ({
   titleIcon,
   icon,
   rightContent,
+  midContent,
   className,
   'data-testid': dataTestId,
 }) {
@@ -18,28 +19,35 @@ export default function ListItem ({
 
   return (
     <div className={primaryClassName} onClick={onClick} data-testid={dataTestId}>
-      {icon && (
-        <div className="list-item__col list-item__icon">
-          {icon}
-        </div>
-      )}
       <div className="list-item__col list-item__col-main">
-        <h2 className="list-item__heading">
-          { title } {titleIcon && (
-            <span className="list-item__heading-wrap">
-              {titleIcon}
-            </span>
-          )}
-        </h2>
-        <h3 className="list-item__subheading">
-          {subtitleStatus}{subtitle}
-        </h3>
-        {children && (
-          <div className="list-item__more">
-            { children }
+        {icon && (
+          <div className="list-item__icon">
+            {icon}
           </div>
         )}
+        <div className="list-item__main-content">
+          <h2 className="list-item__heading">
+            { title } {titleIcon && (
+              <span className="list-item__heading-wrap">
+                {titleIcon}
+              </span>
+            )}
+          </h2>
+          <h3 className="list-item__subheading">
+            {subtitleStatus}{subtitle}
+          </h3>
+          {children && (
+            <div className="list-item__more">
+              { children }
+            </div>
+          )}
+        </div>
       </div>
+      {midContent && (
+        <div className="list-item__col list-item__mid-content">
+          {midContent}
+        </div>
+      )}
       {rightContent && (
         <div className="list-item__col list-item__right-content">
           {rightContent}
@@ -57,6 +65,7 @@ ListItem.propTypes = {
   children: PropTypes.node,
   icon: PropTypes.node,
   rightContent: PropTypes.node,
+  midContent: PropTypes.node,
   className: PropTypes.string,
   onClick: PropTypes.func,
   'data-testid': PropTypes.string,