form field error styling

riteshsangwan · riteshsangwan · commit e111cfb7da0f · 2016-12-23T15:37:58.000+05:30
diff --git a/src/routes/ResetPassword/components/ResetPasswordView.jsx b/src/routes/ResetPassword/components/ResetPasswordView.jsx
@@ -25,13 +25,13 @@ class ResetPasswordView extends Component {
         <form onSubmit={handleSubmit((data) => _self.onSubmit({...data, code: token}))}>
           <div styleName="row">
             <label htmlFor="email">Email:</label>
-            <FormField {...fields.email}>
+            <FormField {...fields.email} className="email-field">
               <TextField {...fields.email} label={'email'} />
             </FormField>
           </div>
           <div styleName="row">
             <label htmlFor="password">Password:</label>
-            <FormField {...fields.password}>
+            <FormField {...fields.password} className="password-field">
               <TextField {...fields.password} label={'New Password'} />
             </FormField>
           </div>
diff --git a/src/routes/ResetPassword/components/ResetPasswordView.scss b/src/routes/ResetPassword/components/ResetPasswordView.scss
@@ -10,6 +10,17 @@
     border-top: 1px solid #e7e8ea;
     padding-top: 25px;
   }
+  :global {
+    .form-field {
+      width: 100%;
+      &.error {
+        color: #ff3100;
+        > div:first-child {
+          border: 1px solid #ff3100;
+        }
+      }
+    }
+  }
 }
 .row {
   display: flex;
@@ -34,4 +45,4 @@
 }
 .actions {
   text-align: right;
-}
+}
