From 68efa70977a4ca2f052e5f085c161f7108d92ee1 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Wed, 16 Nov 2016 12:36:15 +0100
Subject: [PATCH] Update styling

---
 js/src/ui/Page/page.css          |  2 +-
 js/src/views/Dapps/dapps.css     |  6 +++---
 js/src/views/Dapps/dapps.js      |  6 +++---
 js/src/views/Dapps/dappsStore.js | 12 ++++++++++++
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/js/src/ui/Page/page.css b/js/src/ui/Page/page.css
index 81f4e0e68..cdb9fc868 100644
--- a/js/src/ui/Page/page.css
+++ b/js/src/ui/Page/page.css
@@ -19,5 +19,5 @@
 }
 
 .layout>div {
-  padding-bottom: 0.25em;
+  padding-bottom: 0.75em;
 }
diff --git a/js/src/views/Dapps/dapps.css b/js/src/views/Dapps/dapps.css
index 23b9d565c..64c6b2cb7 100644
--- a/js/src/views/Dapps/dapps.css
+++ b/js/src/views/Dapps/dapps.css
@@ -32,12 +32,12 @@
 }
 
 .overlay {
-  background: rgba(255, 255, 255, 0.75);
-  bottom: 0;
+  background: rgba(50, 50, 50, 0.85);
+  bottom: 0.5em;
   left: -0.25em;
   position: absolute;
   right: -0.25em;
-  top: 0;
+  top: -0.25em;
   z-index: 100;
   padding: 1em;
 }
diff --git a/js/src/views/Dapps/dapps.js b/js/src/views/Dapps/dapps.js
index b34aee7ff..c8d67ae9d 100644
--- a/js/src/views/Dapps/dapps.js
+++ b/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.sortedBuiltin) }
-          { this.renderList(this.store.sortedNetwork, externalOverlay) }
+          { this.renderList(this.store.visibleLocal) }
+          { this.renderList(this.store.visibleBuiltin) }
+          { this.renderList(this.store.visibleNetwork, externalOverlay) }
         </Page>
       </div>
     );
diff --git a/js/src/views/Dapps/dappsStore.js b/js/src/views/Dapps/dappsStore.js
index fa76eca7c..18368fcd4 100644
--- a/js/src/views/Dapps/dappsStore.js
+++ b/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;
   }