Add error message when passwords don't match in first time flow. Change input field styling in first time flow

2 files changed, 54 insertions, 48 deletions

diff --git a/ui/app/components/text-field/text-field.component.js b/ui/app/components/text-field/text-field.component.js
index 4a02f76d8..6fd3b82b4 100644
--- a/ui/app/components/text-field/text-field.component.js
+++ b/ui/app/components/text-field/text-field.component.js
@@ -8,6 +8,9 @@ const styles = {
     '&$cssFocused': {
       color: '#aeaeae',
     },
+    '&$cssError': {
+      color: '#aeaeae',
+    },
     fontWeight: '400',
     color: '#aeaeae',
   },
@@ -17,6 +20,7 @@ const styles = {
       backgroundColor: '#f7861c',
     },
   },
+  cssError: {},
 }
 
 const TextField = props => {
@@ -30,6 +34,7 @@ const TextField = props => {
         FormLabelClasses: {
           root: classes.cssLabel,
           focused: classes.cssFocused,
+          error: classes.cssError,
         },
       }}
       InputProps={{
diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss
index bfd174ad9..af1d67398 100644
--- a/ui/app/css/itcss/components/welcome-screen.scss
+++ b/ui/app/css/itcss/components/welcome-screen.scss
@@ -1,59 +1,60 @@
 .welcome-screen {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  font-family: Roboto;
+  font-weight: 400;
+  width: 100%;
+  flex: 1 0 auto;
+  padding: 70px 0;
+  background: $white;
+
+  @media screen and (max-width: 575px) {
+    padding: 0;
+  }
+
+  &__info {
     display: flex;
     flex-flow: column;
-    justify-content: center;
-    align-items: center;
-    font-family: Roboto;
-    font-weight: 400;
     width: 100%;
-    flex: 1 0 auto;
-    padding: 70px 0;
-    background: $white;
-
-    @media screen and (max-width: 575px) {
-      padding: 0;
-    }
-
-    &__info {
-        display: flex;
-        flex-flow: column;
-        width: 100%;
-        height: 100%;
-        align-items: center;
-
-        &__header {
-            font-size: 1.65em;
-            margin-bottom: 14px;
-
-            @media screen and (max-width: 575px) {
-              font-size: 1.5em;
-            }
-        }
+    height: 100%;
+    align-items: center;
+    justify-content: center;
 
-        &__copy {
-            font-size: 1em;
-            width: 400px;
-            max-width: 90vw;
-            text-align: center;
+    &__header {
+      font-size: 1.65em;
+      margin-bottom: 14px;
 
-            @media screen and (max-width: 575px) {
-              font-size: 0.9em;
-            }
-        }
+      @media screen and (max-width: 575px) {
+        font-size: 1.5em;
+      }
     }
 
-    &__button {
-      height: 54px;
-      width: 198px;
-      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14);
-      color: #FFFFFF;
-      font-size: 20px;
-      font-weight: 500;
-      line-height: 26px;
+    &__copy {
+      font-size: 1em;
+      width: 400px;
+      max-width: 90vw;
       text-align: center;
-      text-transform: uppercase;
-      margin: 35px 0 14px;
-      transition: 200ms ease-in-out;
-      background-color: rgba(247, 134, 28, 0.9);
+
+      @media screen and (max-width: 575px) {
+        font-size: .9em;
+      }
     }
+  }
+
+  &__button {
+    height: 54px;
+    width: 198px;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14);
+    color: #fff;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 26px;
+    text-align: center;
+    text-transform: uppercase;
+    margin: 35px 0 14px;
+    transition: 200ms ease-in-out;
+    background-color: rgba(247, 134, 28, .9);
+  }
 }