Update SelectionList indicators (#4736)

* Move selector indicators to the left

* Only display default account selection icon

js/src/ui/SelectionList/selectionList.css

@@ -40,8 +40,29 @@
 
   .overlay {
     position: absolute;
-    right: 0.5em;
-    top: 0.5em;
+    left: 0.75em;
+    top: 0.75em;
+    z-index: 1;
+
+    .icon,
+    .iconDisabled {
+      border-radius: 0.25em;
+      color: #333 !important;
+      cursor: pointer;
+      margin-right: 0.25em;
+    }
+
+    .icon {
+      background: white;
+    }
+
+    .iconDisabled {
+      background: #666;
+
+      &:hover {
+        background: white;
+      }
+    }
   }
 }
 
@@ -58,7 +79,3 @@
   filter: grayscale(10%);
   opacity: 0.75;
 }
-
-.iconDisabled {
-  opacity: 0.15;
-}

js/src/ui/SelectionList/selectionList.js

@@ -16,7 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { CheckIcon, StarIcon, StarOutlineIcon } from '~/ui/Icons';
+import { StarIcon } from '~/ui/Icons';
 import SectionList from '~/ui/SectionList';
 import { arrayOrObjectProptype } from '~/util/proptypes';
 
@@ -62,9 +62,15 @@ export default class SelectionList extends Component {
     let defaultIcon = null;
 
     if (onDefaultClick) {
-      defaultIcon = isSelected && item.default
-        ? <StarIcon />
-        : <StarOutlineIcon className={ styles.iconDisabled } onClick={ makeDefault } />;
+      defaultIcon = (
+        <div className={ styles.overlay }>
+          {
+            isSelected && item.default
+              ? <StarIcon className={ styles.icon } />
+              : <StarIcon className={ styles.iconDisabled } onClick={ makeDefault } />
+          }
+        </div>
+      );
     }
 
     const classes = isSelected
@@ -83,14 +89,7 @@ export default class SelectionList extends Component {
         >
           { renderItem(item, index) }
         </div>
-        <div className={ styles.overlay }>
-          { defaultIcon }
-          {
-            isSelected
-              ? <CheckIcon onClick={ selectItem } />
-              : <CheckIcon className={ styles.iconDisabled } onClick={ selectItem } />
-          }
-        </div>
+        { defaultIcon }
       </div>
     );
   }