diff --git a/client/coral-sign-in/components/CreateUsernameDialog.js b/client/coral-sign-in/components/CreateUsernameDialog.js index 457641089..a01137733 100644 --- a/client/coral-sign-in/components/CreateUsernameDialog.js +++ b/client/coral-sign-in/components/CreateUsernameDialog.js @@ -3,7 +3,10 @@ import TextField from 'coral-ui/components/TextField'; import Alert from './Alert'; import Button from 'coral-ui/components/Button'; import {Dialog} from 'coral-ui'; +import FakeComment from './FakeComment'; + import styles from './styles.css'; + import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../translations'; const lang = new I18n(translations); @@ -25,9 +28,14 @@ const CreateUsernameDialog = ({open, handleClose, offset, formData, handleSubmit
-

{lang.t('createdisplay.yourusername')}

-
Example
-

{lang.t('createdisplay.ifyoudontchangeyourname')}

+

{lang.t('createdisplay.yourusername')}

+ +

{lang.t('createdisplay.ifyoudontchangeyourname')}

{ props.auth.error && {props.auth.error} }
{ props.errors.username && {lang.t('createdisplay.specialCharacters')} } diff --git a/client/coral-sign-in/components/FakeComment.js b/client/coral-sign-in/components/FakeComment.js new file mode 100644 index 000000000..97afa59fa --- /dev/null +++ b/client/coral-sign-in/components/FakeComment.js @@ -0,0 +1,54 @@ +import React from 'react'; +import styles from 'coral-embed-stream/src/Comment.css'; + +import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton'; +import AuthorName from 'coral-plugin-author-name/AuthorName'; +import Content from 'coral-plugin-commentcontent/CommentContent'; +import PubDate from 'coral-plugin-pubdate/PubDate'; +import {ReplyButton} from 'coral-plugin-replies'; +import FlagComment from 'coral-plugin-flags/FlagComment'; +import LikeButton from 'coral-plugin-likes/LikeButton'; + +class FakeComment extends React.Component { + constructor (props) { + super(props); + } + + render () { + const {username, created_at, body} = this.props; + + return ( +
+
+ + + +
+ {return;}} + deleteAction={()=>{return;}} + showSignInDialog={()=>{return;}} + currentUser={{}} + /> + {}} + parentCommentId={'commentID'} + currentUserId={{}} + banned={false} + /> +
+
+ + +
+
+ ); + } +} + +export default FakeComment; diff --git a/client/coral-sign-in/components/styles.css b/client/coral-sign-in/components/styles.css index 77282d388..81afe75e5 100644 --- a/client/coral-sign-in/components/styles.css +++ b/client/coral-sign-in/components/styles.css @@ -159,6 +159,7 @@ input.error{ .ifyoudont { display: block; + margin-top: 15px; } .saveusername { @@ -178,3 +179,8 @@ input.error{ color: white; min-width: 200px; } + +.fakeComment { + display: block; + margin-bottom: 5px; +} diff --git a/client/coral-sign-in/translations.js b/client/coral-sign-in/translations.js index 4826f2f2c..5693939af 100644 --- a/client/coral-sign-in/translations.js +++ b/client/coral-sign-in/translations.js @@ -36,6 +36,8 @@ export default { username: 'Username', continue: 'Continue with the same Facebook username', save: 'Save', + fakecommentdate: '1 minute ago', + fakecommentbody: 'This is an example comment. Readers can share their thoughts and opinions with newsrooms in the comments section.', requiredField: 'Required field', errorCreate: 'Error when changing username', checkTheForm: 'Invalid Form. Please, check the fields', @@ -79,6 +81,8 @@ export default { username: 'Nombre', continue: 'Continuar con nombre de Facebook', save: 'Guardar', + fakecommentdate: 'hace un minuto', + fakecommentbody: 'Este es un comentario de ejemplo. Las lectoras pueden compartir sus ideas y opiniones con los periodistas en la sección de comentarios.', requiredField: 'Campo necesario', errorCreate: 'Hubo un error al cambiar el nombre de usuario', checkTheForm: 'Formulario Invalido. Por favor, verifica los campos',