diff --git a/src/components/Messages/Messages.css b/src/components/Messages/Messages.css index c7958c17..da0193b0 100644 --- a/src/components/Messages/Messages.css +++ b/src/components/Messages/Messages.css @@ -26,7 +26,6 @@ .ownMessage { /* Preserve newlines, but collapse other whitespace */ white-space: pre-line; - width: 100%; max-width: 433px; } @@ -48,10 +47,15 @@ } } +.ownMessageContentWrapper { + @apply --clearfix; +} + .messageContent, .ownMessageContent { @apply --marketplaceMessageFontStyles; + display: inline-block; margin: 0; padding: 12px 14px 11px 14px; border-radius: 8px; @@ -70,11 +74,13 @@ .ownMessageContent { background-color: var(--marketplaceColor); color: var(--matterColorLight); + float: right; } .messageDate, .ownMessageDate { @apply --marketplaceMessageDateFontStyles; + margin: 11px 0 0 0; color: var(--matterColorAnti); diff --git a/src/components/Messages/Messages.example.js b/src/components/Messages/Messages.example.js index f16ad482..2a27b956 100644 --- a/src/components/Messages/Messages.example.js +++ b/src/components/Messages/Messages.example.js @@ -39,7 +39,9 @@ export const WithCurrentUser = { messages: [ createMessage('msg1', {}, { sender: createUser('user1') }), createMessage('msg2', {}, { sender: createUser('user2') }), - createMessage('msg3', {}, { sender: createUser('user1') }), + createMessage('msg3', { content: 'ok' }, { sender: createUser('user2') }), + createMessage('msg4', { content: 'ok' }, { sender: createUser('user1') }), + createMessage('msg5', {}, { sender: createUser('user1') }), ], currentUser: createCurrentUser('user2'), }, diff --git a/src/components/Messages/Messages.js b/src/components/Messages/Messages.js index a5f19d2b..5a2abab2 100644 --- a/src/components/Messages/Messages.js +++ b/src/components/Messages/Messages.js @@ -33,7 +33,9 @@ const OwnMessage = props => { const todayString = intl.formatMessage({ id: 'Messages.today' }); return (
-

{message.attributes.content}

+
+

{message.attributes.content}

+

{formatDate(intl, todayString, message.attributes.at)}

); diff --git a/src/components/Messages/__snapshots__/Messages.test.js.snap b/src/components/Messages/__snapshots__/Messages.test.js.snap index 05ef3aac..5d20836e 100644 --- a/src/components/Messages/__snapshots__/Messages.test.js.snap +++ b/src/components/Messages/__snapshots__/Messages.test.js.snap @@ -47,13 +47,17 @@ exports[`Messages matches snapshot 1`] = `
-

- Message msg2 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -

+

+ Message msg2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+