From 1eed8dc1673b5667cbd174189f911624624da7c8 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Fri, 5 Jun 2020 16:33:51 -0500
Subject: [PATCH] use grid template to position list item (#8753)

Using flex was getting out of hand, I noticed on develop that when
a pending transaction is coming in the speed up and cancel buttons
cause the icon to center according ot their height as well. A grid
is really what is needed. This seemingly greatly simplifies the CSS
AND html (removes unnecessary nesting of divs)
---
 .../app/asset-list-item/asset-list-item.scss  |  9 ++-
 ui/app/components/ui/list-item/index.scss     | 57 +++++++++----------
 .../ui/list-item/list-item.component.js       | 46 +++++++--------
 3 files changed, 51 insertions(+), 61 deletions(-)

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 230659ac5..af104e623 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
@@ -3,6 +3,10 @@
     color: $Grey-500;
   }
 
+  .list-item__right-content {
+    align-self: center;
+  }
+
   .list-item__subheading {
     margin-top: 6px;
     font-size: 14px;
@@ -11,11 +15,6 @@
   &__warning {
     flex: 1;
     margin-left: 8px;
-    color: $Grey-500;
-  }
-
-  .list-item__mid-content {
-    display: none;
   }
 
   @media (min-width: 576px) {
diff --git a/ui/app/components/ui/list-item/index.scss b/ui/app/components/ui/list-item/index.scss
index d4712a6ab..f424bc4c6 100644
--- a/ui/app/components/ui/list-item/index.scss
+++ b/ui/app/components/ui/list-item/index.scss
@@ -8,32 +8,28 @@
   border-top: 1px solid $mercury;
   border-bottom: 1px solid $mercury;
   color: $Black-100;
-
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
+  display: grid;
+  grid-template-columns: 0fr repeat(11, 1fr);
+  grid-template-areas:
+    'icon head     head     head     head     head     head     head     right right right right'
+    'icon sub      sub      sub      sub      sub      sub      sub      right right right right'
+    '.    actions  actions  actions  actions  actions  actions  actions  right right right right';
+  align-items: start;
 
   &__icon {
-    display: flex;
-    align-items: center;
+    grid-area: icon;
+    align-self: center;
     > * {
       margin: 0 16px 0 0;
     }
   }
 
-  &__col {
-    align-items: center;
-    &-main {
-      flex: 1;
-      display: flex;
-    }
-  }
-
-  &__main-content {
-    align-self: center;
+  &__actions {
+    grid-area: actions;
   }
 
   &__heading {
+    grid-area: head;
     font-size: 16px;
     line-height: 160%;
     position: relative;
@@ -48,6 +44,7 @@
   }
 
   &__subheading {
+    grid-area: sub;
     font-size: 12px;
     line-height: 14px;
     color: $Grey-500;
@@ -58,29 +55,27 @@
   }
 
   &__mid-content {
-    display: none;
+    grid-area: mid;
+    font-size: 12px;
+    color: $Grey-500;
   }
 
   &__right-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
+    grid-area: right;
     text-align: right;
     align-items: flex-end;
   }
 
-  @media (min-width: 576px) {
-    &__col-main {
-      flex: 1.5;
-    }
+  @media (max-width: 575px) {
     &__mid-content {
-      display: flex;
-      align-items: center;
-      font-size: 12px;
-      flex: 2;
-    }
-    &__right-content {
-      flex: 1;
+      display: none;
     }
   }
+
+  @media (min-width: 576px) {
+    grid-template-areas:
+      'icon head     head     head     head     mid mid mid mid right right right'
+      'icon sub      sub      sub      sub      mid mid mid mid right right right'
+      '.    actions  actions  actions  actions  mid mid mid mid right right right';
+  }
 }
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 5aca13d21..6f04c5590 100644
--- a/ui/app/components/ui/list-item/list-item.component.js
+++ b/ui/app/components/ui/list-item/list-item.component.js
@@ -19,37 +19,33 @@ export default function ListItem ({
 
   return (
     <div className={primaryClassName} onClick={onClick} data-testid={dataTestId}>
-      <div className="list-item__col list-item__col-main">
-        {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>
-          )}
+      {icon && (
+        <div className="list-item__icon">
+          {icon}
         </div>
-      </div>
+      )}
+      <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__actions">
+          { children }
+        </div>
+      )}
       {midContent && (
-        <div className="list-item__col list-item__mid-content">
+        <div className="list-item__mid-content">
           {midContent}
         </div>
       )}
       {rightContent && (
-        <div className="list-item__col list-item__right-content">
+        <div className="list-item__right-content">
           {rightContent}
         </div>
       )}