CSS, translations and code for new create username dialog.

client/coral-sign-in/components/CreateUsernameDialog.js

@@ -10,7 +10,7 @@ const lang = new I18n(translations);
 
 const CreateUsernameDialog = ({open, handleClose, offset, formData, handleSubmitUsername, handleChange, ...props}) => (
   <Dialog
-    className={styles.dialog}
+    className={styles.dialogusername}
     id="createUsernameDialog"
     open={open}
     style={{
@@ -25,20 +25,23 @@ const CreateUsernameDialog = ({open, handleClose, offset, formData, handleSubmit
         </h1>
       </div>
       <div>
-        <label htmlFor="username">{lang.t('createdisplay.yourusername')}</label>
+        <p class={styles.yourusername}>{lang.t('createdisplay.yourusername')}</p>
+        <div class="styles.example">Example</div>
+        <p class={styles.ifyoudont}>{lang.t('createdisplay.ifyoudontchangeyourname')}</p>
         { props.auth.error && <Alert>{props.auth.error}</Alert> }
         <form id="saveUsername" onSubmit={handleSubmitUsername}>
-          <TextField
-            id="username"
-            type="string"
-            label={lang.t('createdisplay.username')}
-            value={formData.username}
-            onChange={handleChange}
-          />
-        { props.errors.username && <span className={styles.hint}> {lang.t('createdisplay.specialCharacters')} </span> }
-          <div className={styles.action}>
+          { props.errors.username && <span className={styles.hint}> {lang.t('createdisplay.specialCharacters')} </span> }
+          <div className={styles.saveusername}>
+            <TextField
+              id="username"
+              type="string"
+              label={lang.t('createdisplay.username')}
+              value={formData.username}
+              onChange={handleChange}
+            />
             <Button id="save" type="submit" className={styles.saveButton}>{lang.t('createdisplay.save')}</Button>
           </div>
+          <Button className={styles.continuebutton} onClick={handleClose}>{lang.t('createdisplay.continue')}</Button>
       </form>
       </div>
     </div>

client/coral-sign-in/components/styles.css

@@ -117,7 +117,7 @@ input.error{
 }
 
 .action {
-    margin-top: 15px;
+    margin-top: 0px;
 }
 
 .passwordRequestSuccess {
@@ -140,6 +140,41 @@ input.error{
     display: block;
 }
 
-.confirmSubmit {
+/* Change username Dialog*/
 
+.dialogusername {
+  border: none;
+  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
+  width: 400px;
+  top: 10px;
+}
+
+.yourusername {
+  display: block;
+}
+
+.example {
+  display: block;
+}
+
+.ifyoudont {
+  display: block;
+}
+
+.saveusername {
+  display: block;
+  width: 100%;
+}
+
+.savebutton {
+  display: inline;
+  background-color: rgb(105,105,105);
+  color: white;
+}
+
+.continuebutton {
+  background-color: black;
+  font-weight: bold;
+  color: white;
+  min-width: 200px;
 }

client/coral-sign-in/translations.js

@@ -30,9 +30,11 @@ export default {
       checkTheForm: 'Invalid Form. Please, check the fields'
     },
     'createdisplay': {
-      writeyourusername: 'Write your username',
-      yourusername: 'Your username is publicly visible on all comments you post. A username is needed before you can post your first comment.',
+      writeyourusername: 'Edit your username',
+      yourusername: 'Your username appears on every comment you post.',
+      ifyoudontchangeyourname: 'If you don\'t change your username at this step, your Facebook display name will appear alongside of all your comments.',
       username: 'Username',
+      continue: 'Continue with the same Facebook username',
       save: 'Save',
       requiredField: 'Required field',
       errorCreate: 'Error when changing username',
@@ -71,9 +73,11 @@ export default {
       checkTheForm: 'Formulario Inválido. Por favor, completa los campos'
     },
     'createdisplay': {
-      writeyourusername: 'Escribe tu nombre',
-      yourusername: 'Tu nombre es visible publicamente en todos los comentarios que publiques. Es necesario tener un nombre de usuario antes de poder publicar tu primer comentario.',
-      username: 'Nombre a mostrar',
+      writeyourusername: 'Edita tu nombre',
+      yourusername: 'Tu nombre aparece en cada comentario que publiques.',
+      ifyoudontchangeyourname: 'Si no modificas tu nombre de usuario en este paso, tu nombre de Facebook aparecera al lado de cada comentario que publiques.',
+      username: 'Nombre',
+      continue: 'Continuar con nombre de Facebook',
       save: 'Guardar',
       requiredField: 'Campo necesario',
       errorCreate: 'Hubo un error al cambiar el nombre de usuario',