Update styling

js/src/ui/Page/page.css

@@ -19,5 +19,5 @@
 }
 
 .layout>div {
-  padding-bottom: 0.25em;
+  padding-bottom: 0.75em;
 }

js/src/views/Dapps/dapps.css

@@ -32,12 +32,12 @@
 }
 
 .overlay {
-  background: rgba(255, 255, 255, 0.75);
+  background: rgba(50, 50, 50, 0.85);
-  bottom: 0;
+  bottom: 0.5em;
   left: -0.25em;
   position: absolute;
   right: -0.25em;
-  top: 0;
+  top: -0.25em;
   z-index: 100;
   padding: 1em;
 }

js/src/views/Dapps/dapps.js

@@ -59,9 +59,9 @@ export default class Dapps extends Component {
           ] }
         />
         <Page>
-          { this.renderList(this.store.sortedLocal) }
+          { this.renderList(this.store.visibleLocal) }
-          { this.renderList(this.store.sortedBuiltin) }
+          { this.renderList(this.store.visibleBuiltin) }
-          { this.renderList(this.store.sortedNetwork, externalOverlay) }
+          { this.renderList(this.store.visibleNetwork, externalOverlay) }
         </Page>
       </div>
     );

js/src/views/Dapps/dappsStore.js

@@ -60,6 +60,18 @@ export default class DappsStore {
     return this.apps.filter((app) => this.displayApps[app.id] && this.displayApps[app.id].visible);
   }
 
+  @computed get visibleBuiltin () {
+    return this.visibleApps.filter((app) => app.type === 'builtin');
+  }
+
+  @computed get visibleLocal () {
+    return this.visibleApps.filter((app) => app.type === 'local');
+  }
+
+  @computed get visibleNetwork () {
+    return this.visibleApps.filter((app) => app.type === 'network');
+  }
+
   @action openModal = () => {
     this.modalOpen = true;
   }