Add Contract Tx List Item; Update Token Tx on select

3 files changed, 57 insertions, 34 deletions

diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 53c0023c3..b576e5ca5 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -6,13 +6,6 @@
 $tx-view-bg: $white;
 $wallet-view-bg: $wild-sand;
 
-html {
-
-  @media screen and (max-width: 575px) {
-    height: 500px;
-  }
-}
-
 // Main container
 .main-container {
   position: absolute;
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index 2195dc1b8..9a772f666 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -10,6 +10,23 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   transition: linear 200ms;
   background-color: rgba($wallet-balance-bg, 0);
 
+  &__token-balance {
+    font-size: 130%;
+
+    @media #{$wallet-balance-breakpoint-range} {
+      font-size: 105%;
+    }
+  }
+
+  &__fiat-amount {
+    margin-top: .25%;
+    font-size: 105%;
+
+    @media #{$wallet-balance-breakpoint-range} {
+      font-size: 95%;
+    }
+  }
+
   @media #{$wallet-balance-breakpoint-range} {
     padding: 10% 4%;
   }
@@ -21,14 +38,9 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   &__identicon {
     margin-right: 15px;
     border: '1px solid #dedede';
-  }
 
-  &__token-balance {
-    font-size: 130%;
-  }
-
-  &__fiat-amount {
-    margin-top: .25%;
-    font-size: 105%;
+    @media #{$wallet-balance-breakpoint-range} {
+      margin-right: 4%;
+    }
   }
 }
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index 8dca35a17..bdf84b919 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -61,14 +61,6 @@
   flex: 0 0 70px;
   align-items: stretch;
   justify-content: flex-start;
-
-  @media screen and (max-width: $break-small) {
-    margin: 0 1.3em .95em;
-  }
-
-  @media screen and (min-width: $break-large) {
-    margin: 0 2.37em;
-  }
 }
 
 .tx-list-date-wrapper {
@@ -93,11 +85,13 @@
 .tx-list-date {
   color: $dusty-gray;
   font-size: 12px;
+  font-family: "Montserrat UltraLight";
 }
 
 .tx-list-identicon-wrapper {
   align-self: center;
-  flex: 0.5 1 auto;
+  flex: 0 0 auto;
+  margin-right: 16px;
 }
 
 .tx-list-account-and-status-wrapper {
@@ -118,6 +112,7 @@
 
     .tx-list-account-wrapper {
       flex: 1.3 2 auto;
+      min-width: 153px;
     }
 
     .tx-list-status-wrapper {
@@ -137,18 +132,41 @@
   }
 }
 
-.tx-list-details-wrapper {
-  align-self: center;
-  flex: 2 2 auto;
-  color: $dusty-gray;
+.tx-list-item {
+  border-top: 1px solid rgb(231, 231, 231);
 
-  .tx-list-value {
-    font-size: 16px;
-    text-align: right;
+  @media screen and (max-width: $break-small) {
+    margin: 0 1.3em .95em;
   }
 
-  .tx-list-fiat-value {
-    font-size: 12px;
-    text-align: right;
+  @media screen and (min-width: $break-large) {
+    margin: 0 2.37em;
+  }
+
+  &:last-of-type {
+    border-bottom: 1px solid rgb(231, 231, 231);
+    margin-bottom: 32px;
+  }
+
+  &__wrapper {
+    align-self: center;
+    flex: 2 2 auto;
+    color: $dusty-gray;
+
+    .tx-list-value {
+      font-size: 16px;
+      text-align: right;
+    }
+
+    .tx-list-fiat-value {
+      font-size: 12px;
+      text-align: right;
+    }
+  }
+
+  &--empty {
+    text-align: center;
+    border-bottom: none !important;
+    padding: 16px;
   }
 }