Update design of phishing warning screen

3 files changed, 465 insertions, 77 deletions

diff --git a/app/fonts/index.css b/app/fonts/index.css
new file mode 100644
index 000000000..b31179cb4
--- /dev/null
+++ b/app/fonts/index.css
@@ -0,0 +1,405 @@
+@import url('./Font_Awesome/font-awesome.min.css');
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url('./Roboto/Roboto-Thin.ttf') format('truetype');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url('./Roboto/Roboto-Thin.ttf') format('truetype');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url('./Roboto/Roboto-Thin.ttf') format('truetype');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url('./Roboto/Roboto-Thin.ttf') format('truetype');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url('./Roboto/Roboto-Thin.ttf') format('truetype');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url('./Roboto/Roboto-Thin.ttf') format('truetype');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url('./Roboto/Roboto-Thin.ttf') format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url('./Roboto/Roboto-Light.ttf') format('truetype');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url('./Roboto/Roboto-Light.ttf') format('truetype');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url('./Roboto/Roboto-Light.ttf') format('truetype');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url('./Roboto/Roboto-Light.ttf') format('truetype');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url('./Roboto/Roboto-Light.ttf') format('truetype');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url('./Roboto/Roboto-Light.ttf') format('truetype');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url('./Roboto/Roboto-Light.ttf') format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('./Roboto/Roboto-Regular.ttf') format('truetype');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('./Roboto/Roboto-Regular.ttf') format('truetype');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('./Roboto/Roboto-Regular.ttf') format('truetype');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('./Roboto/Roboto-Regular.ttf') format('truetype');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('./Roboto/Roboto-Regular.ttf') format('truetype');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('./Roboto/Roboto-Regular.ttf') format('truetype');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('./Roboto/Roboto-Regular.ttf') format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url('./Roboto/Roboto-Medium.ttf') format('truetype');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url('./Roboto/Roboto-Medium.ttf') format('truetype');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url('./Roboto/Roboto-Medium.ttf') format('truetype');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url('./Roboto/Roboto-Medium.ttf') format('truetype');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url('./Roboto/Roboto-Medium.ttf') format('truetype');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url('./Roboto/Roboto-Medium.ttf') format('truetype');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url('./Roboto/Roboto-Medium.ttf') format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url('./Roboto/Roboto-Bold.ttf') format('truetype');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url('./Roboto/Roboto-Bold.ttf') format('truetype');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url('./Roboto/Roboto-Bold.ttf') format('truetype');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url('./Roboto/Roboto-Bold.ttf') format('truetype');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url('./Roboto/Roboto-Bold.ttf') format('truetype');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url('./Roboto/Roboto-Bold.ttf') format('truetype');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url('./Roboto/Roboto-Bold.ttf') format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url('./Roboto/Roboto-Black.ttf') format('truetype');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url('./Roboto/Roboto-Black.ttf') format('truetype');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url('./Roboto/Roboto-Black.ttf') format('truetype');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url('./Roboto/Roboto-Black.ttf') format('truetype');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url('./Roboto/Roboto-Black.ttf') format('truetype');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url('Roboto/Roboto-Black.ttf') format('truetype');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url('./Roboto/Roboto-Black.ttf') format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Montserrat Regular';
+  src: url('./Montserrat/Montserrat-Regular.woff') format('woff');
+  src: url('./Montserrat/Montserrat-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-size: small;
+}
+
+@font-face {
+  font-family: 'Montserrat Bold';
+  src: url('./Montserrat/Montserrat-Bold.woff') format('woff');
+  src: url('./Montserrat/Montserrat-Bold.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat Light';
+  src: url('./Montserrat/Montserrat-Light.woff') format('woff');
+  src: url('./Montserrat/Montserrat-Light.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat UltraLight';
+  src: url('./Montserrat/Montserrat-UltraLight.woff') format('woff');
+  src: url('./Montserrat/Montserrat-UltraLight.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DIN OT';
+  src: url('./DIN_OT/DINOT-2.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DIN OT Light';
+  src: url('./DIN_OT/DINOT-2.otf') format('opentype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DIN NEXT';
+  src: url('./DIN Next/DIN Next W01 Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DIN NEXT Light';
+  src: url('./DIN Next/DIN Next W10 Light.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url('./Lato/Lato-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
diff --git a/app/phishing.html b/app/phishing.html
index 207489a12..1e1c4d11c 100644
--- a/app/phishing.html
+++ b/app/phishing.html
@@ -1,69 +1,64 @@
-<!DOCTYPE HTML>
-
-<html>
-
+<!doctype html>
+<html lang="en">
   <head>
     <title>Ethereum Phishing Detection - MetaMask</title>
-
+    <script src="./phishing-detect.js"></script>
+    <link href="fonts/index.css" type="text/css" rel="stylesheet">
     <style>
-      body {
-        background: #c50000;
-        padding: 50px;
-        display: flex;
-        justify-content: center;
-        font-family: sans-serif;
-      }
-
-      .centered {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        color: white;
-        max-width: 600px;
-      }
-
-      a {
-        color: white;
-        cursor: pointer;
-        text-decoration: underline;
-      }
+      *                          { margin: 0; padding: 0; box-sizing: border-box; }
+      body, html                 { background-color: rgb(217, 88, 70);
+                                   display: flex; flex-direction: column;
+                                   justify-content: center; align-items: center;
+                                   font-family: Roboto, Arial, sans-serif;
+                                   width: 100vw; min-height: 100vh; }
+      .content                   { display: flex; flex-direction: column; align-items: center;
+                                   width: 80%;
+                                   background-color: white; box-shadow: 0 0 15px #737373; }
+      .content__header           { display: flex; flex-direction: column; align-items: center; justify-content: center;
+                                   width: 100%;
+                                   color: rgb(217, 88, 70); border-bottom: 1px solid rgb(212, 212, 212);
+                                   padding: 2em; }
+      .content__header h1        { font-size: 24px; font-weight: normal; }
+      .content__header h1 i      { margin-right: 0.25em; }
+      .content__header img       { margin-bottom: 3em; width: 160px; }
+      .content__body             { background-color: rgb(245, 245, 245); font-size: 12pt; }
+      .content__body p           { margin: 2em; }
+      .content__body p a         { text-decoration: underline; color: inherit; cursor: pointer; }
     </style>
-
-
-    <script>
-      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-      ga('create', 'UA-37075177-6', 'auto');
-      ga('send', 'pageview');
-      //Send referral data to EAL
-      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-      ga('create', 'UA-68598031-1', 'auto' {'allowLinker':true});
-      ga('send', 'pageview');
-      ga('require', 'linker');
-      ga('linker:autoLink', ['metamask.io'], false, true);
-    </script>
-    <script src="phishing-detect.js"></script>
   </head>
-
   <body>
-    <div class="centered">
-
-      <img src="/images/ethereum-metamask-chrome.png" style="width:100%">
-      <h3>ATTENTION</h3>
-      <p>This domain is currently on the MetaMask domain warning list. This means that based on information available to us, MetaMask believes this domain could currently compromise your security and, as an added safety feature, MetaMask has restricted access to the site. To override this, please read the rest of this warning for instructions on how to continue at your own risk.  </p>
-      <p>There are many reasons sites can appear on our warning list, and our warning list compiles from other widely used industry lists. Such reasons can include known fraud or security risks, such as domains that test positive on the <a href="https://github.com/metamask/eth-phishing-detect">Ethereum Phishing Detector</a>. Domains on these warning lists may include outright malicious websites and legitimate websites that have been compromised by a malicious actor.
-      <p id="esdbLink"></p>
-      <p>Note that this warning list is compiled on a voluntary basis. This list may be inaccurate or incomplete. Just because a domain does not appear on this list is not an implicit guarantee of that domain's safety. As always, your transactions are your own responsibility. If you wish to interact with any domain on our warning list, you can do so by <a id="unsafe-continue">continuing at your own risk</a>.</p>
-      <p>
-        If you think this domain is incorrectly flagged or if a blocked legitimate website has resolved its security issues,
-        <a href="https://github.com/metamask/eth-phishing-detect/issues/new">please file an issue</a>.
-      </p>
-
+    <div class="content">
+      <div class="content__header">
+        <img src="./images/info-logo.png" alt="">
+        <h1>
+          <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+          Ethereum Phishing Detection
+        </h1>
+      </div>
+      <div class="content__body">
+        <p>
+          This domain is currently on the MetaMask domain warning list. This means that based on information available to us,
+          MetaMask believes this domain could currently compromise your security and, as an added safety feature, MetaMask
+          has restricted access to the site. To override this, please read the rest of this warning for instructions on how to continue at your own risk.
+        </p>
+        <p>
+          There are many reasons sites can appear on our warning list, and our warning list compiles from other widely used industry lists.
+          Such reasons can include known fraud or security risks, such as domains that test positive on the
+          <a href="https://github.com/metamask/eth-phishing-detect">Ethereum Phishing Detector</a>.
+          Domains on these warning lists may include outright malicious websites and legitimate websites that have been compromised by a malicious actor.
+        </p>
+        <p>To read more about this site <a id="esdbLink">please review the domain on Etherscam</a>.</p>
+        <p>
+          Note that this warning list is compiled on a voluntary basis. This list may be inaccurate or incomplete.
+          Just because a domain does not appear on this list is not an implicit guarantee of that domain's safety.
+          As always, your transactions are your own responsibility. If you wish to interact with any domain on our warning list,
+          you can do so by <a id="unsafe-continue">continuing at your own risk</a>.
+        </p>
+        <p>
+          If you think this domain is incorrectly flagged or if a blocked legitimate website has resolved its security issues,
+          <a href="https://github.com/metamask/eth-phishing-detect/issues/new">please file an issue</a>.
+        </p>
+      </div>
     </div>
   </body>
 </html>
diff --git a/app/scripts/phishing-detect.js b/app/scripts/phishing-detect.js
index 5ef99f181..ff95d1f6f 100644
--- a/app/scripts/phishing-detect.js
+++ b/app/scripts/phishing-detect.js
@@ -1,10 +1,3 @@
-window.onload = function () {
-  if (window.location.pathname === '/phishing.html') {
-    const {hostname} = parseHash()
-    document.getElementById('esdbLink').innerHTML = '<b>To read more about this site and why it was blocked, <a href="https://etherscamdb.info/domain/' + hostname + '"> please navigate here</a>.</b>'
-  }
-}
-
 const querystring = require('querystring')
 const dnode = require('dnode')
 const { EventEmitter } = require('events')
@@ -18,6 +11,10 @@ document.addEventListener('DOMContentLoaded', start)
 
 function start () {
   const windowType = getEnvironmentType(window.location.href)
+  const hash = window.location.hash.substring(1)
+  const suspect = querystring.parse(hash)
+
+  document.getElementById('esdbLink').href = `https://etherscamdb.info/domain/${suspect.hostname}`
 
   global.platform = new ExtensionPlatform()
   global.METAMASK_UI_TYPE = windowType
@@ -30,14 +27,10 @@ function start () {
       return
     }
 
-    const suspect = parseHash()
-    const unsafeContinue = () => {
-      window.location.href = suspect.href
-    }
     const continueLink = document.getElementById('unsafe-continue')
     continueLink.addEventListener('click', () => {
       metaMaskController.whitelistPhishingDomain(suspect.hostname)
-      unsafeContinue()
+      window.location.href = suspect.href
     })
   })
 }
@@ -52,8 +45,3 @@ function setupControllerConnection (connectionStream, cb) {
   connectionStream.pipe(accountManagerDnode).pipe(connectionStream)
   accountManagerDnode.once('remote', (accountManager) => cb(null, accountManager))
 }
-
-function parseHash () {
-  const hash = window.location.hash.substring(1)
-  return querystring.parse(hash)
-}