Overal + acceptance in-place

js/src/views/Dapps/dapps.css

@@ -32,7 +32,7 @@
 }
 
 .overlay {
-  background: rgba(50, 50, 50, 0.85);
+  background: rgba(0, 0, 0, 0.85);
   bottom: 0.5em;
   left: -0.25em;
   position: absolute;
@@ -40,4 +40,15 @@
   top: -0.25em;
   z-index: 100;
   padding: 1em;
+
+  .body {
+    line-height: 1.5em;
+    margin: 0 auto;
+    text-align: left;
+    max-width: 980px;
+
+    &>div:first-child {
+      padding-bottom: 1em;
+    }
+  }
 }

js/src/views/Dapps/dapps.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { Checkbox } from 'material-ui';
 import { observer } from 'mobx-react';
 
 import { Actionbar, Page } from '../../ui';
@@ -37,11 +38,23 @@ export default class Dapps extends Component {
   store = new DappsStore(this.context.api);
 
   render () {
-    const externalOverlay = (
-      <div className={ styles.overlay }>
-        dismiss me
-      </div>
-    );
+    let externalOverlay = null;
+    if (this.store.externalOverlayVisible) {
+      externalOverlay = (
+        <div className={ styles.overlay }>
+          <div className={ styles.body }>
+            <div>Applications made available on the network by 3rd-party authors are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each before interacting.</div>
+            <div>
+              <Checkbox
+                className={ styles.accept }
+                label='I understand that these applications are not affiliated with Parity'
+                checked={ false }
+                onCheck={ this.onClickAcceptExternal } />
+            </div>
+          </div>
+        </div>
+      );
+    }
 
     return (
       <div>
@@ -89,4 +102,8 @@ export default class Dapps extends Component {
       </div>
     );
   }
+
+  onClickAcceptExternal = () => {
+    this.store.closeExternalOverlay();
+  }
 }

js/src/views/Dapps/dappsStore.js

@@ -24,15 +24,18 @@ import { hashToImageUrl } from '../../redux/util';
 import builtinApps from './builtin.json';
 
 const LS_KEY_DISPLAY = 'displayApps';
+const LS_KEY_EXTERNAL_ACCEPT = 'acceptExternal';
 
 export default class DappsStore {
   @observable apps = [];
   @observable displayApps = {};
   @observable modalOpen = false;
+  @observable externalOverlayVisible = true;
 
   constructor (api) {
     this._api = api;
 
+    this.loadExternalOverlay();
     this.readDisplayApps();
 
     Promise
@@ -80,6 +83,15 @@ export default class DappsStore {
     this.modalOpen = false;
   }
 
+  @action closeExternalOverlay = () => {
+    this.externalOverlayVisible = false;
+    store.set(LS_KEY_EXTERNAL_ACCEPT, true);
+  }
+
+  @action loadExternalOverlay () {
+    this.externalOverlayVisible = !(store.get(LS_KEY_EXTERNAL_ACCEPT) || false);
+  }
+
   @action hideApp = (id) => {
     this.displayApps = Object.assign({}, this.displayApps, { [id]: { visible: false } });
     this.writeDisplayApps();