Make new-ui create password screen responsive.

mascara/src/app/first-time/create-password-screen.js

@@ -60,7 +60,7 @@ class CreatePasswordScreen extends Component {
       : (
         <div>
           <div className="first-view-main">
-            <div className="mascara-info">
+            <div className="mascara-info first-view-phone-invisible">
               <Mascot
                 animationEventEmitter={this.animationEventEmitter}
                 width="225"

mascara/src/app/first-time/index.css

@@ -21,6 +21,24 @@
   justify-content: space-between;
 }
 
+@media screen and (min-width: 576px) {
+  .first-view-main {
+    width: 85vw;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .first-view-main {
+    width: 80vw;
+  }
+}
+
+@media screen and (min-width: 1281px) {
+  .first-view-main {
+    width: 62vw;
+  }
+}
+
 .mascara-info {
   display: flex;
   flex-flow: column;
@@ -81,6 +99,44 @@
     width: initial !important;
   }
 
+  .alpha-warning {
+    line-height: 1em;
+    padding: 8px 12px;
+  }
+
+  .first-view-main {
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    margin-top: 12px;
+  }
+
+  .first-view-main .create-password {
+    margin-top: 0px;
+  }
+
+  .mascara-info {
+    margin-top: 0px;
+    width: 100%;
+    align-items: center;
+  }
+
+  .mascara-info .info {
+    text-align: center;
+    font-size: 16px;
+    margin: 0 10px;
+    padding-left: 0px;
+  }
+
+  .mascara-info :first-child {
+    align-self: center;
+  }
+
+  .first-view-phone-invisible {
+    display: none;
+  }
+
   .first-time-flow__input {
     width: initial !important;
     font-size: 14px !important;

ui/app/css/itcss/components/newui-sections.scss

@@ -290,27 +290,3 @@ $wallet-view-bg: $alabaster;
 .token-balance__amount {
   padding-right: 6px;
 }
-
-
-// first time
-.first-view-main {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: space-between;
-
-  @media screen and (max-width: 575px) {
-    height: 100%;
-  }
-
-  @media screen and (min-width: 576px) {
-    width: 85vw;
-  }
-
-  @media screen and (min-width: 769px) {
-    width: 80vw;
-  }
-
-  @media screen and (min-width: 1281px) {
-    width: 62vw;
-  }
-}