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

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,11 +233,15 @@ class BackupPhraseScreen extends Component {
     return this.props.isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
+        <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>
       )
   }
 }

mascara/src/app/first-time/import-seed-phrase-screen.js

@@ -79,6 +79,8 @@ class ImportSeedPhraseScreen extends Component {
     const { warning } = this.props
     const importDisabled = warning || !seedPhrase || !password || !confirmPassword
     return (
+      <div className="first-view-main-wrapper">
+        <div className="first-view-main">
           <div className="import-account">
             <a
               className="import-account__back-button"
@@ -121,7 +123,6 @@ class ImportSeedPhraseScreen extends Component {
             </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,
                 })}
@@ -144,6 +145,8 @@ class ImportSeedPhraseScreen extends Component {
               Import
             </button>
           </div>
+        </div>
+      </div>
     )
   }
 }

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;
+  flex-direction: row;
-  justify-content: center;
+  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;
+  margin: 60px 0 30px 0;
-  max-width: 35rem;
+  position: relative;
-}
-
-.create-password {
-  margin: 67px 0 50px;
 }
 
 .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,
-.import-account__back-button:hover {
   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 {

mascara/src/app/first-time/notice-screen.js

@@ -63,7 +63,10 @@ class NoticeScreen extends Component {
     return (
       isLoading
         ? <LoadingScreen />
-        : <div
+        : (
+          <div className="first-view-main-wrapper">
+            <div className="first-view-main">
+              <div
                 className="tou"
                 onScroll={this.onScroll}
               >
@@ -83,6 +86,9 @@ class NoticeScreen extends Component {
                 </button>
                 <Breadcrumbs total={3} currentIndex={2} />
               </div>
+            </div>
+          </div>
+        )
     )
   }
 }

mascara/src/app/first-time/unique-image-screen.js

@@ -12,6 +12,8 @@ class UniqueImageScreen extends Component {
 
   render () {
     return (
+      <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>
@@ -29,6 +31,8 @@ class UniqueImageScreen extends Component {
             </button>
             <Breadcrumbs total={3} currentIndex={1} />
           </div>
+        </div>
+      </div>
     )
   }
 }

ui/app/app.js

@@ -329,12 +329,14 @@ App.prototype.renderAppBar = function () {
         ]),
       ]),
 
-      !isInitialized && !isPopup && betaUI && h('h2', {
+      !isInitialized && !isPopup && betaUI && h('.alpha-warning__container', {}, [
+        h('h2', {
           className: classnames({
             'alpha-warning': welcomeScreenSeen,
             'alpha-warning-welcome-screen': !welcomeScreenSeen,
           }),
         }, 'Please be aware that this version is still under development'),
+      ]),
 
     ])
   )