Less agressive grayscale/opacity (#4688)

js/src/ui/SelectionList/selectionList.css

@@ -16,6 +16,7 @@
 */
 
 .item {
+  border: 2px solid transparent;
   display: flex;
   flex: 1;
   height: 100%;
@@ -23,7 +24,9 @@
   width: 100%;
 
   &:hover {
-    box-shadow: inset 0 0 0 2px rgb(255, 255, 255);
+    border-color: transparent;
+    filter: none;
+    opacity: 1;
   }
 
   .content {
@@ -31,7 +34,7 @@
     width: 100%;
 
     &:hover {
-      background: rgba(255, 255, 255, 0.25);
+      background-color: rgba(255, 255, 255, 0.5);
     }
   }
 
@@ -43,13 +46,17 @@
 }
 
 .selected {
-  box-shadow: inset 0 0 0 2px rgb(255, 255, 255);
+  border-color: rgba(255, 255, 255, 0.25);
   filter: none;
+
+  &.default {
+    border-color: rgba(255, 255, 255, 0.75);
+  }
 }
 
 .unselected {
-  filter: grayscale(100%);
-  opacity: 0.5;
+  filter: grayscale(10%);
+  opacity: 0.75;
 }
 
 .iconDisabled {

js/src/ui/SelectionList/selectionList.js

@@ -71,6 +71,10 @@ export default class SelectionList extends Component {
       ? [styles.item, styles.selected]
       : [styles.item, styles.unselected];
 
+    if (item.default) {
+      classes.push(styles.default);
+    }
+
     return (
       <div className={ classes.join(' ') }>
         <div