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/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 {
-    border-color: rgba(255, 255, 255, 0.75);
+  &::after {
+    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;
 }