diff --git a/app/soapbox/features/chats/components/chat_window.js b/app/soapbox/features/chats/components/chat_window.js index 016729255..b3a9dd45b 100644 --- a/app/soapbox/features/chats/components/chat_window.js +++ b/app/soapbox/features/chats/components/chat_window.js @@ -11,6 +11,7 @@ import { closeChat, toggleChat, fetchChatMessages, sendChatMessage } from 'soapb import { List as ImmutableList } from 'immutable'; const mapStateToProps = (state, { pane }) => ({ + me: state.get('me'), chatMessages: state.getIn(['chat_messages', pane.get('chat_id')], ImmutableList()).reverse(), }); @@ -24,6 +25,7 @@ class ChatWindow extends ImmutablePureComponent { pane: ImmutablePropTypes.map.isRequired, idx: PropTypes.number, chatMessages: ImmutablePropTypes.list, + me: PropTypes.node, } static defaultProps = { @@ -98,7 +100,7 @@ class ChatWindow extends ImmutablePureComponent { } render() { - const { pane, idx, chatMessages } = this.props; + const { pane, idx, chatMessages, me } = this.props; const chat = pane.get('chat'); const account = pane.getIn(['chat', 'account']); if (!chat || !account) return null; @@ -119,7 +121,7 @@ class ChatWindow extends ImmutablePureComponent {
{chatMessages.map(chatMessage => ( -
+
{chatMessage.get('content')} diff --git a/app/styles/chats.scss b/app/styles/chats.scss index 6ce047d3a..0ca597a1f 100644 --- a/app/styles/chats.scss +++ b/app/styles/chats.scss @@ -1,5 +1,5 @@ .pane { - @include standard-panel-shadow; + box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3); position: fixed; bottom: 0; right: 20px; @@ -101,6 +101,7 @@ .chat-message { margin: 14px 10px; + display: flex; &__bubble { padding: 4px 10px; @@ -108,4 +109,9 @@ border-radius: 10px; background-color: var(--background-color); } + + &--me .chat-message__bubble { + margin-left: auto; + background-color: hsla(var(--brand-color_hsl), 0.2); + } }