feat: Add overlay background for AllChains selector (#163)

packages/frontend/src/components/AllChains.css

@@ -1,5 +1,5 @@
 .AllChains {
-  position: absolute;
+  position: fixed;
   z-index: 20;
   top: 16px;
   bottom: 16px;
@@ -13,6 +13,17 @@
   overflow-x: hide;
 }
 
+.AllChains-overlay {
+  position: fixed;
+  display: block;
+  z-index: 19;
+  background: rgba(0,0,0,0.35);
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
 .AllChains-chain {
   padding: 0 12px;
   background: #B5AEAE;

packages/frontend/src/components/AllChains.tsx

@@ -15,12 +15,16 @@ export namespace AllChains {
 
 export class AllChains extends React.Component<AllChains.Props, {}> {
   public render() {
-    const { chains } = this.props;
+    const { chains, subscribed } = this.props;
+    const close = subscribed ? `#list/${subscribed}` : '#list';
 
     return (
-      <div className="AllChains">
-        {chains.map((chain) => this.renderChain(chain))}
-      </div>
+      <React.Fragment>
+        <a className="AllChains-overlay" href={close} />
+        <div className="AllChains">
+          {chains.map((chain) => this.renderChain(chain))}
+        </div>
+      </React.Fragment>
     );
   }