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 { ] } /> - { 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) } ); 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; }