fix: addressed issues with create flow (#2458)

plugins/talk-plugin-local-auth/client/components/AddEmailAddress/AddEmailForm.css

@@ -36,17 +36,32 @@
 }
 
 .button {
-  color: #787D80;
+  background-color: #3498db;
   border-radius: 2px;
-  background-color: transparent;
-  height: 30px;
-  font-size: 0.9em;
-  width: 100%;
-  display: inline-block;
-  text-align: center;
-  font-size: 1em;
-  background-color: #3498DB;
+  border: 0;
   color: white;
+  display: inline-block;
+  font-size: 1em;
+  height: 30px;
+  text-align: center;
+  width: 100%;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.cancel {
+  background-color: #e0e0e0;
+  border-radius: 2px;
+  border: 0;
+  color: #4f5c67;
+  display: inline-block;
+  font-size: 1em;
+  height: 30px;
+  margin-top: 5px;
+  text-align: center;
+  width: 100%;
 
   &:hover {
     cursor: pointer;

plugins/talk-plugin-local-auth/client/components/AddEmailAddress/AddEmailForm.js

@@ -14,10 +14,10 @@ import {
 } from 'coral-framework/lib/validation';
 import { Form, Field } from 'react-final-form';
 
-const AddEmailContent = ({ onSubmit }) => (
+const AddEmailContent = ({ onSubmit, onCancel }) => (
   <div>
     <h4 className={styles.title}>
-      {t('talk-plugin-local-auth.add_email.content.title')}
+      {t('talk-plugin-local-auth.add_email.title')}
     </h4>
     <p className={styles.description}>
       {t('talk-plugin-local-auth.add_email.content.description')}
@@ -113,6 +113,14 @@ const AddEmailContent = ({ onSubmit }) => (
             <button className={styles.button} disabled={submitting}>
               {t('talk-plugin-local-auth.add_email.add_email_address')}
             </button>
+            <button
+              onClick={onCancel}
+              className={styles.cancel}
+              disabled={submitting}
+              type="button"
+            >
+              {t('talk-plugin-local-auth.add_email.cancel')}
+            </button>
           </div>
         </form>
       )}
@@ -122,6 +130,7 @@ const AddEmailContent = ({ onSubmit }) => (
 
 AddEmailContent.propTypes = {
   onSubmit: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
 };
 
 export default AddEmailContent;