From 3747a5949cfb4ec9f6267506f9559211f8eb4383 Mon Sep 17 00:00:00 2001
From: Rami James <ramijames@gmail.com>
Date: Fri, 12 Jul 2019 15:50:38 +0300
Subject: [PATCH 1/2] Style updates for Wallet to match new assets panel

---
 src/components/misc/KeysAndAccountList.vue | 36 +++++++++++++++++-----
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/misc/KeysAndAccountList.vue b/src/components/misc/KeysAndAccountList.vue
index 5ce6e7be..eacb2c71 100644
--- a/src/components/misc/KeysAndAccountList.vue
+++ b/src/components/misc/KeysAndAccountList.vue
@@ -295,23 +295,42 @@
 			}
 
 			.keypair-info {
-				display:flex;
 				align-items: center;
 				margin-bottom:10px;
+    			position: relative;
 
 				.blockchain {
 					font-size: 36px;
 					background:$blue;
-					border:1px solid $darkblue;
 					color:$white;
-					border-radius:$radius;
+					border-radius:24px;
 					height:50px;
 					width:50px;
 					display:flex;
 					justify-content: center;
 					align-items: center;
-					margin-right:10px;
-					position: relative;
+				    margin: 1rem auto;
+				    position: relative;
+
+				    &.token-eos-eos {
+
+				    }
+
+				    &.token-trx-trx {
+						background:linear-gradient(60deg, #304352 0%, lighten(#304352, 10%) 100%);
+					}
+
+					&.token-eos-eos {
+						background:linear-gradient(60deg, $blue 0%, lighten($blue, 10%) 100%);
+					}
+
+					&.token-eth-eth {
+						background:linear-gradient(60deg, #F15F79 0%, lighten(#F15F79, 10%) 100%);
+					}
+
+					&.token-btc-btc {
+						background:linear-gradient(60deg, #757519 0%, lighten(#757519, 10%) 100%);
+					}
 
 					.icon-spin4 {
 						font-size: 28px;
@@ -321,7 +340,7 @@
 				}
 
 				.info {
-					flex:1;
+				    text-align: center;
 
 					.name {
 						font-size: $large;
@@ -343,7 +362,10 @@
 				.actions {
 					display:flex;
 					padding-right:10px;
-					position: relative;
+				    position: absolute;
+				    right: 0rem;
+				    top: 0;
+				    text-align: left;
 
 					.action-menu {
 						position:absolute;

From e1ffb6fa4258fff0f836f702efcc977379a73bc1 Mon Sep 17 00:00:00 2001
From: Rami James <ramijames@gmail.com>
Date: Fri, 12 Jul 2019 17:19:15 +0300
Subject: [PATCH 2/2] Accounts in assets now on white, easier to parse

---
 src/components/misc/Assets.vue             | 18 ++++++++++--------
 src/components/misc/KeysAndAccountList.vue | 11 +++++++----
 src/styles/styles.scss                     | 10 ++++++++++
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/components/misc/Assets.vue b/src/components/misc/Assets.vue
index b01f4e39..bcfb9755 100644
--- a/src/components/misc/Assets.vue
+++ b/src/components/misc/Assets.vue
@@ -7,6 +7,7 @@
 
 			<SearchAndFilter full-search="1" v-if="needsAccountSearchBar" v-on:terms="x => terms = x" />
 			<section class="accounts" :class="{'with-search':needsAccountSearchBar}" v-if="selectedToken">
+				<section class="box-title">Accounts</section>
 				<section class="account" v-for="account in filteredAccounts">
 					<figure class="name">{{account.sendable()}}</figure>
 					<figure class="network">{{account.network().name}}</figure>
@@ -140,10 +141,12 @@
 			}
 
 			.accounts {
-				padding:30px;
+				margin:$padding-med;
 				overflow:auto;
 
-				height:calc(100% - 180px);
+				height:calc(100% - 245px);
+				background:white;
+				border-radius: $radius-big;
 
 				&.with-search {
 					height:calc(100% - 180px - 70px);
@@ -152,22 +155,23 @@
 				.account {
 					display:flex;
 					flex-direction: column;
-					margin-bottom:$padding-small;
 					padding: $padding-small;
 					background: rgba(255,255,255,0.06);
-					border-radius: $radius-big;
 					border-bottom:1px solid rgba(0,0,0,0.12);
 
+					&:last-child {
+						border-bottom:0;
+					}
+
 					.name {
 						font-size: $large;
 						font-weight: bold;
-						color:white;
 						margin-bottom:2px;
 					}
 
 					.network {
 						font-size: $small;
-						color:rgba(255,255,255,.6);
+						color:rgba(0,0,0,.6);
 						margin-bottom:6px;
 					}
 
@@ -182,12 +186,10 @@
 							font-size: $medium;
 							font-weight: bold;
 							margin-bottom:2px;
-							color:white;
 						}
 
 						.fiat {
 							font-size: $medium;
-							color:white;
 						}
 					}
 
diff --git a/src/components/misc/KeysAndAccountList.vue b/src/components/misc/KeysAndAccountList.vue
index eacb2c71..926155e6 100644
--- a/src/components/misc/KeysAndAccountList.vue
+++ b/src/components/misc/KeysAndAccountList.vue
@@ -429,11 +429,14 @@
 			}
 
 			.accounts-label {
-				margin-top:20px;
 				font-size: $tiny;
-				text-transform: uppercase;
-				color:$blue;
-				font-weight: bold;
+				font-weight:bold;
+				opacity: 0.44;
+				color: #141616;
+				background: rgba(53,97,120,0.06);
+				padding: 8px 10px;
+				margin: 20px -10px -10px;
+				text-transform:uppercase;
 			}
 
 			.no-accounts {
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index f44a9314..19e245ad 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -530,4 +530,14 @@ label {
   }
 }
 
+.box-title {
+    font-size: $tiny;
+    font-weight:bold;
+    opacity: 0.44;
+    color: #141616;
+    background: rgba(53,97,120,0.06);
+    padding: 8px 10px;
+    text-transform:uppercase;
+}
+