Update margins for consistency in first time flow (#3588)

5 files changed, 206 insertions, 144 deletions

diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js
index 9db61f3ab..c8cc56c6c 100644
--- a/mascara/src/app/first-time/backup-phrase-screen.js
+++ b/mascara/src/app/first-time/backup-phrase-screen.js
@@ -89,15 +89,15 @@ class BackupPhraseScreen extends Component {
           </div>
         )}
       </div>
-    );
+    )
   }
 
-  renderSecretScreen() {
+  renderSecretScreen () {
     const { isShowingSecret } = this.state
 
     return (
       <div className="backup-phrase__content-wrapper">
-        <div>
+        <div className="backup-phrase__phrase">
           <div className="backup-phrase__title">Secret Backup Phrase</div>
           <div className="backup-phrase__body-text">
             Your secret backup phrase makes it easy to back up and restore your account.
@@ -106,17 +106,6 @@ class BackupPhraseScreen extends Component {
             WARNING: Never disclose your backup phrase. Anyone with this phrase can take your Ether forever.
           </div>
           {this.renderSecretWordsContainer()}
-          <button
-            className="first-time-flow__button"
-            onClick={() => isShowingSecret && this.setState({
-              isShowingSecret: false,
-              page: BackupPhraseScreen.PAGE.CONFIRM
-            })}
-            disabled={!isShowingSecret}
-          >
-            Next
-          </button>
-          <Breadcrumbs total={3} currentIndex={1} />
         </div>
         <div className="backup-phrase__tips">
           <div className="backup-phrase__tips-text">Tips:</div>
@@ -130,6 +119,19 @@ class BackupPhraseScreen extends Component {
             Memorize this phrase.
           </div>
         </div>
+        <div className="backup-phrase__next-button">
+          <button
+            className="first-time-flow__button"
+            onClick={() => isShowingSecret && this.setState({
+              isShowingSecret: false,
+              page: BackupPhraseScreen.PAGE.CONFIRM,
+            })}
+            disabled={!isShowingSecret}
+          >
+            Next
+          </button>
+          <Breadcrumbs total={3} currentIndex={1} />
+        </div>
       </div>
     )
   }
@@ -231,10 +233,14 @@ class BackupPhraseScreen extends Component {
     return this.props.isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
-        <div className="backup-phrase">
-          {this.renderBack()}
-          <Identicon address={this.props.address} diameter={70} />
-          {this.renderContent()}
+        <div className="first-view-main-wrapper">
+          <div className="first-view-main">
+            <div className="backup-phrase">
+              {this.renderBack()}
+              <Identicon address={this.props.address} diameter={70} />
+              {this.renderContent()}
+            </div>
+          </div>
         </div>
       )
   }
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 de8d675e1..86f02ceac 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -79,70 +79,73 @@ class ImportSeedPhraseScreen extends Component {
     const { warning } = this.props
     const importDisabled = warning || !seedPhrase || !password || !confirmPassword
     return (
-      <div className="import-account">
-        <a
-          className="import-account__back-button"
-          onClick={e => {
-            e.preventDefault()
-            this.props.back()
-          }}
-          href="#"
-        >
-          {`< Back`}
-        </a>
-        <div className="import-account__title">
-          Import an Account with Seed Phrase
+      <div className="first-view-main-wrapper">
+        <div className="first-view-main">
+          <div className="import-account">
+            <a
+              className="import-account__back-button"
+              onClick={e => {
+                e.preventDefault()
+                this.props.back()
+              }}
+              href="#"
+            >
+              {`< Back`}
+            </a>
+            <div className="import-account__title">
+              Import an Account with Seed Phrase
+            </div>
+            <div className="import-account__selector-label">
+              Enter your secret twelve word phrase here to restore your vault.
+            </div>
+            <div className="import-account__input-wrapper">
+              <label className="import-account__input-label">Wallet Seed</label>
+              <textarea
+                className="import-account__secret-phrase"
+                onChange={e => this.onChange({seedPhrase: e.target.value})}
+                value={this.state.seedPhrase}
+                placeholder="Separate each word with a single space"
+              />
+            </div>
+            <span
+              className="error"
+            >
+              {this.props.warning}
+            </span>
+            <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.onChange({password: e.target.value})}
+              />
+            </div>
+            <div className="import-account__input-wrapper">
+              <label
+                className={classnames('import-account__input-label', {
+                  'import-account__input-label__disabled': password.length < 8,
+                })}
+              >Confirm Password</label>
+              <input
+                className={classnames('first-time-flow__input', {
+                  'first-time-flow__input__disabled': password.length < 8,
+                })}
+                type="password"
+                placeholder="Confirm Password"
+                onChange={e => this.onChange({confirmPassword: e.target.value})}
+                disabled={password.length < 8}
+              />
+            </div>
+            <button
+              className="first-time-flow__button"
+              onClick={() => !importDisabled && this.onClick()}
+              disabled={importDisabled}
+            >
+              Import
+            </button>
+          </div>
         </div>
-        <div className="import-account__selector-label">
-          Enter your secret twelve word phrase here to restore your vault.
-        </div>
-        <div className="import-account__input-wrapper">
-          <label className="import-account__input-label">Wallet Seed</label>
-          <textarea
-            className="import-account__secret-phrase"
-            onChange={e => this.onChange({seedPhrase: e.target.value})}
-            value={this.state.seedPhrase}
-            placeholder="Separate each word with a single space"
-          />
-        </div>
-        <span
-          className="error"
-        >
-          {this.props.warning}
-        </span>
-        <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.onChange({password: e.target.value})}
-          />
-        </div>
-        <div className="import-account__input-wrapper">
-          <label
-            className="import-account__input-label"
-            className={classnames('import-account__input-label', {
-              'import-account__input-label__disabled': password.length < 8,
-            })}
-          >Confirm Password</label>
-          <input
-            className={classnames('first-time-flow__input', {
-              'first-time-flow__input__disabled': password.length < 8,
-            })}
-            type="password"
-            placeholder="Confirm Password"
-            onChange={e => this.onChange({confirmPassword: e.target.value})}
-            disabled={password.length < 8}
-          />
-        </div>
-        <button
-          className="first-time-flow__button"
-          onClick={() => !importDisabled && this.onClick()}
-          disabled={importDisabled}
-        >
-          Import
-        </button>
       </div>
     )
   }
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 6c45816bd..d7b146e51 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -17,12 +17,34 @@
   font-family: Roboto;
 }
 
+.alpha-warning__container {
+  display: flex;
+  justify-content: center;
+  background: #f7861c;
+}
+
 .alpha-warning,
 .alpha-warning-welcome-screen {
-  background: #f7861c;
   color: #fff;
   line-height: 2em;
-  padding-left: 10vw;
+}
+
+@media screen and (min-width: 576px) {
+  .alpha-warning {
+    width: 85vw;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .alpha-warning {
+    width: 80vw;
+  }
+}
+
+@media screen and (min-width: 1281px) {
+  .alpha-warning {
+    width: 62vw;
+  }
 }
 
 .alpha-warning-welcome-screen {
@@ -33,26 +55,22 @@
 .first-view-main-wrapper {
   display: flex;
   width: 100%;
-  padding-left: 10vw;
+  height: 100%;
+  justify-content: center;
+  padding: 0 10px;
 }
 
 .first-view-main,
 .first-view-main__mascara {
   display: flex;
-  flex-direction: row-reverse;
-  justify-content: center;
+  flex-direction: row;
+  justify-content: flex-start;
 }
 
 .first-view-main__mascara {
   justify-content: space-between;
 }
 
-@media screen and (max-width: 575px) {
-  .first-view-main-wrapper {
-    padding: 0;
-  }
-}
-
 @media screen and (min-width: 1281px) {
   .first-view-main {
     width: 62vw;
@@ -83,12 +101,8 @@
 .buy-ether {
   display: flex;
   flex-flow: column nowrap;
-  margin: 67px 0 50px;
-  max-width: 35rem;
-}
-
-.create-password {
-  margin: 67px 0 50px;
+  margin: 60px 0 30px 0;
+  position: relative;
 }
 
 .import-account {
@@ -133,10 +147,6 @@
     margin-top: 12px;
   }
 
-  .first-view-main .create-password {
-    margin-top: 0px;
-  }
-
   .mascara-info {
     margin-top: 0px;
     width: 100%;
@@ -212,7 +222,7 @@
 }
 
 .backup-phrase {
-  max-width: 100%;
+  width: 100%;
 }
 
 .create-password__title,
@@ -298,7 +308,18 @@
 
 .backup-phrase__content-wrapper {
   display: flex;
-  flex: row nowrap;
+  flex-flow: row wrap;
+  justify-content: space-between;
+}
+
+.backup-phrase__phrase {
+  flex-grow: .5;
+  min-width: 0;
+}
+
+.backup-phrase__next-button {
+  flex-grow: 1;
+  width: 100%;
 }
 
 .backup-phrase__body-text {
@@ -306,8 +327,10 @@
 }
 
 .backup-phrase__tips {
-  margin: 40px 85px;
+  margin-top: 40px;
   width: 285px;
+  flex-grow: .5;
+  min-width: 0;
 }
 
 .backup-phrase__tips-text {
@@ -315,6 +338,22 @@
   font-size: 16px;
   line-height: 23px;
   font-family: Roboto;
+  min-width: 0;
+}
+
+@media only screen and (max-width: 768px) {
+  .backup-phrase__content-wrapper {
+    flex-direction: column;
+  }
+
+  .backup-phrase__phrase {
+    flex: 1 0 auto;
+  }
+
+  .backup-phrase__tips {
+    width: 100%;
+    flex: 1 0 auto;
+  }
 }
 
 .backup-phrase__secret {
@@ -371,13 +410,17 @@
 }
 
 .backup-phrase__back-button,
-.backup-phrase__back-button:hover,
-.import-account__back-button,
-.import-account__back-button:hover {
+.import-account__back-button {
   margin-bottom: 18px;
-  color: #22232C;
+  color: #22232c;
   font-size: 16px;
   line-height: 21px;
+  position: absolute;
+  top: -25px;
+}
+
+.backup-phrase__back-button {
+  top: -30px;
 }
 
 button.backup-phrase__reveal-button:hover {
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
index 0f0a7e95d..cbd8f9f5b 100644
--- a/mascara/src/app/first-time/notice-screen.js
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -63,26 +63,32 @@ class NoticeScreen extends Component {
     return (
       isLoading
         ? <LoadingScreen />
-        : <div
-          className="tou"
-          onScroll={this.onScroll}
-        >
-          <Identicon address={address} diameter={70} />
-          <div className="tou__title">{title}</div>
-          <Markdown
-            className="tou__body markdown"
-            source={body}
-            skipHtml
-          />
-          <button
-            className="first-time-flow__button"
-            onClick={atBottom && this.acceptTerms}
-            disabled={!atBottom}
-          >
-            Accept
-          </button>
-          <Breadcrumbs total={3} currentIndex={2} />
-        </div>
+        : (
+          <div className="first-view-main-wrapper">
+            <div className="first-view-main">
+              <div
+                className="tou"
+                onScroll={this.onScroll}
+              >
+                <Identicon address={address} diameter={70} />
+                <div className="tou__title">{title}</div>
+                <Markdown
+                  className="tou__body markdown"
+                  source={body}
+                  skipHtml
+                />
+                <button
+                  className="first-time-flow__button"
+                  onClick={atBottom && this.acceptTerms}
+                  disabled={!atBottom}
+                >
+                  Accept
+                </button>
+                <Breadcrumbs total={3} currentIndex={2} />
+              </div>
+            </div>
+          </div>
+        )
     )
   }
 }
diff --git a/mascara/src/app/first-time/unique-image-screen.js b/mascara/src/app/first-time/unique-image-screen.js
index 46448aacf..ede17ee3d 100644
--- a/mascara/src/app/first-time/unique-image-screen.js
+++ b/mascara/src/app/first-time/unique-image-screen.js
@@ -12,22 +12,26 @@ class UniqueImageScreen extends Component {
 
   render () {
     return (
-      <div className="unique-image">
-        <Identicon address={this.props.address} diameter={70} />
-        <div className="unique-image__title">Your unique account image</div>
-        <div className="unique-image__body-text">
-          This image was programmatically generated for you by your new account number.
+      <div className="first-view-main-wrapper">
+        <div className="first-view-main">
+          <div className="unique-image">
+            <Identicon address={this.props.address} diameter={70} />
+            <div className="unique-image__title">Your unique account image</div>
+            <div className="unique-image__body-text">
+              This image was programmatically generated for you by your new account number.
+            </div>
+            <div className="unique-image__body-text">
+              You’ll see this image everytime you need to confirm a transaction.
+            </div>
+            <button
+              className="first-time-flow__button"
+              onClick={this.props.next}
+            >
+              Next
+            </button>
+            <Breadcrumbs total={3} currentIndex={1} />
+          </div>
         </div>
-        <div className="unique-image__body-text">
-          You’ll see this image everytime you need to confirm a transaction.
-        </div>
-        <button
-          className="first-time-flow__button"
-          onClick={this.props.next}
-        >
-          Next
-        </button>
-        <Breadcrumbs total={3} currentIndex={1} />
       </div>
     )
   }