1 files changed, 31 insertions, 17 deletions
diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss
index 9c53c8960..9d694546b 100644
--- a/ui/app/components/transaction-list-item/index.scss
+++ b/ui/app/components/transaction-list-item/index.scss
@@ -1,37 +1,35 @@
 .transaction-list-item {
   box-sizing: border-box;
   min-height: 74px;
-  padding: 8px 20px;
   border-bottom: 1px solid $geyser;
-  cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
-
-  @media screen and (max-width: $break-small) {
-    padding: 8px 20px 12px;
-  }
-
-  &:hover {
-    background: rgba($alto, .2);
-  }
+  background: $white;
 
   &__grid {
+    cursor: pointer;
     width: 100%;
+    padding: 16px 20px;
     display: grid;
     grid-template-columns: 45px 1fr 1fr 1fr;
     grid-template-areas:
       "identicon action status primary-amount"
       "identicon nonce status secondary-amount";
 
-      @media screen and (max-width: $break-small) {
-        grid-template-columns: 45px 5fr 3fr;
-        grid-template-areas:
-          "nonce nonce nonce"
-          "identicon action primary-amount"
-          "identicon status secondary-amount";
-      }
+    @media screen and (max-width: $break-small) {
+      padding: 8px 20px 12px;
+      grid-template-columns: 45px 5fr 3fr;
+      grid-template-areas:
+        "nonce nonce nonce"
+        "identicon action primary-amount"
+        "identicon status secondary-amount";
+    }
+
+    &:hover {
+      background: rgba($alto, .2);
+    }
   }
 
   &__identicon {
@@ -114,4 +112,20 @@
       font-size: .5rem;
     }
   }
+
+  &__details-container {
+    padding: 8px 16px 16px;
+    background: #f3f4f7;
+    width: 100%;
+  }
+
+  &__expander {
+    max-height: 0px;
+    width: 100%;
+
+    &--show {
+      max-height: 1000px;
+      transition: max-height 700ms ease-out;
+    }
+  }
 }