Change styling of Import Account with Seed Phrease (#3182)

3 files changed, 44 insertions, 29 deletions

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 21d29d72b..0b36c6815 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -58,7 +58,7 @@ class CreatePasswordScreen extends Component {
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
         <div>
-          <h2 className="alpha-warning">Warning This is Experemental software and is a Developer BETA </h2>
+          <h2 className="alpha-warning">Warning: This is Experimental software and is a Developer BETA</h2>
           <div className="first-view-main">
             <div className="mascara-info">
               <Mascot
diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
index d9a9dc835..2b01fa75d 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -67,27 +67,37 @@ class ImportSeedPhraseScreen extends Component {
           <div className="import-account__selector-label">
             Enter your secret twelve word phrase here to restore your vault.
           </div>
-          <textarea
-            className="import-account__secret-phrase"
-            onChange={e => this.setState({seedPhrase: e.target.value})}
-          />
+          <div className="import-account__input-wrapper">
+            <label className="import-account__input-label">Wallet Seed</label>
+            <textarea
+              className="import-account__secret-phrase"
+              onChange={e => this.setState({seedPhrase: e.target.value})}
+              placeholder="Separate each word with a single space"
+            />
+          </div>
           <span
             className="error"
           >
             {this.props.warning}
           </span>
-          <input
-            className="first-time-flow__input"
-            type="password"
-            placeholder="New Password (min 8 characters)"
-            onChange={e => this.setState({password: e.target.value})}
-          />
-          <input
-            className="first-time-flow__input create-password__confirm-input"
-            type="password"
-            placeholder="Confirm Password"
-            onChange={e => this.setState({confirmPassword: e.target.value})}
-          />
+          <div className="import-account__input-wrapper">
+            <label className="import-account__input-label">New Password</label>
+            <input
+              className="first-time-flow__input"
+              type="password"
+              placeholder="New Password (min 8 characters)"
+              onChange={e => this.setState({password: e.target.value})}
+            />
+          </div>
+          <div className="import-account__input-wrapper">
+            <label className="import-account__input-label">Confirm Password</label>
+            <input
+              className="first-time-flow__input"
+              type="password"
+              placeholder="Confirm Password"
+              onChange={e => this.setState({confirmPassword: e.target.value})}
+            />
+          </div>
           <button
             className="first-time-flow__button"
             onClick={this.onClick}
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index f91c72f0e..4314efbe6 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -44,10 +44,14 @@
 .buy-ether {
   display: flex;
   flex-flow: column nowrap;
-  margin: 67px 0 0 146px;
+  margin: 67px 0 50px 146px;
   max-width: 35rem;
 }
 
+.import-account {
+  max-width: initial;
+}
+
 @media only screen and (max-width: 575px) {
   .create-password,
   .unique-image,
@@ -135,14 +139,16 @@
 .backup-phrase__title,
 .import-account__title,
 .buy-ether__title {
-  width: 280px;
   color: #1B344D;
   font-size: 40px;
-  font-weight: 500;
   line-height: 51px;
   margin-bottom: 24px;
 }
 
+.import-account__title {
+  margin-bottom: 10px;
+}
+
 .tou__title,
 .backup-phrase__title {
   width: 480px;
@@ -288,9 +294,7 @@
 .import-account__back-button:hover {
   margin-bottom: 18px;
   color: #22232C;
-  font-family: Montserrat Regular;
   font-size: 16px;
-  font-weight: 500;
   line-height: 21px;
 }
 
@@ -311,6 +315,12 @@ button.backup-phrase__reveal-button:hover {
 
 .import-account__secret-phrase {
   font-size: 16px;
+  margin: initial;
+}
+
+.import-account__secret-phrase::placeholder {
+  color: #9B9B9B;
+  font-weight: 200;
 }
 
 .backup-phrase__confirm-seed-options {
@@ -350,9 +360,7 @@ button.backup-phrase__confirm-seed-option:hover {
 
 .import-account__selector-label {
   color: #1B344D;
-  font-family: Montserrat Light;
-  font-size: 18px;
-  line-height: 23px;
+  font-size: 16px;
 }
 
 .import-account__dropdown {
@@ -394,7 +402,6 @@ button.backup-phrase__confirm-seed-option:hover {
   margin-top: 10px;
   width: 422px;
   color: #FF001F;
-  font-family: Montserrat Light;
   font-size: 16px;
   line-height: 21px;
 }
@@ -402,10 +409,8 @@ button.backup-phrase__confirm-seed-option:hover {
 .import-account__input-label {
   margin-bottom: 9px;
   color: #1B344D;
-  font-family: Montserrat Light;
   font-size: 18px;
   line-height: 23px;
-  text-transform: uppercase;
 }
 
 .import-account__input {
@@ -549,7 +554,7 @@ button.backup-phrase__confirm-seed-option:hover {
   width: 350px;
   font-size: 18px;
   line-height: 24px;
-  padding: 15px 28px;
+  padding: 15px;
   border: 1px solid #CDCDCD;
   background-color: #FFFFFF;
 }