From 24fc5f9ea3a8cddfbf3993bdf0b18187a0787a64 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Fri, 20 May 2016 14:11:59 -0700
Subject: [PATCH] Fix up accounts list

Fix hover styles to not grow.
Fix back button on accounts list.
---
 ui/app/accounts.js   | 13 ++++++++-----
 ui/app/css/index.css | 14 ++++++--------
 ui/app/css/lib.css   |  8 ++++----
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/ui/app/accounts.js b/ui/app/accounts.js
index 45594f3c0..dbf4ee0fa 100644
--- a/ui/app/accounts.js
+++ b/ui/app/accounts.js
@@ -39,6 +39,7 @@ AccountsScreen.prototype.render = function() {
     onSelect: this.onSelect.bind(this),
     onShowDetail: this.onShowDetail.bind(this),
     revealAccount: this.onRevealAccount.bind(this),
+    goHome: this.goHome.bind(this),
   }
   return (
 
@@ -47,9 +48,7 @@ AccountsScreen.prototype.render = function() {
       // subtitle and nav
       h('.section-title.flex-center', [
         h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
-          onClick: (event) => {
-            state.dispatch(actions.goHome())
-          }
+          onClick: actions.goHome,
         }),
         h('h2.page-subtitle', 'Select Account'),
       ]),
@@ -112,13 +111,13 @@ AccountsScreen.prototype.render = function() {
       isSelected: false,
       isFauceting: isFauceting,
     })
+    const selectedClass = isSelected ? '.selected' : ''
 
     return (
-      h('.accounts-list-option.flex-row.flex-space-between.pointer.hover-white', {
+      h(`.accounts-list-option.flex-row.flex-space-between.pointer.hover-white${selectedClass}`, {
         key: `account-panel-${identity.address}`,
         style: {
           flex: '1 0 auto',
-          background: isSelected ? 'white' : 'none',
         },
         onClick: (event) => actions.onShowDetail(identity.address, event),
       }, [
@@ -177,3 +176,7 @@ AccountsScreen.prototype.onShowDetail = function(address, event){
 AccountsScreen.prototype.onRevealAccount = function() {
   this.props.dispatch(actions.revealAccount())
 }
+
+AccountsScreen.prototype.goHome = function() {
+  this.props.dispatch(actions.goHome())
+}
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 060ddce91..d6d1f91ac 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -274,10 +274,6 @@ input.large-input {
   height: 120px;
 }
 
-.accounts-list-option:hover {
-  transform: scale(1.1);
-}
-
 .accounts-list-option .identicon-wrapper {
   width: 100px;
 }
@@ -334,9 +330,6 @@ input.large-input {
   border-bottom: 1px solid #B1B1B1;
   cursor: pointer;
 }
-.identity-section .identity-panel:hover {
-  background: #F9F9F9;
-}
 
 .identity-section .identity-panel.selected {
   background: white;
@@ -347,6 +340,11 @@ input.large-input {
   border-color: orange;
 }
 
+.identity-section .accounts-list-option:hover,
+.identity-section .accounts-list-option.selected {
+  background:white;
+}
+
 /* account detail screen */
 
 .account-detail-section {
@@ -393,4 +391,4 @@ input.large-input {
 
 .ether-balance-label {
   color: #ABA9AA;
-}
\ No newline at end of file
+}
diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index 97ff02c46..d9719b1e3 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/lib.css
@@ -107,10 +107,6 @@
   user-select: none;
 }
 
-.hover-white:hover {
-  background: white;
-}
-
 .pointer {
   cursor: pointer;
 }
@@ -166,3 +162,7 @@ hr.horizontal-line {
   margin: 1em 0;
   padding: 0;
 }
+
+.hover-white:hover {
+  background: white;
+}