Adjust selection colours/display (#4811)

* Adjust selection colours to match with mui

* allow -> disable (simplify selections)

* Only use top-border

* Overlay selection line

* Slightly more muted unselected

* Restore address icon

js/src/ui/AccountCard/accountCard.css

@@ -110,12 +110,6 @@
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 0.9em;
-
-    .address {
-      &:hover {
-        cursor: text;
-      }
-    }
   }
 
   .accountName {

js/src/ui/AccountCard/accountCard.js

@@ -28,15 +28,15 @@ import styles from './accountCard.css';
 export default class AccountCard extends Component {
   static propTypes = {
     account: PropTypes.object.isRequired,
-    allowAddressClick: PropTypes.bool,
     balance: PropTypes.object,
     className: PropTypes.string,
+    disableAddressClick: PropTypes.bool,
     onClick: PropTypes.func,
     onFocus: PropTypes.func
   };
 
   static defaultProps = {
-    allowAddressClick: false
+    disableAddressClick: false
   };
 
   state = {
@@ -138,14 +138,14 @@ export default class AccountCard extends Component {
   }
 
   handleAddressClick = (event) => {
-    const { allowAddressClick } = this.props;
+    const { disableAddressClick } = this.props;
 
-    // Don't stop the event if address click is allowed
+    // Stop the event if address click is disallowed
-    if (allowAddressClick) {
+    if (disableAddressClick) {
-      return this.onClick(event);
+      return this.preventEvent(event);
     }
 
-    return this.preventEvent(event);
+    return this.onClick(event);
   }
 
   handleKeyDown = (event) => {

js/src/ui/Form/AddressSelect/addressSelect.js

@@ -348,7 +348,6 @@ class AddressSelect extends Component {
     return (
       <AccountCard
         account={ account }
-        allowAddressClick
         balance={ balance }
         className={ styles.account }
         key={ `account_${index}` }

js/src/ui/SelectionList/selectionList.css

@@ -16,7 +16,6 @@
 */
 
 .item {
-  border: 2px solid transparent;
   cursor: pointer;
   display: flex;
   flex: 1;
@@ -25,7 +24,6 @@
   width: 100%;
 
   &:hover {
-    border-color: transparent;
     filter: none;
     opacity: 1;
   }
@@ -35,7 +33,7 @@
     width: 100%;
 
     &:hover {
-      background-color: rgba(255, 255, 255, 0.5);
+      background-color: rgba(255, 255, 255, 0.15);
     }
   }
 
@@ -68,15 +66,24 @@
 }
 
 .selected {
-  border-color: rgba(255, 255, 255, 0.25);
   filter: none;
 
-  &.default {
+  &::after {
-    border-color: rgba(255, 255, 255, 0.75);
+    background: rgb(0, 151, 167);
+    content: '';
+    height: 4px;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  &.default::after {
+    background: rgb(167, 151, 0);
   }
 }
 
 .unselected {
-  filter: grayscale(10%);
+  filter: grayscale(50%);
   opacity: 0.75;
 }