Update SelectionList indicators (#4736)

* Move selector indicators to the left

* Only display default account selection icon

js/src/modals/DappPermissions/dappPermissions.css

@@ -1,25 +0,0 @@
-/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
-/* This file is part of Parity.
-/*
-/* Parity is free software: you can redistribute it and/or modify
-/* it under the terms of the GNU General Public License as published by
-/* the Free Software Foundation, either version 3 of the License, or
-/* (at your option) any later version.
-/*
-/* Parity is distributed in the hope that it will be useful,
-/* but WITHOUT ANY WARRANTY; without even the implied warranty of
-/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-/* GNU General Public License for more details.
-/*
-/* You should have received a copy of the GNU General Public License
-/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-.legend {
-  opacity: 0.75;
-
-  span {
-    line-height: 24px;
-    vertical-align: top;
-  }
-}

js/src/modals/DappPermissions/dappPermissions.js

@@ -20,9 +20,6 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { AccountCard, Portal, SelectionList } from '~/ui';
-import { CheckIcon, StarIcon } from '~/ui/Icons';
-
-import styles from './dappPermissions.css';
 
 @observer
 class DappPermissions extends Component {
@@ -40,18 +37,6 @@ class DappPermissions extends Component {
 
     return (
       <Portal
-        buttons={
-          <div className={ styles.legend }>
-            <FormattedMessage
-              id='dapps.permissions.description'
-              defaultMessage='{activeIcon} account is available to application, {defaultIcon} account is the default account'
-              values={ {
-                activeIcon: <CheckIcon />,
-                defaultIcon: <StarIcon />
-              } }
-            />
-          </div>
-        }
         onClose={ permissionStore.closeModal }
         open
         title={

js/src/ui/SelectionList/selectionList.css

@@ -40,8 +40,29 @@
 
   .overlay {
     position: absolute;
-    right: 0.5em;
+    left: 0.75em;
-    top: 0.5em;
+    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
+      defaultIcon = (
-        ? <StarIcon />
+        <div className={ styles.overlay }>
-        : <StarOutlineIcon className={ styles.iconDisabled } onClick={ makeDefault } />;
+          {
+            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 }
-          { defaultIcon }
-          {
-            isSelected
-              ? <CheckIcon onClick={ selectItem } />
-              : <CheckIcon className={ styles.iconDisabled } onClick={ selectItem } />
-          }
-        </div>
       </div>
     );
   }