Implement tokens list UI

4 files changed, 38 insertions, 2 deletions

diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 19b8bbc95..952d11ce4 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -23,3 +23,5 @@
 @import './transaction-list.scss';
 
 @import './sections.scss';
+
+@import './token-list.scss';
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index f5accca8a..53c0023c3 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -6,6 +6,13 @@
 $tx-view-bg: $white;
 $wallet-view-bg: $wild-sand;
 
+html {
+
+  @media screen and (max-width: 575px) {
+    height: 500px;
+  }
+}
+
 // Main container
 .main-container {
   position: absolute;
@@ -17,7 +24,7 @@ $wallet-view-bg: $wild-sand;
 }
 
 .main-container::-webkit-scrollbar {
-  display: none; 
+  display: none;
 }
 
 // tx view
@@ -37,6 +44,7 @@ $wallet-view-bg: $wild-sand;
 
   @media screen and (min-width: 576px) {
     overflow-y: scroll;
+    overflow-x: hidden;
   }
 
   .wallet-view-account-details {
@@ -142,7 +150,10 @@ $wallet-view-bg: $wild-sand;
 
   .main-container {
     margin-top: 35px;
+    height: calc(100% - 34px);
     width: 100%;
+    overflow-y: auto;
+    background-color: $white;
   }
 
   button.btn-clear {
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
new file mode 100644
index 000000000..dd1d533c7
--- /dev/null
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -0,0 +1,21 @@
+.token-list-item {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  padding: 20px 24px;
+  cursor: pointer;
+
+  &__identicon {
+    margin-right: 15px;
+    border: '1px solid #dedede';
+  }
+
+  &__token-balance {
+    font-size: 130%;
+  }
+
+  &__fiat-amount {
+    margin-top: .25%;
+    font-size: 105%;
+  }
+}
diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss
index 36f0e1025..113380769 100644
--- a/ui/app/css/itcss/components/wallet-balance.scss
+++ b/ui/app/css/itcss/components/wallet-balance.scss
@@ -3,7 +3,7 @@ $wallet-balance-breakpoint: 890px;
 $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
 
 .wallet-balance-wrapper {
-  flex: 0 0 80px;
+  flex: 0 0 auto;
 }
 
 .wallet-balance {
@@ -12,6 +12,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
+  flex: 0 0 auto;
+  cursor: pointer;
 
   .balance-container {
     display: flex;