Use new design for reveal seed screen. Persist seed words only in first time flow

4 files changed, 102 insertions, 18 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 3b20ab49a..a40c2635c 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -98,6 +98,9 @@
   "clickCopy": {
     "message": "Click to Copy"
   },
+  "close": {
+    "message": "Close"
+  },
   "confirm": {
     "message": "Confirm"
   },
@@ -259,6 +262,9 @@
   "enterPasswordConfirm": {
     "message": "Enter your password to confirm"
   },
+  "enterPasswordContinue": {
+    "message": "Enter password to continue"
+  },
   "passwordNotLongEnough": {
     "message": "Password not long enough"
   },
@@ -331,6 +337,9 @@
   "gasPriceRequired": {
     "message": "Gas Price Required"
   },
+  "generatingTransaction": {
+    "message": "Generating transaction"
+  },
   "getEther": {
     "message": "Get Ether"
   },
@@ -476,6 +485,9 @@
   "metamaskDescription": {
     "message": "MetaMask is a secure identity vault for Ethereum."
   },
+  "metamaskSeedWords": {
+    "message": "MetaMask Seed Words"
+  },
   "min": {
     "message": "Minimum"
   },
@@ -549,6 +561,9 @@
     "message": "or",
     "description": "choice between creating or importing a new account"
   },
+  "password": {
+    "message": "Password"
+  },
   "passwordCorrect": {
     "message": "Please make sure your password is correct."
   },
@@ -634,8 +649,17 @@
   "revealSeedWords": {
     "message": "Reveal Seed Words"
   },
+  "revealSeedWordsTitle": {
+    "message": "Seed Phrase"
+  },
+  "revealSeedWordsDescription": {
+    "message": "If you ever change browsers or move computers, you will need this seed phrase to access your accounts. Save them somewhere safe and secret."
+  },
+  "revealSeedWordsWarningTitle": {
+    "message": "DO NOT share this phrase with anyone!"
+  },
   "revealSeedWordsWarning": {
-    "message": "Do not recover your seed words in a public place! These words can be used to steal all your accounts."
+    "message": "These words can be used to steal all your accounts."
   },
   "revert": {
     "message": "Revert"
@@ -677,6 +701,9 @@
   "reprice_subtitle": {
     "message": "Increase your gas price to attempt to overwrite and speed up your transaction"
   },
+  "saveAsCsvFile": {
+    "message": "Save as CSV File"
+  },
   "saveAsFile": {
     "message": "Save as File",
     "description": "Account export process"
@@ -909,7 +936,7 @@
   "youSign": {
     "message": "You are signing"
   },
-  "generatingTransaction": {
-    "message": "Generating transaction"
+  "yourPrivateSeedPhrase": {
+    "message": "Your private seed phrase"
   }
 }
diff --git a/app/images/copy-to-clipboard.svg b/app/images/copy-to-clipboard.svg
new file mode 100644
index 000000000..c67c2aa84
--- /dev/null
+++ b/app/images/copy-to-clipboard.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="17px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>374E58A5-C29E-4921-83E7-889FA06D6408</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Reveal-Seedphrase" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Seed-phrase-2" transform="translate(-39.000000, -379.000000)">
+            <g id="Group-2">
+                <g id="Group-8" transform="translate(16.000000, 248.000000)">
+                    <g id="Group-6" transform="translate(23.336478, 120.000000)">
+                        <g id="Group-5" transform="translate(0.408805, 11.000000)">
+                            <g id="copy-to-clipboard">
+                                <rect id="Rectangle-18" stroke="#3098DC" stroke-width="2" x="1" y="1" width="12.0220126" height="12"></rect>
+                                <rect id="Rectangle-18-Copy-2" fill="#FFFFFF" x="2.1572327" y="2" width="14.0220126" height="14"></rect>
+                                <rect id="Rectangle-18-Copy" stroke="#3098DC" stroke-width="2" x="4.23584906" y="4" width="12.0220126" height="12"></rect>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/images/download.svg b/app/images/download.svg
index 137a1190e..b55066414 100644
--- a/app/images/download.svg
+++ b/app/images/download.svg
@@ -1,15 +1,26 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="24.088px" height="24px" viewBox="138.01 0 24.088 24" enable-background="new 138.01 0 24.088 24" xml:space="preserve" fill="#F7861C">
-<g>
-	<polygon fill="#F7861C" points="157.551,17.075 156.55,17.075 156.55,19.149 142.569,19.149 142.569,17.075 141.568,17.075 
-		141.568,20.145 141.955,20.145 141.955,20.15 157.006,20.15 157.006,20.145 157.551,20.145 	"/>
-	<polygon fill="#F7861C" points="152.555,10.275 152.555,11.26 152.555,11.268 151.562,11.268 151.562,12.252 150.565,12.252 
-		150.565,4.171 149.564,4.171 149.564,12.236 148.564,12.236 148.564,11.252 147.564,11.252 147.564,11.236 147.564,11.221 
-		147.564,10.236 146.563,10.236 146.563,11.221 146.563,11.236 146.563,12.221 147.563,12.221 147.563,12.236 147.563,12.252 
-		147.563,13.236 148.563,13.236 148.563,14.221 149.564,14.221 149.564,15.725 150.565,15.725 150.565,14.236 151.563,14.236 
-		151.563,13.252 152.563,13.252 152.563,12.268 152.563,12.26 153.556,12.26 153.556,11.275 153.556,11.26 153.556,10.275 	"/>
-</g>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="18px" viewBox="0 0 20 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>50559280-0739-419A-8E87-3CDD16A6996A</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Reveal-Seedphrase" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Seed-phrase-2" transform="translate(-212.000000, -379.000000)" stroke="#259DE5" stroke-width="2">
+            <g id="Group-2">
+                <g id="Group-8" transform="translate(16.000000, 248.000000)">
+                    <g id="Group-6" transform="translate(23.336478, 120.000000)">
+                        <g id="Group-3" transform="translate(174.000000, 11.000000)">
+                            <g id="Group-4">
+                                <g id="download">
+                                    <polyline id="Path-5" points="0 11 0 17 17 17 17 11"></polyline>
+                                    <path d="M8.5,0 L8.5,11" id="Path-6"></path>
+                                    <polyline id="Path-7" points="3.1875 7 8.5 11 13.8125 7"></polyline>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/images/warning.svg b/app/images/warning.svg
new file mode 100644
index 000000000..9c8d697d7
--- /dev/null
+++ b/app/images/warning.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="33px" height="32px" viewBox="0 0 33 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 7</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Reveal-Seedphrase" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Seed-phrase-2" transform="translate(-29.000000, -155.000000)">
+            <g id="Group-2" transform="translate(0.000000, 132.000000)">
+                <g id="Group" transform="translate(28.000000, 19.000000)">
+                    <g id="Group-19-Copy-2" transform="translate(0.000000, 3.000000)">
+                        <g id="Group-7">
+                            <path d="M20.1321134,3.85444772 L32.5721829,26.6020033 C33.367162,28.0556794 32.8331826,29.8785746 31.3795065,30.6735537 C30.9381289,30.9149321 30.4431378,31.0414403 29.9400695,31.0414403 L5.05993054,31.0414403 C3.40307629,31.0414403 2.05993054,29.6982946 2.05993054,28.0414403 C2.05993054,27.538372 2.18643873,27.0433809 2.42781712,26.6020033 L14.8678866,3.85444772 C15.6628657,2.40077162 17.4857609,1.86679221 18.939437,2.66177133 C19.442875,2.93708896 19.8567958,3.35100977 20.1321134,3.85444772 Z" id="Triangle-2-Copy" stroke="#FF001F" stroke-width="2"></path>
+                            <rect id="Rectangle-5" fill="#FF001F" x="16" y="9" width="3" height="13"></rect>
+                            <rect id="Rectangle-5-Copy" fill="#FF001F" x="16" y="24" width="3" height="3"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file