From 70f33d47472863e3fce41eff60c1fe078efef7de Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 12 Mar 2018 20:17:44 -0230
Subject: Left align create password.

---
 mascara/src/app/first-time/create-password-screen.js |  2 +-
 mascara/src/app/first-time/index.css                 | 18 +++++++++---------
 ui/app/css/itcss/components/welcome-screen.scss      | 12 ++++++++++++
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 37294b9b5..192da3399 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -60,7 +60,7 @@ class CreatePasswordScreen extends Component {
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
-        <div>
+        <div className={classnames({ 'first-view-main-wrapper': !isMascara })}>
           <div className={classnames({
             'first-view-main': !isMascara,
             'first-view-main__mascara': isMascara,
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 9cc9faeb3..b49dd9d45 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -21,6 +21,12 @@
   text-align: center;
 }
 
+.first-view-main-wrapper {
+  display: flex;
+  width: 100%;
+  padding-left: 10vw;
+}
+
 .first-view-main,
 .first-view-main__mascara {
   display: flex;
@@ -32,15 +38,9 @@
   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 (max-width: 575px) {
+  .first-view-main-wrapper {
+    padding: 0;
   }
 }
 
diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss
index 86fc7d04d..bfd174ad9 100644
--- a/ui/app/css/itcss/components/welcome-screen.scss
+++ b/ui/app/css/itcss/components/welcome-screen.scss
@@ -10,6 +10,10 @@
     padding: 70px 0;
     background: $white;
 
+    @media screen and (max-width: 575px) {
+      padding: 0;
+    }
+
     &__info {
         display: flex;
         flex-flow: column;
@@ -20,6 +24,10 @@
         &__header {
             font-size: 1.65em;
             margin-bottom: 14px;
+
+            @media screen and (max-width: 575px) {
+              font-size: 1.5em;
+            }
         }
 
         &__copy {
@@ -27,6 +35,10 @@
             width: 400px;
             max-width: 90vw;
             text-align: center;
+
+            @media screen and (max-width: 575px) {
+              font-size: 0.9em;
+            }
         }
     }
 
-- 
cgit v1.2.3