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.

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" />}
     />
   )

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;
+    }
+  }
 }

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
 

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;
+    }
   }
 }

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;
+    }
   }
 }

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,